---
nav: en
---
<!--THIS FILE IS AUTOGENERATED, DONOT EDIT IT-->
## form

---

### Cell
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="https://gitlab.lixinio.com/frontend/cvux/tree/master/src/components/cell/metas.yml" target="_blank">Edit document</a>&nbsp;&nbsp;
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="#" router-link="/zh-CN/demos/cell" target="_blank">Demo page</a>&nbsp;&nbsp;
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="demo/#/component/cell" target="_blank">demo 原始链接</a>&nbsp;&nbsp;
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="https://gitlab.lixinio.com/frontend/cvux/tree/master/src/demos/Cell.vue" target="_blank">Demo source</a>&nbsp;&nbsp;

``` js
import { Cell } from 'cvux'
```

<span class="vux-props-title">Props</span>

|name|type|default|version|description|
|-------|-------|-------|-------|-------|
| <span class="prop-key" style="white-space:nowrap;">title</span> | <span class="type type-string">String</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | label text |
| <span class="prop-key" style="white-space:nowrap;">value</span> | <span class="type type-string">String</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | right text |
| <span class="prop-key" style="white-space:nowrap;">inline-desc</span> | <span class="type type-string">String</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | the text below title |
| <span class="prop-key" style="white-space:nowrap;">is-link</span> | <span class="type type-string">String</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | if this is a link, if true, there will be an arrow on the right |
| <span class="prop-key" style="white-space:nowrap;">primary</span> | <span class="type type-string">String</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | main content area, can be in ['title', 'content'] |

<span class="vux-props-title">Slots</span>

|name|description|version|
|-------|-------|-------|
| <span class="prop-key" style="white-space:nowrap;">default</span> | right area, you can use default slot instead of prop:value so you can use complexed layout | <span style="font-size:12px;white-space:nowrap;"></span> |
| <span class="prop-key" style="white-space:nowrap;">value</span> | [deprecated] the same as default slot | <span style="font-size:12px;white-space:nowrap;"></span> |
| <span class="prop-key" style="white-space:nowrap;">icon</span> | icon area before title | <span style="font-size:12px;white-space:nowrap;"></span> |
| <span class="prop-key" style="white-space:nowrap;">after-title</span> | after title | <span style="font-size:12px;white-space:nowrap;"></span> |
| <span class="prop-key" style="white-space:nowrap;">child</span> | the child element of the cell, you can add an element with absolute position | <span style="font-size:12px;white-space:nowrap;"></span> |


<a class="vux-demo-link" href="#" router-link="/zh-CN/demos/cell">Demo page</a>





---

### CheckIcon
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="https://gitlab.lixinio.com/frontend/cvux/tree/master/src/components/check-icon/metas.yml" target="_blank">Edit document</a>&nbsp;&nbsp;
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="#" router-link="/zh-CN/demos/check-icon" target="_blank">Demo page</a>&nbsp;&nbsp;
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="demo/#/component/check-icon" target="_blank">demo 原始链接</a>&nbsp;&nbsp;
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="https://gitlab.lixinio.com/frontend/cvux/tree/master/src/demos/CheckIcon.vue" target="_blank">Demo source</a>&nbsp;&nbsp;

``` js
import { CheckIcon } from 'cvux'
```


` CheckIcon ` is a selected component


<span class="vux-props-title">Props</span>

|name|type|default|version|description|
|-------|-------|-------|-------|-------|
| <span class="prop-key" style="white-space:nowrap;">value</span> | <span class="type type-boolean">Boolean</span> | false | <span style="font-size:12px;white-space:nowrap;">v1.3.10</span> | if selected, use :value.sync for two-way data binding |
| <span class="prop-key" style="white-space:nowrap;">type</span> | <span class="type type-string">String</span> | unknown | <span style="font-size:12px;white-space:nowrap;">v1.3.10</span> | style of check icon, can be ['plain'] |


<a class="vux-demo-link" href="#" router-link="/zh-CN/demos/check-icon">Demo page</a>





---

### CheckerItem
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="https://gitlab.lixinio.com/frontend/cvux/tree/master/src/components/checker-item/metas.yml" target="_blank">Edit document</a>&nbsp;&nbsp;
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="#" router-link="/zh-CN/demos/checker" target="_blank">Demo page</a>&nbsp;&nbsp;
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="demo/#/component/checker-item" target="_blank">demo 原始链接</a>&nbsp;&nbsp;
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="https://gitlab.lixinio.com/frontend/cvux/tree/master/src/demos/CheckerItem.vue" target="_blank">Demo source</a>&nbsp;&nbsp;

``` js
import { CheckerItem } from 'cvux'
```


`Checker` is a more flexible component than `Radio` and `Checklist`.


<span class="vux-component-name">Checker</span>

<span class="vux-props-title">Props</span>

|name|type|default|version|description|
|-------|-------|-------|-------|-------|
| <span class="prop-key" style="white-space:nowrap;">default-item-class</span> | <span class="type type-string">String</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | default checker-item classname |
| <span class="prop-key" style="white-space:nowrap;">selected-item-class</span> | <span class="type type-string">String</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | selected check-item classname |
| <span class="prop-key" style="white-space:nowrap;">disabled-item-class</span> | <span class="type type-string">String</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | disabled check-item classname |
| <span class="prop-key" style="white-space:nowrap;">type</span> | <span class="type type-string">String</span> | radio | <span style="font-size:12px;white-space:nowrap;"></span> | checker type, should be raido or checkbox |
| <span class="prop-key" style="white-space:nowrap;">value</span> | <span class="type type-string">String</span><br><span class="type type-array">Array</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | selected value, use `v-model` for binding |
| <span class="prop-key" style="white-space:nowrap;">max</span> | <span class="type type-number">Number</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | max selected number when type = checkbox |

<span class="vux-props-title">Events</span>

|name|params|description|version|
|-------|-------|-------|-------|
| <span class="prop-key" style="white-space:nowrap;">on-change</span> |   `(value)` | emits when value is changed | <span style="font-size:12px;white-space:nowrap;"></span> |


<span class="vux-component-name">CheckerItem</span>

<span class="vux-props-title">Props</span>

|name|type|default|version|description|
|-------|-------|-------|-------|-------|
| <span class="prop-key" style="white-space:nowrap;">value</span> | <span class="type type-string">String</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | value of current checker-item |
| <span class="prop-key" style="white-space:nowrap;">disabled</span> | <span class="type type-boolean">Boolean</span> | false | <span style="font-size:12px;white-space:nowrap;"></span> | if current item is disabled |

<span class="vux-props-title">Events</span>

|name|params|description|version|
|-------|-------|-------|-------|
| <span class="prop-key" style="white-space:nowrap;">on-item-click</span> |   `(itemValue, itemDisabled)` | emits when current checker-item is clicked | <span style="font-size:12px;white-space:nowrap;"></span> |


<a class="vux-demo-link" href="#" router-link="/zh-CN/demos/checker">Demo page</a>





---

### Checker
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="https://gitlab.lixinio.com/frontend/cvux/tree/master/src/components/checker/metas.yml" target="_blank">Edit document</a>&nbsp;&nbsp;
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="#" router-link="/zh-CN/demos/checker" target="_blank">Demo page</a>&nbsp;&nbsp;
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="demo/#/component/checker" target="_blank">demo 原始链接</a>&nbsp;&nbsp;
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="https://gitlab.lixinio.com/frontend/cvux/tree/master/src/demos/Checker.vue" target="_blank">Demo source</a>&nbsp;&nbsp;

``` js
import { Checker } from 'cvux'
```


`Checker` is a more flexible component than `Radio` and `Checklist`.


<span class="vux-component-name">Checker</span>

<span class="vux-props-title">Props</span>

|name|type|default|version|description|
|-------|-------|-------|-------|-------|
| <span class="prop-key" style="white-space:nowrap;">default-item-class</span> | <span class="type type-string">String</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | default checker-item classname |
| <span class="prop-key" style="white-space:nowrap;">selected-item-class</span> | <span class="type type-string">String</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | selected check-item classname |
| <span class="prop-key" style="white-space:nowrap;">disabled-item-class</span> | <span class="type type-string">String</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | disabled check-item classname |
| <span class="prop-key" style="white-space:nowrap;">type</span> | <span class="type type-string">String</span> | radio | <span style="font-size:12px;white-space:nowrap;"></span> | checker type, should be raido or checkbox |
| <span class="prop-key" style="white-space:nowrap;">value</span> | <span class="type type-string">String</span><br><span class="type type-array">Array</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | selected value, use `v-model` for binding |
| <span class="prop-key" style="white-space:nowrap;">max</span> | <span class="type type-number">Number</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | max selected number when type = checkbox |

<span class="vux-props-title">Events</span>

|name|params|description|version|
|-------|-------|-------|-------|
| <span class="prop-key" style="white-space:nowrap;">on-change</span> |   `(value)` | emits when value is changed | <span style="font-size:12px;white-space:nowrap;"></span> |


<span class="vux-component-name">CheckerItem</span>

<span class="vux-props-title">Props</span>

|name|type|default|version|description|
|-------|-------|-------|-------|-------|
| <span class="prop-key" style="white-space:nowrap;">value</span> | <span class="type type-string">String</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | value of current checker-item |
| <span class="prop-key" style="white-space:nowrap;">disabled</span> | <span class="type type-boolean">Boolean</span> | false | <span style="font-size:12px;white-space:nowrap;"></span> | if current item is disabled |

<span class="vux-props-title">Events</span>

|name|params|description|version|
|-------|-------|-------|-------|
| <span class="prop-key" style="white-space:nowrap;">on-item-click</span> |   `(itemValue, itemDisabled)` | emits when current checker-item is clicked | <span style="font-size:12px;white-space:nowrap;"></span> |


<a class="vux-demo-link" href="#" router-link="/zh-CN/demos/checker">Demo page</a>





---

### Checklist
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="https://gitlab.lixinio.com/frontend/cvux/tree/master/src/components/checklist/metas.yml" target="_blank">Edit document</a>&nbsp;&nbsp;
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="#" router-link="/zh-CN/demos/checklist" target="_blank">Demo page</a>&nbsp;&nbsp;
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="demo/#/component/checklist" target="_blank">demo 原始链接</a>&nbsp;&nbsp;
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="https://gitlab.lixinio.com/frontend/cvux/tree/master/src/demos/Checklist.vue" target="_blank">Demo source</a>&nbsp;&nbsp;

``` js
import { Checklist } from 'cvux'
```

<span class="vux-props-title">Props</span>

|name|type|default|version|description|
|-------|-------|-------|-------|-------|
| <span class="prop-key" style="white-space:nowrap;">value</span> | <span class="type type-array">Array</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | form value |
| <span class="prop-key" style="white-space:nowrap;">title</span> | <span class="type type-string">String</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | title |
| <span class="prop-key" style="white-space:nowrap;">required</span> | <span class="type type-boolean">Boolean</span> | false | <span style="font-size:12px;white-space:nowrap;"></span> | if required |
| <span class="prop-key" style="white-space:nowrap;">options</span> | <span class="type type-array">Array</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | options list |
| <span class="prop-key" style="white-space:nowrap;">max</span> | <span class="type type-number">Number</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | max selected number |
| <span class="prop-key" style="white-space:nowrap;">min</span> | <span class="type type-number">Number</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | min selected number |
| <span class="prop-key" style="white-space:nowrap;">random-order</span> | <span class="type type-boolean">Boolean</span> | false | <span style="font-size:12px;white-space:nowrap;"></span> | if place options in a random order |
| <span class="prop-key" style="white-space:nowrap;">check-disabled</span> | <span class="type type-boolean">Boolean</span> | true | <span style="font-size:12px;white-space:nowrap;"></span> | if disabled item when selectedItems.length === total.length, by using this prop:max no longer works |
| <span class="prop-key" style="white-space:nowrap;">label-position</span> | <span class="type type-string">String</span> | right | <span style="font-size:12px;white-space:nowrap;"></span> | label position, can be set to left or right |
| <span class="prop-key" style="white-space:nowrap;">disabled</span> | <span class="type type-string">String</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | if disable user from selecting |

<span class="vux-props-title">Events</span>

|name|params|description|version|
|-------|-------|-------|-------|
| <span class="prop-key" style="white-space:nowrap;">on-change</span> |   (value) | emits when value changes | <span style="font-size:12px;white-space:nowrap;"></span> |

<span class="vux-props-title">Methods</span>

|name|params|description|version|
|-------|-------|-------|-------|
| <span class="prop-key" style="white-space:nowrap;">getFullValue</span> |   &nbsp; | get current value with label |<span style="font-size:12px;white-space:nowrap;"></span> | 


<a class="vux-demo-link" href="#" router-link="/zh-CN/demos/checklist">Demo page</a>





---

### Datetime
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="https://gitlab.lixinio.com/frontend/cvux/tree/master/src/components/datetime/metas.yml" target="_blank">Edit document</a>&nbsp;&nbsp;
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="#" router-link="/zh-CN/demos/datetime" target="_blank">Demo page</a>&nbsp;&nbsp;
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="demo/#/component/datetime" target="_blank">demo 原始链接</a>&nbsp;&nbsp;
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="https://gitlab.lixinio.com/frontend/cvux/tree/master/src/demos/Datetime.vue" target="_blank">Demo source</a>&nbsp;&nbsp;

``` js
import { Datetime } from 'cvux'
```

<span class="vux-props-title">Props</span>

