mirror of
https://gitee.com/ant-design-vue/ant-design-vue.git
synced 2024-12-16 01:41:15 +08:00
add collapse header slot
This commit is contained in:
parent
595f535cd4
commit
c6b5d681c3
@ -21,7 +21,18 @@ export default {
|
|||||||
class: collapsePanelClassName,
|
class: collapsePanelClassName,
|
||||||
on: $listeners,
|
on: $listeners,
|
||||||
}
|
}
|
||||||
return <RcCollapse.Panel {...rcCollapePanelProps} >{this.$slots.default}</RcCollapse.Panel>
|
const { default: defaultSlots, header } = this.$slots
|
||||||
|
return (
|
||||||
|
<RcCollapse.Panel {...rcCollapePanelProps} >
|
||||||
|
{defaultSlots}
|
||||||
|
{header ? (
|
||||||
|
<template slot='header'>
|
||||||
|
{header}
|
||||||
|
</template>
|
||||||
|
) : null}
|
||||||
|
|
||||||
|
</RcCollapse.Panel>
|
||||||
|
)
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
@ -12,7 +12,10 @@ Customize the background, border and margin styles for each panel.
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<a-collapse defaultActiveKey="1" :bordered="false">
|
<a-collapse defaultActiveKey="1" :bordered="false">
|
||||||
<a-collapse-panel header="This is panel header 1" key="1" :style="customStyle">
|
<a-collapse-panel key="1" :style="customStyle">
|
||||||
|
<template slot="header">
|
||||||
|
This is panel header 1<a-icon type="question-circle-o" />
|
||||||
|
</template>
|
||||||
<p>{{text}}</p>
|
<p>{{text}}</p>
|
||||||
</a-collapse-panel>
|
</a-collapse-panel>
|
||||||
<a-collapse-panel header="This is panel header 2" key="2" :style="customStyle">
|
<a-collapse-panel header="This is panel header 2" key="2" :style="customStyle">
|
||||||
|
@ -36,6 +36,7 @@ export default {
|
|||||||
[`${prefixCls}-header`]: true,
|
[`${prefixCls}-header`]: true,
|
||||||
[headerClass]: headerClass,
|
[headerClass]: headerClass,
|
||||||
}
|
}
|
||||||
|
const headerCon = header || $slots.header
|
||||||
const itemCls = {
|
const itemCls = {
|
||||||
[`${prefixCls}-item`]: true,
|
[`${prefixCls}-item`]: true,
|
||||||
[`${prefixCls}-item-active`]: isActive,
|
[`${prefixCls}-item-active`]: isActive,
|
||||||
@ -50,7 +51,7 @@ export default {
|
|||||||
aria-expanded={isActive}
|
aria-expanded={isActive}
|
||||||
>
|
>
|
||||||
{showArrow && <i class='arrow' />}
|
{showArrow && <i class='arrow' />}
|
||||||
{header}
|
{headerCon}
|
||||||
</div><transition
|
</div><transition
|
||||||
{...transitionProps}
|
{...transitionProps}
|
||||||
>
|
>
|
||||||
|
Loading…
Reference in New Issue
Block a user