45 lines
1.1 KiB
Markdown
45 lines
1.1 KiB
Markdown
import { Canvas, Meta, Story, ArgsTable } from "@storybook/addon-docs";
|
|
|
|
import {
|
|
Examples,
|
|
Example,
|
|
Note,
|
|
Title,
|
|
VariantsTable,
|
|
VariantColumn,
|
|
RowTitles,
|
|
CustomArgsTable,
|
|
} from "@calcom/storybook/components";
|
|
|
|
import { Skeleton, SkeletonAvatar, SkeletonText, SkeletonButton, SkeletonContainer } from "./";
|
|
|
|
<Meta title="UI/Skeleton" component={Skeleton} />
|
|
|
|
<Title title="Skeleton" suffix="Brief" subtitle="Version 2.0 — Last Update: 22 Aug 2022" />
|
|
|
|
## Definition
|
|
|
|
Skeletons are used as a placeholder to the content while the content is being loaded. It is used to improve the user experience by providing a visual cue that the content is loading.
|
|
|
|
## Structure
|
|
|
|
<CustomArgsTable of={Skeleton} />
|
|
|
|
<Examples title="Skeleton Avatar">
|
|
<Example title="Primary">
|
|
<SkeletonAvatar className="h-8 w-8" />
|
|
</Example>
|
|
</Examples>
|
|
|
|
<Examples title="Skeleton Text">
|
|
<Example title="Primary">
|
|
<SkeletonText className="h-4 w-32" />
|
|
</Example>
|
|
</Examples>
|
|
|
|
<Examples title="Skeleton Button">
|
|
<Example title="Primary">
|
|
<SkeletonButton className="h-8 w-32" />
|
|
</Example>
|
|
</Examples>
|