ant-design/components/drawer/demo/_semantic.tsx

73 lines
1.5 KiB
TypeScript
Raw Normal View History

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;