Share
Fiecare designer iubește butoanele. Este un fapt făcut de aprecierea unor proiecte precum Unicorn UI (care la momentul scrisului acceptă numai butoane și are aproape 4.000 de Stargazers pe GitHub).
Dar nici un designer nu se potrivește într-o cutie. Cu toții avem propriile dorințe și nevoi dintr-un cadru de butoane. Cu toții vrem să vedem anumite tipuri de butoane și poate că am devenit foarte buni la proiectarea unui anumit tip de buton. Deci, de ce nu facem propriul nostru kit de UI de la zero?
Baza simplă, dar foarte eficientă pentru cadrul nostru de interfață cu butoaneÎn primul rând, trebuie să identificăm elementele pe care butoanele noastre le vor putea viza. În cazul nostru, asigurați-vă că orice ancoră, intrare sau etichetă cu buton pot fi personalizate prin intermediul kitului nostru UI. Pentru a face acest lucru, să creăm un marcaj:
Buton
Folosesc un atribut pentru a face acest lucru pur și simplu pentru că cred că arată mai bine. S-ar putea să nu fie o experiență teribilă pentru viitor (ce se întâmplă dacă W3C introduce o nouă specificație pentru atributele ui?), Dar dacă vă îngrijorați, ui ca ceva de genul cory-ui caz în care aș spune că sunteți sigur de noile introduceri W3C. Dacă sunteți cu adevărat îngrijorați sau sunteți nebuni în ceea ce privește performanța, puteți folosi clasele și să realizați același efect, dar s-ar putea să vă confruntați cu probleme cu clase care se suprapun între ele în anumite puncte.
Vom folosi preprocesorul Stylus CSS pentru a evita să scriem un milion de bretele curry și astfel codul nostru arată neted și curat fără repetiție. Chiar dacă nu sunteți familiarizați cu Stylus, ar trebui să puteți urmări împreună un alt proces preprocesor sau CSS vanilie.
Mai întâi, să setăm câteva stiluri implicite la [* = UI "butonul"] selector. Folosim selectorul de stele în acest context, astfel încât să puteți adăuga "butonul" oriunde în atributul dvs. și va funcționa.
[cursor: pointer tranziție: toate 200ms margine ușoară: 0 fundal: întunecat (alb, 5%) culoare: lighten (negru, 20%) padding: .5em 1.75em decorare text: fundal din fundal: întunecat (alb, 10%)
Acum partea distractivă. Să începem să adăugăm atributele pe care credem că le-am putea folosi. De exemplu, știu că vreau abilitatea de a avea butoane de diferite dimensiuni, așa că voi adăuga în dimensiuni butoanele mele:
Buton
[cursor: pointer tranziție: toate 200ms margine ușoară: 0 fundal: întunecat (alb, 5%) culoare: lighten (negru, 20%) padding: .5em 1.75em decorare text: hover fundal: darken (alb, 10%) & [ui * = "mici"] umplutură: .25em 1em font size: .75em & [ui * = "large"] padding: .75em 2em font size: & [ui * = "uriaș"] umplutură: 1em 3em font-size: 1.25em
Observați cum suntem alăturarea atributele pe selectorul atributului buton? Aceasta înseamnă că acele atribute nu vor funcționa pentru elementele care nu au Ui = "buton". Aceasta este o modalitate frumoasă de a păstra schimbările noastre în funcție de diferite atribute pe care ar trebui să le adăugăm.
Să continuăm și să adăugăm câteva rotunjiri la butoanele noastre:
Buton
& [ui * = "rotund"] raza de graniță: 5px & [ui * = "pilula"] raza de graniță: 999em
Cel mai mic buton are colturi rotunjite, al doilea a devenit o "pastila"Până acum ar trebui să fiți mai familiarizați cu acest concept. Să adăugăm câteva culori sub formă de variabile:
Buton
colorare - primar = albastru color - pericol = roșu [ui * = "buton"] cursor: tranziție pointer: toate 200ms ușurință margine: 0 fundal: întunecat (alb, 5%) culoare: lighten (negru, 20%) padding:. 5em 1.75em Decorarea textului: Niciuna &: Fundalul hover: Darken (alb, 10%) & [ui * = "mici"] Padding: .25em 1em font size: .75em & [ui * = " : .75em 2em font size: 1.25em & [ui * = "imens"] umplutura: 1em 3em font-size: 1.25em & [ui * = "rotund"] raza de graniță: 5px & [ui * "] raza de graniță: 999 em & [ui * =" primar "] fundal: culoarea-culoarea primară: alb și [ui * = pericolul]
Asta e esența! Adăugați cât mai multe reguli și proprietăți pe care le doriți. Puteți chiar adăuga teme complexe la butoanele dvs., stări interesante de hover și animații. Împărtășiți cadrul dvs. de interfață pentru butoane cu noi în comentarii!
Accentsconagua