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

Dropdown: fix duplicate visibleArrow declaration

pull/7323/head
Leopoldthecoder 2017-10-01 20:16:16 +08:00 committed by 杨奕
parent 186143b138
commit ee63e1e0af
18 changed files with 184 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
examples/components/demo-block.vue
View File

@ -153,7 +153,7 @@
}
&:hover {
color: #20a0ff;
color: #409EFF;
background-color: #f9fafc;
}
@ -167,8 +167,10 @@
line-height: 26px;
position: absolute;
top: 0;
right: 25px;
right: 0;
font-size: 14px;
padding-left: 5px;
padding-right: 25px;
}
}
}

4
examples/components/side-nav.vue
View File

@ -17,6 +17,10 @@
margin: 0;
overflow: hidden;
}
> ul > .nav-item > a {
margin-top: 15px;
}
.nav-item {
a {

4
examples/docs/en-US/color-picker.md
View File

@ -5,7 +5,7 @@
color1: '#409EFF',
color2: null,
color3: 'rgba(19, 206, 102, 0.8)',
color4: '#20a0ff'
color4: '#409EFF'
};
},
mounted() {
@ -101,7 +101,7 @@ ColorPicker is a color selector supporting multiple color formats.
export default {
data() {
return {
color4: '#20a0ff'
color4: '#409EFF'
}
}
};

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

@ -9,7 +9,7 @@
}
.el-dropdown-link {
cursor: pointer;
color: #20a0ff;
color: #409EFF;
}
.el-icon-caret-bottom {
font-size: 12px;
@ -71,6 +71,17 @@ Hover on the dropdown menu to unfold it for more actions.
<el-dropdown-item divided>Action 5</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<style>
.el-dropdown-link {
cursor: pointer;
color: #409EFF;
}
.el-icon-caret-bottom {
font-size: 12px;
}
</style>
```
:::
@ -103,6 +114,28 @@ Use the button to trigger the dropdown list.
<el-dropdown-item>Action 5</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<style>
.el-dropdown {
vertical-align: top;
}
.el-dropdown + .el-dropdown {
margin-left: 15px;
}
.el-icon-caret-bottom {
font-size: 12px;
}
</style>
<script>
export default {
methods: {
handleClick() {
alert('button click');
}
}
}
</script>
```
:::
@ -145,6 +178,22 @@ Click the triggering element or hover on it.
</el-dropdown>
</el-col>
</el-row>
<style>
.el-dropdown-link {
cursor: pointer;
color: #409EFF;
}
.el-icon-caret-bottom {
font-size: 12px;
}
.demonstration {
display: block;
color: #8492a6;
font-size: 14px;
margin-bottom: 20px;
}
</style>
```
:::
@ -166,6 +215,16 @@ Use `hide-on-click` to define if menu closes on clicking.
<el-dropdown-item divided>Action 5</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<style>
.el-dropdown-link {
cursor: pointer;
color: #409EFF;
}
.el-icon-caret-bottom {
font-size: 12px;
}
</style>
```
:::
@ -187,6 +246,17 @@ Clicking each dropdown item fires an event whose parameter is assigned by each i
<el-dropdown-item command="e" divided>Action 5</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<style>
.el-dropdown-link {
cursor: pointer;
color: #409EFF;
}
.el-icon-caret-bottom {
font-size: 12px;
}
</style>
<script>
export default {
methods: {
@ -206,7 +276,7 @@ Besides default size, Dropdown component provides three additional sizes for you
:::demo Use attribute `size` to set additional sizes with `medium`, `small` or `mini`.
```html
<el-dropdown split-button type="primary">
<el-dropdown split-button type="primary">
Default
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>Action 1</el-dropdown-item>

2
examples/docs/en-US/switch.md
View File

@ -149,7 +149,7 @@ on-text | text displayed when in `on` state | string | — | —
off-text | text displayed when in `off` state | string | — | —
on-value | switch value when in `on` state | boolean / string / number | — | true
off-value | switch value when in `off` state | boolean / string / number | — | false
on-color | background color when in `on` state | string | — | #20A0FF
on-color | background color when in `on` state | string | — | #409EFF
off-color | background color when in `off` state | string | — | #C0CCDA
name| input name of Switch | string | — | —

8
examples/docs/en-US/transition.md
View File

@ -35,7 +35,7 @@ You can use Element's built-in transitions directly. Before that, please read th
width: 200px;
height: 100px;
border-radius: 4px;
background-color: #20A0FF;
background-color: #409EFF;
text-align: center;
color: #fff;
padding: 40px 20px;
@ -84,7 +84,7 @@ You can use Element's built-in transitions directly. Before that, please read th
width: 200px;
height: 100px;
border-radius: 4px;
background-color: #20A0FF;
background-color: #409EFF;
text-align: center;
color: #fff;
padding: 40px 20px;
@ -131,7 +131,7 @@ For collapse effect, use the `el-collapse-transition` component.
width: 200px;
height: 100px;
border-radius: 4px;
background-color: #20A0FF;
background-color: #409EFF;
text-align: center;
color: #fff;
padding: 40px 20px;
@ -160,7 +160,7 @@ Vue.component(CollapseTransition.name, CollapseTransition)
width: 200px;
height: 100px;
border-radius: 4px;
background-color: #20A0FF;
background-color: #409EFF;
text-align: center;
color: #fff;
padding: 40px 20px;

4
examples/docs/en-US/upload.md
View File

@ -19,7 +19,7 @@
overflow: hidden;
&:hover {
border-color: #20a0ff;
border-color: #409EFF;
}
}
.avatar-uploader-icon {
@ -179,7 +179,7 @@ Use `before-upload` hook to limit the upload file format and size.
overflow: hidden;
}
.avatar-uploader .el-upload:hover {
border-color: #20a0ff;
border-color: #409EFF;
}
.avatar-uploader-icon {
font-size: 28px;

4
examples/docs/zh-CN/color-picker.md
View File

@ -5,7 +5,7 @@
color1: '#409EFF',
color2: null,
color3: 'rgba(19, 206, 102, 0.8)',
color4: '#20a0ff'
color4: '#409EFF'
};
},
mounted() {
@ -101,7 +101,7 @@
export default {
data() {
return {
color4: '#20a0ff'
color4: '#409EFF'
}
}
};

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

@ -9,7 +9,7 @@
}
.el-dropdown-link {
cursor: pointer;
color: #20a0ff;
color: #409EFF;
}
.el-icon-caret-bottom {
font-size: 12px;
@ -74,6 +74,17 @@
</el-dropdown-menu>
</el-dropdown>
```
<style>
.el-dropdown-link {
cursor: pointer;
color: #409EFF;
}
.el-icon-caret-bottom {
font-size: 12px;
}
</style>
:::
### 触发对象
@ -106,6 +117,28 @@
</el-dropdown-menu>
</el-dropdown>
<style>
.el-dropdown {
vertical-align: top;
}
.el-dropdown + .el-dropdown {
margin-left: 15px;
}
.el-icon-caret-bottom {
font-size: 12px;
}
</style>
<script>
export default {
methods: {
handleClick() {
alert('button click');
}
}
}
</script>
```
:::
@ -148,6 +181,23 @@
</el-col>
</el-row>
```
<style>
.el-dropdown-link {
cursor: pointer;
color: #409EFF;
}
.el-icon-caret-bottom {
font-size: 12px;
}
.demonstration {
display: block;
color: #8492a6;
font-size: 14px;
margin-bottom: 20px;
}
</style>
:::
### 菜单隐藏方式
@ -168,6 +218,16 @@
<el-dropdown-item divided>蚵仔煎</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<style>
.el-dropdown-link {
cursor: pointer;
color: #409EFF;
}
.el-icon-caret-bottom {
font-size: 12px;
}
</style>
```
:::
@ -189,6 +249,17 @@
<el-dropdown-item command="e" divided>蚵仔煎</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<style>
.el-dropdown-link {
cursor: pointer;
color: #409EFF;
}
.el-icon-caret-bottom {
font-size: 12px;
}
</style>
<script>
export default {
methods: {
@ -208,7 +279,7 @@ Dropdown 组件提供除了默认值以外的三种尺寸，可以在不同场
:::demo 额外的尺寸：`medium`、`small`、`mini`，通过设置`size`属性来配置它们。
```html
<el-dropdown split-button type="primary">
<el-dropdown split-button type="primary">
默认尺寸
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>黄金糕</el-dropdown-item>

2
examples/docs/zh-CN/switch.md
View File

@ -152,7 +152,7 @@
| off-text | switch 关闭时的文字描述 | string | — | — |
| on-value | switch 打开时的值 | boolean / string / number | — | true |
| off-value | switch 关闭时的值 | boolean / string / number | — | false |
| on-color | switch 打开时的背景色 | string | — | #20A0FF |
| on-color | switch 打开时的背景色 | string | — | #409EFF |
| off-color | switch 关闭时的背景色 | string | — | #C0CCDA |
| name | switch 对应的 name 属性 | string | — | — |

8
examples/docs/zh-CN/transition.md
View File

@ -35,7 +35,7 @@ Element 内应用在部分组件的过渡动画，你也可以直接使用。在
width: 200px;
height: 100px;
border-radius: 4px;
background-color: #20A0FF;
background-color: #409EFF;
text-align: center;
color: #fff;
padding: 40px 20px;
@ -84,7 +84,7 @@ Element 内应用在部分组件的过渡动画，你也可以直接使用。在
width: 200px;
height: 100px;
border-radius: 4px;
background-color: #20A0FF;
background-color: #409EFF;
text-align: center;
color: #fff;
padding: 40px 20px;
@ -131,7 +131,7 @@ Element 内应用在部分组件的过渡动画，你也可以直接使用。在
width: 200px;
height: 100px;
border-radius: 4px;
background-color: #20A0FF;
background-color: #409EFF;
text-align: center;
color: #fff;
padding: 40px 20px;
@ -160,7 +160,7 @@ Vue.component(CollapseTransition.name, CollapseTransition)
width: 200px;
height: 100px;
border-radius: 4px;
background-color: #20A0FF;
background-color: #409EFF;
text-align: center;
color: #fff;
padding: 40px 20px;

4
examples/docs/zh-CN/upload.md
View File

@ -19,7 +19,7 @@
overflow: hidden;
&:hover {
border-color: #20a0ff;
border-color: #409EFF;
}
}
.avatar-uploader-icon {
@ -179,7 +179,7 @@
overflow: hidden;
}
.avatar-uploader .el-upload:hover {
border-color: #20a0ff;
border-color: #409EFF;
}
.avatar-uploader-icon {
font-size: 28px;

2
examples/index.tpl
View File

@ -4,7 +4,7 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<link rel="stylesheet" href="//at.alicdn.com/t/font_1473762766_7074292.css">
<link rel='mask-icon' href="https://raw.githubusercontent.com/ElemeFE/element/dev/examples/assets/images/element-logo-small.svg" color="#20a0ff">
<link rel='mask-icon' href="https://raw.githubusercontent.com/ElemeFE/element/dev/examples/assets/images/element-logo-small.svg" color="#409EFF">
<title>Element</title>
</head>
<body>

2
examples/pages/template/changelog.tpl
View File

@ -17,7 +17,7 @@
}
&:hover a {
color: #20a0ff;
color: #409EFF;
}
}

2
examples/pages/template/component.tpl
View File

@ -71,7 +71,7 @@
}
td, th {
border-bottom: 1px solid #eaeefb;
border-bottom: 1px solid #d8d8d8;
padding: 15px;
max-width: 250px;
}

4
examples/pages/template/index.tpl
View File

@ -120,7 +120,7 @@
height: 53px;
line-height: 52px;
font-size: 14px;
color: #20a0ff;
color: #409EFF;
text-align: center;
border: 0;
border-top: 1px solid #eaeefb;
@ -138,7 +138,7 @@
&:hover {
color: #fff;
background: #20a0ff;
background: #409EFF;
}
}
&:hover {

2
examples/pages/template/resource.tpl
View File

@ -65,7 +65,7 @@
display: inline-block;
line-height: @height;
font-size: 14px;
background-color: #20a0ff;
background-color: #409EFF;
color: #fff;
text-align: center;
border: 0;

8
packages/dropdown/src/dropdown-menu.vue
View File

@ -15,9 +15,15 @@
mixins: [Popper],
props: {
visibleArrow: {
type: Boolean,
default: true
}
},
data() {
return {
visibleArrow: this.dropdown.visibleArrow,
size: this.dropdown.size
};
},