feat(Collapse): Collapse support for setting size (#40286)
Co-authored-by: Yuiai01 <dujiaqi@kezaihui.com>pull/40464/head
JiaQi
2 years ago
committed by
GitHub
parent
1fc374495f
commit
9d51345f90
@ -0,0 +1,11 @@
|
||||
## zh-CN
|
||||
|
||||
折叠面板有大、中、小三种尺寸。
|
||||
|
||||
通过设置 `size` 为 `large` `small` 分别把折叠面板设为大、小尺寸。若不设置 `size`，则尺寸为中。
|
||||
|
||||
## en-US
|
||||
|
||||
Ant Design supports a default collapse size as well as a large and small size.
|
||||
|
||||
If a large or small collapse is desired, set the `size` property to either `large` or `small` respectively. Omit the `size` property for a collapse with the default size.
|
||||
@ -0,0 +1,35 @@
|
||||
import React from 'react';
|
||||
import { Collapse, Divider } from 'antd';
|
||||
|
||||
const { Panel } = Collapse;
|
||||
|
||||
const text = `
|
||||
A dog is a type of domesticated animal.
|
||||
Known for its loyalty and faithfulness,
|
||||
it can be found as a welcome guest in many households across the world.
|
||||
`;
|
||||
|
||||
const App: React.FC = () => (
|
||||
<>
|
||||
<Divider orientation="left">Default Size</Divider>
|
||||
<Collapse>
|
||||
<Panel header="This is default size panel header" key="1">
|
||||
<p>{text}</p>
|
||||
</Panel>
|
||||
</Collapse>
|
||||
<Divider orientation="left">Small Size</Divider>
|
||||
<Collapse size="small">
|
||||
<Panel header="This is small size panel header" key="1">
|
||||
<p>{text}</p>
|
||||
</Panel>
|
||||
</Collapse>
|
||||
<Divider orientation="left">Large Size</Divider>
|
||||
<Collapse size="large">
|
||||
<Panel header="This is large size panel header" key="1">
|
||||
<p>{text}</p>
|
||||
</Panel>
|
||||
</Collapse>
|
||||
</>
|
||||
);
|
||||
|
||||
export default App;
|
||||
Loading…
Reference in New Issue