tuix-link
Ein gestylter Anchor, der als reiner Text endet, wenn er disabled ist.
Varianten
primary ist die Markenfarbe; secondary ist weiss, für dunkle Flächen und
Bilder. Beide unterstreichen beim Hover. Einen eigenen Fokus-Stil bringt das
Element nicht mit, im Fokus greift also die Umrandung des Browsers.
Disabled
Ein deaktivierter Link ist gar kein Anchor: die Komponente rendert ein <div>,
es gibt also nichts zu fokussieren, zu hovern oder zu klicken.
Dasselbe passiert ohne href, praktisch für einen Link, dessen Ziel noch nicht
geladen ist.
Ziele
target ist standardmässig _blank.
Für Navigation innerhalb der Anwendung target="_self" setzen. Clientseitiges Routing braucht die Link-Komponente
des Routers, denn dieses Element navigiert immer vollständig.
API
Properties
| Property | Attribut | Typ | Standard | Beschreibung |
|---|---|---|---|---|
href | href | string | Keine | Ziel-URL. Ohne sie rendert der Link als Text |
target | target | LinkTarget | _blank | _blank, _self, _parent oder _top |
variant | variant | MainVariant | primary | primary ist die Markenfarbe, secondary ist weiss |
disabled | disabled | boolean | false | Rendert als inerter Text statt als Anchor |
dark | dark | boolean | false | Dunkle Palette |
Slots
| Slot | Inhalt |
|---|---|
| default | Der Linktext, gesetzt mit TextSize.Link |
Das Element feuert keine Custom Events; ein Klick auf den Anchor verhält sich nativ.
Hinweise
Der Link stellt seine Farbe als Custom Property --t-link-text-color bereit,
die ein verschachteltes tuix-text anstelle seiner
eigenen color übernimmt. Genau das hält einen Link im Absatz auf der
Linkfarbe: