nve-skeleton

Skeletons brukes til å gi en visuell representasjon av hvor innholdet til slutt vil bli tegnet.

Arvet fra SlSkeleton.

Denne komponenten bygger på en Shoelace-komponent. Sjekk også dokumentasjonen i Shoelace for å få full oversikt over hvordan komponenten funker.

Feil / oppgaver / PR

Ingen som vi vet om. Hvis du finner noe muffens, registrer en feil under Issues i Github og merk den med nve-skeleton.

 

<nve-skeleton style="width: 80%"></nve-skeleton>

Eksempler

Effekter

Det er to innebygde effekter, glans og puls. Effekter er med vilje subtile, siden de kan være distraherende når de brukes mye. Standard er ingen, som viser et statisk, ikke-animert skjelett.

<nve-skeleton effect="none"></nve-skeleton>
None

<nve-skeleton effect="sheen"></nve-skeleton>
Sheen

<nve-skeleton effect="pulse"></nve-skeleton>
Pulse

Paragraphs

Bruk flere skjeletter og noen smarte stiler for å simulere paragraphs.

<nve-skeleton style="width:95%"></nve-skeleton>
<nve-skeleton style="width:90%"></nve-skeleton>
<nve-skeleton style="width:50%"></nve-skeleton>

Avatarer

Angi en matchende bredde og høyde for å lage et sirkel, firkantet eller avrundet avatarskjelett.

<div class="skeleton-avatars">
  <nve-skeleton></nve-skeleton>
  <nve-skeleton></nve-skeleton>
  <nve-skeleton></nve-skeleton>
</div>

<style>
  .skeleton-avatars nve-skeleton {
    display: inline-block;
    width: 3rem;
    height: 3rem;
    margin-right: 0.5rem;
  }

  .skeleton-avatars nve-skeleton:nth-child(1) {
    --border-radius: 0;
  }

  .skeleton-avatars nve-skeleton:nth-child(2) {
    --border-radius: 8px;
  }
</style>

Egenskaper

Navn	Type	Arvet fra	Beskrivelse	Reflected
testId	string | undefined = undefined
effect	'pulse' | 'sheen' | 'none' = 'none'	SlSkeleton	Determines which effect the skeleton will use.

Deler

Navn	Beskrivelse
base	The component's base wrapper.
indicator	The skeleton's indicator which is responsible for its color and animation.

Spesifikke CSS-variabler for komponent

Navn	Beskrivelse
--border-radius	The skeleton's border radius.
--color	The color of the skeleton.
--sheen-color	The sheen color when the skeleton is in its loading state.