Die Direktive nuiButton gestaltet ein natives <button> oder <a>. Das Element behält seine Semantik und sein Tastaturverhalten und nimmt weiter an Formularen teil; die Direktive überträgt nur ihre Inputs auf die Data-Attribute, die das Stylesheet anspricht.
Verwende ein <button> für Aktionen und ein <a> für die Navigation. Beide sehen gleich aus, und beide unterstützen disabled.
Varianten
Vier Füllstile, vom auffälligsten bis zum dezentesten. Verwende pro Ansicht nur einen gefüllten Button für die Hauptaktion.
Farbtöne
Der Farbton bestimmt die Palette: accent für den Hauptweg, neutral für sekundäre Aktionen, danger für destruktive.
Größen
Drei Höhen: 28, 36 und 44 Pixel. Selbst die kleinste übertrifft die Mindestzielgröße der WCAG 2.2.
Links und deaktivierte Buttons
Links lassen sich nicht nativ deaktivieren. Ein deaktivierter Link erhält daher aria-disabled="true", und seine Klicks werden blockiert, auch mit routerLink.
Druckeffekte
Halte jeden Button gedrückt. press bestimmt, was ein Button beim Gedrückthalten macht, und motion die Feder, mit der er zurückkehrt. data-nui-press auf einem beliebigen Element setzt den Effekt für alles darin.
Ecken, Radius und Dichte
corners ändert die Form der Ecken, radius ihre Größe und density den Platz, den ein Button einnimmt – ohne je unter die Mindestzielgröße von 24 px zu fallen. Browser ohne corner-shape zeichnen runde Ecken.