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

Layout: add xl breakpoint

pull/7588/head
Leopoldthecoder 2017-10-19 15:54:01 +08:00 committed by 杨奕
parent 457f9f97ed
commit c31f413a4f
17 changed files with 197 additions and 125 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
examples/docs/en-US/date-picker.md
View File

@ -210,7 +210,7 @@ You can choose week, month or year by extending the standard date picker compone
Picking a date range is supported. Picking a date range is supported.
:::demo :::demo When in range mode, the left and right panels are linked by default. If you want the two panels to switch current months independently, you can use the `unlink-panels` attribute.
```html ```html
<template> <template>
@ -230,6 +230,7 @@ Picking a date range is supported.
v-model="value7" v-model="value7"
type="daterange" type="daterange"
align="right" align="right"
unlink-panels
range-separator="To" range-separator="To"
start-placeholder="Start date" start-placeholder="Start date"
end-placeholder="End date" end-placeholder="End date"
@ -389,7 +390,7 @@ This feature is at alpha stage. Feedback welcome.
| default-value | optional, default date of the calendar | Date | anything accepted by `new Date()` | — | | default-value | optional, default date of the calendar | Date | anything accepted by `new Date()` | — |
| value-format | optional, format of binding value. If not specified, the binding value will be a Date object | string | year `yyyy`, month `MM`, day `dd`, hour `HH`, minute `mm`, second `ss` | — | | value-format | optional, format of binding value. If not specified, the binding value will be a Date object | string | year `yyyy`, month `MM`, day `dd`, hour `HH`, minute `mm`, second `ss` | — |
| name | same as `name` in native input | string | — | — | | name | same as `name` in native input | string | — | — |
| unlink-panels | unllink two date-panels in range-picker | boolean | — | false | | unlink-panels | unlink two date-panels in range-picker | boolean | — | false |
### Picker Options ### Picker Options
| Attribute | Description | Type | Accepted Values | Default | | Attribute | Description | Type | Accepted Values | Default |

25
examples/docs/en-US/layout.md
View File

@ -309,15 +309,15 @@ Use the flex layout to make flexible alignment of columns.
### Responsive Layout ### Responsive Layout
Taking example by Bootstrap's responsive design, four breakpoints are preset: xs, sm, md and lg. Taking example by Bootstrap's responsive design, five breakpoints are preset: xs, sm, md, lg and xl.
::: demo ::: demo
```html ```html
<el-row :gutter="10"> <el-row :gutter="10">
<el-col :xs="8" :sm="6" :md="4" :lg="3"><div class="grid-content bg-purple"></div></el-col> <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"><div class="grid-content bg-purple"></div></el-col>
<el-col :xs="4" :sm="6" :md="8" :lg="9"><div class="grid-content bg-purple-light"></div></el-col> <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"><div class="grid-content bg-purple-light"></div></el-col>
<el-col :xs="4" :sm="6" :md="8" :lg="9"><div class="grid-content bg-purple"></div></el-col> <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"><div class="grid-content bg-purple"></div></el-col>
<el-col :xs="8" :sm="6" :md="4" :lg="3"><div class="grid-content bg-purple-light"></div></el-col> <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"><div class="grid-content bg-purple-light"></div></el-col>
</el-row> </el-row>
<style> <style>
@ -341,12 +341,15 @@ Taking example by Bootstrap's responsive design, four breakpoints are preset: xs
``` ```
::: :::
### Classes for Visibility ### Utility classes for hiding elements
Additionally, Element provides a series of classes for hiding elements under certain conditions. These classes can be added to any DOM elements or custom components. You need to import the following CSS file to use these classes:
```js ```js
import 'element-ui/lib/theme-chalk/display.scss'; import 'element-ui/lib/theme-chalk/display.css';
``` ```
The classes are:
- `hide-xs-only` - hide when on extra small viewports only - `hide-xs-only` - hide when on extra small viewports only
- `hide-sm-only` - hide when on small viewports and down - `hide-sm-only` - hide when on small viewports and down
- `hide-sm-and-down` - hide when on small viewports and down - `hide-sm-and-down` - hide when on small viewports and down
@ -355,6 +358,9 @@ import 'element-ui/lib/theme-chalk/display.scss';
- `hide-md-and-down` - hide when on medium viewports and down - `hide-md-and-down` - hide when on medium viewports and down
- `hide-md-and-up` - hide when on medium viewports and up - `hide-md-and-up` - hide when on medium viewports and up
- `hide-lg-only` - hide when on large viewports only - `hide-lg-only` - hide when on large viewports only
- `hide-lg-and-down` - hide when on large viewports and down
- `hide-lg-and-up` - hide when on large viewports and up
- `hide-xl-only` - hide when on extra large viewports only
### Row Attributes ### Row Attributes
| Attribute | Description | Type | Accepted Values | Default | | Attribute | Description | Type | Accepted Values | Default |
@ -374,8 +380,9 @@ import 'element-ui/lib/theme-chalk/display.scss';
| pull | number of columns that grid moves to the left | number | — | 0 | | pull | number of columns that grid moves to the left | number | — | 0 |
| xs | `<768px` Responsive columns or column props object | number/object (e.g. {span: 4, offset: 4}) | — | — | | xs | `<768px` Responsive columns or column props object | number/object (e.g. {span: 4, offset: 4}) | — | — |
| sm | `≥768px` Responsive columns or column props object | number/object (e.g. {span: 4, offset: 4}) | — | — | | sm | `≥768px` Responsive columns or column props object | number/object (e.g. {span: 4, offset: 4}) | — | — |
| md | `≥992` Responsive columns or column props object | number/object (e.g. {span: 4, offset: 4}) | — | — | | md | `≥992px` Responsive columns or column props object | number/object (e.g. {span: 4, offset: 4}) | — | — |
| lg | `≥1200` Responsive columns or column props object | number/object (e.g. {span: 4, offset: 4}) | — | — | | lg | `≥1200px` Responsive columns or column props object | number/object (e.g. {span: 4, offset: 4}) | — | — |
| xl | `≥1920px` Responsive columns or column props object | number/object (e.g. {span: 4, offset: 4}) | — | — |
| tag | custom element tag | string | * | div | | tag | custom element tag | string | * | div |

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

@ -530,6 +530,7 @@ Enter keywords and search data from server.
multiple multiple
filterable filterable
remote remote
reserve-keyword
placeholder="Please enter a keyword" placeholder="Please enter a keyword"
:remote-method="remoteMethod" :remote-method="remoteMethod"
:loading="loading"> :loading="loading">
@ -662,6 +663,7 @@ If the binding value of Select is an object, make sure to assign `value-key` as
| no-match-text | displayed text when no data matches the filtering query | string | — | No matching data | | no-match-text | displayed text when no data matches the filtering query | string | — | No matching data |
| no-data-text | displayed text when there is no options | string | — | No data | | no-data-text | displayed text when there is no options | string | — | No data |
| popper-class | custom class name for Select's dropdown | string | — | — | | popper-class | custom class name for Select's dropdown | string | — | — |
| reserve-keyword | when `multiple` and `filter` is true, whether to reserve current keyword after selecting an option | boolean | — | false |
| default-first-option | select first matching option on enter key. Use with `filterable` or `remote` | boolean | - | false | | default-first-option | select first matching option on enter key. Use with `filterable` or `remote` | boolean | - | false |
### Select Events ### Select Events

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

@ -27,15 +27,15 @@
Switch is used for switching between two opposing states. Switch is used for switching between two opposing states.
### Basic usage ### Basic usage
:::demo Bind `v-model` to a `Boolean` typed variable. The `true-color` and `false-color` attribute decides the background color in two states. :::demo Bind `v-model` to a `Boolean` typed variable. The `active-color` and `inactive-color` attribute decides the background color in two states.
```html ```html
<el-switch v-model="value1"> <el-switch v-model="value1">
</el-switch> </el-switch>
<el-switch <el-switch
v-model="value2" v-model="value2"
true-color="#13ce66" active-color="#13ce66"
false-color="#ff4949"> inactive-color="#ff4949">
</el-switch> </el-switch>
<script> <script>
@ -52,21 +52,21 @@ Switch is used for switching between two opposing states.
::: :::
### Text description ### Text description
:::demo You can add `true-text` and `false-text` attribute to show texts. :::demo You can add `active-text` and `inactive-text` attribute to show texts.
```html ```html
<el-switch <el-switch
v-model="value3" v-model="value3"
true-text="Pay by month" active-text="Pay by month"
false-text="Pay by year"> inactive-text="Pay by year">
</el-switch> </el-switch>
<el-switch <el-switch
style="display: block" style="display: block"
v-model="value4" v-model="value4"
true-color="#13ce66" active-color="#13ce66"
false-color="#ff4949" inactive-color="#ff4949"
true-text="Pay by month" active-text="Pay by month"
false-text="Pay by year"> inactive-text="Pay by year">
</el-switch> </el-switch>
<script> <script>
@ -84,16 +84,16 @@ Switch is used for switching between two opposing states.
### Extended value types ### Extended value types
:::demo You can set `true-value` and `false-value` attributes. They both receive a `Boolean`, `String` or `Number` typed value. :::demo You can set `active-value` and `inactive-value` attributes. They both receive a `Boolean`, `String` or `Number` typed value.
```html ```html
<el-tooltip :content="'Switch value: ' + value5" placement="top"> <el-tooltip :content="'Switch value: ' + value5" placement="top">
<el-switch <el-switch
v-model="value5" v-model="value5"
true-color="#13ce66" active-color="#13ce66"
false-color="#ff4949" inactive-color="#ff4949"
true-value="100" active-value="100"
false-value="0"> inactive-value="0">
</el-switch> </el-switch>
</el-tooltip> </el-tooltip>
@ -143,14 +143,14 @@ Switch is used for switching between two opposing states.
----| ----| ----| ----|---- ----| ----| ----| ----|----
disabled | whether Switch is disabled | boolean | — | false disabled | whether Switch is disabled | boolean | — | false
width | width of Switch | number | — | 40 width | width of Switch | number | — | 40
true-icon-class | class name of the icon displayed when in `on` state, overrides `true-text` | string | — | — active-icon-class | class name of the icon displayed when in `on` state, overrides `active-text` | string | — | —
false-icon-class |class name of the icon displayed when in `off` state, overrides `false-text`| string | — | — inactive-icon-class |class name of the icon displayed when in `off` state, overrides `inactive-text`| string | — | —
true-text | text displayed when in `on` state | string | — | — active-text | text displayed when in `on` state | string | — | —
false-text | text displayed when in `off` state | string | — | — inactive-text | text displayed when in `off` state | string | — | —
true-value | switch value when in `on` state | boolean / string / number | — | true active-value | switch value when in `on` state | boolean / string / number | — | true
false-value | switch value when in `off` state | boolean / string / number | — | false inactive-value | switch value when in `off` state | boolean / string / number | — | false
true-color | background color when in `on` state | string | — | #409EFF active-color | background color when in `on` state | string | — | #409EFF
false-color | background color when in `off` state | string | — | #C0CCDA inactive-color | background color when in `off` state | string | — | #C0CCDA
name| input name of Switch | string | — | — name| input name of Switch | string | — | —
### Events ### Events

