Kampinė medžiaga
"Material Design" yra nauja "Google" sukurta dizaino kalba, kuri, pasak "Google", skirta suteikti nuoseklesnę ir platesnę mobiliųjų telefonų, planšetinių kompiuterių, stalinių kompiuterių ir "kitų platformų" išvaizdą.
Pasak "Google", medžiagų dizainas yra pagrįstas "tikru prisilietimu, įkvėptu popieriaus ir rašalo tyrimų" ir gali leisti vartotojams "suprasti vizualines užuominas, naudojamas pakeisti realų pasaulį" "neprieštaraujant mechanikos principams". Be to, pagrindiniai šviesos, paviršiaus ir judėjimo principai yra pagrindiniai vaizduojant, kaip objektai juda, sąveikauja ir egzistuoja erdvėje vienas kito atžvilgiu. Tikroviški šviesos ir šešėlių efektai rodo siūles tarp blokų, padalina erdves ir žymi judančias dalis. Norėdami gauti išsamesnį įvadą, apsilankykite oficialioje svetainėje MedžiagaHipersaito prisijungimas matomas.。
"Angular Material" yra "Angular2+" vartotojo sąsajos sistemų rinkinys, kurį puikiai įgyvendino "Angular" komanda, remdamasi "Material" specifikacija, oficialiu svetainės adresu:Hipersaito prisijungimas matomas.
Šiame straipsnyje naudojamas "Angular Material" komponentas "MatSnackBar", kad būtų įtrauktas įspėjimo laukelis, pirmiausia pažvelkime į atvaizdus:
1 veiksmas: įdiekite
2 veiksmas: sukonfigūruokite animaciją
Įdiegę animacijos paketą, importuokite BrowserAnimationsModule į savo programą, kad įjungtumėte animacijos palaikymą.
app.module.ts importuojami taip:
3 veiksmas: importuokite temą
Temų įtraukimas yra būtinas, kad jūsų programai būtų pritaikyti visi pagrindiniai ir temų stiliai.
Norėdami pradėti naudoti iš anksto sukurtas temas, įtraukite vieną iš iš anksto sukurtų "Angular Material" temų visame pasaulyje į savo programą. Jei naudojate "Angular CLI", galite jį nustatytiį styles.scss：
JeiNenaudojamasKampinis CLI, tadagali <link>praeitiJūsų elementuose yra iš anksto sukurtos teminės index.html.
4 veiksmas: pradėkite įspėjimo laukelio kapsuliavimą
Įveskite /app/services katalogą naudodami cmd komandą cd ir galėsite modifikuoti katalogą pagal savo projektą ir vykdyti komandą Sukurti paslaugą:
ts kodas yra toks:
5 veiksmas: sukonfigūruokite raginimo laukelio CSS stilių
projektestiliai.scssFailo apačioje pridėkite šį stilių, kurį galima keisti pagal jūsų faktinę situaciją! Kodas yra toks:
6 veiksmas: naudokite įspėjimo laukelį
Kaip pavyzdį imu prisijungimo sąsają ir importuoju ją į login.module.tsĮspėjimo paslaugairMatSnackBar modulisKomponentiniai moduliai, išvardyti toliau:
Naudojamas login.component.ts komponente, kodas yra toks:
MatSnackBar komponento API dokumentacija:Hipersaito prisijungimas matomas.
(Pabaiga)
|
Paskelbta 2018-11-22 15:00:49
|
|
|
|
