ant-design-vue/components/collapse/demo/custom.md

41 lines
1.2 KiB
Markdown
Raw Normal View History

2018-02-01 10:18:05 +00:00
<cn>
#### 自定义面板
2019-03-15 03:20:37 +00:00
自定义各个面板的背景色、圆角、边距和图标。
2018-02-01 10:18:05 +00:00
</cn>
<us>
#### Custom Panel
2019-03-15 03:20:37 +00:00
Customize the background, border and margin styles and icon for each panel.
2018-02-01 10:18:05 +00:00
</us>
```html
<template>
<div>
2018-02-02 08:34:27 +00:00
<a-collapse defaultActiveKey="1" :bordered="false">
2019-03-15 03:20:37 +00:00
<template v-slot:expandIcon="props">
2019-09-02 14:07:10 +00:00
<a-icon type="caret-right" :rotate="props.isActive ? 90 : 0" />
2019-03-15 03:20:37 +00:00
</template>
<a-collapse-panel header="This is panel header 1" key="1" :style="customStyle">
2018-02-01 10:18:05 +00:00
<p>{{text}}</p>
</a-collapse-panel>
2018-02-02 08:34:27 +00:00
<a-collapse-panel header="This is panel header 2" key="2" :style="customStyle">
2018-02-01 10:18:05 +00:00
<p>{{text}}</p>
</a-collapse-panel>
2018-02-02 08:34:27 +00:00
<a-collapse-panel header="This is panel header 3" key="3" :style="customStyle">
2018-02-01 10:18:05 +00:00
<p>{{text}}</p>
</a-collapse-panel>
</a-collapse>
</div>
</template>
<script>
export default {
2018-02-01 10:32:17 +00:00
data () {
return {
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.`,
customStyle: 'background: #f7f7f7;border-radius: 4px;margin-bottom: 24px;border: 0;overflow: hidden'
}
},
}
2018-02-01 10:18:05 +00:00
</script>
```