Semantiske UI-knapper

Hvad er Semantic UI-knapper?

En knap angiver en mulig brugerhandling. Semantic UI giver en brugervenlig syntaks, der forenkler ikke kun styling af en knap, men også den naturlige sproglige semantik.

Sådan bruges dem

Semantisk UI-klasse føjes simpelthen til et knapelement. Forskellige eksempler er angivet nedenfor for at angive, hvordan du bruger det.

Typer

  • Standardknap

Standard semantisk UI-knap

Standard Button
  • Fremhævningsknap

En knap med et andet niveau af vægt

Andre emphasis klasser er secondary, positiveognegative

  • Animeret knap

En knap med animation, der viser skjult indhold

 Sign-up for a Pro account $12.99 a month 

Ejendommen tabindex="0"ovenfor gør knappetastaturet fokuseret, da tagget ikke blev brugt.

  • Mærket knap

En knap ved siden af ​​en etiket

 Like 2,048 

elementet bruges til at angive et ikon, her er det et hjerteikon sammen med grundlæggende etiket2,048

  • Ikon knap

En Semantic UI-knap kan bare være et ikon

Ovenstående er kun et kameraikon

Grupper

Semantiske UI-knapper kan findes i en gruppe

 One Two Three 

Indhold

Semantiske UI-knapper kan indeholde betingelser

 Yes No 

Stater

Semantisk UI knapper kan eksistere i forskellige stater, active, disabled, loading. Du skal blot tilføje et tilstandsnavn til classattribut- ofelementet.

Loading

Variationer

Findes Semantisk UI knapper i forskellige størrelser, mini, tiny, small, medium, large, big, huge, og massive.

Massive Button

Der er meget mere om Semantic UI-knapper. Besøg det medfølgende link i afsnittet Mere information for at lære mere.

Mere information:

  • Semantiske brugergrænseflade-knapper Docs