Skip to content

E
Element
Commit 8608dbf8 authored by Gabriel Oliveira's avatar Gabriel Oliveira Committed by hetech
Browse files
Options

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
parent 36cb7adb
Hide whitespace changes
Inline Side-by-side
Showing with 57 additions and 44 deletions
examples/docs/en-US/dropdown.md
View file @ 8608dbf8
......@@ -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 | — | — |
examples/docs/es/dropdown.md
View file @ 8608dbf8
......@@ -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 | — | — |
examples/docs/fr-FR/dropdown.md
View file @ 8608dbf8
......@@ -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 | — | — |
examples/docs/zh-CN/dropdown.md
View file @ 8608dbf8
......@@ -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 | — | — |
packages/dropdown/src/dropdown-item.vue
View file @ 8608dbf8
......@@ -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: {
......
packages/theme-chalk/src/dropdown.scss
View file @ 8608dbf8
......@@ -84,6 +84,10 @@
color: $--dropdown-menuItem-hover-color;
}
i {
margin-right: 5px;
}
@include m(divided) {
$divided-offset: 6px;
......
types/dropdown-item.d.ts
View file @ 8608dbf8
......@@ -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
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment