Skip to content
Home

Skeleton

Info
Demos
Properties

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>