|name|type|default|version|description|
|-------|-------|-------|-------|-------|
| <span class="prop-key" style="white-space:nowrap;">format</span> | <span class="type type-string">String</span> | YYYY-MM-DD | <span style="font-size:12px;white-space:nowrap;"></span> | date format. Special characters are not supported, for example, YYYY-MM-DD HH:mm:ss |
| <span class="prop-key" style="white-space:nowrap;">title</span> | <span class="type type-string">String</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | cell title |
| <span class="prop-key" style="white-space:nowrap;">value</span> | <span class="type type-string">String</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | form's value, use `v-model` for binding |
| <span class="prop-key" style="white-space:nowrap;">inline-desc</span> | <span class="type type-string">String</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | description of the cell |
| <span class="prop-key" style="white-space:nowrap;">placeholder</span> | <span class="type type-string">String</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | placeholder, works when value is empty |
| <span class="prop-key" style="white-space:nowrap;">min-year</span> | <span class="type type-number">Number</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | min-year of the form |
| <span class="prop-key" style="white-space:nowrap;">max-year</span> | <span class="type type-number">Number</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | max-year of the form |
| <span class="prop-key" style="white-space:nowrap;">min-hour</span> | <span class="type type-number">Number</span> | 0 | <span style="font-size:12px;white-space:nowrap;"></span> | min hour |
| <span class="prop-key" style="white-space:nowrap;">max-hour</span> | <span class="type type-number">Number</span> | 23 | <span style="font-size:12px;white-space:nowrap;"></span> | max hour |
| <span class="prop-key" style="white-space:nowrap;">min-minute</span> | <span class="type type-number">Number</span> | 0 | <span style="font-size:12px;white-space:nowrap;"></span> | min minute |
| <span class="prop-key" style="white-space:nowrap;">max-minute</span> | <span class="type type-number">Number</span> | 23 | <span style="font-size:12px;white-space:nowrap;"></span> | max minute |
| <span class="prop-key" style="white-space:nowrap;">confirm-text</span> | <span class="type type-string">String</span> | ok(确认) | <span style="font-size:12px;white-space:nowrap;"></span> | confirm button's text |
| <span class="prop-key" style="white-space:nowrap;">cancel-text</span> | <span class="type type-string">String</span> | cancel(取消) | <span style="font-size:12px;white-space:nowrap;"></span> | cancel button's text |
| <span class="prop-key" style="white-space:nowrap;">clear-text</span> | <span class="type type-string">String</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | custom button's text which shows in the middle of the header |
| <span class="prop-key" style="white-space:nowrap;">year-row</span> | <span class="type type-string">String</span> | {value} | <span style="font-size:12px;white-space:nowrap;"></span> | render template for the year column |
| <span class="prop-key" style="white-space:nowrap;">month-row</span> | <span class="type type-string">String</span> | {value} | <span style="font-size:12px;white-space:nowrap;"></span> | render template for the month column |
| <span class="prop-key" style="white-space:nowrap;">day-row</span> | <span class="type type-string">String</span> | {value} | <span style="font-size:12px;white-space:nowrap;"></span> | render template for the day column |
| <span class="prop-key" style="white-space:nowrap;">hour-row</span> | <span class="type type-string">String</span> | {value} | <span style="font-size:12px;white-space:nowrap;"></span> | render template for the hour column |
| <span class="prop-key" style="white-space:nowrap;">minute-row</span> | <span class="type type-string">String</span> | {value} | <span style="font-size:12px;white-space:nowrap;"></span> | render template for the minute column |
| <span class="prop-key" style="white-space:nowrap;">start-date</span> | <span class="type type-string">String</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | start date, must be YYYY-MM-DD. Please use `min-hour` and `max-hour` to limit the range of hours |
| <span class="prop-key" style="white-space:nowrap;">end-date</span> | <span class="type type-string">String</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | end date, must be YYYY-MM-DD. Please use `min-hour` and `max-hour` to limit the range of hours |
| <span class="prop-key" style="white-space:nowrap;">required</span> | <span class="type type-boolean">Boolean</span> | false | <span style="font-size:12px;white-space:nowrap;"></span> | if required |

<span class="vux-props-title">Slots</span>

|name|description|version|
|-------|-------|-------|
| <span class="prop-key" style="white-space:nowrap;">default</span> | trigger element content | <span style="font-size:12px;white-space:nowrap;"></span> |

<span class="vux-props-title">Events</span>

|name|params|description|version|
|-------|-------|-------|-------|
| <span class="prop-key" style="white-space:nowrap;">on-change</span> |   `(value)` | $emits when value changes, `(newVal)` | <span style="font-size:12px;white-space:nowrap;"></span> |
| <span class="prop-key" style="white-space:nowrap;">on-clear</span> |   &nbsp; | $emits when click the button in the middle of the header | <span style="font-size:12px;white-space:nowrap;"></span> |
| <span class="prop-key" style="white-space:nowrap;">on-show</span> |   &nbsp; | fires when datetime shows | <span style="font-size:12px;white-space:nowrap;"></span> |


<a class="vux-demo-link" href="#" router-link="/zh-CN/demos/datetime">Demo page</a>





---

### Group
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="https://gitlab.lixinio.com/frontend/cvux/tree/master/src/components/group/metas.yml" target="_blank">Edit document</a>&nbsp;&nbsp;
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="#" router-link="/zh-CN/demos/group" target="_blank">Demo page</a>&nbsp;&nbsp;
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="demo/#/component/group" target="_blank">demo 原始链接</a>&nbsp;&nbsp;
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="https://gitlab.lixinio.com/frontend/cvux/tree/master/src/demos/Group.vue" target="_blank">Demo source</a>&nbsp;&nbsp;

``` js
import { Group } from 'cvux'
```

`Group` is a special component for wrapping form elements

<span class="vux-props-title">Props</span>

|name|type|default|version|description|
|-------|-------|-------|-------|-------|
| <span class="prop-key" style="white-space:nowrap;">title</span> | <span class="type type-string">String</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | group title |
| <span class="prop-key" style="white-space:nowrap;">title-color</span> | <span class="type type-string">String</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | group title's color |
| <span class="prop-key" style="white-space:nowrap;">label-width</span> | <span class="type type-string">String</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | common label width for child components |
| <span class="prop-key" style="white-space:nowrap;">label-align</span> | <span class="type type-string">String</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | common label text-align for child components |
| <span class="prop-key" style="white-space:nowrap;">label-margin-right</span> | <span class="type type-string">String</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | common margin right value for child components |
| <span class="prop-key" style="white-space:nowrap;">gutter</span> | <span class="type type-string">String</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | set the marginTop value when there is no title |

<span class="vux-props-title">Slots</span>

|name|description|version|
|-------|-------|-------|
| <span class="prop-key" style="white-space:nowrap;">default</span> | content body for child components | <span style="font-size:12px;white-space:nowrap;"></span> |
| <span class="prop-key" style="white-space:nowrap;">title</span> | after-title slot | <span style="font-size:12px;white-space:nowrap;"></span> |


<a class="vux-demo-link" href="#" router-link="/zh-CN/demos/group">Demo page</a>





---

### InlineCalendar
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="https://gitlab.lixinio.com/frontend/cvux/tree/master/src/components/inline-calendar/metas.yml" target="_blank">Edit document</a>&nbsp;&nbsp;
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="#" router-link="/zh-CN/demos/inline-calendar" target="_blank">Demo page</a>&nbsp;&nbsp;
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="demo/#/component/inline-calendar" target="_blank">demo 原始链接</a>&nbsp;&nbsp;
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="https://gitlab.lixinio.com/frontend/cvux/tree/master/src/demos/InlineCalendar.vue" target="_blank">Demo source</a>&nbsp;&nbsp;

``` js
import { InlineCalendar } from 'cvux'
```

<span class="vux-props-title">Props</span>

|name|type|default|version|description|
|-------|-------|-------|-------|-------|
| <span class="prop-key" style="white-space:nowrap;">value</span> | <span class="type type-string">String</span><br><span class="type type-array">Array</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | calendar value, use `v-modle` for binding. String (including empty) means single seleciton; array (including empty array) means multiple selection. |
| <span class="prop-key" style="white-space:nowrap;">render-month</span> | <span class="type type-array">Array</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | specify which date to render, for example [2018, 8] |
| <span class="prop-key" style="white-space:nowrap;">start-date</span> | <span class="type type-string">String</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | start date with format `YYYY-MM-dd` |
| <span class="prop-key" style="white-space:nowrap;">end-date</span> | <span class="type type-string">String</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | end date with format `YYYY-MM-dd` |
| <span class="prop-key" style="white-space:nowrap;">show-last-month</span> | <span class="type type-boolean">Boolean</span> | true | <span style="font-size:12px;white-space:nowrap;"></span> | if show last month's days |
| <span class="prop-key" style="white-space:nowrap;">show-next-month</span> | <span class="type type-boolean">Boolean</span> | true | <span style="font-size:12px;white-space:nowrap;"></span> | if show next month's days |
| <span class="prop-key" style="white-space:nowrap;">highlight-weekend</span> | <span class="type type-boolean">Boolean</span> | false | <span style="font-size:12px;white-space:nowrap;"></span> | if highlight weekend days |
| <span class="prop-key" style="white-space:nowrap;">return-six-rows</span> | <span class="type type-boolean">Boolean</span> | true | <span style="font-size:12px;white-space:nowrap;"></span> | if always show six rows |
| <span class="prop-key" style="white-space:nowrap;">hide-header</span> | <span class="type type-boolean">Boolean</span> | false | <span style="font-size:12px;white-space:nowrap;"></span> | if hiding header |
| <span class="prop-key" style="white-space:nowrap;">hide-week-list</span> | <span class="type type-boolean">Boolean</span> | false | <span style="font-size:12px;white-space:nowrap;"></span> | if hiding week list |
| <span class="prop-key" style="white-space:nowrap;">replace-text-list</span> | <span class="type type-object">Object</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | replace list, for example, {'TODAY':'今'} |
| <span class="prop-key" style="white-space:nowrap;">weeks-list</span> | <span class="type type-array">Array</span> | ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'] | <span style="font-size:12px;white-space:nowrap;"></span> | week list, starting from `Sunday` |
| <span class="prop-key" style="white-space:nowrap;">render-function</span> | <span class="type type-function">Function</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | render function to add extra contents, params `(line, row, dateData)` |
| <span class="prop-key" style="white-space:nowrap;">render-on-value-change</span> | <span class="type type-boolean">Boolean</span> | true | <span style="font-size:12px;white-space:nowrap;"></span> | if re-render calendar if value changes, should set to false when showing multi months |
| <span class="prop-key" style="white-space:nowrap;">disable-past</span> | <span class="type type-boolean">Boolean</span> | false | <span style="font-size:12px;white-space:nowrap;"></span> | if disable the past days, can work with start-date |
| <span class="prop-key" style="white-space:nowrap;">disable-future</span> | <span class="type type-boolean">Boolean</span> | false | <span style="font-size:12px;white-space:nowrap;"></span> | if disable future days, can work with end-date |


<a class="vux-demo-link" href="#" router-link="/zh-CN/demos/inline-calendar">Demo page</a>





---

### Keyboard
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="https://gitlab.lixinio.com/frontend/cvux/tree/master/src/components/keyboard/metas.yml" target="_blank">Edit document</a>&nbsp;&nbsp;
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="#" router-link="/zh-CN/demos/keyboard" target="_blank">Demo page</a>&nbsp;&nbsp;
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="demo/#/component/keyboard" target="_blank">demo 原始链接</a>&nbsp;&nbsp;
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="https://gitlab.lixinio.com/frontend/cvux/tree/master/src/demos/Keyboard.vue" target="_blank">Demo source</a>&nbsp;&nbsp;

``` js
import { Keyboard } from 'cvux'
```

` the rid_device_info_keyboard ` is a keyboard component, it is mainly used for containing the license used keyboard input, VIN code input

<span class="vux-props-title">Props</span>

|name|type|default|version|description|
|-------|-------|-------|-------|-------|
| <span class="prop-key" style="white-space:nowrap;">type</span> | <span class="type type-string">String</span> | provinces | <span style="font-size:12px;white-space:nowrap;"></span> | null |
| <span class="prop-key" style="white-space:nowrap;">show</span> | <span class="type type-boolean">Boolean</span> | false | <span style="font-size:12px;white-space:nowrap;"></span> | null |

<span class="vux-props-title">Events</span>

|name|params|description|version|
|-------|-------|-------|-------|
| <span class="prop-key" style="white-space:nowrap;">handle-value</span> |   (`value`) | undefined | <span style="font-size:12px;white-space:nowrap;"></span> |
| <span class="prop-key" style="white-space:nowrap;">handle-delete</span> |   (`value`) | undefined | <span style="font-size:12px;white-space:nowrap;"></span> |
| <span class="prop-key" style="white-space:nowrap;">on-show</span> |   &nbsp; | undefined | <span style="font-size:12px;white-space:nowrap;"></span> |
| <span class="prop-key" style="white-space:nowrap;">on-hide</span> |   &nbsp; | undefined | <span style="font-size:12px;white-space:nowrap;"></span> |


<a class="vux-demo-link" href="#" router-link="/zh-CN/demos/keyboard">Demo page</a>





---

### Picker
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="https://gitlab.lixinio.com/frontend/cvux/tree/master/src/components/picker/metas.yml" target="_blank">Edit document</a>&nbsp;&nbsp;
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="#" router-link="/zh-CN/demos/picker" target="_blank">Demo page</a>&nbsp;&nbsp;
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="demo/#/component/picker" target="_blank">demo 原始链接</a>&nbsp;&nbsp;
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="https://gitlab.lixinio.com/frontend/cvux/tree/master/src/demos/Picker.vue" target="_blank">Demo source</a>&nbsp;&nbsp;

``` js
import { Picker } from 'cvux'
```

<span class="vux-props-title">Props</span>

|name|type|default|version|description|
|-------|-------|-------|-------|-------|
| <span class="prop-key" style="white-space:nowrap;">value</span> | <span class="type type-array">Array</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | picker value, use `v-model` for binding |
| <span class="prop-key" style="white-space:nowrap;">data</span> | <span class="type type-array">Array</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | array list |
| <span class="prop-key" style="white-space:nowrap;">columns</span> | <span class="type type-number">Number</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | how many columns in chained-mode |
| <span class="prop-key" style="white-space:nowrap;">fixed-columns</span> | <span class="type type-number">Number</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | how many columns will show |
| <span class="prop-key" style="white-space:nowrap;">id</span> | <span class="type type-string">String</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | the id of item element, that is needed in ssr model |

<span class="vux-props-title">Events</span>

|name|params|description|version|
|-------|-------|-------|-------|
| <span class="prop-key" style="white-space:nowrap;">on-change</span> |   `(value)` | emits when value is changed | <span style="font-size:12px;white-space:nowrap;"></span> |


<a class="vux-demo-link" href="#" router-link="/zh-CN/demos/picker">Demo page</a>





---

### PopupPicker
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="https://gitlab.lixinio.com/frontend/cvux/tree/master/src/components/popup-picker/metas.yml" target="_blank">Edit document</a>&nbsp;&nbsp;
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="#" router-link="/zh-CN/demos/popup-picker" target="_blank">Demo page</a>&nbsp;&nbsp;
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="demo/#/component/popup-picker" target="_blank">demo 原始链接</a>&nbsp;&nbsp;
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="https://gitlab.lixinio.com/frontend/cvux/tree/master/src/demos/PopupPicker.vue" target="_blank">Demo source</a>&nbsp;&nbsp;

``` js
import { PopupPicker } from 'cvux'
```

<p class="tip">
  other props are the same as `Picker`
</p>


<span class="vux-props-title">Props</span>

|name|type|default|version|description|
|-------|-------|-------|-------|-------|
| <span class="prop-key" style="white-space:nowrap;">value</span> | <span class="type type-array">Array</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | picker value, use `v-model` for binding |
| <span class="prop-key" style="white-space:nowrap;">title</span> | <span class="type type-string">String</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | label text |
| <span class="prop-key" style="white-space:nowrap;">cancel-text</span> | <span class="type type-string">String</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | popup cancel text |
| <span class="prop-key" style="white-space:nowrap;">confirm-text</span> | <span class="type type-string">String</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | popup confirm text |
| <span class="prop-key" style="white-space:nowrap;">placeholder</span> | <span class="type type-string">String</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | placeholder |
| <span class="prop-key" style="white-space:nowrap;">show-name</span> | <span class="type type-boolean">Boolean</span> | false | <span style="font-size:12px;white-space:nowrap;"></span> | if show names instead of keys |
| <span class="prop-key" style="white-space:nowrap;">inline-desc</span> | <span class="type type-string">String</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | description text below label |
| <span class="prop-key" style="white-space:nowrap;">show</span> | <span class="type type-boolean">Boolean</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | popup show (supports the .sync modifier next) |
| <span class="prop-key" style="white-space:nowrap;">id</span> | <span class="type type-string">String</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | the id for picker |
| <span class="prop-key" style="white-space:nowrap;">valueTextAlign</span> | <span class="type type-string">String</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | Value the way it is |
| <span class="prop-key" style="white-space:nowrap;">columns</span> | <span class="type type-number">Number</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | how many columns in chained-mode |
| <span class="prop-key" style="white-space:nowrap;">fixed-columns</span> | <span class="type type-number">Number</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | how many columns will show |
| <span class="prop-key" style="white-space:nowrap;">show-second-name</span> | <span class="type type-boolean">Boolean</span> |  | <span style="font-size:12px;white-space:nowrap;">1.3.7</span> | Specifies the second column value of the display text that cannot be set at the same time as show-name |


<a class="vux-demo-link" href="#" router-link="/zh-CN/demos/popup-picker">Demo page</a>





---

### Radio
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="https://gitlab.lixinio.com/frontend/cvux/tree/master/src/components/radio/metas.yml" target="_blank">Edit document</a>&nbsp;&nbsp;
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="#" router-link="/zh-CN/demos/radio" target="_blank">Demo page</a>&nbsp;&nbsp;
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="demo/#/component/radio" target="_blank">demo 原始链接</a>&nbsp;&nbsp;
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="https://gitlab.lixinio.com/frontend/cvux/tree/master/src/demos/Radio.vue" target="_blank">Demo source</a>&nbsp;&nbsp;

``` js
import { Radio } from 'cvux'
```


```html
  <group>
    <radio title="title" :options="options" v-model="value"></radio>
  </group>
```
`options` can be plain array, or object list with key=> value:

``` js
const options = [ 'China', 'Japan' ]

const options2 = [{
  icon: 'http://dn-placeholder.qbox.me/110x110/FF2D55/000',
  key: '001',
  value: 'radio001'
}, {
  icon: 'http://dn-placeholder.qbox.me/110x110/FF2D55/000',
  key: '002',
  value: 'radio002'
}]
```

<p class="tip">`radio` should be used in `Group`.</p>


<span class="vux-props-title">Props</span>

|name|type|default|version|description|
|-------|-------|-------|-------|-------|
| <span class="prop-key" style="white-space:nowrap;">value</span> | <span class="type type-string">String</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | radio value, use `v-model` for binding |
| <span class="prop-key" style="white-space:nowrap;">options</span> | <span class="type type-array">Array</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | option list, can be plain array or array with `key=>value` |
| <span class="prop-key" style="white-space:nowrap;">fill-mode</span> | <span class="type type-boolean">Boolean</span> | false | <span style="font-size:12px;white-space:nowrap;"></span> | if add an option user can fill |
| <span class="prop-key" style="white-space:nowrap;">fill-placeholder</span> | <span class="type type-string">String</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | placeholder for fill input |
| <span class="prop-key" style="white-space:nowrap;">fill-label</span> | <span class="type type-string">String</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | label for fill input |


<a class="vux-demo-link" href="#" router-link="/zh-CN/demos/radio">Demo page</a>





---

### Search
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="https://gitlab.lixinio.com/frontend/cvux/tree/master/src/components/search/metas.yml" target="_blank">Edit document</a>&nbsp;&nbsp;
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="#" router-link="/zh-CN/demos/search" target="_blank">Demo page</a>&nbsp;&nbsp;
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="demo/#/component/search" target="_blank">demo 原始链接</a>&nbsp;&nbsp;
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="https://gitlab.lixinio.com/frontend/cvux/tree/master/src/demos/Search.vue" target="_blank">Demo source</a>&nbsp;&nbsp;

``` js
import { Search } from 'cvux'
```

` search ` is a search box components

<span class="vux-props-title">Props</span>

|name|type|default|version|description|
|-------|-------|-------|-------|-------|
| <span class="prop-key" style="white-space:nowrap;">placeholder</span> | <span class="type type-string">String</span> |  | <span style="font-size:12px;white-space:nowrap;">v1.3.0</span> | Search box placeholder |
| <span class="prop-key" style="white-space:nowrap;">value</span> | <span class="type type-string">String</span> |  | <span style="font-size:12px;white-space:nowrap;">v1.3.0</span> | Search value |

<span class="vux-props-title">Events</span>

|name|params|description|version|
|-------|-------|-------|-------|
| <span class="prop-key" style="white-space:nowrap;">on-blur</span> |   &nbsp; | Triggered when out of focus | <span style="font-size:12px;white-space:nowrap;"></span> |
| <span class="prop-key" style="white-space:nowrap;">on-focus</span> |   &nbsp; | Triggered when getting focus | <span style="font-size:12px;white-space:nowrap;"></span> |
| <span class="prop-key" style="white-space:nowrap;">on-change</span> |   &nbsp; | Triggered when the search value changes | <span style="font-size:12px;white-space:nowrap;"></span> |
| <span class="prop-key" style="white-space:nowrap;">on-search</span> |   &nbsp; | Triggered when you click search icon | <span style="font-size:12px;white-space:nowrap;"></span> |
| <span class="prop-key" style="white-space:nowrap;">on-click-clear-icon</span> |   &nbsp; | Click on the clear icon event to trigger | <span style="font-size:12px;white-space:nowrap;"></span> |


<a class="vux-demo-link" href="#" router-link="/zh-CN/demos/search">Demo page</a>





---

### SelectorList
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="https://gitlab.lixinio.com/frontend/cvux/tree/master/src/components/selector-list/metas.yml" target="_blank">Edit document</a>&nbsp;&nbsp;
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="#" router-link="/zh-CN/demos/selector-list" target="_blank">Demo page</a>&nbsp;&nbsp;
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="demo/#/component/selector-list" target="_blank">demo 原始链接</a>&nbsp;&nbsp;
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="https://gitlab.lixinio.com/frontend/cvux/tree/master/src/demos/SelectorList.vue" target="_blank">Demo source</a>&nbsp;&nbsp;

``` js
import { SelectorList } from 'cvux'
```

` the SelectorList ` is a Components that can be used to select user role permission displays, as well as search boxes，at the same time, support the choice single or multiple.

<span class="vux-props-title">Props</span>

|name|type|default|version|description|
|-------|-------|-------|-------|-------|
| <span class="prop-key" style="white-space:nowrap;">value</span> | <span class="type type-boolean">Boolean</span> | 必须 | <span style="font-size:12px;white-space:nowrap;"></span> | undefined |
| <span class="prop-key" style="white-space:nowrap;">checked</span> | <span class="type type-string">String</span><br><span class="type type-number">Number</span><br><span class="type type-array">Array</span> | 必须 | <span style="font-size:12px;white-space:nowrap;"></span> | undefined |
| <span class="prop-key" style="white-space:nowrap;">name</span> | <span class="type type-string">String</span> | - | <span style="font-size:12px;white-space:nowrap;"></span> | undefined |
| <span class="prop-key" style="white-space:nowrap;">count</span> | <span class="type type-number">Number</span> | 10 | <span style="font-size:12px;white-space:nowrap;"></span> | null |
| <span class="prop-key" style="white-space:nowrap;">title</span> | <span class="type type-string">String</span> | 请先让行政经理把门店人员添加到系统中 | <span style="font-size:12px;white-space:nowrap;"></span> | undefined |
| <span class="prop-key" style="white-space:nowrap;">roleList</span> | <span class="type type-array">Array</span> | 必须 | <span style="font-size:12px;white-space:nowrap;"></span> | undefined |
| <span class="prop-key" style="white-space:nowrap;">idKey</span> | <span class="type type-string">String</span> | id | <span style="font-size:12px;white-space:nowrap;"></span> | undefined |
| <span class="prop-key" style="white-space:nowrap;">nameKey</span> | <span class="type type-string">String</span> | name | <span style="font-size:12px;white-space:nowrap;"></span> | undefined |
| <span class="prop-key" style="white-space:nowrap;">roleKey</span> | <span class="type type-string">String</span> | roles | <span style="font-size:12px;white-space:nowrap;"></span> | undefined |

<span class="vux-props-title">Events</span>

|name|params|description|version|
|-------|-------|-------|-------|
| <span class="prop-key" style="white-space:nowrap;">commit</span> |   (`checked`, `name`) | undefined | <span style="font-size:12px;white-space:nowrap;"></span> |


<a class="vux-demo-link" href="#" router-link="/zh-CN/demos/selector-list">Demo page</a>





---

### Selector
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="https://gitlab.lixinio.com/frontend/cvux/tree/master/src/components/selector/metas.yml" target="_blank">Edit document</a>&nbsp;&nbsp;
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="#" router-link="/zh-CN/demos/selector" target="_blank">Demo page</a>&nbsp;&nbsp;
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="demo/#/component/selector" target="_blank">demo 原始链接</a>&nbsp;&nbsp;
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="https://gitlab.lixinio.com/frontend/cvux/tree/master/src/demos/Selector.vue" target="_blank">Demo source</a>&nbsp;&nbsp;

``` js
import { Selector } from 'cvux'
```

<span class="vux-props-title">Props</span>

|name|type|default|version|description|
|-------|-------|-------|-------|-------|
| <span class="prop-key" style="white-space:nowrap;">value</span> | <span class="type type-string">String</span><br><span class="type type-number">Number</span><br><span class="type type-object">Object</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | form value, use `v-model` for binding |
| <span class="prop-key" style="white-space:nowrap;">title</span> | <span class="type type-string">String</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | label text |
| <span class="prop-key" style="white-space:nowrap;">direction</span> | <span class="type type-string">String</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | align value |
| <span class="prop-key" style="white-space:nowrap;">options</span> | <span class="type type-array">Array</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | option list, `['one', 'two']` or `[{ key: KEY, value: VALUE }]` |
| <span class="prop-key" style="white-space:nowrap;">name</span> | <span class="type type-string">String</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | form name |
| <span class="prop-key" style="white-space:nowrap;">placeholder</span> | <span class="type type-string">String</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | placeholder |
| <span class="prop-key" style="white-space:nowrap;">readonly</span> | <span class="type type-boolean">Boolean</span> | false | <span style="font-size:12px;white-space:nowrap;"></span> | if the select is readonly |

<span class="vux-props-title">Events</span>

|name|params|description|version|
|-------|-------|-------|-------|
| <span class="prop-key" style="white-space:nowrap;">on-change</span> |   `(value)` | emits when value is changed | <span style="font-size:12px;white-space:nowrap;"></span> |


<a class="vux-demo-link" href="#" router-link="/zh-CN/demos/selector">Demo page</a>





---

### XAddress
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="https://gitlab.lixinio.com/frontend/cvux/tree/master/src/components/x-address/metas.yml" target="_blank">Edit document</a>&nbsp;&nbsp;
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="#" router-link="/zh-CN/demos/x-address" target="_blank">Demo page</a>&nbsp;&nbsp;
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="demo/#/component/x-address" target="_blank">demo 原始链接</a>&nbsp;&nbsp;
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="https://gitlab.lixinio.com/frontend/cvux/tree/master/src/demos/XAddress.vue" target="_blank">Demo source</a>&nbsp;&nbsp;

``` js
&nbsp;
```


```html
  <group>
    <x-address title="title" v-model="value"></x-address>
  </group>
```

``` js
import { XAddress } from 'vux'

// you can import built-in data
import { XAddress, ChinaAddressV3Data } from 'vux'

// if you need older data
import { XAddress, ChinaAddressV1Data } from 'vux'
```

<p class="tip">
you can view source data at [src/datas](https://github.com/airyland/vux/tree/v2/src/datas).
</p>

<p class="tip">`x-address` should be used in `Group`</p>


<span class="vux-props-title">Props</span>

|name|type|default|version|description|
|-------|-------|-------|-------|-------|
| <span class="prop-key" style="white-space:nowrap;">raw-value</span> | <span class="type type-boolean">Boolean</span> | false | <span style="font-size:12px;white-space:nowrap;"></span> | if the initial value is `string value` instead of `id value` |
| <span class="prop-key" style="white-space:nowrap;">title</span> | <span class="type type-string">String</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | label text |
| <span class="prop-key" style="white-space:nowrap;">value</span> | <span class="type type-array">Array</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | form value, use `v-model` for binding |
| <span class="prop-key" style="white-space:nowrap;">list</span> | <span class="type type-array">Array</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | address data |
| <span class="prop-key" style="white-space:nowrap;">inline-desc</span> | <span class="type type-string">String</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | description text below label |
| <span class="prop-key" style="white-space:nowrap;">placeholder</span> | <span class="type type-string">String</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | placeholder |
| <span class="prop-key" style="white-space:nowrap;">hide-district</span> | <span class="type type-boolean">Boolean</span> | false | <span style="font-size:12px;white-space:nowrap;"></span> | if hide district column |
| <span class="prop-key" style="white-space:nowrap;">value-text-align</span> | <span class="type type-string">String</span> | right | <span style="font-size:12px;white-space:nowrap;"></span> | align setting of `value` |
| <span class="prop-key" style="white-space:nowrap;">show-second-name</span> | <span class="type type-boolean">Boolean</span> |  | <span style="font-size:12px;white-space:nowrap;">1.3.7</span> | Specifies the second column value of the display text that cannot be set at the same time as show-name |

<span class="vux-props-title">Events</span>

|name|params|description|version|
|-------|-------|-------|-------|
| <span class="prop-key" style="white-space:nowrap;">on-hide</span> |   true或者false | emits when being closed | <span style="font-size:12px;white-space:nowrap;"></span> |
| <span class="prop-key" style="white-space:nowrap;">on-show</span> |   &nbsp; | emits when being open | <span style="font-size:12px;white-space:nowrap;"></span> |
| <span class="prop-key" style="white-space:nowrap;">on-change</span> |   改变地址的值，是一个Object对象 | The value is triggered when it changes, and the parameter is the changed value | <span style="font-size:12px;white-space:nowrap;">1.3.7</span> |


<a class="vux-demo-link" href="#" router-link="/zh-CN/demos/x-address">Demo page</a>





---

### XButton
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="https://gitlab.lixinio.com/frontend/cvux/tree/master/src/components/x-button/metas.yml" target="_blank">Edit document</a>&nbsp;&nbsp;
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="#" router-link="/zh-CN/demos/x-button" target="_blank">Demo page</a>&nbsp;&nbsp;
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="demo/#/component/x-button" target="_blank">demo 原始链接</a>&nbsp;&nbsp;
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="https://gitlab.lixinio.com/frontend/cvux/tree/master/src/demos/XButton.vue" target="_blank">Demo source</a>&nbsp;&nbsp;

``` js
import { XButton } from 'cvux'
```

<span class="vux-props-title">Props</span>

|name|type|default|version|description|
|-------|-------|-------|-------|-------|
| <span class="prop-key" style="white-space:nowrap;">type</span> | <span class="type type-string">String</span> | default | <span style="font-size:12px;white-space:nowrap;"></span> | button style type, one of default, primary, warn |
| <span class="prop-key" style="white-space:nowrap;">disabled</span> | <span class="type type-boolean">Boolean</span> | false | <span style="font-size:12px;white-space:nowrap;"></span> | if disable the button |
| <span class="prop-key" style="white-space:nowrap;">text</span> | <span class="type type-string">String</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | button text, has the same function as default slot |
| <span class="prop-key" style="white-space:nowrap;">mini</span> | <span class="type type-boolean">Boolean</span> | false | <span style="font-size:12px;white-space:nowrap;"></span> | if use smaller style |
| <span class="prop-key" style="white-space:nowrap;">plain</span> | <span class="type type-boolean">Boolean</span> | false | <span style="font-size:12px;white-space:nowrap;"></span> | if use plain styles which has no backgroundColor |
| <span class="prop-key" style="white-space:nowrap;">action-type</span> | <span class="type type-string">String</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | button's type value, one of `submit`, `button`, `reset` |
| <span class="prop-key" style="white-space:nowrap;">show-loading</span> | <span class="type type-boolean">Boolean</span> | false | <span style="font-size:12px;white-space:nowrap;"></span> | show loading icon |

<span class="vux-props-title">Slots</span>

|name|description|version|
|-------|-------|-------|
| <span class="prop-key" style="white-space:nowrap;">default</span> | button text | <span style="font-size:12px;white-space:nowrap;"></span> |


<a class="vux-demo-link" href="#" router-link="/zh-CN/demos/x-button">Demo page</a>





---

### XInput
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="https://gitlab.lixinio.com/frontend/cvux/tree/master/src/components/x-input/metas.yml" target="_blank">Edit document</a>&nbsp;&nbsp;
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="#" router-link="/zh-CN/demos/x-input" target="_blank">Demo page</a>&nbsp;&nbsp;
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="demo/#/component/x-input" target="_blank">demo 原始链接</a>&nbsp;&nbsp;
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="https://gitlab.lixinio.com/frontend/cvux/tree/master/src/demos/XInput.vue" target="_blank">Demo source</a>&nbsp;&nbsp;

``` js
import { XInput } from 'cvux'
```

<span class="vux-props-title">Props</span>

|name|type|default|version|description|
|-------|-------|-------|-------|-------|
| <span class="prop-key" style="white-space:nowrap;">value</span> | <span class="type type-string">String</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | input value, use `v-model` for binding |
| <span class="prop-key" style="white-space:nowrap;">type</span> | <span class="type type-string">String</span> | text | <span style="font-size:12px;white-space:nowrap;"></span> | input type, one of `text`,`number`,`email`,`password`,`tel` |
| <span class="prop-key" style="white-space:nowrap;">is-type</span> | <span class="type type-string">String</span><br><span class="type type-function">Function</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | custom validating function, should return `{valid:true}` or `{valid:false, msg: error msg}` |
| <span class="prop-key" style="white-space:nowrap;">required</span> | <span class="type type-boolean">Boolean</span> | false | <span style="font-size:12px;white-space:nowrap;"></span> | if is required |
| <span class="prop-key" style="white-space:nowrap;">title</span> | <span class="type type-string">String</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | label text |
| <span class="prop-key" style="white-space:nowrap;">placeholder</span> | <span class="type type-string">String</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | placeholder |
| <span class="prop-key" style="white-space:nowrap;">show-clear</span> | <span class="type type-boolean">Boolean</span> | true | <span style="font-size:12px;white-space:nowrap;"></span> | if show clear icon |
| <span class="prop-key" style="white-space:nowrap;">min</span> | <span class="type type-number">Number</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | minlength for input |
| <span class="prop-key" style="white-space:nowrap;">max</span> | <span class="type type-number">Number</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | maxlength for input |
| <span class="prop-key" style="white-space:nowrap;">disabled</span> | <span class="type type-boolean">Boolean</span> | false | <span style="font-size:12px;white-space:nowrap;"></span> | if input is disabled |
| <span class="prop-key" style="white-space:nowrap;">readonly</span> | <span class="type type-boolean">Boolean</span> | false | <span style="font-size:12px;white-space:nowrap;"></span> | if input is readonly |
| <span class="prop-key" style="white-space:nowrap;">debounce</span> | <span class="type type-number">Number</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | debounce time |
| <span class="prop-key" style="white-space:nowrap;">text-align</span> | <span class="type type-string">String</span> | left | <span style="font-size:12px;white-space:nowrap;"></span> | text-align setting for value |

<span class="vux-props-title">Slots</span>

|name|description|version|
|-------|-------|-------|
| <span class="prop-key" style="white-space:nowrap;">label</span> | undefined | <span style="font-size:12px;white-space:nowrap;"></span> |
| <span class="prop-key" style="white-space:nowrap;">restricted-label</span> | undefined | <span style="font-size:12px;white-space:nowrap;"></span> |
| <span class="prop-key" style="white-space:nowrap;">right</span> | undefined | <span style="font-size:12px;white-space:nowrap;"></span> |

<span class="vux-props-title">Events</span>

|name|params|description|version|
|-------|-------|-------|-------|
| <span class="prop-key" style="white-space:nowrap;">on-blur</span> |   `(value, $event)` | undefined | <span style="font-size:12px;white-space:nowrap;"></span> |
| <span class="prop-key" style="white-space:nowrap;">on-focus</span> |   `(value, $event)` | undefined | <span style="font-size:12px;white-space:nowrap;"></span> |
| <span class="prop-key" style="white-space:nowrap;">on-enter</span> |   `(value, $event)` | undefined | <span style="font-size:12px;white-space:nowrap;"></span> |
| <span class="prop-key" style="white-space:nowrap;">on-change</span> |   `(value)` | undefined | <span style="font-size:12px;white-space:nowrap;"></span> |
| <span class="prop-key" style="white-space:nowrap;">on-click-clear-icon</span> |   &nbsp; | undefined | <span style="font-size:12px;white-space:nowrap;">v2.1.15</span> |

<span class="vux-props-title">Methods</span>

|name|params|description|version|
|-------|-------|-------|-------|
| <span class="prop-key" style="white-space:nowrap;">focus</span> |   &nbsp; | get input focus |<span style="font-size:12px;white-space:nowrap;"></span> | 
| <span class="prop-key" style="white-space:nowrap;">blur</span> |   &nbsp; | remove focus from input |<span style="font-size:12px;white-space:nowrap;"></span> | 


<a class="vux-demo-link" href="#" router-link="/zh-CN/demos/x-input">Demo page</a>





---

### XNumber
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="https://gitlab.lixinio.com/frontend/cvux/tree/master/src/components/x-number/metas.yml" target="_blank">Edit document</a>&nbsp;&nbsp;
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="#" router-link="/zh-CN/demos/x-number" target="_blank">Demo page</a>&nbsp;&nbsp;
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="demo/#/component/x-number" target="_blank">demo 原始链接</a>&nbsp;&nbsp;
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="https://gitlab.lixinio.com/frontend/cvux/tree/master/src/demos/XNumber.vue" target="_blank">Demo source</a>&nbsp;&nbsp;

``` js
import { XNumber } from 'cvux'
```


```html
  <group>
    <x-number title="title" v-model="value"></x-number>
  </group>
```


<span class="vux-props-title">Props</span>

|name|type|default|version|description|
|-------|-------|-------|-------|-------|
| <span class="prop-key" style="white-space:nowrap;">value</span> | <span class="type type-number">Number</span> | 0 | <span style="font-size:12px;white-space:nowrap;"></span> | form value, use `v-model` for binding |
| <span class="prop-key" style="white-space:nowrap;">title</span> | <span class="type type-string">String</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | label text |
| <span class="prop-key" style="white-space:nowrap;">min</span> | <span class="type type-number">Number</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | minimum number of value |
| <span class="prop-key" style="white-space:nowrap;">max</span> | <span class="type type-number">Number</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | maximum number of value |
| <span class="prop-key" style="white-space:nowrap;">step</span> | <span class="type type-number">Number</span> | 1 | <span style="font-size:12px;white-space:nowrap;"></span> | step value |
| <span class="prop-key" style="white-space:nowrap;">fillable</span> | <span class="type type-boolean">Boolean</span> | false | <span style="font-size:12px;white-space:nowrap;"></span> | if use can fill the number |
| <span class="prop-key" style="white-space:nowrap;">width</span> | <span class="type type-string">String</span> | 50px | <span style="font-size:12px;white-space:nowrap;"></span> | width of the input element |
| <span class="prop-key" style="white-space:nowrap;">button-style</span> | <span class="type type-string">String</span> | square | <span style="font-size:12px;white-space:nowrap;"></span> | button styles, ['square', 'round'] |
| <span class="prop-key" style="white-space:nowrap;">align</span> | <span class="type type-string">String</span> | right | <span style="font-size:12px;white-space:nowrap;"></span> | align setting of the selecting area |


<a class="vux-demo-link" href="#" router-link="/zh-CN/demos/x-number">Demo page</a>





---

### XSwitch
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="https://gitlab.lixinio.com/frontend/cvux/tree/master/src/components/x-switch/metas.yml" target="_blank">Edit document</a>&nbsp;&nbsp;
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="#" router-link="/zh-CN/demos/x-switch" target="_blank">Demo page</a>&nbsp;&nbsp;
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="demo/#/component/x-switch" target="_blank">demo 原始链接</a>&nbsp;&nbsp;
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="https://gitlab.lixinio.com/frontend/cvux/tree/master/src/demos/XSwitch.vue" target="_blank">Demo source</a>&nbsp;&nbsp;

``` js
import { XSwitch } from 'cvux'
```


```html
  <group>
    <x-switch title="title" v-model="value"></x-switch>
  </group>
```


<span class="vux-props-title">Props</span>

|name|type|default|version|description|
|-------|-------|-------|-------|-------|
| <span class="prop-key" style="white-space:nowrap;">title</span> | <span class="type type-string">String</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | label text |
| <span class="prop-key" style="white-space:nowrap;">disabled</span> | <span class="type type-boolean">Boolean</span> | false | <span style="font-size:12px;white-space:nowrap;"></span> | if disabled |
| <span class="prop-key" style="white-space:nowrap;">value</span> | <span class="type type-boolean">Boolean</span> | false | <span style="font-size:12px;white-space:nowrap;"></span> | component's value, use `v-model` for binding |
| <span class="prop-key" style="white-space:nowrap;">inline-desc</span> | <span class="type type-string">String</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | desctiption text below the label |


<a class="vux-demo-link" href="#" router-link="/zh-CN/demos/x-switch">Demo page</a>





---

### XTextarea
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="https://gitlab.lixinio.com/frontend/cvux/tree/master/src/components/x-textarea/metas.yml" target="_blank">Edit document</a>&nbsp;&nbsp;
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="#" router-link="/zh-CN/demos/x-textarea" target="_blank">Demo page</a>&nbsp;&nbsp;
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="demo/#/component/x-textarea" target="_blank">demo 原始链接</a>&nbsp;&nbsp;
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="https://gitlab.lixinio.com/frontend/cvux/tree/master/src/demos/XTextarea.vue" target="_blank">Demo source</a>&nbsp;&nbsp;

``` js
import { XTextarea } from 'cvux'
```

<span class="vux-props-title">Props</span>

|name|type|default|version|description|
|-------|-------|-------|-------|-------|
| <span class="prop-key" style="white-space:nowrap;">show-counter</span> | <span class="type type-boolean">Boolean</span> | true | <span style="font-size:12px;white-space:nowrap;"></span> | if show the text length counter |
| <span class="prop-key" style="white-space:nowrap;">max</span> | <span class="type type-number">Number</span> | 0 | <span style="font-size:12px;white-space:nowrap;"></span> | maxlength limit |
| <span class="prop-key" style="white-space:nowrap;">value</span> | <span class="type type-string">String</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | textarea's value, use `v-model` for binding |
| <span class="prop-key" style="white-space:nowrap;">name</span> | <span class="type type-string">String</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | textarea's name |
| <span class="prop-key" style="white-space:nowrap;">placeholder</span> | <span class="type type-string">String</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | placeholder |
| <span class="prop-key" style="white-space:nowrap;">rows</span> | <span class="type type-number">Number</span> | 3 | <span style="font-size:12px;white-space:nowrap;"></span> | textarea's rows attribute |
| <span class="prop-key" style="white-space:nowrap;">cols</span> | <span class="type type-number">Number</span> | 30 | <span style="font-size:12px;white-space:nowrap;"></span> | textarea's cols attribute |
| <span class="prop-key" style="white-space:nowrap;">height</span> | <span class="type type-number">Number</span> | 0 | <span style="font-size:12px;white-space:nowrap;"></span> | height |
| <span class="prop-key" style="white-space:nowrap;">readonly</span> | <span class="type type-boolean">Boolean</span> | false | <span style="font-size:12px;white-space:nowrap;"></span> | textarea's readonly attribute |

<span class="vux-props-title">Events</span>

|name|params|description|version|
|-------|-------|-------|-------|
| <span class="prop-key" style="white-space:nowrap;">on-change</span> |   `(value)` | triggers when value changes | <span style="font-size:12px;white-space:nowrap;"></span> |


<a class="vux-demo-link" href="#" router-link="/zh-CN/demos/x-textarea">Demo page</a>