3
examples/docs/zh-CN/date-picker.md
View File

@ -222,7 +222,7 @@
可在一个选择器中便捷地选择一个时间范围 可在一个选择器中便捷地选择一个时间范围
:::demo :::demo 在选择日期范围时，默认情况下左右面板会联动。如果希望两个面板各自独立切换当前月份，可以使用`unlink-panels`属性解除联动。
```html ```html
<template> <template>
<div class="block"> <div class="block">
@ -241,6 +241,7 @@
v-model="value7" v-model="value7"
type="daterange" type="daterange"
align="right" align="right"
unlink-panels
range-separator="至" range-separator="至"
start-placeholder="开始日期" start-placeholder="开始日期"
end-placeholder="结束日期" end-placeholder="结束日期"

27
examples/docs/zh-CN/layout.md
View File

@ -308,15 +308,15 @@
### 响应式布局 ### 响应式布局
参照了 Bootstrap 的 响应式设计，预设了四个响应尺寸：`xs`、`sm`、`md`和`lg`。 参照了 Bootstrap 的 响应式设计，预设了五个响应尺寸：`xs`、`sm`、`md`、`lg` 和 `xl`。
::: demo ::: demo
```html ```html
<el-row :gutter="10"> <el-row :gutter="10">
<el-col :xs="8" :sm="6" :md="4" :lg="3"><div class="grid-content bg-purple"></div></el-col> <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"><div class="grid-content bg-purple"></div></el-col>
<el-col :xs="4" :sm="6" :md="8" :lg="9"><div class="grid-content bg-purple-light"></div></el-col> <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"><div class="grid-content bg-purple-light"></div></el-col>
<el-col :xs="4" :sm="6" :md="8" :lg="9"><div class="grid-content bg-purple"></div></el-col> <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"><div class="grid-content bg-purple"></div></el-col>
<el-col :xs="8" :sm="6" :md="4" :lg="3"><div class="grid-content bg-purple-light"></div></el-col> <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"><div class="grid-content bg-purple-light"></div></el-col>
</el-row> </el-row>
<style> <style>
@ -340,12 +340,15 @@
``` ```
::: :::
### 基于断点的隐藏 ### 基于断点的隐藏类
Element 额外提供了一系列类名，用于在某些条件下隐藏元素。这些类名可以添加在任何 DOM 元素或自定义组件上。如果需要，请自行引入以下文件：
```js ```js
import 'element-ui/lib/theme-chalk/display.scss'; import 'element-ui/lib/theme-chalk/display.css';
``` ```
包含的类名及其含义为：
- `hidden-xs-only` - 当视口在 `xs` 尺寸时隐藏 - `hidden-xs-only` - 当视口在 `xs` 尺寸时隐藏
- `hidden-sm-only` - 当视口在 `sm` 尺寸时隐藏 - `hidden-sm-only` - 当视口在 `sm` 尺寸时隐藏
- `hidden-sm-and-down` - 当视口在 `sm` 及以下尺寸时隐藏 - `hidden-sm-and-down` - 当视口在 `sm` 及以下尺寸时隐藏
@ -353,7 +356,10 @@ import 'element-ui/lib/theme-chalk/display.scss';
- `hidden-md-only` - 当视口在 `md` 尺寸时隐藏 - `hidden-md-only` - 当视口在 `md` 尺寸时隐藏
- `hidden-md-and-down` - 当视口在 `md` 及以下尺寸时隐藏 - `hidden-md-and-down` - 当视口在 `md` 及以下尺寸时隐藏
- `hidden-md-and-up` - 当视口在 `md` 及以上尺寸时隐藏 - `hidden-md-and-up` - 当视口在 `md` 及以上尺寸时隐藏
- `hidden-lg-only` - 当视口在 `lg` 及以下尺寸时隐藏 - `hidden-lg-only` - 当视口在 `lg` 尺寸时隐藏
- `hidden-lg-and-down` - 当视口在 `lg` 及以下尺寸时隐藏
- `hidden-lg-and-up` - 当视口在 `lg` 及以上尺寸时隐藏
- `hidden-xl-only` - 当视口在 `xl` 尺寸时隐藏
### Row Attributes ### Row Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 | | 参数 | 说明 | 类型 | 可选值 | 默认值 |
@ -373,6 +379,7 @@ import 'element-ui/lib/theme-chalk/display.scss';
| pull | 栅格向左移动格数 | number | — | 0 | | pull | 栅格向左移动格数 | number | — | 0 |
| xs | `<768px` 响应式栅格数或者栅格属性对象 | number/object (例如： {span: 4, offset: 4}) | — | — | | xs | `<768px` 响应式栅格数或者栅格属性对象 | number/object (例如： {span: 4, offset: 4}) | — | — |
| sm | `≥768px` 响应式栅格数或者栅格属性对象 | number/object (例如： {span: 4, offset: 4}) | — | — | | sm | `≥768px` 响应式栅格数或者栅格属性对象 | number/object (例如： {span: 4, offset: 4}) | — | — |
| md | `≥992` 响应式栅格数或者栅格属性对象 | number/object (例如： {span: 4, offset: 4}) | — | — | | md | `≥992px` 响应式栅格数或者栅格属性对象 | number/object (例如： {span: 4, offset: 4}) | — | — |
| lg | `≥1200` 响应式栅格数或者栅格属性对象 | number/object (例如： {span: 4, offset: 4}) | — | — | | lg | `≥1200px` 响应式栅格数或者栅格属性对象 | number/object (例如： {span: 4, offset: 4}) | — | — |
| xl | `≥1920px` 响应式栅格数或者栅格属性对象 | number/object (例如： {span: 4, offset: 4}) | — | — |
| tag | 自定义元素标签 | string | * | div | | tag | 自定义元素标签 | string | * | div |

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

@ -525,6 +525,7 @@
multiple multiple
filterable filterable
remote remote
reserve-keyword
placeholder="请输入关键词" placeholder="请输入关键词"
:remote-method="remoteMethod" :remote-method="remoteMethod"
:loading="loading"> :loading="loading">
@ -649,7 +650,7 @@
| placeholder | 占位符 | string | — | 请选择 | | placeholder | 占位符 | string | — | 请选择 |
| filterable | 是否可搜索 | boolean | — | false | | filterable | 是否可搜索 | boolean | — | false |
| allow-create | 是否允许用户创建新条目，需配合 `filterable` 使用 | boolean | — | false | | allow-create | 是否允许用户创建新条目，需配合 `filterable` 使用 | boolean | — | false |
| filter-method | 自定义过滤方法 | function | — | — | | filter-method | 自定义搜索方法 | function | — | — |
| remote | 是否为远程搜索 | boolean | — | false | | remote | 是否为远程搜索 | boolean | — | false |
| remote-method | 远程搜索方法 | function | — | — | | remote-method | 远程搜索方法 | function | — | — |
| loading | 是否正在从远程获取数据 | boolean | — | false | | loading | 是否正在从远程获取数据 | boolean | — | false |
@ -657,6 +658,7 @@
| no-match-text | 搜索条件无匹配时显示的文字 | string | — | 无匹配数据 | | no-match-text | 搜索条件无匹配时显示的文字 | string | — | 无匹配数据 |
| no-data-text | 选项为空时显示的文字 | string | — | 无数据 | | no-data-text | 选项为空时显示的文字 | string | — | 无数据 |
| popper-class | Select 下拉框的类名 | string | — | — | | popper-class | Select 下拉框的类名 | string | — | — |
| reserve-keyword | 多选且可搜索时，是否在选中一个选项后保留当前的搜索关键词 | boolean | — | false |
| default-first-option | 在输入框按下回车，选择第一个匹配项。需配合 `filterable` 或 `remote` 使用 | boolean | - | false | | default-first-option | 在输入框按下回车，选择第一个匹配项。需配合 `filterable` 或 `remote` 使用 | boolean | - | false |
### Select Events ### Select Events

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

@ -28,13 +28,13 @@
### 基本用法 ### 基本用法
:::demo 绑定`v-model`到一个`Boolean`类型的变量。可以使用`true-color`属性与`false-color`属性来设置开关的背景色。 :::demo 绑定`v-model`到一个`Boolean`类型的变量。可以使用`active-color`属性与`inactive-color`属性来设置开关的背景色。
```html ```html
<el-switch <el-switch
v-model="value2" v-model="value2"
true-color="#13ce66" active-color="#13ce66"
false-color="#ff4949"> inactive-color="#ff4949">
</el-switch> </el-switch>
<script> <script>
@ -52,21 +52,21 @@
### 文字描述 ### 文字描述
:::demo 使用`true-text`属性与`false-text`属性来设置开关的文字描述。 :::demo 使用`active-text`属性与`inactive-text`属性来设置开关的文字描述。
```html ```html
<el-switch <el-switch
v-model="value3" v-model="value3"
true-text="按月付费" active-text="按月付费"
false-text="按年付费"> inactive-text="按年付费">
</el-switch> </el-switch>
<el-switch <el-switch
style="display: block" style="display: block"
v-model="value4" v-model="value4"
true-color="#13ce66" active-color="#13ce66"
false-color="#ff4949" inactive-color="#ff4949"
true-text="按月付费" active-text="按月付费"
false-text="按年付费"> inactive-text="按年付费">
</el-switch> </el-switch>
<script> <script>
@ -84,16 +84,16 @@
### 扩展的 value 类型 ### 扩展的 value 类型
:::demo 设置`true-value`和`false-value`属性，接受`Boolean`, `String`或`Number`类型的值。 :::demo 设置`active-value`和`inactive-value`属性，接受`Boolean`, `String`或`Number`类型的值。
```html ```html
<el-tooltip :content="'Switch value: ' + value5" placement="top"> <el-tooltip :content="'Switch value: ' + value5" placement="top">
<el-switch <el-switch
v-model="value5" v-model="value5"
true-color="#13ce66" active-color="#13ce66"
false-color="#ff4949" inactive-color="#ff4949"
true-value="100" active-value="100"
false-value="0"> inactive-value="0">
</el-switch> </el-switch>
</el-tooltip> </el-tooltip>
@ -144,14 +144,14 @@
|---------- |-------- |---------- |------------- |-------- | |---------- |-------- |---------- |------------- |-------- |
| disabled | 是否禁用 | boolean | — | false | | disabled | 是否禁用 | boolean | — | false |
| width | switch 的宽度（像素） | number | — | 40 | | width | switch 的宽度（像素） | number | — | 40 |
| true-icon-class | switch 打开时所显示图标的类名，设置此项会忽略 `true-text` | string | — | — | | active-icon-class | switch 打开时所显示图标的类名，设置此项会忽略 `active-text` | string | — | — |
| false-icon-class | switch 关闭时所显示图标的类名，设置此项会忽略 `false-text` | string | — | — | | inactive-icon-class | switch 关闭时所显示图标的类名，设置此项会忽略 `inactive-text` | string | — | — |
| true-text | switch 打开时的文字描述 | string | — | — | | active-text | switch 打开时的文字描述 | string | — | — |
| false-text | switch 关闭时的文字描述 | string | — | — | | inactive-text | switch 关闭时的文字描述 | string | — | — |
| true-value | switch 打开时的值 | boolean / string / number | — | true | | active-value | switch 打开时的值 | boolean / string / number | — | true |
| false-value | switch 关闭时的值 | boolean / string / number | — | false | | inactive-value | switch 关闭时的值 | boolean / string / number | — | false |
| true-color | switch 打开时的背景色 | string | — | #409EFF | | active-color | switch 打开时的背景色 | string | — | #409EFF |
| false-color | switch 关闭时的背景色 | string | — | #C0CCDA | | inactive-color | switch 关闭时的背景色 | string | — | #C0CCDA |
| name | switch 对应的 name 属性 | string | — | — | | name | switch 对应的 name 属性 | string | — | — |
### Events ### Events

5
packages/col/src/col.js
View File

@ -16,7 +16,8 @@ export default {
xs: [Number, Object], xs: [Number, Object],
sm: [Number, Object], sm: [Number, Object],
md: [Number, Object], md: [Number, Object],
lg: [Number, Object] lg: [Number, Object],
xl: [Number, Object]
}, },
computed: { computed: {
@ -47,7 +48,7 @@ export default {
} }
}); });
['xs', 'sm', 'md', 'lg'].forEach(size => { ['xs', 'sm', 'md', 'lg', 'xl'].forEach(size => {
if (typeof this[size] === 'number') { if (typeof this[size] === 'number') {
classList.push(`el-col-${size}-${this[size]}`); classList.push(`el-col-${size}-${this[size]}`);
} else if (typeof this[size] === 'object') { } else if (typeof this[size] === 'object') {

5
packages/select/src/select.vue
View File

@ -236,6 +236,7 @@
} }
}, },
defaultFirstOption: Boolean, defaultFirstOption: Boolean,
reserveKeyword: Boolean,
valueKey: { valueKey: {
type: String, type: String,
default: 'value' default: 'value'
@ -277,6 +278,10 @@
} else { } else {
this.currentPlaceholder = this.cachedPlaceHolder; this.currentPlaceholder = this.cachedPlaceHolder;
} }
if (this.filterable && !this.reserveKeyword) {
this.query = '';
this.handleQueryChange(this.query);
}
} }
this.setSelected(); this.setSelected();
if (this.filterable && !this.multiple) { if (this.filterable && !this.multiple) {

64
packages/switch/src/component.vue
View File

@ -13,25 +13,25 @@
@change="handleChange" @change="handleChange"
ref="input" ref="input"
:name="name" :name="name"
:true-value="trueValue" :true-value="activeValue"
:false-value="falseValue" :false-value="inactiveValue"
:disabled="disabled" :disabled="disabled"
@keydown.enter="switchValue" @keydown.enter="switchValue"
> >
<span <span
:class="['el-switch__label', 'el-switch__label--left', !checked ? 'is-active' : '']" :class="['el-switch__label', 'el-switch__label--left', !checked ? 'is-active' : '']"
v-if="falseIconClass || falseText"> v-if="inactiveIconClass || inactiveText">
<i :class="[falseIconClass]" v-if="falseIconClass"></i> <i :class="[inactiveIconClass]" v-if="inactiveIconClass"></i>
<span v-if="!falseIconClass && falseText" :aria-hidden="checked">{{ falseText }}</span> <span v-if="!inactiveIconClass && inactiveText" :aria-hidden="checked">{{ inactiveText }}</span>
</span> </span>
<span class="el-switch__core" ref="core" :style="{ 'width': coreWidth + 'px' }"> <span class="el-switch__core" ref="core" :style="{ 'width': coreWidth + 'px' }">
<span class="el-switch__button" :style="{ transform }"></span> <span class="el-switch__button" :style="{ transform }"></span>
</span> </span>
<span <span
:class="['el-switch__label', 'el-switch__label--right', checked ? 'is-active' : '']" :class="['el-switch__label', 'el-switch__label--right', checked ? 'is-active' : '']"
v-if="trueIconClass || trueText"> v-if="activeIconClass || activeText">
<i :class="[trueIconClass]" v-if="trueIconClass"></i> <i :class="[activeIconClass]" v-if="activeIconClass"></i>
<span v-if="!trueIconClass && trueText" :aria-hidden="!checked">{{ trueText }}</span> <span v-if="!activeIconClass && activeText" :aria-hidden="!checked">{{ activeText }}</span>
</span> </span>
</div> </div>
</template> </template>
@ -55,29 +55,29 @@
type: Number, type: Number,
default: 0 default: 0
}, },
trueIconClass: { activeIconClass: {
type: String, type: String,
default: '' default: ''
}, },
falseIconClass: { inactiveIconClass: {
type: String, type: String,
default: '' default: ''
}, },
trueText: String, activeText: String,
falseText: String, inactiveText: String,
trueColor: { activeColor: {
type: String, type: String,
default: '' default: ''
}, },
falseColor: { inactiveColor: {
type: String, type: String,
default: '' default: ''
}, },
trueValue: { activeValue: {
type: [Boolean, String, Number], type: [Boolean, String, Number],
default: true default: true
}, },
falseValue: { inactiveValue: {
type: [Boolean, String, Number], type: [Boolean, String, Number],
default: false default: false
}, },
@ -92,13 +92,13 @@
}; };
}, },
created() { created() {
if (!~[this.trueValue, this.falseValue].indexOf(this.value)) { if (!~[this.activeValue, this.inactiveValue].indexOf(this.value)) {
this.$emit('input', this.falseValue); this.$emit('input', this.inactiveValue);
} }
}, },
computed: { computed: {
checked() { checked() {
return this.value === this.trueValue; return this.value === this.activeValue;
}, },
transform() { transform() {
return this.checked ? `translate3d(${ this.coreWidth - 20 }px, 0, 0)` : ''; return this.checked ? `translate3d(${ this.coreWidth - 20 }px, 0, 0)` : '';
@ -107,15 +107,15 @@
watch: { watch: {
checked() { checked() {
this.$refs.input.checked = this.checked; this.$refs.input.checked = this.checked;
if (this.trueColor || this.falseColor) { if (this.activeColor || this.inactiveColor) {
this.setBackgroundColor(); this.setBackgroundColor();
} }
} }
}, },
methods: { methods: {
handleChange(event) { handleChange(event) {
this.$emit('input', !this.checked ? this.trueValue : this.falseValue); this.$emit('input', !this.checked ? this.activeValue : this.inactiveValue);
this.$emit('change', !this.checked ? this.trueValue : this.falseValue); this.$emit('change', !this.checked ? this.activeValue : this.inactiveValue);
this.$nextTick(() => { this.$nextTick(() => {
// set input's checked property // set input's checked property
// in case parent refuses to change component's value // in case parent refuses to change component's value
@ -123,7 +123,7 @@
}); });
}, },
setBackgroundColor() { setBackgroundColor() {
let newColor = this.checked ? this.trueColor : this.falseColor; let newColor = this.checked ? this.activeColor : this.inactiveColor;
this.$refs.core.style.borderColor = newColor; this.$refs.core.style.borderColor = newColor;
this.$refs.core.style.backgroundColor = newColor; this.$refs.core.style.backgroundColor = newColor;
}, },
@ -133,14 +133,14 @@
getMigratingConfig() { getMigratingConfig() {
return { return {
props: { props: {
'on-color': 'on-color is renamed to true-color.', 'on-color': 'on-color is renamed to active-color.',
'off-color': 'off-color is renamed to false-color.', 'off-color': 'off-color is renamed to inactive-color.',
'on-text': 'on-text is renamed to true-text.', 'on-text': 'on-text is renamed to active-text.',
'off-text': 'off-text is renamed to false-text.', 'off-text': 'off-text is renamed to inactive-text.',
'on-value': 'on-value is renamed to true-value.', 'on-value': 'on-value is renamed to active-value.',
'off-value': 'off-value is renamed to false-value.', 'off-value': 'off-value is renamed to inactive-value.',
'on-icon-class': 'on-icon-class is renamed to true-icon-class.', 'on-icon-class': 'on-icon-class is renamed to active-icon-class.',
'off-icon-class': 'off-icon-class is renamed to false-icon-class.' 'off-icon-class': 'off-icon-class is renamed to inactive-icon-class.'
} }
}; };
} }
@ -148,7 +148,7 @@
mounted() { mounted() {
/* istanbul ignore if */ /* istanbul ignore if */
this.coreWidth = this.width || 40; this.coreWidth = this.width || 40;
if (this.trueColor || this.falseColor) { if (this.activeColor || this.inactiveColor) {
this.setBackgroundColor(); this.setBackgroundColor();
} }
this.$refs.input.checked = this.checked; this.$refs.input.checked = this.checked;

39
packages/theme-chalk/src/col.scss
View File

@ -6,7 +6,7 @@
box-sizing: border-box; box-sizing: border-box;
} }
[class*="-0"] { .el-col-0 {
display: none; display: none;
} }
@ -31,6 +31,9 @@
} }
@include res(xs) { @include res(xs) {
.el-col-xs-0 {
display: none;
}
@for $i from 1 through 24 { @for $i from 1 through 24 {
.el-col-xs-#{$i} { .el-col-xs-#{$i} {
width: (1 / 24 * $i * 100) * 1%; width: (1 / 24 * $i * 100) * 1%;
@ -53,6 +56,9 @@
} }
@include res(sm) { @include res(sm) {
.el-col-sm-0 {
display: none;
}
@for $i from 1 through 24 { @for $i from 1 through 24 {
.el-col-sm-#{$i} { .el-col-sm-#{$i} {
width: (1 / 24 * $i * 100) * 1%; width: (1 / 24 * $i * 100) * 1%;
@ -75,6 +81,9 @@
} }
@include res(md) { @include res(md) {
.el-col-md-0 {
display: none;
}
@for $i from 1 through 24 { @for $i from 1 through 24 {
.el-col-md-#{$i} { .el-col-md-#{$i} {
width: (1 / 24 * $i * 100) * 1%; width: (1 / 24 * $i * 100) * 1%;
@ -97,6 +106,9 @@
} }
@include res(lg) { @include res(lg) {
.el-col-lg-0 {
display: none;
}
@for $i from 1 through 24 { @for $i from 1 through 24 {
.el-col-lg-#{$i} { .el-col-lg-#{$i} {
width: (1 / 24 * $i * 100) * 1%; width: (1 / 24 * $i * 100) * 1%;
@ -116,4 +128,29 @@
left: (1 / 24 * $i * 100) * 1%; left: (1 / 24 * $i * 100) * 1%;
} }
} }
}
@include res(xl) {
.el-col-xl-0 {
display: none;
}
@for $i from 1 through 24 {
.el-col-xl-#{$i} {
width: (1 / 24 * $i * 100) * 1%;
}
.el-col-xl-offset-#{$i} {
margin-left: (1 / 24 * $i * 100) * 1%;
}
.el-col-xl-pull-#{$i} {
position: relative;
right: (1 / 24 * $i * 100) * 1%;
}
.el-col-xl-push-#{$i} {
position: relative;
left: (1 / 24 * $i * 100) * 1%;
}
}
} }

9
packages/theme-chalk/src/common/var.scss
View File

@ -679,12 +679,14 @@ $--main-padding: 20px;
$--sm: 768px !default; $--sm: 768px !default;
$--md: 992px !default;; $--md: 992px !default;;
$--lg: 1200px !default;; $--lg: 1200px !default;;
$--xl: 1920px !default;;
$--breakpoints: ( $--breakpoints: (
'xs' : (max-width: $--sm), 'xs' : (max-width: $--sm),
'sm' : (min-width: $--sm), 'sm' : (min-width: $--sm),
'md' : (min-width: $--md), 'md' : (min-width: $--md),
'lg' : (min-width: $--lg) 'lg' : (min-width: $--lg),
'xl' : (min-width: $--xl)
); );
$--breakpoints-spec: ( $--breakpoints-spec: (
@ -695,5 +697,8 @@ $--breakpoints-spec: (
'md-and-up' : (min-width: $--md), 'md-and-up' : (min-width: $--md),
'md-only': "(min-width: #{$--md}) and (max-width: #{$--lg } - 1)", 'md-only': "(min-width: #{$--md}) and (max-width: #{$--lg } - 1)",
'md-and-down': (max-width: $--lg - 1), 'md-and-down': (max-width: $--lg - 1),
'lg-only' : (min-width: $--lg), 'lg-and-up' : (min-width: $--lg),
'lg-only': "(min-width: #{$--lg}) and (max-width: #{$--xl } - 1)",
'lg-and-down': (max-width: $--xl - 1),
'xl-only' : (min-width: $--xl),
); );

5
packages/theme-chalk/src/select-dropdown.scss
View File

@ -24,8 +24,9 @@
position: absolute; position: absolute;
right: 20px; right: 20px;
font-family: 'element-icons'; font-family: 'element-icons';
content: "\E608"; content: "\E611";
font-size: 11px; font-size: 12px;
font-weight: bold;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
} }

14
test/unit/specs/switch.spec.js
View File

@ -10,10 +10,10 @@ describe('Switch', () => {
it('create', () => { it('create', () => {
vm = createTest(Switch, { vm = createTest(Switch, {
trueText: 'on', activeText: 'on',
falseText: 'off', inactiveText: 'off',
trueColor: '#0f0', activeColor: '#0f0',
falseColor: '#f00', inactiveColor: '#f00',
width: 100 width: 100
}); });
@ -25,8 +25,8 @@ describe('Switch', () => {
it('switch with icons', () => { it('switch with icons', () => {
vm = createTest(Switch, { vm = createTest(Switch, {
trueIconClass: 'el-icon-check', activeIconClass: 'el-icon-check',
falseIconClass: 'el-icon-close' inactiveIconClass: 'el-icon-close'
}); });
const icon = vm.$el.querySelector('.el-switch__label--left').querySelector('i'); const icon = vm.$el.querySelector('.el-switch__label--left').querySelector('i');
@ -125,7 +125,7 @@ describe('Switch', () => {
vm = createVue({ vm = createVue({
template: ` template: `
<div> <div>
<el-switch v-model="value" :true-value="onValue" :false-value="offValue"></el-switch> <el-switch v-model="value" :active-value="onValue" :inactive-value="offValue"></el-switch>
</div> </div>
`, `,
data() { data() {

7
types/col.d.ts vendored
View File

@ -32,12 +32,15 @@ export declare class ElCol extends ElementUIComponent {
/** ≥768px Responsive columns or column props object */ /** ≥768px Responsive columns or column props object */
sm: ResponsiveColumn sm: ResponsiveColumn
/** ≥992 Responsive columns or column props object */ /** ≥992px Responsive columns or column props object */
md: ResponsiveColumn md: ResponsiveColumn
/** ≥1200 Responsive columns or column props object */ /** ≥1200px Responsive columns or column props object */
lg: ResponsiveColumn lg: ResponsiveColumn
/** ≥1920px Responsive columns or column props object */
xl: ResponsiveColumn
/** custom element tag */ /** custom element tag */
tag: string tag: string
} }

16
types/switch.d.ts vendored
View File

@ -12,28 +12,28 @@ export declare class ElSwitch extends ElementUIComponent {
width: number width: number
/** Class name of the icon displayed when in on state, overrides on-text */ /** Class name of the icon displayed when in on state, overrides on-text */
trueIconClass: string activeIconClass: string
/** Class name of the icon displayed when in off state, overrides off-text */ /** Class name of the icon displayed when in off state, overrides off-text */
falseIconClass: string inactiveIconClass: string
/** Text displayed when in on state */ /** Text displayed when in on state */
trueText: string activeText: string
/** Text displayed when in off state */ /** Text displayed when in off state */
falseText: string inactiveText: string
/** Background color when in on state */ /** Background color when in on state */
trueColor: string activeColor: string
/** Background color when in off state */ /** Background color when in off state */
falseColor: string inactiveColor: string
/** Switch value when in on state */ /** Switch value when in on state */
trueValue: string | boolean | number activeValue: string | boolean | number
/** Switch value when in off state */ /** Switch value when in off state */
falseValue: string | boolean | number inactiveValue: string | boolean | number
/** Input name of Switch */ /** Input name of Switch */
name: string name: string