From 2a0a4bc651cc6f0cc9b7fff4e45f2391c670066b Mon Sep 17 00:00:00 2001
From: Black Wayne <451578533@qq.com>
Date: Tue, 19 Sep 2017 12:47:13 +0800
Subject: [PATCH] Dropdown: add chalk theme (#7089)
* Dropdown: add chalk theme
* Dropdown: update doc
* Update dropdown.md
---
examples/docs/en-US/dropdown.md | 53 ++++++++++++-
examples/docs/zh-CN/dropdown.md | 55 +++++++++++++-
packages/dropdown/src/dropdown-menu.vue | 5 +-
packages/dropdown/src/dropdown.vue | 9 ++-
packages/popover/src/main.vue | 2 +-
packages/theme-chalk/src/common/var.scss | 2 +-
packages/theme-chalk/src/dropdown.scss | 94 ++++++++++++++++++++----
packages/theme-chalk/src/popover.scss | 18 +++--
8 files changed, 208 insertions(+), 30 deletions(-)
diff --git a/examples/docs/en-US/dropdown.md b/examples/docs/en-US/dropdown.md
index 4ca8a0326..3a6f548de 100644
--- a/examples/docs/en-US/dropdown.md
+++ b/examples/docs/en-US/dropdown.md
@@ -199,12 +199,61 @@ Clicking each dropdown item fires an event whose parameter is assigned by each i
```
:::
+### Sizes
+
+Besides default size, Dropdown component provides three additional sizes for you to choose among different scenarios.
+
+:::demo Use attribute `size` to set additional sizes with `medium`, `small` or `mini`.
+
+```html
+
+ Default
+
+ Action 1
+ Action 2
+ Action 3
+ Action 4
+
+
+
+
+ Medium
+
+ Action 1
+ Action 2
+ Action 3
+ Action 4
+
+
+
+
+ Small
+
+ Action 1
+ Action 2
+ Action 3
+ Action 4
+
+
+
+
+ Mini
+
+ Action 1
+ Action 2
+ Action 3
+ Action 4
+
+
+```
+:::
+
### Dropdown Attributes
| Attribute | Description | Type | Accepted Values | Default |
|------------- |---------------- |---------------- |---------------------- |-------- |
-| type | menu button type, refer to `Button` Component, only works when `split-button` is true | string | — | — |
-| size | menu button size, refer to `Button` Component, only works when `split-button` is true | string | — | — |
+| type | menu button type, refer to `Button` Component, only works when `split-button` is true | string | — | — |
+| size | menu size, refer to `Button` Component, also works on the Split-button | string | large / small / mini | — |
| split-button | whether a button group is displayed | boolean | — | false |
| size | component size, refer to `Button` component | string | large, small, mini | — |
| placement | placement of pop menu | string | top/top-start/top-end/bottom/bottom-start/bottom-end | bottom-end |
diff --git a/examples/docs/zh-CN/dropdown.md b/examples/docs/zh-CN/dropdown.md
index 5c4f903c7..d8a4e6abc 100644
--- a/examples/docs/zh-CN/dropdown.md
+++ b/examples/docs/zh-CN/dropdown.md
@@ -201,11 +201,64 @@
```
:::
+### 不同尺寸
+
+Dropdown 组件提供除了默认值以外的三种尺寸，可以在不同场景下选择合适的尺寸。
+
+:::demo 额外的尺寸：`medium`、`small`、`mini`，通过设置`size`属性来配置它们。
+
+```html
+
+ 默认尺寸
+
+ 黄金糕
+ 狮子头
+ 螺蛳粉
+ 双皮奶
+ 蚵仔煎
+
+
+
+
+ 中等尺寸
+
+ 黄金糕
+ 狮子头
+ 螺蛳粉
+ 双皮奶
+ 蚵仔煎
+
+
+
+
+ 小型尺寸
+
+ 黄金糕
+ 狮子头
+ 螺蛳粉
+ 双皮奶
+ 蚵仔煎
+
+
+
+
+ 超小尺寸
+
+ 黄金糕
+ 狮子头
+ 螺蛳粉
+ 双皮奶
+ 蚵仔煎
+
+
+```
+:::
+
### Dropdown Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|------------- |---------------- |---------------- |---------------------- |-------- |
| type | 菜单按钮类型，同 Button 组件(只在`split-button`为 true 的情况下有效) | string | — | — |
-| size | 菜单按钮尺寸，同 Button 组件(只在`split-button`为 true 的情况下有效) | string | — | — |
+| size | 菜单尺寸，同 Button 组件，在`split-button`为 true 的情况下也对触发按钮生效 | string | medium / small / mini | — |
| split-button | 下拉触发元素呈现为按钮组 | boolean | — | false |
| placement | 菜单弹出位置 | string | top/top-start/top-end/bottom/bottom-start/bottom-end | bottom-end |
| trigger | 触发下拉的行为 | string | hover, click | hover |
diff --git a/packages/dropdown/src/dropdown-menu.vue b/packages/dropdown/src/dropdown-menu.vue
index ff473b65a..0c5ea2bf0 100644
--- a/packages/dropdown/src/dropdown-menu.vue
+++ b/packages/dropdown/src/dropdown-menu.vue
@@ -1,6 +1,6 @@
-
@@ -17,7 +17,8 @@
data() {
return {
- placement: this.dropdown.placement
+ visibleArrow: this.dropdown.visibleArrow,
+ size: this.dropdown.size
};
},
diff --git a/packages/dropdown/src/dropdown.vue b/packages/dropdown/src/dropdown.vue
index 943a9f3a2..9801cadd2 100644
--- a/packages/dropdown/src/dropdown.vue
+++ b/packages/dropdown/src/dropdown.vue
@@ -30,7 +30,10 @@
default: 'hover'
},
type: String,
- size: String,
+ size: {
+ type: String,
+ default: ''
+ },
splitButton: Boolean,
hideOnClick: {
type: Boolean,
@@ -39,6 +42,9 @@
placement: {
type: String,
default: 'bottom-end'
+ },
+ visibleArrow: {
+ default: true
}
},
@@ -112,6 +118,7 @@
var handleMainButtonClick = (event) => {
this.$emit('click', event);
+ hide();
};
let triggerElm = !splitButton
diff --git a/packages/popover/src/main.vue b/packages/popover/src/main.vue
index 912d6dd63..1b34a49ec 100644
--- a/packages/popover/src/main.vue
+++ b/packages/popover/src/main.vue
@@ -2,7 +2,7 @@