github
/
element
mirror of https://github.com/ElemeFE/element
1
0
Fork 0
Code Issues Releases Wiki Activity

remove collapse scoped slot title && add named slot title

pull/2102/head
baiyaaaaa 2016-12-30 11:52:41 +08:00 committed by 杨奕
parent 3ec2c820be
commit ef2e3c697a
3 changed files with 9 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
examples/docs/en-US/collapse.md
View File

@ -94,14 +94,14 @@ In accordion mode, only one panel can be expanded at once
### Custom title ### Custom title
Besides using the `title` attribute, you can customize panel title with scoped slots, which makes adding custom content, e.g. icons, possible. Besides using the `title` attribute, you can customize panel title with named slots, which makes adding custom content, e.g. icons, possible.
:::demo :::demo
```html ```html
<el-collapse accordion> <el-collapse accordion>
<el-collapse-item title="Consistency" name="1"> <el-collapse-item name="1">
<template slot="title" scope="props"> <template slot="title">
{{props.title}}<i class="header-icon el-icon-information"></i> Consistency<i class="header-icon el-icon-information"></i>
</template> </template>
<div>Consistent with real life: in line with the process and logic of real life, and comply with languages and habits that the users are used to;</div> <div>Consistent with real life: in line with the process and logic of real life, and comply with languages and habits that the users are used to;</div>
<div>Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc.</div> <div>Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc.</div>

8
examples/docs/zh-CN/collapse.md
View File

@ -103,14 +103,14 @@
### 自定义面板标题 ### 自定义面板标题
除了可以通过 `title` 属性以外，还可以通过作用域插槽来实现自定义面板的标题内容，以实现增加图标等效果。 除了可以通过 `title` 属性以外，还可以通过具名 `slot` 来实现自定义面板的标题内容，以实现增加图标等效果。
:::demo :::demo
```html ```html
<el-collapse accordion> <el-collapse accordion>
<el-collapse-item title="一致性 Consistency"> <el-collapse-item>
<template slot="title" scope="props"> <template slot="title">
{{props.title}}<i class="header-icon el-icon-information"></i> 一致性 Consistency<i class="header-icon el-icon-information"></i>
</template> </template>
<div>与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；</div> <div>与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；</div>
<div>在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。</div> <div>在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。</div>

2
packages/collapse/src/collapse-item.vue
View File

@ -2,7 +2,7 @@
<div class="el-collapse-item" :class="{'is-active': isActive}"> <div class="el-collapse-item" :class="{'is-active': isActive}">
<div class="el-collapse-item__header" @click="handleHeaderClick"> <div class="el-collapse-item__header" @click="handleHeaderClick">
<i class="el-collapse-item__header__arrow el-icon-arrow-right"></i> <i class="el-collapse-item__header__arrow el-icon-arrow-right"></i>
<slot name="title" :title="title">{{title}}</slot> <slot name="title">{{title}}</slot>
</div> </div>
<div class="el-collapse-item__wrap" ref="contentWrap"> <div class="el-collapse-item__wrap" ref="contentWrap">
<div class="el-collapse-item__content" ref="content"> <div class="el-collapse-item__content" ref="content">