Jøkul OpenInNewIcon

Jøkul · Ikoner

Pakke: @fremtind/jokul

OpenInNewIcon er et Jøkul-ikon som brukeren skal forstå at navigasjonen går ut av nåværende kontekst eller åpner en ny flate.

Eksporten `OpenInNewIcon` bygger på Jøkul sin felles Icon-wrapper og bruker materialsymbol-fonten som følger med ikonstilene.

Denne eksporten rendres som nøytral linjevariant som standard, så docs-siden viser den slik komponenter normalt vil møte den i praksis.

Eksempel

OpenInNewIcon · nøytral linjevariant som standard

Skalerer med typografien

Brødtekst
Mellomtittel
Større fremheving

I kontekst

Åpne dokumentasjon i nytt vindu

Kode

React · tsx

import "@fremtind/jokul/styles/core/core.css";
import "@fremtind/jokul/styles/components/icon/icon.min.css";
import "@fremtind/jokul/styles/fonts/webfonts.min.css";
import { OpenInNewIcon } from "@fremtind/jokul/icon";

export function Example() {
    return (
        <span>
            <OpenInNewIcon aria-hidden="true" />
            <span>Åpne dokumentasjon i nytt vindu</span>
        </span>
    );
}

HTML · html

<span>
    <span class="jkl-icon" aria-hidden="true"></span>
    <span>Åpne dokumentasjon i nytt vindu</span>
</span>

Når du skal bruke OpenInNewIcon

OpenInNewIcon passer når brukeren skal forstå at navigasjonen går ut av nåværende kontekst eller åpner en ny flate.

Navigasjonsikoner bør støtte retning og forventning, men teksten rundt må fortsatt beskrive målet eller handlingen klart.

Bruk samme ikon konsekvent for samme type bevegelse, åpning eller retning.
Ikonet bør understøtte en etikett, ikke erstatte den i vanlige lenker og knapper.

Tilgjengelighet

Retningsikoner kan være nyttige for seende brukere, men kontrollen må fortsatt ha et tydelig navn.

Ikonet bør skjules fra skjermlesere når teksten allerede beskriver navigasjonen godt nok.

Skjul dekorative ikoner med `aria-hidden="true"` når teksten rundt allerede forklarer meningen.
Hvis ikonet brukes alene i en knapp eller lenke, må kontrollen få et tydelig tilgjengelig navn.

Ikonkontrakt

Felt	Verdi	Notat
Eksport	OpenInNewIcon	Navnet du importerer fra `@fremtind/jokul/icon`.
Import	@fremtind/jokul/icon	Jøkul samler ikonene i samme ikoninngang som den felles wrapperen.
Standardstil	nøytral linjevariant som standard	Det er denne varianten komponentene normalt bruker som utgangspunkt.
Typisk bruk	navigation	brukeren skal forstå at navigasjonen går ut av nåværende kontekst eller åpner en ny flate

Relatert

Installer Jøkul : Hent inn core og ikonstilene før du bruker Jøkul-ikonene lokalt.