VueのUIフレームワークを試してみた

by SoichiroKatsuki

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

DEMO

Slide 14

Slide 14 text

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