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

DropdownItem: add icon prop to dropdown-item (#14088) 

* Add icon prop to dropdown-item

* Add French translation to DropdownItem Icon

* Adding missing TypeScript definition to DropdownItem
pull/14452/head
Gabriel Oliveira 2019-02-22 01:33:15 -03:00 committed by hetech
parent 36cb7adb9d
commit 8608dbf800
7 changed files with 57 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
examples/docs/en-US/dropdown.md
View File

@ -154,11 +154,11 @@ Click the triggering element or hover on it.
Dropdown List<i class="el-icon-arrow-down el-icon--right"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>Action 1</el-dropdown-item>
<el-dropdown-item>Action 2</el-dropdown-item>
<el-dropdown-item>Action 3</el-dropdown-item>
<el-dropdown-item>Action 4</el-dropdown-item>
<el-dropdown-item>Action 5</el-dropdown-item>
<el-dropdown-item icon="el-icon-plus">Action 1</el-dropdown-item>
<el-dropdown-item icon="el-icon-circle-plus">Action 2</el-dropdown-item>
<el-dropdown-item icon="el-icon-circle-plus-outline">Action 3</el-dropdown-item>
<el-dropdown-item icon="el-icon-check">Action 4</el-dropdown-item>
<el-dropdown-item icon="el-icon-circle-check-outline">Action 5</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</el-col>
@ -169,11 +169,11 @@ Click the triggering element or hover on it.
Dropdown List<i class="el-icon-arrow-down el-icon--right"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>Action 1</el-dropdown-item>
<el-dropdown-item>Action 2</el-dropdown-item>
<el-dropdown-item>Action 3</el-dropdown-item>
<el-dropdown-item>Action 4</el-dropdown-item>
<el-dropdown-item>Action 5</el-dropdown-item>
<el-dropdown-item icon="el-icon-plus">Action 1</el-dropdown-item>
<el-dropdown-item icon="el-icon-circle-plus">Action 2</el-dropdown-item>
<el-dropdown-item icon="el-icon-circle-plus-outline">Action 3</el-dropdown-item>
<el-dropdown-item icon="el-icon-check">Action 4</el-dropdown-item>
<el-dropdown-item icon="el-icon-circle-check-outline">Action 5</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</el-col>
@ -346,8 +346,9 @@ Besides default size, Dropdown component provides three additional sizes for you
| visible-change | triggers when the dropdown appears/disappears | true when it appears, and false otherwise |
### Dropdown Menu Item Attributes
| Attribute | Description | Type | Accepted Values | Default |
| Attribute | Description | Type | Accepted Values | Default |
|------------- |---------------- |---------------- |---------------------- |-------- |
| command | a command to be dispatched to Dropdown's `command` callback | string/number/object | — | — |
| disabled | whether the item is disabled | boolean | — | false |
| divided | whether a divider is displayed | boolean | — | false |
| icon | icon class name | string | — | — |

25
examples/docs/es/dropdown.md
View File

@ -2,7 +2,7 @@
.demo-box {
.el-dropdown {
vertical-align: top;
& + .el-dropdown {
margin-left: 15px;
}
@ -23,7 +23,7 @@
padding: 30px 0;
text-align: center;
border-right: 1px solid #eff2f6;
&:last-child {
border-right: 0;
}
@ -155,11 +155,11 @@ Haga clic en el elemento detonante o sobre él.
Dropdown List<i class="el-icon-arrow-down el-icon--right"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>Action 1</el-dropdown-item>
<el-dropdown-item>Action 2</el-dropdown-item>
<el-dropdown-item>Action 3</el-dropdown-item>
<el-dropdown-item>Action 4</el-dropdown-item>
<el-dropdown-item>Action 5</el-dropdown-item>
<el-dropdown-item icon="el-icon-plus">Action 1</el-dropdown-item>
<el-dropdown-item icon="el-icon-circle-plus">Action 2</el-dropdown-item>
<el-dropdown-item icon="el-icon-circle-plus-outline">Action 3</el-dropdown-item>
<el-dropdown-item icon="el-icon-check">Action 4</el-dropdown-item>
<el-dropdown-item icon="el-icon-circle-check-outline">Action 5</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</el-col>
@ -170,11 +170,11 @@ Haga clic en el elemento detonante o sobre él.
Dropdown List<i class="el-icon-arrow-down el-icon--right"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>Action 1</el-dropdown-item>
<el-dropdown-item>Action 2</el-dropdown-item>
<el-dropdown-item>Action 3</el-dropdown-item>
<el-dropdown-item>Action 4</el-dropdown-item>
<el-dropdown-item>Action 5</el-dropdown-item>
<el-dropdown-item icon="el-icon-plus">Action 1</el-dropdown-item>
<el-dropdown-item icon="el-icon-circle-plus">Action 2</el-dropdown-item>
<el-dropdown-item icon="el-icon-circle-plus-outline">Action 3</el-dropdown-item>
<el-dropdown-item icon="el-icon-check">Action 4</el-dropdown-item>
<el-dropdown-item icon="el-icon-circle-check-outline">Action 5</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</el-col>
@ -353,3 +353,4 @@ Además del tamaño predeterminado, el componente Dropdown proporciona tres tama
| command | un comando que se enviará al `command` callback del Dropdown | string/number/object | — | — |
| disabled | si el elemento está desactivado | boolean | — | false |
| divided | si se visualiza un divisor | boolean | — | false |
| icon | nombre de la clase del icono | string | — | — |

21
examples/docs/fr-FR/dropdown.md
View File

@ -155,11 +155,11 @@ Vous pouvez choisir de déclencher le menu au moment du clic, ou en passant la s
Liste déroulante<i class="el-icon-arrow-down el-icon--right"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>Action 1</el-dropdown-item>
<el-dropdown-item>Action 2</el-dropdown-item>
<el-dropdown-item>Action 3</el-dropdown-item>
<el-dropdown-item>Action 4</el-dropdown-item>
<el-dropdown-item>Action 5</el-dropdown-item>
<el-dropdown-item icon="el-icon-plus">Action 1</el-dropdown-item>
<el-dropdown-item icon="el-icon-circle-plus">Action 2</el-dropdown-item>
<el-dropdown-item icon="el-icon-circle-plus-outline">Action 3</el-dropdown-item>
<el-dropdown-item icon="el-icon-check">Action 4</el-dropdown-item>
<el-dropdown-item icon="el-icon-circle-check-outline">Action 5</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</el-col>
@ -170,11 +170,11 @@ Vous pouvez choisir de déclencher le menu au moment du clic, ou en passant la s
Liste déroulante<i class="el-icon-arrow-down el-icon--right"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>Action 1</el-dropdown-item>
<el-dropdown-item>Action 2</el-dropdown-item>
<el-dropdown-item>Action 3</el-dropdown-item>
<el-dropdown-item>Action 4</el-dropdown-item>
<el-dropdown-item>Action 5</el-dropdown-item>
<el-dropdown-item icon="el-icon-plus">Action 1</el-dropdown-item>
<el-dropdown-item icon="el-icon-circle-plus">Action 2</el-dropdown-item>
<el-dropdown-item icon="el-icon-circle-plus-outline">Action 3</el-dropdown-item>
<el-dropdown-item icon="el-icon-check">Action 4</el-dropdown-item>
<el-dropdown-item icon="el-icon-circle-check-outline">Action 5</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</el-col>
@ -356,3 +356,4 @@ En plus de la taille par défaut, le composant Dropdown propose trois autres tai
| command | Le contenu a envoyer à la callback de l'évènement `command` du Dropdown. | string/number/object | — | — |
| disabled | Si l'élément est désactivé. | boolean | — | false |
| divided | Si un diviseur doit être affiché. | boolean | — | false |
| icon | Classe de l'icône. | string | — | — |

21
examples/docs/zh-CN/dropdown.md
View File

@ -156,11 +156,11 @@
下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>黄金糕</el-dropdown-item>
<el-dropdown-item>狮子头</el-dropdown-item>
<el-dropdown-item>螺蛳粉</el-dropdown-item>
<el-dropdown-item>双皮奶</el-dropdown-item>
<el-dropdown-item>蚵仔煎</el-dropdown-item>
<el-dropdown-item icon="el-icon-plus">黄金糕</el-dropdown-item>
<el-dropdown-item icon="el-icon-circle-plus">狮子头</el-dropdown-item>
<el-dropdown-item icon="el-icon-circle-plus-outline">螺蛳粉</el-dropdown-item>
<el-dropdown-item icon="el-icon-check">双皮奶</el-dropdown-item>
<el-dropdown-item icon="el-icon-circle-check-outline">蚵仔煎</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</el-col>
@ -171,11 +171,11 @@
下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>黄金糕</el-dropdown-item>
<el-dropdown-item>狮子头</el-dropdown-item>
<el-dropdown-item>螺蛳粉</el-dropdown-item>
<el-dropdown-item>双皮奶</el-dropdown-item>
<el-dropdown-item>蚵仔煎</el-dropdown-item>
<el-dropdown-item icon="el-icon-plus">黄金糕</el-dropdown-item>
<el-dropdown-item icon="el-icon-circle-plus">狮子头</el-dropdown-item>
<el-dropdown-item icon="el-icon-circle-plus-outline">螺蛳粉</el-dropdown-item>
<el-dropdown-item icon="el-icon-check">双皮奶</el-dropdown-item>
<el-dropdown-item icon="el-icon-circle-check-outline">蚵仔煎</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</el-col>
@ -357,3 +357,4 @@ Dropdown 组件提供除了默认值以外的三种尺寸，可以在不同场
| command | 指令 | string/number/object | — | — |
| disabled | 禁用 | boolean | — | false |
| divided | 显示分割线 | boolean | — | false |
| icon | 图标类名 | string | — | — |

4
packages/dropdown/src/dropdown-item.vue
View File

@ -9,6 +9,7 @@
:aria-disabled="disabled"
:tabindex="disabled ? null : -1"
>
<i :class="icon" v-if="icon"></i>
<slot></slot>
</li>
</template>
@ -23,7 +24,8 @@
props: {
command: {},
disabled: Boolean,
divided: Boolean
divided: Boolean,
icon: String
},
methods: {

4
packages/theme-chalk/src/dropdown.scss
View File

@ -84,6 +84,10 @@
color: $--dropdown-menuItem-hover-color;
}
i {
margin-right: 5px;
}
@include m(divided) {
$divided-offset: 6px;

3
types/dropdown-item.d.ts vendored
View File

@ -10,4 +10,7 @@ export declare class ElDropdownItem extends ElementUIComponent {
/** Whether a divider is displayed */
divided: boolean
/** Icon to show on left side of text */
icon: string
}