新しくなったMaterial Designを触ってみた / Tried Material Design 2018

Transcript

1. © Start Today Technologies Inc. ৽͘͠ͳͬͨ.BUFSJBM
   %FTJHO Λ৮ͬͯΈͨ (PPHMF
   *0
   ใࠂձ גࣜձࣾελʔττΡσΠςΫϊϩδʔζ ৽ࣄۀ૑଄෦

   ݖक ݈࢚

2. © Start Today Technologies Inc. ൃදͷྲྀΕ • ࣗݾ঺հ • .BUFSJBM
   %FTJHOͷ։ൃʹ͍ͭͯ

   • ։ൃϑϩʔʢσβΠφʔฤʣ • ։ൃϑϩʔʢΤϯδχΞฤʣ • ·ͱΊ

3. © Start Today Technologies Inc. ࣗݾ঺հ • ݖक ݈࢚ʢ͝Μͷ͔Έ ͚Μ͡ʣ

   • גࣜձࣾελʔττΡσΠςΫϊϩδʔζ • ϑϩϯτΤϯυΤϯδχΞ • !"NBUTVLJ,V

4. © Start Today Technologies Inc. .BUFSJBM
   %FTJHOͷ։ൃʹ͍ͭͯ • .BUFSJBM
   5IFNF
   &EJUPS
   /FX •

   (BMMFSZ
   /FX • .BUFSJBM
   $PNQPOFOUT ඒ͍͠ϓϩμΫτΛΑΓ଎͘࡞ΔͨΊʹ(PPHMF͕ఏڙ͢Δπʔϧ܈ ͜ΕΒͷπʔϧΛར༻ͯ͠։ൃΛߦ͍ͬͯ͘

5. © Start Today Technologies Inc. ։ൃϑϩʔʢσβΠφʔฤʣ  4LFUDI্Ͱ.BUFSJBM
   5IFNF
   &EJUPSΛ࢖ͬͯ 5IFNFΛ࡞੒ 

   4LFUDI্Ͱ࡞੒ͨ͠5IFNFΛར༻ͯ͠σβΠϯΛ ࡞੒  ࡞੒ͨ͠σβΠϯΛ(BMMFSZʹΞοϓϩʔυ

6. © Start Today Technologies Inc. .BUFSJBM
   5IFNF
   &EJUPSͷΠϝʔδ

7. © Start Today Technologies Inc. 5IFNFͷ࡞੒  $PMPSͷઃఆ  5ZQPHSBQIZͷઃఆ

    4IBQFͱ$PSOFS
   4UZMFͷઃఆ

8. © Start Today Technologies Inc. 5IFNFͷ࡞੒ r $PMPSͷઃఆ

9. © Start Today Technologies Inc. 5IFNFͷ࡞੒ r 5ZQPHSBQIZͷઃఆ

10. © Start Today Technologies Inc. 5IFNFͷ࡞੒ r 4IBQFͱ$PSOFS
    4UZMFͷઃఆ

11. © Start Today Technologies Inc. 5IFNFΛར༻ͨ͠σβΠϯͷ࡞੒

12. © Start Today Technologies Inc. ։ൃϑϩʔʢΤϯδχΞฤʣ  (BMMFSZΛ༻͍ͯσβΠϯΛ֬ೝ  5IFNFΛద༻

     $PNQPOFOUͷར༻

13. © Start Today Technologies Inc. (BMMFSZΛ༻͍ͯσβΠϯΛ֬ೝ

14. © Start Today Technologies Inc. 5IFNFΛద༻  8FC 4$44ͷڞ௨෦෼Ͱ࠷ॳʹม਺Λઃఆ $mdc-theme-primary:

    #e0f7fa; $mdc-theme-on-primary: #000; $mdc-theme-secondary: #ffebee; $mdc-theme-on-secondary: #000; $mdc-theme-surface: #fff; $mdc-theme-on-surface: #000; $mdc-theme-background: #fff; $mdc-typography-font-family: Roboto;

15. © Start Today Technologies Inc. 5IFNFΛద༻  "OESPJE DPMPSTYNMͱTUZMFTYNMʹઃఆ <style

    name="Base.Theme.Shrine" parent="@style/Theme.AppCompat.Light.NoActionBar"> <item name="colorPrimary">@color/colorPrimary</item> <item name="colorPrimaryDark">@color/colorPrimaryDark</item> <item name="colorAccent">@color/colorAccent</item> <item name="android:textColorPrimary">@color/textColorPrimary</item> <item name="toolbarStyle">@style/Widget.Shrine.Toolbar.Logo</item> </style> <resources> <color name="colorPrimary">#ffffff</color> <color name="colorPrimaryDark">#e0e0e0</color> <color name="colorAccent">#607d8b</color> <color name="textColorPrimary">#dd000000</color> <color name="textColorSecondary">#89000000</color> </resources>

16. © Start Today Technologies Inc. $PNQPOFOUͷར༻  8FC ΫϥεͰ$PNQPOFOUΛࢦఆ import

    {MDCTextField} from '@material/textfield'; const password = new MDCTextField(document.querySelector('.password')); <div class="mdc-text-field mdc-text-field--box password"> <input type="password" class="mdc-text-field__input" id="password-input" name="password"> <label class="mdc-floating-label" for="password-input">Password</label> <div class="mdc-line-ripple"></div> </div> @import "@material/textfield/mdc-text-field"; .password { display: block; width: 300px; margin: 20px auto; }

17. © Start Today Technologies Inc. $PNQPOFOUͷར༻  "OESPJE <android.support.design.widget.TextInputLayout android:id="@+id/password_text_input”

    android:layout_width="match_parent" android:layout_height="wrap_content" android:hint="@string/shr_hint_password” app:errorEnabled="true"> <android.support.design.widget.TextInputEditText android:id="@+id/password_edit_text" android:layout_width="match_parent" android:layout_height="wrap_content" android:inputType="textPassword" /> </android.support.design.widget.TextInputLayout>

18. © Start Today Technologies Inc. ·ͱΊ • .BUFSJBM
    5IFNF
    &EJUPSΛ࢖͏͜ͱͰ.BUFSJBM
    %FTJHOͷσβΠϯΛ࡞੒͠΍͘͢ͳͬͨ •

    ݱঢ়ͱͯ͠5IFNFΛ൓ө࣮ͨ͠૷Λߦ͏ʹ͸Ұख ͔͔ؒΔ