Komponenter
Skeleton
Skeleton brukes for å vise at innhold på en side er i ferd med å lastes inn. Den gir brukeren et visuelt hint om hvordan innholdet til slutt vil se ut.
HTML
Unable to parse html
const Preview = () => { return <Skeleton width={200} height={100} />; }; render(<Preview />)
Bruk
Legg klassenavnet ds-skeleton på en <span> med aria-hidden="true".
Du endrer variant med data-variant, og tekst-varianten bruker data-text.
Du kan sette størrelse med style-attributtet eller CSS.
CSS variabler og data-attributter
Størrelser styres med data-size og farger med data-color. Komponenten vil arve nærmeste forelder med disse satt.
| Navn | Verdi |
|---|---|
| --dsc-skeleton-animation-duration | 0.8s |
| --dsc-skeleton-animation | ds-skeleton-opacity-fade var(--dsc-skeleton-animation-duration) linear infinite alternate |
| --dsc-skeleton-background | var(--ds-color-neutral-surface-tinted) |
| Navn | Verdi |
|---|---|
| data-variant | circle, text |
React
- width
- Description
The width of the component
- Type
string | number
- height
- Description
The height of the component
- Type
string | number
- variant
- Description
The shape variant
- Type
"rectangle" | "circle" | "text"- Default
rectangle
- asChild
- Description
Change the default rendered element for the one passed as a child, merging their props and behavior.
- Type
boolean- Default
false
- characters
- Description
@deprecated This prop has no effect. Use `width` or supply text as children instead
- Type
number
| Name | Type | Default | Description |
|---|---|---|---|
| width | string | number | - | The width of the component |
| height | string | number | - | The height of the component |
| variant | "rectangle" | "circle" | "text" | rectangle | The shape variant |
| asChild | boolean | false | Change the default rendered element for the one passed as a child, merging their props and behavior. |
| characters | number | - | @deprecated This prop has no effect. Use `width` or supply text as children instead |