Kuidas luua Buttons UI Kit

Nädala kodeerimise väljakutse 6. nädala teema on:

Nupud

“Nupp? ”võite küsida… Jah! Nupp!

"Aga miks?"

Kuna nupp on mis tahes veebisaidi / veebirakenduse alustala. Ükskõik, kas olete Facebookis, Twitteris või Google'is jne, leiate alati nupu, mis võimaldab teil rakendusega mingil viisil suhelda. Nii et sel nädalal kavatseme nuppe ehitada - palju nuppe!

Kui soovite osaleda väljakutses, siis ehitage julgelt mis tahes nuppe: 3D-nupud, pulsatsiooniefektiga nupud, animatsiooninupud jne - taevas on piiriks . Ole loominguline! Teate, kui kõrgelt hindan loovust!

Selles artiklis me ehitame mitu nuppu ja paneme need kõik Buttons UI komplekti:

Enne kui hakkame liikuma rakenduse osa juurde, vaatame, milliseid olekuid nupp võib olla:

  1. Vaikeolek
  2. Hõljutatud olek - kui hiir on nupu kohal
  3. Aktiivne olek - kui nuppu vajutatakse
  4. Fookuse olek - kui nupp on esile tõstetud. Lubatud elementidel, mis aktsepteerivad klaviatuuri sündmusi. Seda kasutatakse kasutajatele, kes kasutavad ainult klaviatuuri, rakenduse sirvimisel mõned juhised.
  5. Keelatud olek

Nupud tuleb stiilida kõigi nende olekute katmiseks.

Lisaks on meil kolm erinevat nuppu tüüpi: esmane, sekundaarne ja tertsiaarne ning kaks täiendavat suurust: suur ja väike.

HTML

Erinevat tüüpi nuppe eristamiseks kasutame klasse.

CSS

.btn on põhiklass, mida kasutavad kõik meie nupud:

️ Mõni üldine stiil, et see näeks välja parem kui vaikeversioon.

Järgmisena on meil erinevad olekud:

Selleks, et olekute vahel oleks mingit erinevust, võime mängida läbipaistmatuse omadusega.

Algselt on nupul läbipaistmatus: 1 ja vähendame seda läbipaistmatust pisut, kui me hõljutame nuppu, ja siis veel natuke, kui nupp on keelatud. Kui me siiski nuppu klõpsame, seame läbipaistmatuse tagasi väärtusele 1, kuna see annab kena efekti.

Fookuse oleku jaoks eemaldame vaikekontuuri omaduse ja lisame selle asemel kasti-varju omaduse, kuid teeme seda iga nuputüübi jaoks eraldi, kuna värv muutub klassist sõltuvalt (vt allpool).

Üksikud värvid on seatud .btn-primaarseks, .btn-sekundaarseks ja .btn-tertsiaarseks klassiks:

Nagu näete, kasutame CSS-i muutujate meetodit sama värvi määramiseks erinevatele omadustele. Kuid selleks, et see toimiks, peame värvimuutujad kuulutama juure järgmiselt:

Pidage meeles, et hea tava on lisada css-faili ülaossa juurdeklaratsioon.

Lõpuks lisageme kaks täiendavat suurust; .btn-suured ja .btn-väikesed klassid:

Järeldus

Vaadake, kui lihtne on Buttons UI Kit luua?

Boonusfunktsioonidena saate JavaScripti kaudu nuppudele lisada pulsatsiooniefekti. Tegin seda eelmises artiklis - saate seda kontrollida, klõpsates siin!

Loodetavasti teile see väljakutse meeldis ja ma ei jõua ära oodata, millal näete, mida loote!

Head kodeerimist!

Algselt avaldati veebisaidil www.florin-pop.com.