Šajā rakstā tiks paskaidrots, kā lietot diagonālās daļas programmā Tailwind.
Kā Tailwind CSS izmantot diagonālās daļas?
Diagonālās daļas klase programmā Tailwind ir iepriekš definēts ciparu fonta variants, kas samazina skaitītāju un saucēju un atdala tos ar slīpsvītru. Tādējādi daļskaitļa numurs šķiet atšķirīgs no pārējā teksta.
Sintakse
Sintakse, izmantojot ' diagonāles-daļdaļas ” klase ir šāda:
< div klasē = 'diagonālās daļas' >
< div / >
Kā redzat no iepriekš minētās sintakses, izstrādātājam ir jānodrošina “ diagonāles-daļdaļas ' iekš ' klasē ” elementa atribūts.
Kā praktisku piemēru izmantosim klasi “diagonāldaļskaitļi”. Tālāk esošajā demonstrācijā lietotājs var redzēt atšķirību starp parastajām daļām un diagonālajām daļām:
< div klasē = 'bg-slate-200 text-center text-lg' >< lpp >Parastās frakcijas: 3 / 5 6 / 3 6 / 5 < / lpp >
< lpp klasē = 'diagonālās daļas' >Diagonālās daļas: 3 / 5 6 / 3 6 / 5 < / lpp >
< / div >
Iepriekš minētā koda skaidrojums ir šāds:
- ' div 'elements tiek izveidots un nodrošināts kā fona krāsa, izmantojot ' bg-{color}-{number} ” klase.
- Pēc tam tekstam tiek nodrošināts liels fonta izmērs un tas tiek līdzināts elementa centram, izmantojot “ teksts-lg ' un ' teksta centrs ” klases attiecīgi.
- Tālāk divi ' ” elementi tiek izveidoti, kur otrais ir nodrošināts ar “ diagonāles-daļdaļas ” klase.
Izvade:
Atšķirība starp diagonālo daļu un parasto daļu ir skaidri redzama iepriekš sniegtajā izvadē.
Diagonālās frakcijas klases izmantošana ar pārtraukuma punktiem
Pārtraukuma punkti tiek izmantoti kā multivides vaicājumi programmā Tailwind. Ir pieci noklusējuma pārtraukuma punkti ar norādīto minimālo platumu. Šos pārtraukuma punktus var izmantot ar jebkuru klasi programmā Tailwind, lai izveidotu atsaucīgu un dinamisku dizaina izkārtojumu.
Lai izmantotu ' diagonāles-daļdaļas ” klase ar pārtraukuma punktu programmā Tailwind, tiek izmantota šāda sintakse:
{ pārtraukuma punkta prefikss } : diagonāle-daļdaļaTālāk esošajā tabulā ir norādīts minimālais platums dažādiem aizvēja pārtraukuma punktiem:
| Pārtraukuma punkta prefikss | Minimālais platums |
|---|---|
| sm | 640 pikseļi |
| md | 768 pikseļi |
| lg | 1024 pikseļi |
| xl | 1280 pikseļi |
| 2xl | 1536 pikseļi |
Izmantosim pārtraukuma punktus ar ' diagonāles-daļdaļas ” klasē, lai praktiski izprastu to izmantošanu:
< div klasē = 'bg-slate-200 text-center text-lg md:diagonal-fractions' >3/4, 7/8, 5/4, 6/5
< / div >
Iepriekš sniegtajā kodā “div” elements ir nodrošināts md:diagonal-fractions ” klase, kas mainīs skaitļu daļu fontu, kad md ” ir sasniegts pārtraukuma punkts.
Izvade
Kā redzat izvadā, daļskaitļi tiek nodrošināti ar diagonālās daļas fontu, kad “ md ” ir sasniegts pārtraukuma punkts:
Diagonālās frakcijas klases izmantošana ar aizvēja stāvokļiem
Tailwind nodrošina noklusējuma “ štatos ”, lai elementam nodrošinātu dizaina īpašības, kad tiek aktivizēts konkrētais stāvoklis. Tas padara dizaina izkārtojumu pievilcīgāku un dinamiskāku. Lai izmantotu klasi “diagonal-fractions” ar stāvokli Tailwind, tiek izmantota šāda sintakse:
{ Valsts } : diagonāle-daļdaļaTailwind nodrošinātais noklusējuma stāvoklis ir šāds:
- Virziet kursoru: Kad lietotājs virza kursoru virs elementa.
- Fokuss: Kad lietotājs koncentrējas uz elementu, pārejot uz to.
- Aktīvs: Kad lietotājs aktivizē elementu, noklikšķinot uz tā.
- Atspējot: Kad lietotājam nav atļauts aktivizēt elementu.
Tālāk esošajā demonstrācijā ir sniegts praktisks piemērs ' diagonāles-daļdaļas 'klase ar ' novietojiet kursoru ” stāvoklis Tailwind:
< div klasē = 'bg-slate-200 text-center text-lg hover:diagonal-fractions' >3/4, 7/8, 5/4, 6/5
< / div >
' div 'elementu iepriekš minētajā kodā nodrošina ' kursors: diagonāles-frakcijas ” klase, kas mainīs daļskaitļu parasto fontu uz diagonālās daļas fontu.
Izvade
Kā redzat izvadē, daļskaitļa ciparu fonts mainās, lietotājam virzot peles kursoru virs tā:
Tas viss attiecas uz diagonālās daļas klases izmantošanu Tailwind CSS.
Secinājums
Lai izmantotu diagonālās daļas Tailwind CSS, izmantojiet “ diagonāle-daļdaļa ” klase. Šī klase atdalīs skaitītāju un saucēju ar slīpsvītru un padarīs tos mazus. Lai padarītu dizainu dinamiskāku, lietotāji var izmantot arī klasi “diagonal-fractions” ar noklusējuma pārtraukuma punktiem un stāvokļiem programmā Tailwind. Šajā rakstā ir sniegta procedūra diagonālo daļu izmantošanai programmā Tailwind.