Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up
for free
新しくなったMaterial Designを触ってみた / Tried Material Design 2018
AmatsukiKu
May 29, 2018
Technology
0
2.4k
新しくなったMaterial Designを触ってみた / Tried Material Design 2018
https://dmmcj.connpass.com/event/84002/
の発表資料です。
AmatsukiKu
May 29, 2018
Tweet
Share
More Decks by AmatsukiKu
See All by AmatsukiKu
amatsukiku
13
6.6k
amatsukiku
0
1.4k
amatsukiku
2
1.6k
amatsukiku
1
710
Other Decks in Technology
See All in Technology
clustervr
0
140
subroh0508
4
220
thockin
3
900
110y
1
11k
hanacchi
0
150
syoshie
0
430
whitefox_73
0
190
tnmt
2
210
miura55
0
240
viva_tweet_x
3
2.7k
line_developers
PRO
0
170
ocise
1
1.8k
Featured
See All Featured
chrislema
173
14k
deanohume
294
28k
shpigford
165
19k
holman
448
130k
bkeepers
52
4.2k
imathis
479
150k
sstephenson
145
12k
jponch
103
5k
morganepeng
18
1.2k
rasmusluckow
318
18k
dotmariusz
94
5.5k
stephaniewalter
260
11k
Transcript
© Start Today Technologies Inc. ৽͘͠ͳͬͨ.BUFSJBM%FTJHO Λ৮ͬͯΈͨ (PPHMF*0ใࠂձ גࣜձࣾελʔττΡσΠςΫϊϩδʔζ ৽ࣄۀ෦
ݖक ݈࢚
© Start Today Technologies Inc. ൃදͷྲྀΕ • ࣗݾհ • .BUFSJBM%FTJHOͷ։ൃʹ͍ͭͯ
• ։ൃϑϩʔʢσβΠφʔฤʣ • ։ൃϑϩʔʢΤϯδχΞฤʣ • ·ͱΊ
© Start Today Technologies Inc. ࣗݾհ • ݖक ݈࢚ʢ͝Μͷ͔Έ ͚Μ͡ʣ
• גࣜձࣾελʔττΡσΠςΫϊϩδʔζ • ϑϩϯτΤϯυΤϯδχΞ • !"NBUTVLJ,V
© Start Today Technologies Inc. .BUFSJBM%FTJHOͷ։ൃʹ͍ͭͯ • .BUFSJBM5IFNF&EJUPS /FX •
(BMMFSZ /FX • .BUFSJBM$PNQPOFOUT ඒ͍͠ϓϩμΫτΛΑΓ͘࡞ΔͨΊʹ(PPHMF͕ఏڙ͢Δπʔϧ܈ ͜ΕΒͷπʔϧΛར༻ͯ͠։ൃΛߦ͍ͬͯ͘
© Start Today Technologies Inc. ։ൃϑϩʔʢσβΠφʔฤʣ 4LFUDI্Ͱ.BUFSJBM5IFNF&EJUPSΛͬͯ 5IFNFΛ࡞
4LFUDI্Ͱ࡞ͨ͠5IFNFΛར༻ͯ͠σβΠϯΛ ࡞ ࡞ͨ͠σβΠϯΛ(BMMFSZʹΞοϓϩʔυ
© Start Today Technologies Inc. .BUFSJBM5IFNF&EJUPSͷΠϝʔδ
© Start Today Technologies Inc. 5IFNFͷ࡞ $PMPSͷઃఆ 5ZQPHSBQIZͷઃఆ
4IBQFͱ$PSOFS4UZMFͷઃఆ
© Start Today Technologies Inc. 5IFNFͷ࡞ r $PMPSͷઃఆ
© Start Today Technologies Inc. 5IFNFͷ࡞ r 5ZQPHSBQIZͷઃఆ
© Start Today Technologies Inc. 5IFNFͷ࡞ r 4IBQFͱ$PSOFS4UZMFͷઃఆ
© Start Today Technologies Inc. 5IFNFΛར༻ͨ͠σβΠϯͷ࡞
© Start Today Technologies Inc. ։ൃϑϩʔʢΤϯδχΞฤʣ (BMMFSZΛ༻͍ͯσβΠϯΛ֬ೝ 5IFNFΛద༻
$PNQPOFOUͷར༻
© Start Today Technologies Inc. (BMMFSZΛ༻͍ͯσβΠϯΛ֬ೝ
© 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;
© 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>
© 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; }
© 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>
© Start Today Technologies Inc. ·ͱΊ • .BUFSJBM5IFNF&EJUPSΛ͏͜ͱͰ.BUFSJBM %FTJHOͷσβΠϯΛ࡞͘͢͠ͳͬͨ •
ݱঢ়ͱͯ͠5IFNFΛө࣮ͨ͠Λߦ͏ʹҰख ͔͔ؒΔ