Catalog · Conținut și date
Link extern
Semnalează o destinație externă vizual și pentru tehnologii asistive.
Prezentare
Semnalează vizual și pentru tehnologiile asistive că un link duce către un domeniu diferit de cel curent.
Când se folosește
- pentru orice link care duce către un alt domeniu decât cel al site-ului curent.
Când nu se folosește
- pentru linkuri interne, chiar dacă se deschid într-un tab nou — deschiderea într-un tab nou nu e echivalentă cu „extern".
Anatomie
Modificatorul `sd-link--external` pe `<a class="sd-link sd-link--external">`, cu simbolul „↗" adăugat prin `::after`.
Variante
- n/a — e un modificator al `link`, nu o componentă vizuală separată
Stări
- aceleași ca `link`
Comportament
Simbolul „↗" e generat prin CSS (`content`) — dispare dacă stilurile nu se încarcă, de aceea textul propriu nu se bazează exclusiv pe el pentru a comunica ieșirea din site.
Reguli de conținut
- adaugă un indiciu textual explicit (de exemplu „(site extern)", vizual ascuns) — nu te baza doar pe simbolul „↗" pentru cititoarele de ecran.
Cercetare
Istoric
| Versiune | Dată | Modificare |
|---|---|---|
| 0.1.0-alpha.0 | Publicare inițială în @sistem-digital/components, ca parte a componentelor de conținut și afișare a datelor (PR #51). |
Structura completă a acestei secțiuni urmează șablonul canonic al paginii unei componente. Accesibilitatea (semantică, tastatură, focus) rămâne documentată separat, conform șablonului de accesibilitate.
Preview și markup canonic
Previzualizarea de mai jos redă exact șirul HTML afișat în exemplul de cod. Nu există o implementare paralelă pentru documentație.
Instalare și importuri
pnpm add @sistem-digital/tokens @sistem-digital/components@import '@sistem-digital/components/content.css';<a class="sd-link sd-link--external" href="https://example.org">Registrul extern<span class="sd-visually-hidden"> (site extern)</span></a>Contract și surse
Schimbarea claselor publice, a markup-ului canonic sau a comportamentului helperelor necesită versionare și instrucțiuni de migrare.
Matricea design–cod
Disponibilitatea reală a acestei componente, calculată din pachetele publicate, conform schemei matricei design–cod. Rândurile Figma, testare cu tastatura și testare cu cititor de ecran rămân „Indisponibil” până la dovezi publicate separat (kit Figma, respectiv auditul manual de accesibilitate).
| Canal | Disponibilitate |
|---|---|
| Figma | Indisponibil |
| HTML/CSS | Disponibil |
| Web Components | Indisponibil |
| React | Indisponibil |
| Documentație | Disponibil |
| Teste automate | Disponibil |
| Testare cu tastatura | Indisponibil |
| Testare cu cititor de ecran | Indisponibil |
A fost utilă această pagină?
Linkul deschide un formular GitHub precompletat. Nu transmitem nimic până când alegi să publici feedback-ul și îți recomandăm să nu incluzi date personale.