Skeleton

Grå former som viser hvor innholdet kommer. De er alltid skjult for skjermlesere, så ventingen må meldes ett sted i tillegg. Er det ingen form å vise, eller tar ventingen kort tid, er Spinner enklere.

Slik tar du den i bruk

Eksempel

Ren HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fristil/designsystem@0.27.1/src/tokens/tokens.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fristil/designsystem@0.27.1/src/components/css/skeleton/skeleton.css">
<!-- Eller alt i én fil: https://cdn.jsdelivr.net/npm/@fristil/designsystem@0.27.1/dist/fristil.css -->

<div class="fs-skeleton" data-variant="circle" aria-hidden="true"></div>
<div class="fs-skeleton" data-variant="text" aria-hidden="true"></div>
<div class="fs-skeleton sak-siste-linje" data-variant="text" aria-hidden="true"></div>
<div class="fs-skeleton sak-bilde" aria-hidden="true"></div>

/* Dine egne klasser. De to reglene er alt som skal til. */
.sak-siste-linje {
inline-size: 70%;
}

.sak-bilde {
--fs-skeleton-height: var(--fs-spacing-12);
}

TypeScript

import "@fristil/designsystem/tokens.css"
import "@fristil/designsystem/skeleton.css"

fs brukes på to måter, og hvilken avhenger av om du lager elementet eller finner det.

Lager du markupen, sprer du attributtene inn. Det er veien i React, Astro og alt annet som rendrer:

import { fs } from "@fristil/designsystem/react"

<div {...fs.skeleton({ variant: "circle" })} />

Importen går til /react her, siden blokka er JSX. Derfra heter nøklene className og htmlFor. I Astro og alt annet uten React importerer du @fristil/designsystem og får class og for.

Har du elementet som en variabel, setter du dem på det med setAttributes. Det er veien uten JSX, enten du nettopp lagde elementet eller fant det i en side serveren sendte:

import { fs } from "@fristil/designsystem"

const linje = document.createElement("div")

fs.setAttributes(linje, fs.skeleton({ variant: "text" }))

data-variant	Brukes til
(utelatt)	Blokk, for bilder og kort
text	Én tekstlinje
circle	Profilbilde

Blokken og tekstlinjene fyller bredden de får, mens circle er like bred som den er høy. sak-siste-linje og sak-bilde er dine egne klasser, ikke Fristils, og de står i «Ren HTML»-fanen over sammen med markupen.

Sett bredden på den siste linjen til under 100 prosent. Et avsnitt der alle linjene er like lange ser ikke ut som tekst.

Ventingen må meldes ett sted

<div id="innhold" aria-busy="true">
  <p class="fs-sr-only" role="status">Henter søknadene dine</p>
  <div class="fs-skeleton" data-variant="text" aria-hidden="true"></div>
  <div class="fs-skeleton" data-variant="text" aria-hidden="true"></div>
</div>

En rekke tomme bokser som leses opp er verre enn stillhet. Derfor setter fs.skeleton() alltid aria-hidden="true", og beskjeden legges i et eget felt med role="status".

Når innholdet kommer, fjern aria-busy og tøm statusfeltet.

Klasser du kan style

Klasse	Hva det er
.fs-skeleton	Plassholderen. Formen kommer fra data-variant.

Variabel	Standard
--fs-skeleton-height	var(--fs-spacing-4), og var(--fs-spacing-10) i circle, der den også gir bredden. text leser den ikke: der kommer høyden fra --font-size-m
--fs-skeleton-radius	var(--fs-spacing-1)

Skimmeret er en gradient som beveger seg over flaten, ikke en gjennomsiktighet som pulserer, så kontrasten mot sideflaten er den samme hele veien. Har brukeren bedt om mindre bevegelse, står flaten stille.

Se Tilpasning for hvordan variablene og laget virker.

Tilgjengelighet

• Formene skal ligne på det som kommer. En plassholder som er tre linjer der resultatet er tjue, gjør siden urolig når innholdet lander.
• Vent litt før du viser dem, som med en venteindikator. Et glimt av grå bokser er mer forstyrrende enn en kort pause.
• Ikke la dem bli stående hvis noe feiler. Da venter brukeren på noe som aldri kommer. Bytt til en Alert med hva som gikk galt.