You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
250 lines
25 KiB
250 lines
25 KiB
"use strict";(self.webpackChunkantd=self.webpackChunkantd||[]).push([[1527],{131257:function(_,a,n){n.r(a);var p=n(502143),m=n(968521),v=n(720719),h=n(28840),g=n(759907),o=n(828089),Z=n(825673),k=n(902068),b=n(574399),f=n(863942),x=n(316073),S=n(24628),E=n(719260),P=n(956140),i=n(127179),c=n(905388),D=n(40428),y=n(606965),I=n(268696),A=n(587302),l=n(424128),C=n(249706),B=n(795127),O=n(116846),R=n(212039),M=n(73024),T=n(553913),r=n(606641),s=n(667294),e=n(370917);function u(){var d=(0,r.eL)(),t=d.texts;return(0,e.tZ)(r.dY,null,(0,e.tZ)(s.Fragment,null,(0,e.tZ)("div",{className:"markdown"},(0,e.tZ)("p",null,t[0].value),(0,e.tZ)("h2",{id:"when-to-use"},(0,e.tZ)(l.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#when-to-use",sourceType:"a"},(0,e.tZ)("span",{className:"icon icon-link"})),"When To Use"),(0,e.tZ)("ul",null,(0,e.tZ)("li",null,t[1].value),(0,e.tZ)("li",null,t[2].value),(0,e.tZ)("li",null,t[3].value),(0,e.tZ)("li",null,t[4].value)),(0,e.tZ)("h2",{id:"examples"},(0,e.tZ)(l.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#examples",sourceType:"a"},(0,e.tZ)("span",{className:"icon icon-link"})),"Examples")),(0,e.tZ)(c.Z,{items:[{demo:{id:"components-skeleton-demo-basic"},previewerProps:{title:"Basic",filename:"components/skeleton/demo/basic.tsx",pkgDependencyList:{"@ant-design/colors":"^7.0.0","@ant-design/cssinjs":"^1.10.1","@ant-design/icons":"^5.1.0","@ant-design/react-slick":"~1.0.0","@babel/runtime":"^7.18.3","@ctrl/tinycolor":"^3.6.0","@rc-component/color-picker":"~1.4.0","@rc-component/mutate-observer":"^1.0.0","@rc-component/tour":"~1.8.0","@rc-component/trigger":"^1.13.0",classnames:"^2.2.6","copy-to-clipboard":"^3.2.0",dayjs:"^1.11.1","qrcode.react":"^3.1.0","rc-cascader":"~3.12.0","rc-checkbox":"~3.1.0","rc-collapse":"~3.7.0","rc-dialog":"~9.1.0","rc-drawer":"~6.2.0","rc-dropdown":"~4.1.0","rc-field-form":"~1.34.0","rc-image":"~7.0.0","rc-input":"~1.1.0","rc-input-number":"~8.0.2","rc-mentions":"~2.5.0","rc-menu":"~9.10.0","rc-motion":"^2.7.3","rc-notification":"~5.0.4","rc-pagination":"~3.5.0","rc-picker":"~3.10.0","rc-progress":"~3.4.1","rc-rate":"~2.12.0","rc-resize-observer":"^1.2.0","rc-segmented":"~2.2.0","rc-select":"~14.5.0","rc-slider":"~10.1.0","rc-steps":"~6.0.0","rc-switch":"~4.1.0","rc-table":"~7.32.1","rc-tabs":"~12.9.0","rc-textarea":"~1.3.2","rc-tooltip":"~6.0.0","rc-tree":"~5.7.6","rc-tree-select":"~5.9.0","rc-upload":"~4.3.0","rc-util":"^5.32.0","scroll-into-view-if-needed":"^3.0.3","throttle-debounce":"^5.0.0"},jsx:`import React from 'react';
|
|
import { Skeleton } from 'antd';
|
|
const App = () => <Skeleton />;
|
|
export default App;
|
|
`,description:"<p>Simplest Skeleton usage.</p>"}},{demo:{id:"components-skeleton-demo-complex"},previewerProps:{title:"Complex combination",filename:"components/skeleton/demo/complex.tsx",pkgDependencyList:{"@ant-design/colors":"^7.0.0","@ant-design/cssinjs":"^1.10.1","@ant-design/icons":"^5.1.0","@ant-design/react-slick":"~1.0.0","@babel/runtime":"^7.18.3","@ctrl/tinycolor":"^3.6.0","@rc-component/color-picker":"~1.4.0","@rc-component/mutate-observer":"^1.0.0","@rc-component/tour":"~1.8.0","@rc-component/trigger":"^1.13.0",classnames:"^2.2.6","copy-to-clipboard":"^3.2.0",dayjs:"^1.11.1","qrcode.react":"^3.1.0","rc-cascader":"~3.12.0","rc-checkbox":"~3.1.0","rc-collapse":"~3.7.0","rc-dialog":"~9.1.0","rc-drawer":"~6.2.0","rc-dropdown":"~4.1.0","rc-field-form":"~1.34.0","rc-image":"~7.0.0","rc-input":"~1.1.0","rc-input-number":"~8.0.2","rc-mentions":"~2.5.0","rc-menu":"~9.10.0","rc-motion":"^2.7.3","rc-notification":"~5.0.4","rc-pagination":"~3.5.0","rc-picker":"~3.10.0","rc-progress":"~3.4.1","rc-rate":"~2.12.0","rc-resize-observer":"^1.2.0","rc-segmented":"~2.2.0","rc-select":"~14.5.0","rc-slider":"~10.1.0","rc-steps":"~6.0.0","rc-switch":"~4.1.0","rc-table":"~7.32.1","rc-tabs":"~12.9.0","rc-textarea":"~1.3.2","rc-tooltip":"~6.0.0","rc-tree":"~5.7.6","rc-tree-select":"~5.9.0","rc-upload":"~4.3.0","rc-util":"^5.32.0","scroll-into-view-if-needed":"^3.0.3","throttle-debounce":"^5.0.0"},jsx:`import React from 'react';
|
|
import { Skeleton } from 'antd';
|
|
const App = () => (
|
|
<Skeleton
|
|
avatar
|
|
paragraph={{
|
|
rows: 4,
|
|
}}
|
|
/>
|
|
);
|
|
export default App;
|
|
`,description:"<p>Complex combination with avatar and multiple paragraphs.</p>"}},{demo:{id:"components-skeleton-demo-active"},previewerProps:{title:"Active Animation",filename:"components/skeleton/demo/active.tsx",pkgDependencyList:{"@ant-design/colors":"^7.0.0","@ant-design/cssinjs":"^1.10.1","@ant-design/icons":"^5.1.0","@ant-design/react-slick":"~1.0.0","@babel/runtime":"^7.18.3","@ctrl/tinycolor":"^3.6.0","@rc-component/color-picker":"~1.4.0","@rc-component/mutate-observer":"^1.0.0","@rc-component/tour":"~1.8.0","@rc-component/trigger":"^1.13.0",classnames:"^2.2.6","copy-to-clipboard":"^3.2.0",dayjs:"^1.11.1","qrcode.react":"^3.1.0","rc-cascader":"~3.12.0","rc-checkbox":"~3.1.0","rc-collapse":"~3.7.0","rc-dialog":"~9.1.0","rc-drawer":"~6.2.0","rc-dropdown":"~4.1.0","rc-field-form":"~1.34.0","rc-image":"~7.0.0","rc-input":"~1.1.0","rc-input-number":"~8.0.2","rc-mentions":"~2.5.0","rc-menu":"~9.10.0","rc-motion":"^2.7.3","rc-notification":"~5.0.4","rc-pagination":"~3.5.0","rc-picker":"~3.10.0","rc-progress":"~3.4.1","rc-rate":"~2.12.0","rc-resize-observer":"^1.2.0","rc-segmented":"~2.2.0","rc-select":"~14.5.0","rc-slider":"~10.1.0","rc-steps":"~6.0.0","rc-switch":"~4.1.0","rc-table":"~7.32.1","rc-tabs":"~12.9.0","rc-textarea":"~1.3.2","rc-tooltip":"~6.0.0","rc-tree":"~5.7.6","rc-tree-select":"~5.9.0","rc-upload":"~4.3.0","rc-util":"^5.32.0","scroll-into-view-if-needed":"^3.0.3","throttle-debounce":"^5.0.0"},jsx:`import React from 'react';
|
|
import { Skeleton } from 'antd';
|
|
const App = () => <Skeleton active />;
|
|
export default App;
|
|
`,description:"<p>Display active animation.</p>"}},{demo:{id:"components-skeleton-demo-element"},previewerProps:{title:"Button/Avatar/Input/Image/Node",filename:"components/skeleton/demo/element.tsx",pkgDependencyList:{"@ant-design/colors":"^7.0.0","@ant-design/cssinjs":"^1.10.1","@ant-design/icons":"^5.1.0","@ant-design/react-slick":"~1.0.0","@babel/runtime":"^7.18.3","@ctrl/tinycolor":"^3.6.0","@rc-component/color-picker":"~1.4.0","@rc-component/mutate-observer":"^1.0.0","@rc-component/tour":"~1.8.0","@rc-component/trigger":"^1.13.0",classnames:"^2.2.6","copy-to-clipboard":"^3.2.0",dayjs:"^1.11.1","qrcode.react":"^3.1.0","rc-cascader":"~3.12.0","rc-checkbox":"~3.1.0","rc-collapse":"~3.7.0","rc-dialog":"~9.1.0","rc-drawer":"~6.2.0","rc-dropdown":"~4.1.0","rc-field-form":"~1.34.0","rc-image":"~7.0.0","rc-input":"~1.1.0","rc-input-number":"~8.0.2","rc-mentions":"~2.5.0","rc-menu":"~9.10.0","rc-motion":"^2.7.3","rc-notification":"~5.0.4","rc-pagination":"~3.5.0","rc-picker":"~3.10.0","rc-progress":"~3.4.1","rc-rate":"~2.12.0","rc-resize-observer":"^1.2.0","rc-segmented":"~2.2.0","rc-select":"~14.5.0","rc-slider":"~10.1.0","rc-steps":"~6.0.0","rc-switch":"~4.1.0","rc-table":"~7.32.1","rc-tabs":"~12.9.0","rc-textarea":"~1.3.2","rc-tooltip":"~6.0.0","rc-tree":"~5.7.6","rc-tree-select":"~5.9.0","rc-upload":"~4.3.0","rc-util":"^5.32.0","scroll-into-view-if-needed":"^3.0.3","throttle-debounce":"^5.0.0"},jsx:`import { DotChartOutlined } from '@ant-design/icons';
|
|
import { Divider, Form, Radio, Skeleton, Space, Switch } from 'antd';
|
|
import React, { useState } from 'react';
|
|
const App = () => {
|
|
const [active, setActive] = useState(false);
|
|
const [block, setBlock] = useState(false);
|
|
const [size, setSize] = useState('default');
|
|
const [buttonShape, setButtonShape] = useState('default');
|
|
const [avatarShape, setAvatarShape] = useState('circle');
|
|
const handleActiveChange = (checked) => {
|
|
setActive(checked);
|
|
};
|
|
const handleBlockChange = (checked) => {
|
|
setBlock(checked);
|
|
};
|
|
const handleSizeChange = (e) => {
|
|
setSize(e.target.value);
|
|
};
|
|
const handleShapeButton = (e) => {
|
|
setButtonShape(e.target.value);
|
|
};
|
|
const handleAvatarShape = (e) => {
|
|
setAvatarShape(e.target.value);
|
|
};
|
|
return (
|
|
<>
|
|
<Space>
|
|
<Skeleton.Button active={active} size={size} shape={buttonShape} block={block} />
|
|
<Skeleton.Avatar active={active} size={size} shape={avatarShape} />
|
|
<Skeleton.Input active={active} size={size} />
|
|
</Space>
|
|
<br />
|
|
<br />
|
|
<Skeleton.Button active={active} size={size} shape={buttonShape} block={block} />
|
|
<br />
|
|
<br />
|
|
<Skeleton.Input active={active} size={size} block={block} />
|
|
<br />
|
|
<br />
|
|
<Space>
|
|
<Skeleton.Image active={active} />
|
|
<Skeleton.Node active={active}>
|
|
<DotChartOutlined
|
|
style={{
|
|
fontSize: 40,
|
|
color: '#bfbfbf',
|
|
}}
|
|
/>
|
|
</Skeleton.Node>
|
|
</Space>
|
|
<Divider />
|
|
<Form
|
|
layout="inline"
|
|
style={{
|
|
margin: '16px 0',
|
|
}}
|
|
>
|
|
<Space size={16} wrap>
|
|
<Form.Item label="Active">
|
|
<Switch checked={active} onChange={handleActiveChange} />
|
|
</Form.Item>
|
|
<Form.Item label="Button and Input Block">
|
|
<Switch checked={block} onChange={handleBlockChange} />
|
|
</Form.Item>
|
|
<Form.Item label="Size">
|
|
<Radio.Group value={size} onChange={handleSizeChange}>
|
|
<Radio.Button value="default">Default</Radio.Button>
|
|
<Radio.Button value="large">Large</Radio.Button>
|
|
<Radio.Button value="small">Small</Radio.Button>
|
|
</Radio.Group>
|
|
</Form.Item>
|
|
<Form.Item label="Button Shape">
|
|
<Radio.Group value={buttonShape} onChange={handleShapeButton}>
|
|
<Radio.Button value="default">Default</Radio.Button>
|
|
<Radio.Button value="square">Square</Radio.Button>
|
|
<Radio.Button value="round">Round</Radio.Button>
|
|
<Radio.Button value="circle">Circle</Radio.Button>
|
|
</Radio.Group>
|
|
</Form.Item>
|
|
<Form.Item label="Avatar Shape">
|
|
<Radio.Group value={avatarShape} onChange={handleAvatarShape}>
|
|
<Radio.Button value="square">Square</Radio.Button>
|
|
<Radio.Button value="circle">Circle</Radio.Button>
|
|
</Radio.Group>
|
|
</Form.Item>
|
|
</Space>
|
|
</Form>
|
|
</>
|
|
);
|
|
};
|
|
export default App;
|
|
`,description:"<p>Skeleton Button, Avatar, Input, Image and Node.</p>"}},{demo:{id:"components-skeleton-demo-children"},previewerProps:{title:"Contains sub component",filename:"components/skeleton/demo/children.tsx",pkgDependencyList:{"@ant-design/colors":"^7.0.0","@ant-design/cssinjs":"^1.10.1","@ant-design/icons":"^5.1.0","@ant-design/react-slick":"~1.0.0","@babel/runtime":"^7.18.3","@ctrl/tinycolor":"^3.6.0","@rc-component/color-picker":"~1.4.0","@rc-component/mutate-observer":"^1.0.0","@rc-component/tour":"~1.8.0","@rc-component/trigger":"^1.13.0",classnames:"^2.2.6","copy-to-clipboard":"^3.2.0",dayjs:"^1.11.1","qrcode.react":"^3.1.0","rc-cascader":"~3.12.0","rc-checkbox":"~3.1.0","rc-collapse":"~3.7.0","rc-dialog":"~9.1.0","rc-drawer":"~6.2.0","rc-dropdown":"~4.1.0","rc-field-form":"~1.34.0","rc-image":"~7.0.0","rc-input":"~1.1.0","rc-input-number":"~8.0.2","rc-mentions":"~2.5.0","rc-menu":"~9.10.0","rc-motion":"^2.7.3","rc-notification":"~5.0.4","rc-pagination":"~3.5.0","rc-picker":"~3.10.0","rc-progress":"~3.4.1","rc-rate":"~2.12.0","rc-resize-observer":"^1.2.0","rc-segmented":"~2.2.0","rc-select":"~14.5.0","rc-slider":"~10.1.0","rc-steps":"~6.0.0","rc-switch":"~4.1.0","rc-table":"~7.32.1","rc-tabs":"~12.9.0","rc-textarea":"~1.3.2","rc-tooltip":"~6.0.0","rc-tree":"~5.7.6","rc-tree-select":"~5.9.0","rc-upload":"~4.3.0","rc-util":"^5.32.0","scroll-into-view-if-needed":"^3.0.3","throttle-debounce":"^5.0.0"},jsx:`import { Button, Skeleton, Space } from 'antd';
|
|
import React, { useState } from 'react';
|
|
const App = () => {
|
|
const [loading, setLoading] = useState(false);
|
|
const showSkeleton = () => {
|
|
setLoading(true);
|
|
setTimeout(() => {
|
|
setLoading(false);
|
|
}, 3000);
|
|
};
|
|
return (
|
|
<Space
|
|
direction="vertical"
|
|
style={{
|
|
width: '100%',
|
|
}}
|
|
size={16}
|
|
>
|
|
<Skeleton loading={loading}>
|
|
<h4
|
|
style={{
|
|
marginBottom: 16,
|
|
}}
|
|
>
|
|
Ant Design, a design language
|
|
</h4>
|
|
<p>
|
|
We supply a series of design principles, practical patterns and high quality design
|
|
resources (Sketch and Axure), to help people create their product prototypes beautifully
|
|
and efficiently.
|
|
</p>
|
|
</Skeleton>
|
|
<Button onClick={showSkeleton} disabled={loading}>
|
|
Show Skeleton
|
|
</Button>
|
|
</Space>
|
|
);
|
|
};
|
|
export default App;
|
|
`,description:"<p>Skeleton contains sub component.</p>"}},{demo:{id:"components-skeleton-demo-list"},previewerProps:{title:"List",filename:"components/skeleton/demo/list.tsx",pkgDependencyList:{"@ant-design/colors":"^7.0.0","@ant-design/cssinjs":"^1.10.1","@ant-design/icons":"^5.1.0","@ant-design/react-slick":"~1.0.0","@babel/runtime":"^7.18.3","@ctrl/tinycolor":"^3.6.0","@rc-component/color-picker":"~1.4.0","@rc-component/mutate-observer":"^1.0.0","@rc-component/tour":"~1.8.0","@rc-component/trigger":"^1.13.0",classnames:"^2.2.6","copy-to-clipboard":"^3.2.0",dayjs:"^1.11.1","qrcode.react":"^3.1.0","rc-cascader":"~3.12.0","rc-checkbox":"~3.1.0","rc-collapse":"~3.7.0","rc-dialog":"~9.1.0","rc-drawer":"~6.2.0","rc-dropdown":"~4.1.0","rc-field-form":"~1.34.0","rc-image":"~7.0.0","rc-input":"~1.1.0","rc-input-number":"~8.0.2","rc-mentions":"~2.5.0","rc-menu":"~9.10.0","rc-motion":"^2.7.3","rc-notification":"~5.0.4","rc-pagination":"~3.5.0","rc-picker":"~3.10.0","rc-progress":"~3.4.1","rc-rate":"~2.12.0","rc-resize-observer":"^1.2.0","rc-segmented":"~2.2.0","rc-select":"~14.5.0","rc-slider":"~10.1.0","rc-steps":"~6.0.0","rc-switch":"~4.1.0","rc-table":"~7.32.1","rc-tabs":"~12.9.0","rc-textarea":"~1.3.2","rc-tooltip":"~6.0.0","rc-tree":"~5.7.6","rc-tree-select":"~5.9.0","rc-upload":"~4.3.0","rc-util":"^5.32.0","scroll-into-view-if-needed":"^3.0.3","throttle-debounce":"^5.0.0"},jsx:`import { LikeOutlined, MessageOutlined, StarOutlined } from '@ant-design/icons';
|
|
import { Avatar, List, Skeleton, Switch } from 'antd';
|
|
import React, { useState } from 'react';
|
|
const listData = Array.from({
|
|
length: 3,
|
|
}).map((_, i) => ({
|
|
href: 'https://ant.design',
|
|
title: \`ant design part \${i + 1}\`,
|
|
avatar: \`https://xsgames.co/randomusers/avatar.php?g=pixel&key=\${i}\`,
|
|
description:
|
|
'Ant Design, a design language for background applications, is refined by Ant UED Team.',
|
|
content:
|
|
'We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create their product prototypes beautifully and efficiently.',
|
|
}));
|
|
const IconText = ({ icon, text }) => (
|
|
<>
|
|
{React.createElement(icon, {
|
|
style: {
|
|
marginRight: 8,
|
|
},
|
|
})}
|
|
{text}
|
|
</>
|
|
);
|
|
const App = () => {
|
|
const [loading, setLoading] = useState(true);
|
|
const onChange = (checked) => {
|
|
setLoading(!checked);
|
|
};
|
|
return (
|
|
<>
|
|
<Switch
|
|
checked={!loading}
|
|
onChange={onChange}
|
|
style={{
|
|
marginBottom: 16,
|
|
}}
|
|
/>
|
|
<List
|
|
itemLayout="vertical"
|
|
size="large"
|
|
dataSource={listData}
|
|
renderItem={(item) => (
|
|
<List.Item
|
|
key={item.title}
|
|
actions={
|
|
!loading
|
|
? [
|
|
<IconText icon={StarOutlined} text="156" key="list-vertical-star-o" />,
|
|
<IconText icon={LikeOutlined} text="156" key="list-vertical-like-o" />,
|
|
<IconText icon={MessageOutlined} text="2" key="list-vertical-message" />,
|
|
]
|
|
: undefined
|
|
}
|
|
extra={
|
|
!loading && (
|
|
<img
|
|
width={272}
|
|
alt="logo"
|
|
src="https://gw.alipayobjects.com/zos/rmsportal/mqaQswcyDLcXyDKnZfES.png"
|
|
/>
|
|
)
|
|
}
|
|
>
|
|
<Skeleton loading={loading} active avatar>
|
|
<List.Item.Meta
|
|
avatar={<Avatar src={item.avatar} />}
|
|
title={<a href={item.href}>{item.title}</a>}
|
|
description={item.description}
|
|
/>
|
|
{item.content}
|
|
</Skeleton>
|
|
</List.Item>
|
|
)}
|
|
/>
|
|
</>
|
|
);
|
|
};
|
|
export default App;
|
|
`,description:"<p>Use skeleton in list component.</p>"}},{demo:{id:"components-skeleton-demo-componenttoken"},previewerProps:{debug:!0,title:"Custom component token",filename:"components/skeleton/demo/componentToken.tsx",pkgDependencyList:{"@ant-design/colors":"^7.0.0","@ant-design/cssinjs":"^1.10.1","@ant-design/icons":"^5.1.0","@ant-design/react-slick":"~1.0.0","@babel/runtime":"^7.18.3","@ctrl/tinycolor":"^3.6.0","@rc-component/color-picker":"~1.4.0","@rc-component/mutate-observer":"^1.0.0","@rc-component/tour":"~1.8.0","@rc-component/trigger":"^1.13.0",classnames:"^2.2.6","copy-to-clipboard":"^3.2.0",dayjs:"^1.11.1","qrcode.react":"^3.1.0","rc-cascader":"~3.12.0","rc-checkbox":"~3.1.0","rc-collapse":"~3.7.0","rc-dialog":"~9.1.0","rc-drawer":"~6.2.0","rc-dropdown":"~4.1.0","rc-field-form":"~1.34.0","rc-image":"~7.0.0","rc-input":"~1.1.0","rc-input-number":"~8.0.2","rc-mentions":"~2.5.0","rc-menu":"~9.10.0","rc-motion":"^2.7.3","rc-notification":"~5.0.4","rc-pagination":"~3.5.0","rc-picker":"~3.10.0","rc-progress":"~3.4.1","rc-rate":"~2.12.0","rc-resize-observer":"^1.2.0","rc-segmented":"~2.2.0","rc-select":"~14.5.0","rc-slider":"~10.1.0","rc-steps":"~6.0.0","rc-switch":"~4.1.0","rc-table":"~7.32.1","rc-tabs":"~12.9.0","rc-textarea":"~1.3.2","rc-tooltip":"~6.0.0","rc-tree":"~5.7.6","rc-tree-select":"~5.9.0","rc-upload":"~4.3.0","rc-util":"^5.32.0","scroll-into-view-if-needed":"^3.0.3","throttle-debounce":"^5.0.0"},jsx:`import { ConfigProvider, Skeleton } from 'antd';
|
|
import React from 'react';
|
|
const App = () => (
|
|
<ConfigProvider
|
|
theme={{
|
|
components: {
|
|
Skeleton: {
|
|
blockRadius: 30,
|
|
titleHeight: 50,
|
|
gradientFromColor: '#222',
|
|
gradientToColor: '#444',
|
|
paragraphMarginTop: 30,
|
|
paragraphLiHeight: 30,
|
|
},
|
|
},
|
|
}}
|
|
>
|
|
<Skeleton loading active />
|
|
</ConfigProvider>
|
|
);
|
|
export default App;
|
|
`,description:"<p>Custom component token.</p>"}}]}),(0,e.tZ)("div",{className:"markdown"},(0,e.tZ)("h2",{id:"api"},(0,e.tZ)(l.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#api",sourceType:"a"},(0,e.tZ)("span",{className:"icon icon-link"})),"API"),(0,e.tZ)("h3",{id:"skeleton"},(0,e.tZ)(l.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#skeleton",sourceType:"a"},(0,e.tZ)("span",{className:"icon icon-link"})),"Skeleton"),(0,e.tZ)(o.Z,{className:"component-api-table"},(0,e.tZ)("thead",null,(0,e.tZ)("tr",null,(0,e.tZ)("th",null,t[5].value),(0,e.tZ)("th",null,t[6].value),(0,e.tZ)("th",null,t[7].value),(0,e.tZ)("th",null,t[8].value))),(0,e.tZ)("tbody",null,(0,e.tZ)("tr",null,(0,e.tZ)("td",null,t[9].value),(0,e.tZ)("td",null,t[10].value),(0,e.tZ)("td",null,t[11].value),(0,e.tZ)("td",null,t[12].value)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,t[13].value),(0,e.tZ)("td",null,t[14].value),(0,e.tZ)("td",null,t[15].value,(0,e.tZ)(l.Z,{to:"#skeletonavatarprops",sourceType:"Link"},t[16].value)),(0,e.tZ)("td",null,t[17].value)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,t[18].value),(0,e.tZ)("td",null,t[19].value),(0,e.tZ)("td",null,t[20].value),(0,e.tZ)("td",null,t[21].value)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,t[22].value),(0,e.tZ)("td",null,t[23].value),(0,e.tZ)("td",null,t[24].value,(0,e.tZ)(l.Z,{to:"#skeletonparagraphprops",sourceType:"Link"},t[25].value)),(0,e.tZ)("td",null,t[26].value)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,t[27].value),(0,e.tZ)("td",null,t[28].value),(0,e.tZ)("td",null,t[29].value),(0,e.tZ)("td",null,t[30].value)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,t[31].value),(0,e.tZ)("td",null,t[32].value),(0,e.tZ)("td",null,t[33].value,(0,e.tZ)(l.Z,{to:"#skeletontitleprops",sourceType:"Link"},t[34].value)),(0,e.tZ)("td",null,t[35].value)))),(0,e.tZ)("h3",{id:"skeletonavatarprops"},(0,e.tZ)(l.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#skeletonavatarprops",sourceType:"a"},(0,e.tZ)("span",{className:"icon icon-link"})),"SkeletonAvatarProps"),(0,e.tZ)(o.Z,{className:"component-api-table"},(0,e.tZ)("thead",null,(0,e.tZ)("tr",null,(0,e.tZ)("th",null,t[36].value),(0,e.tZ)("th",null,t[37].value),(0,e.tZ)("th",null,t[38].value),(0,e.tZ)("th",null,t[39].value))),(0,e.tZ)("tbody",null,(0,e.tZ)("tr",null,(0,e.tZ)("td",null,t[40].value),(0,e.tZ)("td",null,t[41].value),(0,e.tZ)("td",null,t[42].value),(0,e.tZ)("td",null,t[43].value)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,t[44].value),(0,e.tZ)("td",null,t[45].value),(0,e.tZ)("td",null,(0,e.tZ)("code",null,t[46].value),t[47].value,(0,e.tZ)("code",null,t[48].value)),(0,e.tZ)("td",null,t[49].value)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,t[50].value),(0,e.tZ)("td",null,t[51].value),(0,e.tZ)("td",null,t[52].value,(0,e.tZ)("code",null,t[53].value),t[54].value,(0,e.tZ)("code",null,t[55].value),t[56].value,(0,e.tZ)("code",null,t[57].value)),(0,e.tZ)("td",null,t[58].value)))),(0,e.tZ)("h3",{id:"skeletontitleprops"},(0,e.tZ)(l.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#skeletontitleprops",sourceType:"a"},(0,e.tZ)("span",{className:"icon icon-link"})),"SkeletonTitleProps"),(0,e.tZ)(o.Z,{className:"component-api-table"},(0,e.tZ)("thead",null,(0,e.tZ)("tr",null,(0,e.tZ)("th",null,t[59].value),(0,e.tZ)("th",null,t[60].value),(0,e.tZ)("th",null,t[61].value),(0,e.tZ)("th",null,t[62].value))),(0,e.tZ)("tbody",null,(0,e.tZ)("tr",null,(0,e.tZ)("td",null,t[63].value),(0,e.tZ)("td",null,t[64].value),(0,e.tZ)("td",null,t[65].value),(0,e.tZ)("td",null,t[66].value)))),(0,e.tZ)("h3",{id:"skeletonparagraphprops"},(0,e.tZ)(l.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#skeletonparagraphprops",sourceType:"a"},(0,e.tZ)("span",{className:"icon icon-link"})),"SkeletonParagraphProps"),(0,e.tZ)(o.Z,{className:"component-api-table"},(0,e.tZ)("thead",null,(0,e.tZ)("tr",null,(0,e.tZ)("th",null,t[67].value),(0,e.tZ)("th",null,t[68].value),(0,e.tZ)("th",null,t[69].value),(0,e.tZ)("th",null,t[70].value))),(0,e.tZ)("tbody",null,(0,e.tZ)("tr",null,(0,e.tZ)("td",null,t[71].value),(0,e.tZ)("td",null,t[72].value),(0,e.tZ)("td",null,t[73].value),(0,e.tZ)("td",null,t[74].value)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,t[75].value),(0,e.tZ)("td",null,t[76].value),(0,e.tZ)("td",null,t[77].value),(0,e.tZ)("td",null,t[78].value)))),(0,e.tZ)("h3",{id:"skeletonbuttonprops"},(0,e.tZ)(l.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#skeletonbuttonprops",sourceType:"a"},(0,e.tZ)("span",{className:"icon icon-link"})),"SkeletonButtonProps"),(0,e.tZ)(o.Z,{className:"component-api-table"},(0,e.tZ)("thead",null,(0,e.tZ)("tr",null,(0,e.tZ)("th",null,t[79].value),(0,e.tZ)("th",null,t[80].value),(0,e.tZ)("th",null,t[81].value),(0,e.tZ)("th",null,t[82].value),(0,e.tZ)("th",null,t[83].value))),(0,e.tZ)("tbody",null,(0,e.tZ)("tr",null,(0,e.tZ)("td",null,t[84].value),(0,e.tZ)("td",null,t[85].value),(0,e.tZ)("td",null,t[86].value),(0,e.tZ)("td",null,t[87].value),(0,e.tZ)("td",null)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,t[88].value),(0,e.tZ)("td",null,t[89].value),(0,e.tZ)("td",null,t[90].value),(0,e.tZ)("td",null,t[91].value),(0,e.tZ)("td",null,t[92].value)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,t[93].value),(0,e.tZ)("td",null,t[94].value),(0,e.tZ)("td",null,(0,e.tZ)("code",null,t[95].value),t[96].value,(0,e.tZ)("code",null,t[97].value),t[98].value,(0,e.tZ)("code",null,t[99].value),t[100].value,(0,e.tZ)("code",null,t[101].value)),(0,e.tZ)("td",null,t[102].value),(0,e.tZ)("td",null)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,t[103].value),(0,e.tZ)("td",null,t[104].value),(0,e.tZ)("td",null,(0,e.tZ)("code",null,t[105].value),t[106].value,(0,e.tZ)("code",null,t[107].value),t[108].value,(0,e.tZ)("code",null,t[109].value)),(0,e.tZ)("td",null,t[110].value),(0,e.tZ)("td",null)))),(0,e.tZ)("h3",{id:"skeletoninputprops"},(0,e.tZ)(l.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#skeletoninputprops",sourceType:"a"},(0,e.tZ)("span",{className:"icon icon-link"})),"SkeletonInputProps"),(0,e.tZ)(o.Z,{className:"component-api-table"},(0,e.tZ)("thead",null,(0,e.tZ)("tr",null,(0,e.tZ)("th",null,t[111].value),(0,e.tZ)("th",null,t[112].value),(0,e.tZ)("th",null,t[113].value),(0,e.tZ)("th",null,t[114].value))),(0,e.tZ)("tbody",null,(0,e.tZ)("tr",null,(0,e.tZ)("td",null,t[115].value),(0,e.tZ)("td",null,t[116].value),(0,e.tZ)("td",null,t[117].value),(0,e.tZ)("td",null,t[118].value)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,t[119].value),(0,e.tZ)("td",null,t[120].value),(0,e.tZ)("td",null,(0,e.tZ)("code",null,t[121].value),t[122].value,(0,e.tZ)("code",null,t[123].value),t[124].value,(0,e.tZ)("code",null,t[125].value)),(0,e.tZ)("td",null,t[126].value)))),(0,e.tZ)("h2",{id:"design-token"},(0,e.tZ)(l.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#design-token",sourceType:"a"},(0,e.tZ)("span",{className:"icon icon-link"})),"Design Token")),(0,e.tZ)(i.Z,{component:"Skeleton"})))}a.default=u}}]);
|
|
|