#ProSkeleton
This component is an internal component, please do not use it directly.
Page-level skeleton screen, does not support customization
#Installation and initialization
import Skeleton from '@ant-design/pro-skeleton';
return <Skeleton type="list" />;#DEMO
#List
import { ProSkeleton } from '@ant-design/pro-components';
export default () => (
<div
style={{
background: '#fafafa',
padding: 24,
}}
>
<ProSkeleton type="list" />
</div>
);
import { ProSkeleton } from '@ant-design/pro-components';
export default () => (
<div
style={{
background: '#fafafa',
padding: 24,
}}
>
<ProSkeleton statistic={2} type="list" />
</div>
);
#Results page
import { ProSkeleton } from '@ant-design/pro-components';
export default () => (
<div
style={{
background: '#fafafa',
padding: 24,
}}
>
<ProSkeleton type="result" />
</div>
);
#Details page
import { ProSkeleton } from '@ant-design/pro-components';
export default () => {
return (
<div
style={{
background: '#fafafa',
padding: 24,
}}
>
<ProSkeleton type="descriptions" />
</div>
);
};
#API
| parameter | description | type | default value |
|---|---|---|---|
| type | Different types of skeleton screens | 'list' | 'result' | 'descriptions' | list |
| active | Whether to show dynamic | boolean | true |
| pageHeader | Whether to display pageHeader's skeleton screen, set false to hide | false | - |
| statistic | Number of statistic skeleton screens, set false to hide, responsive when unset | number | false | - |
| list | Skeleton screen of the list, you can control the number, set false to hide | number | false | 5 |
| toolbar | Action bar skeleton screen of the list, set false to hide | false | - |
| actionButton | Action button skeleton screen of the list, set false to hide | false | - |