Ce sunt butoanele UI semantice?

Un buton indică o posibilă acțiune a utilizatorului. UI semantică oferă o sintaxă ușor de utilizat care simplifică nu numai stilul unui buton, ci și semantica limbajului natural.

Cum să le folosiți

Clasa UI semantică este pur și simplu adăugată unui element buton. Diverse exemple sunt date mai jos pentru a indica modul de utilizare.

Tipuri

  • Buton standard

Buton UI semantic standard

<button class="ui button">Standard Button</button>
  • Butonul de accentuare

Un buton cu un nivel diferit de accent

<button class="ui primary button">

Alte clase de accent sunt secondary, positive, și negative

  • Buton animat

Un buton cu animație, care arată conținutul ascuns

<div class="ui animated fade button" tabindex="0">
  <div class="visible content">Sign-up for a Pro account</div>
  <div class="hidden content">$12.99 a month</div>
</div>

Proprietatea tabindex="0" de mai sus face ca tastatura butonului să poată fi focalizată, deoarece <button>eticheta nu a fost folosită.

  • Buton etichetat

Un buton alături de o etichetă

<div class="ui labeled button" tabindex="0">
  <div class="ui button"><i class="heart icon"></i> Like</div>
  <a class="ui basic label">2,048</a>
</div>

elementul <i> este folosit pentru a specifica o pictogramă, aici este o pictogramă inimă <i class="heart icon"></i> alături de eticheta de bază <a class="ui basic label">2,048</a>

  • Buton pictogramă

Un buton UI semantic poate fi doar o pictogramă

<button class="ui icon button">
  <i class="camera icon"></i>
</button>

Cele de mai sus sunt doar o pictogramă a camerei

Grupuri

Butoanele UI semantice pot exista într-un grup

<div class="ui buttons">
  <button class="ui button">One</button>
  <button class="ui button">Two</button>
  <button class="ui button">Three</button>
</div>

Conţinut

Butoanele UI semantice pot conține condiționale

<div class="ui buttons">
  <button class="ui positive button">Yes</button>
  <div class="or" data-text="or"></div>
  <button class="ui negative button">No</button>
</div>

State

Butoanele UI semantice pot exista în diferite stări, active, disabled, loading. Pur și simplu adăugați un nume de stat la class atributof`element.

<button class="ui loading button">Loading</button>

Variații

Butoanele UI semantice există în diferite dimensiuni, mini, tiny, small, medium, large, big, huge, și massive.

<button class="ui massive button">Massive Button</button>

Există mai multe despre butoanele UI semantice, accesați linkul furnizat în secțiunea Mai multe informații pentru a afla mai multe.

Mai multe informatii: