Layout: add xl breakpoint

c31f413a · Leopoldthecoder · 杨奕 · 457f9f97 · c31f413a · c31f413a
Commit c31f413a authored Oct 19, 2017 by Leopoldthecoder Committed by 杨奕 Oct 19, 2017
17 changed files
--- a/examples/docs/en-US/date-picker.md
+++ b/examples/docs/en-US/date-picker.md
@@ -210,7 +210,7 @@ You can choose week, month or year by extending the standard date picker compone
 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
 <template>
@@ -230,6 +230,7 @@ Picking a date range is supported.
      v-model="value7"
      type="daterange"
      align="right"
+      unlink-panels
      range-separator="To"
      start-placeholder="Start 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()` | — |
 | 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 | — | — |
-| unlink-panels | unllink two date-panels in range-picker | boolean | — | false |
+| unlink-panels | unlink two date-panels in range-picker | boolean | — | false |
 ### Picker Options
 | Attribute      | Description          | Type      | Accepted Values       | Default  |

--- a/examples/docs/en-US/layout.md
+++ b/examples/docs/en-US/layout.md
@@ -309,15 +309,15 @@ Use the flex layout to make flexible alignment of columns.
 ### 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
 ```html
 <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>
 <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
-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-sm-only` - 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-up` - hide when on medium viewports and up
 - `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
 | 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 |
 | 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}) | — | — |
-| 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 |
--- a/examples/docs/en-US/select.md
+++ b/examples/docs/en-US/select.md
@@ -530,6 +530,7 @@ Enter keywords and search data from server.
    multiple
    filterable
    remote
+    reserve-keyword
    placeholder="Please enter a keyword"
    :remote-method="remoteMethod"
    :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-data-text | displayed text when there is no options | string | — | No data |
 | 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 |
 ### Select Events

--- a/examples/docs/en-US/switch.md
+++ b/examples/docs/en-US/switch.md
@@ -27,15 +27,15 @@
 Switch is used for switching between two opposing states.
 ### 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
 <el-switch v-model="value1">
 </el-switch>
 <el-switch
  v-model="value2"
-  true-color="#13ce66"
+  active-color="#13ce66"
-  false-color="#ff4949">
+  inactive-color="#ff4949">
 </el-switch>
 <script>
@@ -52,21 +52,21 @@ Switch is used for switching between two opposing states.
 :::
 ### 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
 <el-switch
  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
  style="display: block"
  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>
 <script>
@@ -84,16 +84,16 @@ Switch is used for switching between two opposing states.
 ### 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
 <el-tooltip :content="'Switch value: ' + value5" placement="top">
  <el-switch
    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-tooltip>
@@ -143,14 +143,14 @@ Switch is used for switching between two opposing states.
 ----| ----| ----| ----|----
 disabled | whether Switch is disabled | boolean | — | false
 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 | — | —
 ### Events

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

--- a/examples/docs/zh-CN/layout.md
+++ b/examples/docs/zh-CN/layout.md
@@ -308,15 +308,15 @@
 ### 响应式布局
-参照了 Bootstrap 的 响应式设计，预设了四个响应尺寸：`xs`、`sm`、`md`和`lg`。
+参照了 Bootstrap 的 响应式设计，预设了五个响应尺寸：`xs`、`sm`、`md`、`lg` 和 `xl`。
 ::: demo
 ```html
 <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>
 <style>
@@ -340,12 +340,15 @@
 ```
 :::
-### 基于断点的隐藏
+### 基于断点的隐藏类
+Element 额外提供了一系列类名，用于在某些条件下隐藏元素。这些类名可以添加在任何 DOM 元素或自定义组件上。如果需要，请自行引入以下文件：
 ```js
-import 'element-ui/lib/theme-chalk/display.scss';
+import 'element-ui/lib/theme-chalk/display.css';
 ```
+包含的类名及其含义为：
 - `hidden-xs-only` - 当视口在 `xs` 尺寸时隐藏
 - `hidden-sm-only` - 当视口在 `sm` 尺寸时隐藏
 - `hidden-sm-and-down` - 当视口在 `sm` 及以下尺寸时隐藏
@@ -353,7 +356,10 @@ import 'element-ui/lib/theme-chalk/display.scss';
 - `hidden-md-only` - 当视口在 `md` 尺寸时隐藏
 - `hidden-md-and-down` - 当视口在 `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
 | 参数      | 说明          | 类型      | 可选值                           | 默认值  |
@@ -373,6 +379,7 @@ import 'element-ui/lib/theme-chalk/display.scss';
 | pull |  栅格向左移动格数 | number | — | 0 |
 | xs | `<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 |
--- a/examples/docs/zh-CN/select.md
+++ b/examples/docs/zh-CN/select.md
@@ -525,6 +525,7 @@
    multiple
    filterable
    remote
+    reserve-keyword
    placeholder="请输入关键词"
    :remote-method="remoteMethod"
    :loading="loading">
@@ -649,7 +650,7 @@
 | placeholder | 占位符 | string | — | 请选择 |
 | filterable | 是否可搜索 | boolean | — | false |
 | allow-create | 是否允许用户创建新条目，需配合 `filterable` 使用 | boolean | — | false |
-| filter-method | 自定义过滤方法 | function | — | — |
+| filter-method | 自定义搜索方法 | function | — | — |
 | remote | 是否为远程搜索 | boolean | — | false |
 | remote-method | 远程搜索方法 | function | — | — |
 | loading | 是否正在从远程获取数据 | boolean | — | false |
@@ -657,6 +658,7 @@
 | no-match-text | 搜索条件无匹配时显示的文字 | string | — | 无匹配数据 |
 | no-data-text | 选项为空时显示的文字 | string | — | 无数据 |
 | popper-class | Select 下拉框的类名 | string | — | — |
+| reserve-keyword | 多选且可搜索时，是否在选中一个选项后保留当前的搜索关键词 | boolean | — | false |
 | default-first-option | 在输入框按下回车，选择第一个匹配项。需配合 `filterable` 或 `remote` 使用 | boolean | - | false |
 ### Select Events

--- a/examples/docs/zh-CN/switch.md
+++ b/examples/docs/zh-CN/switch.md
@@ -28,13 +28,13 @@
 ### 基本用法
-:::demo 绑定`v-model`到一个`Boolean`类型的变量。可以使用`true-color`属性与`false-color`属性来设置开关的背景色。
+:::demo 绑定`v-model`到一个`Boolean`类型的变量。可以使用`active-color`属性与`inactive-color`属性来设置开关的背景色。
 ```html
 <el-switch
  v-model="value2"
-  true-color="#13ce66"
+  active-color="#13ce66"
-  false-color="#ff4949">
+  inactive-color="#ff4949">
 </el-switch>
 <script>
@@ -52,21 +52,21 @@
 ### 文字描述
-:::demo 使用`true-text`属性与`false-text`属性来设置开关的文字描述。
+:::demo 使用`active-text`属性与`inactive-text`属性来设置开关的文字描述。
 ```html
 <el-switch
  v-model="value3"
-  true-text="按月付费"
+  active-text="按月付费"
-  false-text="按年付费">
+  inactive-text="按年付费">
 </el-switch>
 <el-switch
  style="display: block"
  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>
 <script>
@@ -84,16 +84,16 @@
 ### 扩展的 value 类型
-:::demo 设置`true-value`和`false-value`属性，接受`Boolean`, `String`或`Number`类型的值。
+:::demo 设置`active-value`和`inactive-value`属性，接受`Boolean`, `String`或`Number`类型的值。
 ```html
 <el-tooltip :content="'Switch value: ' + value5" placement="top">
  <el-switch
    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-tooltip>
@@ -144,14 +144,14 @@
 |---------- |-------- |---------- |-------------  |-------- |
 | disabled  | 是否禁用    | boolean   | — | false   |
 | 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   | — | — |
 ### Events

--- a/packages/col/src/col.js
+++ b/packages/col/src/col.js
@@ -16,7 +16,8 @@ export default {
    xs: [Number, Object],
    sm: [Number, Object],
    md: [Number, Object],
-    lg: [Number, Object]
+    lg: [Number, Object],
+    xl: [Number, Object]
  },
  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') {
        classList.push(`el-col-${size}-${this[size]}`);
      } else if (typeof this[size] === 'object') {

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

--- a/packages/switch/src/component.vue
+++ b/packages/switch/src/component.vue
@@ -13,25 +13,25 @@
      @change="handleChange"
      ref="input"
      :name="name"
-      :true-value="trueValue"
+      :true-value="activeValue"
-      :false-value="falseValue"
+      :false-value="inactiveValue"
      :disabled="disabled"
      @keydown.enter="switchValue"
    >
    <span
      :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 class="el-switch__core" ref="core" :style="{ 'width': coreWidth + 'px' }">
      <span class="el-switch__button" :style="{ transform }"></span>
    </span>
    <span
      :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>
  </div>
 </template>
@@ -55,29 +55,29 @@
        type: Number,
        default: 0
      },
-      trueIconClass: {
+      activeIconClass: {
        type: String,
        default: ''
      },
-      falseIconClass: {
+      inactiveIconClass: {
        type: String,
        default: ''
      },
-      trueText: String,
+      activeText: String,
-      falseText: String,
+      inactiveText: String,
-      trueColor: {
+      activeColor: {
        type: String,
        default: ''
      },
-      falseColor: {
+      inactiveColor: {
        type: String,
        default: ''
      },
-      trueValue: {
+      activeValue: {
        type: [Boolean, String, Number],
        default: true
      },
-      falseValue: {
+      inactiveValue: {
        type: [Boolean, String, Number],
        default: false
      },
@@ -92,13 +92,13 @@
      };
    },
    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: {
      checked() {
-        return this.value === this.trueValue;
+        return this.value === this.activeValue;
      },
      transform() {
        return this.checked ? `translate3d(${ this.coreWidth - 20 }px, 0, 0)` : '';
@@ -107,15 +107,15 @@
    watch: {
      checked() {
        this.$refs.input.checked = this.checked;
-        if (this.trueColor || this.falseColor) {
+        if (this.activeColor || this.inactiveColor) {
          this.setBackgroundColor();
        }
      }
    },
    methods: {
      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(() => {
          // set input's checked property
          // in case parent refuses to change component's value
@@ -123,7 +123,7 @@
        });
      },
      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.backgroundColor = newColor;
      },
@@ -133,14 +133,14 @@
      getMigratingConfig() {
        return {
          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() {
      /* istanbul ignore if */
      this.coreWidth = this.width || 40;
-      if (this.trueColor || this.falseColor) {
+      if (this.activeColor || this.inactiveColor) {
        this.setBackgroundColor();
      }
      this.$refs.input.checked = this.checked;

--- a/packages/theme-chalk/src/col.scss
+++ b/packages/theme-chalk/src/col.scss
@@ -6,7 +6,7 @@
  box-sizing: border-box;
 }
-[class*="-0"] {
+.el-col-0 {
  display: none;
 }
@@ -31,6 +31,9 @@
 }
 @include res(xs) {
+  .el-col-xs-0 {
+    display: none;
+  }
  @for $i from 1 through 24 {
    .el-col-xs-#{$i} {
      width: (1 / 24 * $i * 100) * 1%;
@@ -53,6 +56,9 @@
 }
 @include res(sm) {
+  .el-col-sm-0 {
+    display: none;
+  }
  @for $i from 1 through 24 {
    .el-col-sm-#{$i} {
      width: (1 / 24 * $i * 100) * 1%;
@@ -75,6 +81,9 @@
 }
 @include res(md) {
+  .el-col-md-0 {
+    display: none;
+  }
  @for $i from 1 through 24 {
    .el-col-md-#{$i} {
      width: (1 / 24 * $i * 100) * 1%;
@@ -97,6 +106,9 @@
 }
 @include res(lg) {
+  .el-col-lg-0 {
+    display: none;
+  }
  @for $i from 1 through 24 {
    .el-col-lg-#{$i} {
      width: (1 / 24 * $i * 100) * 1%;
@@ -116,4 +128,29 @@
      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%;
+    }
+  }
 }
\ No newline at end of file
--- a/packages/theme-chalk/src/common/var.scss
+++ b/packages/theme-chalk/src/common/var.scss
@@ -679,12 +679,14 @@ $--main-padding: 20px;
 $--sm: 768px !default;
 $--md: 992px !default;;
 $--lg: 1200px !default;;
+$--xl: 1920px !default;;
 $--breakpoints: (
  'xs' : (max-width: $--sm),
  'sm' : (min-width: $--sm),
  'md' : (min-width: $--md),
-  'lg' : (min-width: $--lg)
+  'lg' : (min-width: $--lg),
+  'xl' : (min-width: $--xl)
 );
 $--breakpoints-spec: (
@@ -695,5 +697,8 @@ $--breakpoints-spec: (
  'md-and-up' : (min-width: $--md),
  'md-only': "(min-width: #{$--md}) and (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),
 );
--- a/packages/theme-chalk/src/select-dropdown.scss
+++ b/packages/theme-chalk/src/select-dropdown.scss
@@ -24,8 +24,9 @@
        position: absolute;
        right: 20px;
        font-family: 'element-icons';
-        content: "\E608";
+        content: "\E611";
-        font-size: 11px;
+        font-size: 12px;
+        font-weight: bold;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
      }

--- a/test/unit/specs/switch.spec.js
+++ b/test/unit/specs/switch.spec.js
@@ -10,10 +10,10 @@ describe('Switch', () => {
  it('create', () => {
    vm = createTest(Switch, {
-      trueText: 'on',
+      activeText: 'on',
-      falseText: 'off',
+      inactiveText: 'off',
-      trueColor: '#0f0',
+      activeColor: '#0f0',
-      falseColor: '#f00',
+      inactiveColor: '#f00',
      width: 100
    });
@@ -25,8 +25,8 @@ describe('Switch', () => {
  it('switch with icons', () => {
    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');
@@ -125,7 +125,7 @@ describe('Switch', () => {
    vm = createVue({
      template: `
        <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>
      `,
      data() {

--- a/types/col.d.ts
+++ b/types/col.d.ts
@@ -32,12 +32,15 @@ export declare class ElCol extends ElementUIComponent {
  /** ≥768px Responsive columns or column props object */
  sm: ResponsiveColumn
-  /** ≥992 Responsive columns or column props object */
+  /** ≥992px Responsive columns or column props object */
  md: ResponsiveColumn
-  /** ≥1200 Responsive columns or column props object */
+  /** ≥1200px Responsive columns or column props object */
  lg: ResponsiveColumn
+  /** ≥1920px Responsive columns or column props object */
+  xl: ResponsiveColumn
  /** custom element tag */
  tag: string
 }
--- a/types/switch.d.ts
+++ b/types/switch.d.ts
@@ -12,28 +12,28 @@ export declare class ElSwitch extends ElementUIComponent {
  width: number
  /** 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 */
-  falseIconClass: string
+  inactiveIconClass: string
  /** Text displayed when in on state */
-  trueText: string
+  activeText: string
  /** Text displayed when in off state */
-  falseText: string
+  inactiveText: string
  /** Background color when in on state */
-  trueColor: string
+  activeColor: string
  /** Background color when in off state */
-  falseColor: string
+  inactiveColor: string
  /** Switch value when in on state */
-  trueValue: string | boolean | number
+  activeValue: string | boolean | number
  /** Switch value when in off state */
-  falseValue: string | boolean | number
+  inactiveValue: string | boolean | number
  /** Input name of Switch */
  name: string