Vue.jsͷUIϑϨʔϜ ϫʔΫΛࢼͯ͠Έͨ Vue Night in Fukuoka #2 2019/01/30 Ճ݄ फҰ࿠ 

ࣗݾ঺հ ɾ໊લ: Ճ݄ फҰ࿠ɹ ɹɹ ˏZuckey_ ɾॴଐ: גࣜձࣾJετϦʔϜ ɾझຯ: ϩʔυόΠΫɹےτϨ ɾಲࠎϥʔϝϯ͕େ޷͖ 

೑೑͏ͲΜ΋͍͍͚Ͳ തଟҰ૒΋͍͍ͧʂ 

UIϑϨʔϜϫʔΫ͕ ৭ʑ͋ͬͯ೰Ήɾɾɾ 

No content

ࠓճࢼͨ͠UIϑϨʔϜϫʔΫ • Vuetify • BootstrapVue 

Vuetify • ϚςϦΞϧσβΠϯͳUIϑϨʔϜϫʔΫ • ϨεϙϯγϒରԠ • ίϯϙʔωϯτͷछྨ͸ଟΊ • Ϋϥε΍ଐੑͰݟͨ໨ׂ͕ͱࡉ͔͘ௐ੔Ͱ͖Δ • DatePicker΍TimePicker΋͋Δ 

Vuetify • άϦουϨΠΞ΢τͷ෯͸αΠζʹ߹Θͤͯɹ ̑ஈ֊ͰࢦఆՄೳ https://vuetifyjs.com/ja/framework/display ΑΓҾ༻ 

Vuetify • ΫϥεΛ͚ͭͯpadingͱmarginΛௐ੔Ͱ͖Δ https://vuetifyjs.com/ja/framework/spacing ΑΓҾ༻  {m or p}{Ͳͷ޲͖ʹ͚ͭΔ͔}-{େ͖͞} ͷܗࣜ 

BootstrapVue • Bootstrap4 ϕʔεͷUIϑϨʔϜϫʔΫ • ϨεϙϯγϒରԠ • ίϯϙʔωϯτͷछྨ͸Vuetifyͱൺֱ͢Δͱ ΍΍গͳΊ 

BootstrapVue https://bootstrap-vue.js.org/docs/components/layout ΑΓҾ༻ • άϦουϨΠΞ΢τͷ෯͸αΠζʹ߹Θͤͯɹ ̑ஈ֊ͰࢦఆՄೳ(VuetifyΑΓগ͠෯͕ڱ໨) 

BootstrapVue https://bootstrap-vue.js.org/docs/reference/spacing-classes/ ΑΓҾ༻ • ΫϥεΛ͚ͭͯpadingͱmarginΛௐ੔Ͱ͖Δ {m or p}{޲͖}-{େ͖͞} ·ͨ{m or p}{޲͖}-{άϦουࢦఆͷछྨ}-{େ͖͞}ͷܗࣜ 

DEMO 

·ͱΊ • UIϑϨʔϜϫʔΫ͸खܰʹ࢖͑ͯศར • ඞཁͳίϯϙʔωϯτͷ༗ແ΍ݟͨ໨ͷ޷Έ ͳͲʹԠͯܰ͘͡ࢼ͔ͯ͠ΒબͿͱΑ͛͞ • ܰ͘ࢼ͢ͱ͖͸CodePenศར