From 8608dbf800f946217ab3087facbf8043bf4e7c63 Mon Sep 17 00:00:00 2001 From: Gabriel Oliveira Date: Fri, 22 Feb 2019 01:33:15 -0300 Subject: [PATCH] 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 --- examples/docs/en-US/dropdown.md | 23 ++++++++++++----------- examples/docs/es/dropdown.md | 25 +++++++++++++------------ examples/docs/fr-FR/dropdown.md | 21 +++++++++++---------- examples/docs/zh-CN/dropdown.md | 21 +++++++++++---------- packages/dropdown/src/dropdown-item.vue | 4 +++- packages/theme-chalk/src/dropdown.scss | 4 ++++ types/dropdown-item.d.ts | 3 +++ 7 files changed, 57 insertions(+), 44 deletions(-) diff --git a/examples/docs/en-US/dropdown.md b/examples/docs/en-US/dropdown.md index 9b66fa025..1f593d709 100644 --- a/examples/docs/en-US/dropdown.md +++ b/examples/docs/en-US/dropdown.md @@ -154,11 +154,11 @@ Click the triggering element or hover on it. Dropdown List - Action 1 - Action 2 - Action 3 - Action 4 - Action 5 + Action 1 + Action 2 + Action 3 + Action 4 + Action 5 @@ -169,11 +169,11 @@ Click the triggering element or hover on it. Dropdown List - Action 1 - Action 2 - Action 3 - Action 4 - Action 5 + Action 1 + Action 2 + Action 3 + Action 4 + Action 5 @@ -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 | — | — | diff --git a/examples/docs/es/dropdown.md b/examples/docs/es/dropdown.md index f1d87f176..8ee560116 100644 --- a/examples/docs/es/dropdown.md +++ b/examples/docs/es/dropdown.md @@ -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 - Action 1 - Action 2 - Action 3 - Action 4 - Action 5 + Action 1 + Action 2 + Action 3 + Action 4 + Action 5 @@ -170,11 +170,11 @@ Haga clic en el elemento detonante o sobre él. Dropdown List - Action 1 - Action 2 - Action 3 - Action 4 - Action 5 + Action 1 + Action 2 + Action 3 + Action 4 + Action 5 @@ -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 | — | — | diff --git a/examples/docs/fr-FR/dropdown.md b/examples/docs/fr-FR/dropdown.md index 108582099..517feb439 100644 --- a/examples/docs/fr-FR/dropdown.md +++ b/examples/docs/fr-FR/dropdown.md @@ -155,11 +155,11 @@ Vous pouvez choisir de déclencher le menu au moment du clic, ou en passant la s Liste déroulante - Action 1 - Action 2 - Action 3 - Action 4 - Action 5 + Action 1 + Action 2 + Action 3 + Action 4 + Action 5 @@ -170,11 +170,11 @@ Vous pouvez choisir de déclencher le menu au moment du clic, ou en passant la s Liste déroulante - Action 1 - Action 2 - Action 3 - Action 4 - Action 5 + Action 1 + Action 2 + Action 3 + Action 4 + Action 5 @@ -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 | — | — | diff --git a/examples/docs/zh-CN/dropdown.md b/examples/docs/zh-CN/dropdown.md index 45c0cd45c..cdcee4158 100644 --- a/examples/docs/zh-CN/dropdown.md +++ b/examples/docs/zh-CN/dropdown.md @@ -156,11 +156,11 @@ 下拉菜单 - 黄金糕 - 狮子头 - 螺蛳粉 - 双皮奶 - 蚵仔煎 + 黄金糕 + 狮子头 + 螺蛳粉 + 双皮奶 + 蚵仔煎 @@ -171,11 +171,11 @@ 下拉菜单 - 黄金糕 - 狮子头 - 螺蛳粉 - 双皮奶 - 蚵仔煎 + 黄金糕 + 狮子头 + 螺蛳粉 + 双皮奶 + 蚵仔煎 @@ -357,3 +357,4 @@ Dropdown 组件提供除了默认值以外的三种尺寸，可以在不同场 | command | 指令 | string/number/object | — | — | | disabled | 禁用 | boolean | — | false | | divided | 显示分割线 | boolean | — | false | +| icon | 图标类名 | string | — | — | diff --git a/packages/dropdown/src/dropdown-item.vue b/packages/dropdown/src/dropdown-item.vue index 9af930a68..9fc33d8c3 100644 --- a/packages/dropdown/src/dropdown-item.vue +++ b/packages/dropdown/src/dropdown-item.vue @@ -9,6 +9,7 @@ :aria-disabled="disabled" :tabindex="disabled ? null : -1" > + @@ -23,7 +24,8 @@ props: { command: {}, disabled: Boolean, - divided: Boolean + divided: Boolean, + icon: String }, methods: { diff --git a/packages/theme-chalk/src/dropdown.scss b/packages/theme-chalk/src/dropdown.scss index 5871f83d1..72e834050 100644 --- a/packages/theme-chalk/src/dropdown.scss +++ b/packages/theme-chalk/src/dropdown.scss @@ -84,6 +84,10 @@ color: $--dropdown-menuItem-hover-color; } + i { + margin-right: 5px; + } + @include m(divided) { $divided-offset: 6px; diff --git a/types/dropdown-item.d.ts b/types/dropdown-item.d.ts index 0fb9b451a..767142414 100644 --- a/types/dropdown-item.d.ts +++ b/types/dropdown-item.d.ts @@ -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 }