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

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

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

https://dmmcj.connpass.com/event/84002/
の発表資料です。

1cb874654a240f295173de46635c8bca?s=128

AmatsukiKu

May 29, 2018
Tweet

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ͷ։ൃʹ͍ͭͯ • .BUFSJBM5IFNF&EJUPS /FX •

    (BMMFSZ /FX • .BUFSJBM$PNQPOFOUT ඒ͍͠ϓϩμΫτΛΑΓ଎͘࡞ΔͨΊʹ(PPHMF͕ఏڙ͢Δπʔϧ܈ ͜ΕΒͷπʔϧΛར༻ͯ͠։ൃΛߦ͍ͬͯ͘
  5. © Start Today Technologies Inc. ։ൃϑϩʔʢσβΠφʔฤʣ  4LFUDI্Ͱ.BUFSJBM5IFNF&EJUPSΛ࢖ͬͯ 5IFNFΛ࡞੒ 

    4LFUDI্Ͱ࡞੒ͨ͠5IFNFΛར༻ͯ͠σβΠϯΛ ࡞੒  ࡞੒ͨ͠σβΠϯΛ(BMMFSZʹΞοϓϩʔυ
  6. © Start Today Technologies Inc. .BUFSJBM5IFNF&EJUPSͷΠϝʔδ

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

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

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

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

  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. ·ͱΊ • .BUFSJBM5IFNF&EJUPSΛ࢖͏͜ͱͰ.BUFSJBM %FTJHOͷσβΠϯΛ࡞੒͠΍͘͢ͳͬͨ •

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