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.

49 lines
1.0 KiB

---
order: 3
title:
zh-CN: 自定义面板
en-US: Custom Panel
---
## zh-CN
自定义各个面板的背景色、圆角和边距。
## en-US
Customize the background, border and margin styles for each panel.
````jsx
import { Collapse } from 'antd';
const Panel = Collapse.Panel;
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 customPanelStyle = {
background: '#f7f7f7',
borderRadius: 4,
marginBottom: 24,
border: 0,
overflow: 'hidden',
};
ReactDOM.render(
<Collapse bordered={false} defaultActiveKey={['1']}>
<Panel header="This is panel header 1" key="1" style={customPanelStyle}>
<p>{text}</p>
</Panel>
<Panel header="This is panel header 2" key="2" style={customPanelStyle}>
<p>{text}</p>
</Panel>
<Panel header="This is panel header 3" key="3" style={customPanelStyle}>
<p>{text}</p>
</Panel>
</Collapse>,
mountNode);
````