Skip to content

E
Element
Commit 2a0a4bc6 authored by Black Wayne's avatar Black Wayne Committed by 杨奕
Browse files
Options

Dropdown: add chalk theme (#7089) 

* Dropdown: add chalk theme

* Dropdown: update doc

* Update dropdown.md
parent 91d9ed7f
Hide whitespace changes
Inline Side-by-side
Showing with 208 additions and 30 deletions
examples/docs/en-US/dropdown.md
View file @ 2a0a4bc6
......@@ -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
<el-dropdown split-button type="primary">
Default
<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-menu>
</el-dropdown>
<el-dropdown size="medium" split-button type="primary">
Medium
<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-menu>
</el-dropdown>
<el-dropdown size="small" split-button type="primary">
Small
<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-menu>
</el-dropdown>
<el-dropdown size="mini" split-button type="primary">
Mini
<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-menu>
</el-dropdown>
```
:::
### 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 |
......
examples/docs/zh-CN/dropdown.md
View file @ 2a0a4bc6
......@@ -201,11 +201,64 @@
```
:::
### 不同尺寸
Dropdown 组件提供除了默认值以外的三种尺寸，可以在不同场景下选择合适的尺寸。
:::demo 额外的尺寸：`medium`、`small`、`mini`，通过设置`size`属性来配置它们。
```html
<el-dropdown split-button type="primary">
默认尺寸
<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-menu>
</el-dropdown>
<el-dropdown size="medium" split-button type="primary">
中等尺寸
<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-menu>
</el-dropdown>
<el-dropdown size="small" split-button type="primary">
小型尺寸
<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-menu>
</el-dropdown>
<el-dropdown size="mini" split-button type="primary">
超小尺寸
<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-menu>
</el-dropdown>
```
:::
### 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 |
......
packages/dropdown/src/dropdown-menu.vue
View file @ 2a0a4bc6
<template>
<transition name="el-zoom-in-top" @after-leave="doDestroy">
<ul class="el-dropdown-menu" v-show="showPopper">
<ul class="el-dropdown-menu el-popper" :class="[size && `el-dropdown-menu--${size}`]" v-show="showPopper">
<slot></slot>
</ul>
</transition>
......@@ -17,7 +17,8 @@
data() {
return {
placement: this.dropdown.placement
visibleArrow: this.dropdown.visibleArrow,
size: this.dropdown.size
};
},
......
packages/dropdown/src/dropdown.vue
View file @ 2a0a4bc6
......@@ -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
......
packages/popover/src/main.vue
View file @ 2a0a4bc6
......@@ -2,7 +2,7 @@
<span>
<transition :name="transition" @after-leave="doDestroy">
<div
class="el-popover"
class="el-popover el-popper"
:class="[popperClass, content && 'el-popover--plain']"
ref="popper"
v-show="!disabled && showPopper"
......
packages/theme-chalk/src/common/var.scss
View file @ 2a0a4bc6
......@@ -546,7 +546,7 @@ $--tree-expand-icon-color: $--color-text-placeholder;
/* Dropdown
-------------------------- */
$--dropdown-menu-box-shadow: $--box-shadow-light;
$--dropdown-menuItem-hover-fill: $--color-text-secondary;
$--dropdown-menuItem-hover-fill: $--color-primary-light-9;
$--dropdown-menuItem-hover-color: $--link-color;
/* Badge
......
packages/theme-chalk/src/dropdown.scss
View file @ 2a0a4bc6
......@@ -5,7 +5,7 @@
@include b(dropdown) {
display: inline-block;
position: relative;
color: $--color-black;
color: $--color-text-regular;
font-size: $--font-size-base;
.el-button-group {
......@@ -28,46 +28,112 @@
margin: 0 3px;
}
}
@include b(dropdown-menu) {
margin: 5px 0;
background-color: $--color-white;
border: 1px solid $--color-black;
box-shadow: $--dropdown-menu-box-shadow;
padding: 6px 0;
z-index: 10;
position: absolute;
top: 0;
left: 0;
min-width: 100px;
z-index: 10;
padding: 10px 0;
margin: 5px 0;
background-color: $--color-white;
border: 1px solid $--border-color-lighter;
box-shadow: $--dropdown-menu-box-shadow;
@include e(item) {
list-style: none;
line-height: 36px;
padding: 0 10px;
padding: 0 20px;
margin: 0;
font-size: $--font-size-base;
color: $--font-color-base;
cursor: pointer;
&:not(.is-disabled):hover {
background-color: $--dropdown-menuItem-hover-fill;
color: $--dropdown-menuItem-hover-color;
}
@include m(divided) {
$divided-offset: 6px;
position: relative;
margin-top: 6px;
border-top: 1px solid $--color-black;
margin-top: $divided-offset;
border-top: 1px solid $--border-color-lighter;
&:before {
content: '';
height: 6px;
height: $divided-offset;
display: block;
margin: 0 -10px;
margin: 0 -20px;
background-color: $--color-white;
}
}
@include when(disabled) {
cursor: default;
color: $--color-black;
color: $--font-color-disabled-base;
pointer-events: none;
}
}
@include m(medium) {
padding: 6px 0;
@include e(item) {
line-height: 30px;
padding: 0 17px;
font-size: 14px;
&.el-dropdown-menu__item--divided {
$divided-offset: 6px;
margin-top: $divided-offset;
&:before {
height: $divided-offset;
margin: 0 -17px;
}
}
}
}
@include m(small) {
padding: 6px 0;
@include e(item) {
line-height: 27px;
padding: 0 15px;
font-size: 13px;
&.el-dropdown-menu__item--divided {
$divided-offset: 4px;
margin-top: $divided-offset;
&:before {
height: $divided-offset;
margin: 0 -15px;
}
}
}
}
@include m(mini) {
padding: 3px 0;
@include e(item) {
line-height: 24px;
padding: 0 10px;
font-size: 12px;
&.el-dropdown-menu__item--divided {
$divided-offset: 3px;
margin-top: $divided-offset;
&:before {
height: $divided-offset;
margin: 0 -10px;
}
}
}
}
}
packages/theme-chalk/src/popover.scss
View file @ 2a0a4bc6
......@@ -20,6 +20,15 @@
padding: $--popover-padding-large;
}
@include e(title) {
color: $--popover-title-color;
font-size: $--popover-title-font-size;
line-height: 1;
margin-bottom: 15px;
}
}
@include b(popper) {
.popper__arrow,
.popper__arrow::after {
position: absolute;
......@@ -116,11 +125,4 @@
border-left-color: $--popover-fill;
}
}
@include e(title) {
color: $--popover-title-color;
font-size: $--popover-title-font-size;
line-height: 1;
margin-bottom: 15px;
}
}
}
\ No newline at end of file
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