1.2.0 • Published 24 days ago
@leafygreen-ui/skeleton-loader v1.2.0
Skeleton Loader
View on MongoDB.design
Installation
Yarn
yarn add @leafygreen-ui/skeleton-loaderNPM
npm install @leafygreen-ui/skeleton-loaderExample
<ParagraphSkeleton />
<ParagraphSkeleton withHeader />
<FormSkeleton />
<CardSkeleton />
<TableSkeleton columnLabels={['Column 1', 'Column 2']} />Properties
Skeleton
| Name | Type | Default | Description |
|---|---|---|---|
size | string | default | Determines the height of the skeleton |
HTML div props | Additional HTML div properties |
Paragraph Skeleton
| Name | Type | Default | Description |
|---|---|---|---|
withHeader | boolean | false | Indicates whether the header skeleton should be rendered |
HTML div props | Additional HTML div properties |
Table Skeleton
| Name | Type | Default | Description |
|---|---|---|---|
columnLabels | Array<string> | Column labels. Empty strings will be treated as unknown and render a simple skeleton. | |
numRows | number | 5 | Number of rows |
numCols | number | 4 | Number of columns |
baseFontSize | 13 \| 16 | 13 | Base font size |
HTML div props | Additional HTML div properties |
Form Skeleton
<FormSkeleton /> only extends HTML div props.
Card Skeleton
<CardSkeleton /> only extends HTML div props.