Hopp til innhold
Aksel
  • God praksis
  • Grunnleggende
  • Ikoner
  • Komponenter
  • Bloggen

Meny

  • God praksis
  • Grunnleggende
  • Ikoner
  • Komponenter
  • Blogg
    • Kom i gang med kodepakkene
    • Kom i gang med Figma
    • Samarbeid og bidrag
    • Versjonering i Figma
    • Design tokens
    • Farger
    • Brekkpunkter
    • Typografi
    • Endringslogg
    • Migrering
    • CSS import
    • Kommandolinje
    • Stylelint
    • Tailwind
    • OverridableComponent
Grunnleggende / Introduksjon

Kom i gang med kodepakkene

Oppdatert 7. september 2023Stabil

    Installer

    tipsTips

    Aksels pakker finner man på både NPM og GPR. Vi anbefaler team å bruke GPR om mulig. Får du 401-error ved installering kan det være lurt å sjekke token i `.npmrc`

    Bruk

    Alle React-komponentene er tree-shakable, slik at du bare inkluderer den koden du trenger.

    API

    Alle komponentene er implementert med React forwardRef. Dette lar deg sende en ref som prop dersom du ønsker egen logikk på dom-elementet.

    De fleste komponenter utvider typen til det underliggende HTML-elementet de benytter. Flere komponenter bruker også OverridableComponent.

    Styling

    Komponentstyling er ikke integrert i React-koden. Du må selv importere `@navikt/ds-css` i prosjektet ditt manuelt. Stylingen er ikke auto-prefikset, slik at det er prosjektet ditt sitt ansvar å løse ved hjelp av f.eks. `PostCSS og Autoprefikser`. De fleste bundlere løser dette for deg.

    Pakken `@navikt/ds-css` inneholder all komponentstyling, fonter, ulike CSS-resets, print, CSS-variablene våre fra `@navikt/ds-tokens` og normalize.css v8.

    NyheterRelevante lenker

    • Avansert CSS-import
    • Tailwind-config
    • Bruke tokens

    Stylelint

    Vi anbefaler alle å ta i bruk stylelint-konfigurasjonen vår. Den lar deg sikre at tokens og styling fra Aksel fungerer som forventet.

    Fontlasting

    Fonten vi benytter blir lastet fra CDN, slik at du må gjøre noen tilpasninger i løsningen din.

    Vi angir `font-display: swap`, som medfører at en erstatningsfont vil bli lastet dersom den fonten ikke hentes raskt nok. For å unngå FOUT anbefales det å legge til en link-tag med preload i document-head. Du kan lese mer om dette i denne demoen.

    Det er også nødvendig å oppdatere content security policy for å tillate font-src fra `cdn.nav.no`.

    Ikoner

    Ikonpakken vår inneholder totalt 800+ ikoner i stroke og fill versjon. Disse kan benyttes som separate React-komponenter eller direkte som SVG-er etter behov.

    NyheterRelevante lenker

    • Ikonsøk

    Både width og height er satt til `1em` på ikonene. Dette gjør det enkelt å plassere ikonene inline med tekst, men det er nødvendig å justere størrelsen selv ved behov. Vi anbefaler hovedsakelig å bruke 24px ikoner der det er mulig, da ikonene er designet for denne størrelsen.

    Vi anbefaler også å bruke `title`-attributtet der det er mulig, fremfor aria-label, ettersom dette gir en bedre opplevelse for skjermleserbrukere.

    © 2023 NAV

    Arbeids- og velferdsetaten

    Snarveier

    • Skriv for Aksel
    • Prinsipper for brukeropplevelse
    • Security Playbook
    • Etterlevelse

    Om nettstedet

    • Hva er Aksel?
    • Personvernerklæring
    • Tilgjengelighetserklæring

    Finn oss

    • Figma
    • Github
    • Slack