mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-15 17:19:11 +08:00
73 lines
1.5 KiB
TypeScript
73 lines
1.5 KiB
TypeScript
|
import React from 'react';
|
||
|
import { Drawer, Typography } from 'antd';
|
||
|
|
||
|
import SemanticPreview from '../../../.dumi/components/SemanticPreview';
|
||
|
import useLocale from '../../../.dumi/hooks/useLocale';
|
||
|
|
||
|
const locales = {
|
||
|
cn: {
|
||
|
mask: '遮罩层元素',
|
||
|
content: 'Drawer 容器元素',
|
||
|
header: '头部元素',
|
||
|
body: '内容元素',
|
||
|
footer: '底部元素',
|
||
|
},
|
||
|
en: {
|
||
|
mask: 'Mask element',
|
||
|
content: 'Drawer container element',
|
||
|
header: 'Header element',
|
||
|
body: 'Body element',
|
||
|
footer: 'Footer element',
|
||
|
},
|
||
|
};
|
||
|
|
||
|
const App: React.FC = () => {
|
||
|
const [locale] = useLocale(locales);
|
||
|
|
||
|
return (
|
||
|
<SemanticPreview
|
||
|
semantics={[
|
||
|
{
|
||
|
name: 'mask',
|
||
|
desc: locale.mask,
|
||
|
version: '5.13.0',
|
||
|
},
|
||
|
{
|
||
|
name: 'content',
|
||
|
desc: locale.content,
|
||
|
version: '5.13.0',
|
||
|
},
|
||
|
{
|
||
|
name: 'header',
|
||
|
desc: locale.header,
|
||
|
version: '5.13.0',
|
||
|
},
|
||
|
{
|
||
|
name: 'body',
|
||
|
desc: locale.body,
|
||
|
version: '5.13.0',
|
||
|
},
|
||
|
{
|
||
|
name: 'footer',
|
||
|
desc: locale.footer,
|
||
|
version: '5.13.0',
|
||
|
},
|
||
|
]}
|
||
|
height={300}
|
||
|
>
|
||
|
<Drawer
|
||
|
title="Title"
|
||
|
placement="right"
|
||
|
footer={<Typography.Link>Footer</Typography.Link>}
|
||
|
closable={false}
|
||
|
open
|
||
|
getContainer={false}
|
||
|
>
|
||
|
<p>Some contents...</p>
|
||
|
</Drawer>
|
||
|
</SemanticPreview>
|
||
|
);
|
||
|
};
|
||
|
|
||
|
export default App;
|