Kulmamateriaali
Material Design, kiinalainen nimi: Material Design Language, on Googlen lanseeraama uusi suunnittelukieli, jonka Google sanoo tarjoavan yhtenäisemmän ja laajemman "ulkoasun ja tuntuman" matkapuhelimille, tableteille, pöytäkoneille ja "muille alustoille".
Googlen mukaan materiaalisuunnittelu perustuu "todelliseen kosketukseen, joka on saanut inspiraationsa paperin ja musteen tutkimuksesta", ja sen avulla käyttäjät voivat "ymmärtää visuaalisia vihjeitä, joilla korvataan todellinen maailma" "ilman mekaniikan periaatteiden vastaista". Lisäksi valon, pinnan ja liikkeen perusperiaatteet ovat avainasemassa siinä, miten esineet liikkuvat, vuorovaikuttavat ja ovat olemassa tilassa suhteessa toisiinsa. Realistiset valo- ja varjotehosteet näyttävät lohkojen saumat, jakavat tilat ja merkitsevät liikkuvia osia. Yksityiskohtaisempaa esittelyä varten vieraile Materialin virallisella verkkosivustollaHyperlinkin kirjautuminen on näkyvissä.。
Angular Material on joukko Angular2+ UI-kehyksiä, jotka Angular-tiimi on toteuttanut täydellisesti Material-määrittelyn perusteella, virallisen verkkosivuston osoitteen:Hyperlinkin kirjautuminen on näkyvissä.
Tässä artikkelissa käytetään Angular Materialin MatSnackBar-komponenttia hälytyslaatikon kapselointiin, katsotaanpa ensin renderöintiä:
Vaihe 1: Asenna
Vaihe 2: Määritä animaatio
Kun animaatiopaketti on asennettu, tuo BrowserAnimationsModule sovellukseesi animaatiotuen ottamiseksi käyttöön.
app.module.ts tuo seuraavaa:
Vaihe 3: Tuo teema
Teemojen sisällyttäminen on välttämätöntä, jotta kaikki ydin- ja teematyylit voidaan soveltaa sovellukseesi.
Aloittaaksesi valmiiden teemojen parissa, sisällytä sovellukseesi yksi Angular Materialin valmiista teemoista globaalisti. Jos käytät Angular CLI:tä, voit ottaa sen käyttöönto styles.scss：
Jos sinäEi käytettyAngular CLI, silloin<link>voi mennä läpiElementtisi sisältävät valmiiksi rakennettuja temaattisia index.html.
Vaihe 4: Aloita hälytyslaatikon kapselointi
Syötä /app/services -hakemisto cmd-komento-cd:n kautta, ja voit muokata hakemistoa oman projektisi mukaan ja suorittaa Create Service -komennon:
TS-koodi on seuraava:
Vaihe 5: Määritä kehotuslaatikko CSS-tyyliin
Projektissastyles.scssTiedoston alareunaan lisää seuraava tyyli, jota voi muokata oman tilanteesi mukaan! Koodi on seuraava:
Vaihe 6: Käytä hälytyslaatikkoa
Otan esimerkiksi kirjautumisrajapinnan ja tuon sen login.module.tsHälytyspalvelujaMatSnackBarModuuliKomponenttimoduulit, seuraavasti:
login.component.ts komponentissa käytetty koodi on seuraava:
MatSnackBarin komponentti-API-dokumentaatio:Hyperlinkin kirjautuminen on näkyvissä.
(Loppu)
|
Julkaistu 22.11.2018 15.00.49
|
|
|
|
