Skip to content

Demos

Input with Skeleton

<Input label="Input" skeleton />

Toggle skeleton on/off

Heading

Paragraph Non habitasse ut nisi dictum laoreet ridiculus dui.

const UserData = () => {
const [state, setState] = React.useState(true)
return (
<Skeleton show={state}>
<H2 top bottom>
Heading
</H2>
<P top bottom>
Paragraph Non habitasse ut nisi dictum laoreet ridiculus dui.
</P>
<Input label_direction="vertical" label="Input" />
<Skeleton.Exclude>
<ToggleButton
checked={state}
on_change={({ checked }) => setState(checked)}
top="large"
>
Toggle
</ToggleButton>
</Skeleton.Exclude>
</Skeleton>
)
}
render(<UserData />)

Skeleton wrapper

Heading

Paragraph Non habitasse ut nisi dictum laoreet ridiculus dui.

<Skeleton show>
<H2 top bottom>
Heading
</H2>
<P top bottom>
Paragraph Non habitasse ut nisi dictum laoreet ridiculus dui.
</P>
<Button>Button</Button>
</Skeleton>

Skeleton using Eufemia Provider

You can also use FormRow={{ skeleton: true }}.

Heading

Paragraph Non habitasse ut nisi dictum laoreet ridiculus dui.

<Provider skeleton={true}>
<H2 top bottom>
Heading
</H2>
<P top bottom>
Paragraph Non habitasse ut nisi dictum laoreet ridiculus dui.
</P>
<Button>Button</Button>
</Provider>

Skeleton figures

You may import a given figure, or create your own.

import { Article } from '@dnb/eufemia/components/skeleton/figures'
<Skeleton show figure={<Article rows={5} />}>
hidden content
</Skeleton>