Share
Butoanele formează o parte integrantă a oricărui site funcțional (plus designerii îi iubesc!) Acțiunile utilizatorilor de pe web, în general, încep și se termină cu un clic pe un buton. În Google Mail, de exemplu, creăm un nou e-mail făcând clic pe Compune buton. De asemenea, probabil vom face clic pe câteva butoane de-a lungul drumului pentru a personaliza e-mailul. În cele din urmă, faceți clic pe Trimite pentru a trimite e-mailul. În această parte a seriei noastre de Materiale Design Lite (MDL), vom examinaButoane component.
Componenta Butoane din MDL este în esență o îmbunătățire vizuală a , sau an element pentru a se conforma estetic Material Design. În conformitate cu specificațiile, există patru tipuri de butoane
Vom analiza modul în care să implementăm fiecare dintre acestea și când butonul funcționează cel mai bine.
Ca o reamintire, asigurați-vă că aveți foile de stil MDL și JavaScript setat în documentul dvs. cap. Puteți personaliza schema de culori care va fi aplicată componentelor utilizând instrumentul de creare a temelor MDL.
Odată ce acestea sunt toate setate, putem implementaButoane componentă - începând cu apartament tip.
Crearea unui buton MDL este destul de simplă. Putem crea un buton fie cu a buton element, an intrare element cu a depune tip sau o etichetă de ancorare.
A depune
Adaugă mdl-buton clasa acestor elemente pentru a aplica stilurile de butoane MDL.
În demo-ul de mai jos, am creat o apartament cu culoarea implicită setată la negru.
Culoarea textului butonului este personalizabilă prin includerea unuia dintre următorii modificatoriclase.
Accentsconagua
mdl-buton - colorat Adăugați această clasă pentru a aplica culoarea primară pe textul butonului.mdl-buton - accent Alternativ, adăugați această clasă pentru a aplica culoarea accentului.Referindu-se la numele principal al stilului (material.teal-red.min.css), culoarea noastră principală este "teal", în timp ce "roșu" va fi aplicat ca accent sau culoarea secundară (introduceți textul din intrarea de e-mail de mai jos pentru a vedea aceste culori intră în vigoare).
apartament butonul este cel mai de bază tip de buton din MDL. Acesta va funcționa cel mai bine într-o situație în care o acțiune este așteptată intuitiv, cum ar fi într-un dialog pop-up, într-o componentă a cardului sau într-o formă de conectare sau înregistrare.
Datorită aspectului său, cu toate acestea, folosind a apartament butonul din interiorul corpului nu este recomandat. apartament butonul apare ca un text obișnuit, după cum puteți vedea mai sus. Și întrucât nu prezintă în mod explicit caracteristicile butoanelor comune la prima vedere, butonul plat nu va transmite avantajele pe care majoritatea utilizatorilor le vor recunoaște ca fiind un buton pe care se poate da clic.
Este un buton?Cand apartament butonul nu se simte potrivit, luați în considerare utilizarea ridicat buton tip.
ridicat butonul descrie caracteristicile tipice ale unui buton; este pătrată cu o umbră de picătură pentru a da efectul ridicat. Pentru a crea una, începem cu a buton element cu mdl-buton clasă anexată.
Apoi adăugați mdl-buton - ridicat clasa elementului. Înainte de a asculta, ridicat butonul poate fi, de asemenea, personalizat cu adăugarea de mdl-buton - colorat sau mdl-buton - accent clasă.
Aici avem ridicat butoanele cu culoarea implicită, primar și culoarea de accent setate ca fundal pentru buton.
ridicat butonul este proeminent, ceea ce îl face potrivit atunci când atenția utilizatorilor este prioritatea maximă. Aceasta ar putea fi aplicată, de exemplu, unui buton de chemare la acțiune din secțiunea de erou, un buton de trimitere într-un formular pentru abonare sau un buton "Cumpărați acum" de pe o pagină de produs.
Notă: țineți cont de ierarhie atunci când aplicați a ridicat buton. Folosind un buton ridicat într-un strat de conținut cu umbre de picătură, ca un dialog pop-up, pot face conținutul prea ocupat cu elemente care luptă pentru atenție.
Butonul de acționare plutitoare (FAB) a fost recunoscut ca element de semnătură al designului de material. FAB este un buton circular cu o pictogramă care plutește pe o pagină. Scopul unui FAB este similar cu butonul de chemare la acțiune; subliniază o acțiune pe care utilizatorii ar - probabil - o realizează cel mai mult. De obicei, este prezentă cu o culoare viu, care o face mai proeminentă printre restul elementelor UI de pe acea pagină.
Spot la FABÎncă o dată, pornim un buton Floating Action cu un gol buton element cu mdl-buton clasă. De data aceasta, în loc de text, vom include o include o pictogramă în buton. Consultați orientarea pictogramei Material Design pentru a alege numele pictogramei pentru afișare.
Pentru a transforma butonul într-un FAB, adăugăm mdl-buton - fab clasa, suplimentar cu mdl-buton - colorat pentru a modifica culoarea de fundal.
După cum puteți vedea mai jos, butonul FAB ia accent color atunci când este setat la un buton colorat, spre deosebire de primar culoarea, așa cum am văzut cu apartament și ridicat butoane.
MDL aplică culoarea primară în majoritatea componentelor "colorate", cum ar fi navigația, filele, câmpurile de text, glisoarele și casetele de selectare, ceea ce o face complet dominantă. FAB ar trebui să fie mai proeminent în restul interfeței UI, prin urmare, implicit implică culoarea accentului.
În orice caz, atunci când culoarea primară se dovedește a fi mai aptă, puteți adăuga mdl-buton - primar clasă în loc.
Aici este cu culoarea primară:
Spre deosebire de FAB, icoană nu ia forma unui cerc; apare pur și simplu ca o icoană. Un buton cu pictograme vine la îndemână, unde spațiul este limitat sau este suficient să se reprezinte scopul butonului deoarece utilizatorii sunt obișnuiți cu aplicația. Utilizați bara de instrumente Google Docs ca exemplu:
Folosirea unui buton textual pentru o bară de instrumente în acest caz ar fi de neimaginat.
icoană butonul este format prin intermediul mdl-buton și mdl-buton - icon clasă:
Acest exemplu afișează o pictogramă care descrie funcționalitatea de încărcare sau de backup:
În plus, aceste butoane pot fi îmbunătățite cu efectul de ripple. Efectul de rupere este o altă semnătură vizuală a Material Design și oferă feedback vizual când butonul a fost apăsat. Efectul începe de la coordonate când se face clicul, replicând modul în care efectul funcționează în viața reală.
Această îmbunătățire are două clase: mdl-js-buton și mdl-js-ripple-efect care pot fi aplicate oricăror tipuri de butoane MDL.
Adăugați aceste două clase la butonul:
iar efectul de rupere ar trebui aplicat acum:
În unele cazuri, cum ar fi atunci când un câmp de text necesar este încă gol sau o anumită opțiune este încă de selectat, butonul care poate fi acționat poate fi mai bine dezactivat. Pentru a dezactiva butoanele MDL, adăugați atributul boolean HTML invalid la elementul de buton:
Butonul nu trebuie să reacționeze acum la interacțiunea cu utilizatorul (efectul de rupere va fi, de asemenea, dezactivat). Adăugarea clasei de modificatori de culoare mdl-buton - colorat sau mdl-buton - accent, nu va avea nici un efect asupra butoanelor cu dezactivare.
invalid atributul, deși HTML nu este valabil, este de asemenea aplicabil butoanelor create cu o etichetă de ancorare.
Butoanele sunt destul de simple de implementat. Putem construi un buton cu stil frumos, cu o animație de efect de ripple netedă, cu doar câteva clase. Personal, sper ca componenta va fi îmbunătățită în continuare prin inspirația de la componenta Buton Bootstrap, probabil prin includerea variantei Button Groups.
În următoarea tranșă a acestei serii, ne vom uita la componenta Text Fields, pe care am întâlnit-o deja de câteva ori până acum.
Pana data viitoare!
