Szögletes anyag
A Material Design, kínai neve: Material Design Language, egy új tervezési nyelv, amelyet a Google indított, és amely a Google szerint egységes és szélesebb "megjelenést és érzetet" biztosítson mobiltelefonok, tabletek, asztali gépek és "más platformok" számára.
A Google szerint az Anyagtervezés "valódi érintésre épül, amelyet a papír és a tinta tanulmányozása ihletett", és lehetővé teszi a felhasználók számára, hogy "megértsék a vizuális jeleket, amelyek a való világ helyettesítésére szolgálnak" "anélkül, hogy szembementek a mechanika elveivel". Ezen felül a fény, a felület és a mozgás alapelvei kulcsfontosságúak ahhoz, hogy ábrázolják, hogyan mozognak, kölcsönhatásba lépnek és léteznek a tárgyak a térben egymáshoz viszonyítva. A valósághű fény- és árnyékhatások megmutatják a blokkok közötti varrásokat, elválasztják a tereket, és megjelölik a mozgó részeket. Részletesebb bevezetőért kérjük, látogasson el a Material hivatalos weboldaláraA hiperlink bejelentkezés látható.。
Az Angular Material egy Angular2+ UI keretrendszerekből álló halmaz, amelyet az Angular csapat tökéletesen valósított meg az Material specifikáció alapján, a hivatalos weboldal címe alapján:A hiperlink bejelentkezés látható.
Ez a cikk az Angular Material MatSnackBar komponensét használja egy figyelmeztető doboz bezárására, először nézzük meg a képeket:
1. lépés: Telepítés
2. lépés: Konfiguráld az animációt
Miután az animációs csomag telepítve van, importáld a BrowserAnimationsModule-t az alkalmazásodba, hogy engedélyezd az animációs támogatást.
app.module.ts importja a következők:
3. lépés: Importáld a témát
A témák beépítése szükséges ahhoz, hogy minden alap- és témastílust alkalmazzunk az alkalmazásban.
Ha elkezdheted az előre összeállított témákat, beépítsd az Angular Material egyik előre összeállított témáját globálisan az alkalmazásodba. Ha az Angular CLI-t használod, beállíthatoda styles.scss felé：
Ha teNem használtSzögletes CLI, akkor<link>átmenniAz elemeid előre összeállított tematikus index.html tartalmaznak.
4. lépés: Kezdd el a riasztódoboz becsomagolását
Lépj be a /app/services könyvtárba a cmd parancs cd-n keresztül, és módosíthatod a könyvtárat a saját projekted szerint, és végrehajthatod a Szolgáltatás létrehozása parancsot:
A ts kód a következő:
5. lépés: Konfiguráld a prompt box CSS stílusát
A projektbenstyles.scssA fájl aljára add hozzá a következő stílust, amely a saját helyzetedhez igazítható! A kódex a következő:
6. lépés: Használja a figyelmeztető dobozt
Példaként hozom a bejelentkezési felületet, és importálom login.module.tsRiasztási szolgáltatásésMatSnackBarModulKomponens modulok a következők:
login.component.ts komponensben a kód a következő:
MatSnackBar komponens API dokumentáció:A hiperlink bejelentkezés látható.
(Vége)
|
Közzétéve 2018. 11. 22. 15:00:49
|
|
|
|
