Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

B535c947f6a7fdd35fbf3f68fff533d0?s=47 SoichiroKatsuki
January 30, 2019
510

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

Vue Night in Fukuoka #2の登壇資料です。
・Vuetifyのサンプル
https://codepen.io/zuckey_/pen/YBWwOe
・BootstrapVueのサンプル
https://codepen.io/zuckey_/pen/JxboaG

B535c947f6a7fdd35fbf3f68fff533d0?s=128

SoichiroKatsuki

January 30, 2019
Tweet

Transcript

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

  2. ࣗݾ঺հ ɾ໊લ: Ճ݄ फҰ࿠ɹ ɹɹ ˏZuckey_ ɾॴଐ: גࣜձࣾJετϦʔϜ ɾझຯ: ϩʔυόΠΫɹےτϨ

    ɾಲࠎϥʔϝϯ͕େ޷͖
  3. ೑೑͏ͲΜ΋͍͍͚Ͳ തଟҰ૒΋͍͍ͧʂ

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

  5. None
  6. ࠓճࢼͨ͠UIϑϨʔϜϫʔΫ • Vuetify • BootstrapVue

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

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

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

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

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

  12. BootstrapVue https://bootstrap-vue.js.org/docs/reference/spacing-classes/ ΑΓҾ༻ • ΫϥεΛ͚ͭͯpadingͱmarginΛௐ੔Ͱ͖Δ {m or p}{޲͖}-{େ͖͞} ·ͨ{m or

    p}{޲͖}-{άϦουࢦఆͷछྨ}-{େ͖͞}ͷܗࣜ
  13. DEMO

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