Pro Yearly is on sale from $80 to $50! »

5 Points Of Customizing Vuetify

070fe3c99a6af95b11cce4770ab772c1?s=47 arm4
December 17, 2019

5 Points Of Customizing Vuetify

070fe3c99a6af95b11cce4770ab772c1?s=128

arm4

December 17, 2019
Tweet

Transcript

  1. 7VFUJGZΛపఈతʹΧελϚΠζ͠ ࣗࡏͳ6*Λ࡞Γ্͛Δ ͭͷϙΠϯτ 2019.12.17 Yoko Hato @plumsa

  2. ࣗݾ঺հ גࣜձࣾϓϥϜβ 13*.&03%&3ࣄۀ෦ $50ࣄۀاըϦʔμʔ ോ༸ࢠ ௨শɿϥϥɾϕϧࢠ ໊͋ͩɿ՝୊ղܾ͓࢞͞Μ ೔ৗܥެࣜ5XJUUFSΛ΍͍ͬͯ·͢ɻ ՋͭͿ͍ͨ࣌͠ʹϑΥϩʔ͍ͯͩ͘͠͞ɻ ΑΖ͓͘͠ئ͍͠·͢ɻ

    @plumsa
  3. 13*.&03%&3ͷએ఻ 13*.&03%&3͸ ৽͍͠Χλνͷडୗ։ൃαʔϏε IUUQTQSJNFPSEFSKQ ࢲ͕ͨͪಘҙͱ͢ΔγεςϜ͸ɺ Ϗδωε՝୊ʹ௚໘͍ͯ͠Δ͓٬༷ͷղܾࡦͱͳΔ ׬શΦʔμʔϝΠυͷۀ຿γεςϜͰ͢ɻ

  4. ษڧձͷએ఻ 13*.&03%&3Ͱ͸ ִिͰٕज़ษڧձΛ։ ࠵͍ͯ͠·͢ɻ ςʔϚ͋Γͷ ࢀՃऀશһͰखΛಈ͔ ͠ͳ͕Βਐߦ͢ΔϞϒ ϓϩͷΑ͏ͳײ͡Ͱ ͢ɻ ࢒ΓΘ͔ͣʂ

    ઌண໊༷ʂʂ ͷ֬཰Ͱλίύʂ 13*.&5&$)5"-,Ͱݕࡧ IUUQTQMVNTBDPOOQBTTDPNFWFOU
  5. 7VFUJGZΛపఈతʹΧελϚΠζ͢Δ ͭͷϙΠϯτ  ίϯϙʔωϯτͷϓϩύςΟͷ࢓༷Λ
 ׬શʹཧղ͢Δ  είʔϓ෇͖εϩοτ 4DPQFE4MPU Λ
 ׬શʹཧղ͢Δ

     ίϯϙʔωϯτͷΧελϜΠϕϯτΛ
 ׬શʹཧղ͢Δ  TZODम০ࢠͱVQEBUFΛ׬શʹཧղ͢Δ  WNPEFMΛ׬શʹཧղ͢Δ
  6. Point. 1 ίϯϙʔωϯτͷϓϩύςΟ ͷ࢓༷Λ׬શʹཧղ͢Δ

  7. ίϯϙʔωϯτͷϓϩύςΟ QSPQT ʹ͸ܕͱσϑΥϧτ஋͕ઃఆͰ͖Δ w ࢦఆ͞ΕͨܕͰ͸ͳ͍஋ΛϓϩύςΟͰ౉͢ͱΤϥʔʹͳΔɻ EJTBCMFElจࣈͩΑzCPPMFBOʹจࣈྻΛ౉͍ͯ͠ΔͷͰΤϥʔ w WCJOEͰ౉͞ͳ͍৔߹ɺશͯ͸จࣈྻͱͯ͠౉͞ΕΔɻ
 EJTBCMFElGBMTFzlGBMTFzͱ͍͏ͨͩͷจࣈྻͷͨΊUSVFͱ൑ఆ͞ΕΔ্ʹΤϥʔ w

    ϓϩύςΟͷܕ͕CPPMFBOͷ৔߹ɺ஋ͳ͠Ͱهड़͢Δͱ஋USVFͱͳ ΔɻEJTBCMFEEJTBCMFElUSVFz͜͏ॻ͘ͷͱಉ͡ w σϑΥϧτ஋͕͋ΓϓϩύςΟ͕౉͞Εͳ͍৔߹ɺ
 σϑΥϧτ஋Ͱίϯϙʔωϯτ͸ઃఆ͞ΕΔɻ
 υΩϡϝϯτʹهࡌ͞Ε͍ͯΔσϑΥϧτ஋ʹͳΔ w ม਺ͰσʔλΛ౉͢Α͏ͳಈతͳ஋Λ౉͢ࡍ͸ɺ
 ඞͣWCJOEΛ࢖༻͢Δɻ
 EJTBCMFElJT)PHFzWCJOE͠ͳ͍ͱzJT)PHFzͱ͍͏ͨͩͷจࣈྻʹͳΔ ҎԼͷ࢓༷͸جຊతʹॏཁʂ
  8. 7VFUJGZυΩϡϝϯτ ϓϩύςΟνΣοΫϙΠϯτ

  9. ίϯϙʔωϯτͷϧʔτཁૉʹ͸ ࢖༻࣌ʹଐੑ DMBTT TUZMFͳͲ ͕ઃఆͰ͖Δ w ίϯϙʔωϯτͷϓϩύςΟͱͯ͠ఆٛ͞Ε͍ͯͳ͍ଐੑΛهड़ͨ͠৔ ߹ɺϧʔτཁૉͷଐੑͱͯ͠௥Ճ͞ΕΔɻ
 ྫʣϧʔτཁૉ͕EJWͰυΩϡϝϯτʹهࡌͷͳ͍UBCJOEFYΛ௥Ճ͢Δ w

    ΋͠ϧʔτཁૉʹಉ͡ଐੑ͕ఆٛ͞Ε͍ͯΔ৔߹ɺίϯϙʔωϯτ࢖༻࣌ ʹఆٛͨ͠΋ͷͰ্ॻ͖͞Εͯ͠·͏ɻ
 ྫʣWCUOͷUZQFlCVUUPOz͸UZQFlTVCNJUzʹͰ͖Δ w DMBTTͱTUZMF͸ಛผͰɺίϯϙʔωϯτ࢖༻࣌ʹఆٛͨ͠஋͕ϧʔτཁૉ ͷ஋ͱϚʔδ͞ΕΔɻ
 ίϯϙʔωϯτར༻࣌ʹDMBTT΍TUZMFΛϧʔτͷEJWͳͲʹ౰ͯΔ͜ͱ͕Ͱ͖Δɻ w WDPNCPCPYͷΑ͏ͳJOQVUܥίϯϙʔωϯτͰ͸ɺଐੑ͕௥Ճ͞ΕΔͷ͸ ϧʔτཁૉͰ͸ͳ͘JOQVUཁૉͰ͋Δ৔߹͕͋Δɻৄ͘͠͸BUUSTͱ JOIFSJU"UUSTͰݕࡧɻWDPNCPCPYίϯϙʔωϯτʹDMBTTΛॻ͘ͱJOQVUཁૉʹ෇༩͞ΕΔɻ ҎԼͷ࢓༷ͷཧղ͸ΧελϚΠζ࣌ʹॏཁʂ
  10. Point. 2 είʔϓ෇͖εϩοτ 4DPQFE4MPU Λ
 ׬શʹཧղ͢Δ

  11. εϩοτΛ࢖͏ͱ ίϯϙʔωϯτͷதͷίϯςϯπΛ ࢖༻࣌ʹ޷͖ͳ΋ͷʹஔ͖׵͑Δ͜ͱ͕Ͱ͖Δ ΧελϚΠζʹ͸εϩοτ͕௒ॏཁʂ εϩοτͷ࢓༷ͷதͰ΋ ίϯϙʔωϯτͷதͷσʔλΛ ར༻࣌ʢεϩοτίϯςϯπʣʹड͚౉ͤΔ είʔϓ෇͖εϩοτ 4DPQFE4MPU ͸

    ࢓༷Λཧղ͍ͯ͠ͳ͍ͱ্ख͘࢖͍͜ͳͤͳ͍ɻ υΩϡϝϯτͷݟຊίʔυͰ͸ &4ͷΦϒδΣΫτͷ෼ׂ୅ೖ͕ଟ༻͞Ε͍ͯΔͷͰ &4ͷ࢓༷΋͔ͬ͠Γ಄ʹೖΕ͓ͯ͘͜ͱ͕ॏཁɻ IUUQTEFWFMPQFSNP[JMMBPSHKBEPDT8FC+BWB4DSJQU3FGFSFODF0QFSBUPST %FTUSVDUVSJOH@BTTJHONFOU0CKFDU@EFTUSVDUVSJOH
  12. 7VFUJGZυΩϡϝϯτ εϩοτνΣοΫϙΠϯτ

  13. ɹεϩοτΛ׬શʹཧղ͢ΔͨΊͷ ͓͢͢ΊεϥΠυ঺հ IUUQTTQFBLFSEFDLDPNGSPNBSNBCPVUBCTUSBDUDPNQPOFOU EFTJHOVTJOHTMPUTPGWVFEPUKT ஫໨

  14. Point. 3 ίϯϙʔωϯτͷ ΧελϜΠϕϯτΛ
 ׬શʹཧղ͢Δ

  15. ίϯϙʔωϯτͰ@inputͷΑ͏ʹॻ͘΋ͷ͸ɺ IUNMཁૉͰϦοεϯͰ͖ΔΑ͏ͳ ωΠςΟϒͷΠϕϯτͰ͸ͳ͘ΧελϜΠϕϯτ FNJU bJOQVU` ͱͯ͠ίϯϙʔωϯτ࡞ऀ͕ΠϕϯτΛൃՐ ͤ͞޷͖ͳ஋Λૹ͍ͬͯΔ͚ͩɻ ΧελϜΠϕϯτͱωΠςΟϒΠϕϯτ͸ผ෺ FUBSHFUWBMVFͷΑ͏ʹॻ͍ͯ΋஋͸औಘͰ͖ͳ͍ɻ FUBSHFUWBMVFͷΑ͏ʹॻ͚Δ΋ͷ͸ɺίϯϙʔωϯτ࡞ऀ

    ͕ωΠςΟϒΠϕϯτͷΦϒδΣΫτΛ ΧελϜΠϕϯτͰ౉͍ͯ͠Δɺ ΋͘͠͸ɺMJTUFOFSTϓϩύςΟΛ࢖ͬͯίϯϙʔωϯτ શͯͷΠϕϯτϦεφΛɺಛఆͷࢠཁૉʹඥ͚͍ͮͯΔɻ ྫʣWCUO͸υΩϡϝϯτͰ&WFOUλϒ͕ͳ͍͕DMJDLΠϕϯτͳͲͷ ωΠςΟϒΠϕϯτ͕ϦοεϯͰ͖Δɻ
  16. 7VFUJGZυΩϡϝϯτ ΧελϜΠϕϯτνΣοΫϙΠϯτ

  17. Point. 4 TZODम০ࢠͱVQEBUFΛ ׬શʹཧղ͢Δ

  18. TZODम০ࢠͱ͸ ಛఆͷϓϩύςΟʹ͓͍ͯٙࣅతʹ ૒ํ޲όΠϯσΟϯάΛ࣮ݱͤ͞ΔͨΊʹ࢖͏म০ࢠ ʹΘͱΓ͕ઌ͔ཛ͕ઌ͔ͷΑ͏ͳ୯ํ޲αΠΫϧΛ࡞Γɺ ٖࣅతʹɺ͔͋ͨ΋σʔλ͕ίϯϙʔωϯτ಺֎Ͱಉظ͍ͯ͠Δ͔ͷ Α͏ʹৼΔ෣ΘͤΔίϯϙʔωϯτઃܭςΫχοΫ ίϯϙʔωϯτར༻࣌ ίϯϙʔωϯτ಺Ͱ͸͜͏ॻ͔Ε͍ͯΔ

  19. 7VFUJGZυΩϡϝϯτ TZODVQEBUFΠϕϯτνΣοΫϙΠϯτ

  20. TZOD஫ҙ఺ TZODΛ෇͚ͨ৔߹ TFBSDIJOQVUTZODlTFBSDI bʂ`z ͷΑ͏ʹࣜʹ͢Δ͜ͱ͸Ͱ͖ͳ͍ͨΊ஫ҙ ࣜʹ͍ͨ͠৔߹͸ !VQEBUFTFBSDIJOQVUΛ࢖͏ɻ

  21. Point. 5 WNPEFMΛ׬શʹཧղ͢Δ

  22. WNPEFMͱ͸ JOQVUཁૉʹ͓͍ͯٙࣅతʹ ૒ํ޲όΠϯσΟϯάΛ࣮ݱͤ͞ΔͨΊʹ࢖͏σΟϨΫςΟϒ JOQVUཁૉɺUFYUBSFBཁૉɺTFMFDUཁૉͰ࢖༻͢Δ͜ͱ͕Ͱ͖ɺ ό΢ϯυϓϩύςΟͱΠϕϯτ͸ҎԼͷ૊Έ߹ΘͤͰ͢ɻ JOQVUཁૉɺUFYUBSFBཁૉɹɹɹɿWBMVFɺJOQVUΠϕϯτɹɹɹ νΣοΫϘοΫεͱϥδΦϘλϯɿDIFDLFEɺDIBOHFΠϕϯτ TFMFDUཁૉɹɹɹɹɹɹɹɹɹɿWBMVFɺDIBOHFΠϕϯτ ͜Ε͸ɺ7VFUJGZͰ͸ͳ͘ɺ7VFͷ࢓༷ɻ JOQVUཁૉͷωΠςΟϒJOQVU

    Πϕϯτ͕ൃՐͨ͠Βɺ஋Λ EPDUJUMFʹ֨ೲ͢Δɻ 
 Ͳ͔͜ͰEPDUJUMF͕ॻ͖׵ ΘͬͨΒɺWBMVFʹόΠϯ υ͞Εͨ஋͕ มΘΔɻ
  23. ʹΘͱΓ͕ઌ͔ཛ͕ઌ͔ͷΑ͏ͳ୯ํ޲αΠΫϧΛ࡞Γɺ ٖࣅతʹɺ͔͋ͨ΋σʔλ͕ίϯϙʔωϯτ಺֎Ͱಉظ͍ͯ͠Δ͔ͷ Α͏ʹৼΔ෣ΘͤΔίϯϙʔωϯτઃܭςΫχοΫ ίϯϙʔωϯτར༻࣌ ίϯϙʔωϯτ಺Ͱ͸͜͏ॻ͔Ε͍ͯΔ ίϯϙʔωϯτʹ͓͚ΔWNPEFMͱ͸ ٙࣅతʹIUNMཁૉͰߦ͍ͬͯΔWNPEFMͷڍಈΛ ίϯϙʔωϯτͰ࣮ݱͤ͞ΔͨΊʹ࢖͏σΟϨΫςΟϒ

  24. ͓෼͔Γ ͍͚ͨͩͨͩΖ͏͔ʁ

  25. ίϯϙʔωϯτʹ͓͚ΔWNPEFMͱ͸ɺ TZODͱ΄΅ಉ͡ڍಈΛ͍ͯ͠Δ ίϯϙʔωϯτ࡞੒ऀ͕޷͖ͳΑ͏ʹ࡞ΕΔ WNPEFMͳͷͰ͋Γ ࢲ͕ͨͪΑ͘஌͍ͬͯΔWNPEFMͱ͸ Α͘ࣅ͍ͯΔผ෺ɻ ͱࢥͬͨ΄͏͕͍͍ɻ

  26. WDIFDLCPYͷΑ͏ͳίϯϙʔ ωϯτͰ͸ɺWNPEFM͸ίϯ ϙʔωϯτͷ಺෦Ͱ͜ͷΑ͏ ʹॻ͔Ε͓ͯΓɺ NPEFMΦϓγϣϯΛ࢖༻ͯ͠ ίϯϙʔωϯτͰWNPEFM͕ࢦ ఆ͞Εͨͱ͖ʹ࢖༻͞ΕΔ ϓϩύςΟͱΠϕϯτΛ ΧελϚΠζ͍ͯ͠Δ͜ͱ͕ ෼͔Δɻ

    WNPEFMͰมߋΛόΠϯυ͞ΕΔϓϩύςΟ͕ JOQVUWBMVFͳͷ͸ɺ 7VFͰ͸ͳ͘ɺ7VFUJGZͷ࢓༷ɻ
  27. ·ͱΊ 7VFͷ࢓༷ɺಛʹίϯϙʔωϯτपΓͷ࢓༷Λ཈͑ ͓͔ͯͳ͍ͱ7VFUJGZΧελϚΠζ࣌ʹ ϋϚΓϙΠϯτͱͳΓ ΧελϚΠζ͕೉͘͠ײ͡Δɻ ࠓ೔ͷͭͷϙΠϯτΛ཈͓͑ͯ͘ͱϋϚΓͮΒ͍ 5IBOLZPV❤ -FU`T7VFUJGZ