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

---

### Actionsheet
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="https://gitlab.lixinio.com/frontend/cvux/tree/master/src/components/actionsheet/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/actionsheet" target="_blank">Demo page</a>&nbsp;&nbsp;
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="demo/#/component/actionsheet" 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/Actionsheet.vue" target="_blank">Demo source</a>&nbsp;&nbsp;

``` js
import { Actionsheet } 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-boolean">Boolean</span> | false | <span style="font-size:12px;white-space:nowrap;"></span> | if showing the component; use v-model for binding |
| <span class="prop-key" style="white-space:nowrap;">show-cancel</span> | <span class="type type-boolean">Boolean</span> | false | <span style="font-size:12px;white-space:nowrap;"></span> | if showing the cancel menu; invalid for android theme |
| <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> | text of cancel menu |
| <span class="prop-key" style="white-space:nowrap;">theme</span> | <span class="type type-string">String</span> | ios | <span style="font-size:12px;white-space:nowrap;"></span> | theme of menus, can be in ['ios', 'android'] |
| <span class="prop-key" style="white-space:nowrap;">menus</span> | <span class="type type-object">Object</span><br><span class="type type-array">Array</span> | {} | <span style="font-size:12px;white-space:nowrap;"></span> | menu items, for example: `{menu1: 'some text'}`, menu name with `.noop` will not trigger click events. <br>`Menus` supports array since `v2.1.0`. Keys can be customized. More details below. |
| <span class="prop-key" style="white-space:nowrap;">close-on-clicking-mask</span> | <span class="type type-boolean">Boolean</span> | true | <span style="font-size:12px;white-space:nowrap;"></span> | if closing actionsheet when clicking on mask |
| <span class="prop-key" style="white-space:nowrap;">close-on-clicking-menu</span> | <span class="type type-boolean">Boolean</span> | true | <span style="font-size:12px;white-space:nowrap;"></span> | if hide automatically when clicking on menus |

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

|name|params|description|version|
|-------|-------|-------|-------|
| <span class="prop-key" style="white-space:nowrap;">on-click-menu</span> |   (menuKey, menuItem) | triggers when clicking on the menu | <span style="font-size:12px;white-space:nowrap;"></span> |
| <span class="prop-key" style="white-space:nowrap;">on-click-menu-{menuKey}</span> |   (menuKey) | shortcut event for easier listening, `menuKey` is related to `label`. For exapmple, you can listen on `on-click-menu-delete` if you have a menu named `delete` | <span style="font-size:12px;white-space:nowrap;"></span> |
| <span class="prop-key" style="white-space:nowrap;">on-click-menu-cancel</span> |   &nbsp; | triggers when clicking on the cancel menu | <span style="font-size:12px;white-space:nowrap;"></span> |
| <span class="prop-key" style="white-space:nowrap;">on-click-mask</span> |   &nbsp; | triggers when clicking on mask | <span style="font-size:12px;white-space:nowrap;"></span> |


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


`menus` supports type: Array.

`label`: label name，you can use simple text or `html`

`value`: event name，if not specified, no `on-click-menu` will be emitted

`type`:

  - `primary` primary color
  - `warn` warn color
  - `disabled` gray color, the menu cannot be clicked
  - `info ` the menu item shows as a tip, the same function as `key.noop` when setting menus by `Object`.

``` js
[{
  label: 'Are you sure?<br/><span style="color:#666;font-size:12px;">Once deleted, you will never find it.</span>',
  type: 'info'
}, {
  label: 'Primary',
  type: 'primary',
  value: 'primary'
}, {
  label: 'Warn',
  type: 'warn'
}, {
  label: 'Disabled',
  type: 'disabled'
}, {
  label: 'Default'
}]
```






---

### Badge
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="https://gitlab.lixinio.com/frontend/cvux/tree/master/src/components/badge/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/badge" target="_blank">Demo page</a>&nbsp;&nbsp;
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="demo/#/component/badge" 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/Badge.vue" target="_blank">Demo source</a>&nbsp;&nbsp;

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

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

|name|type|default|version|description|
|-------|-------|-------|-------|-------|
| <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> | text of the Badge |


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





---

### ButtonTabItem
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="https://gitlab.lixinio.com/frontend/cvux/tree/master/src/components/button-tab-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/button-tab" target="_blank">Demo page</a>&nbsp;&nbsp;
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="demo/#/component/button-tab-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/ButtonTabItem.vue" target="_blank">Demo source</a>&nbsp;&nbsp;

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

<span class="vux-component-name">ButtonTab</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-number">Number</span> | 0 | <span style="font-size:12px;white-space:nowrap;"></span> | current index, start from 0, use `v-model` for binding |
| <span class="prop-key" style="white-space:nowrap;">height</span> | <span class="type type-number">Number</span> | 30 | <span style="font-size:12px;white-space:nowrap;"></span> | height in px |


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

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

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

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

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


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





---

### ButtonTab
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="https://gitlab.lixinio.com/frontend/cvux/tree/master/src/components/button-tab/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/button-tab" target="_blank">Demo page</a>&nbsp;&nbsp;
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="demo/#/component/button-tab" 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/ButtonTab.vue" target="_blank">Demo source</a>&nbsp;&nbsp;

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

<span class="vux-component-name">ButtonTab</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-number">Number</span> | 0 | <span style="font-size:12px;white-space:nowrap;"></span> | current index, start from 0, use `v-model` for binding |
| <span class="prop-key" style="white-space:nowrap;">height</span> | <span class="type type-number">Number</span> | 30 | <span style="font-size:12px;white-space:nowrap;"></span> | height in px |


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

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

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

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

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


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





---

### Calendar
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="https://gitlab.lixinio.com/frontend/cvux/tree/master/src/components/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/calendar" target="_blank">Demo page</a>&nbsp;&nbsp;
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="demo/#/component/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/Calendar.vue" target="_blank">Demo source</a>&nbsp;&nbsp;

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


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

<p class="tip">`calendar` can be only used in `Group`
<br>
Except `title` and `value`, other `props` are the same as those of `inline-calendar`.
</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> | form value, binding by v-model. Empty means single seleciton; [] means multiple selection. When the value is "TODAY", can quick pick current date. `placeholder` is valid only when the value is empty or []. |
| <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> | text of 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="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="prop-key" style="white-space:nowrap;">on-show</span> |   &nbsp; | emits when popup shows | <span style="font-size:12px;white-space:nowrap;"></span> |
| <span class="prop-key" style="white-space:nowrap;">on-hide</span> |   &nbsp; | emits when popup hides | <span style="font-size:12px;white-space:nowrap;"></span> |


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





---

### Card
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="https://gitlab.lixinio.com/frontend/cvux/tree/master/src/components/card/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/card" target="_blank">Demo page</a>&nbsp;&nbsp;
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="demo/#/component/card" 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/Card.vue" target="_blank">Demo source</a>&nbsp;&nbsp;

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

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

|name|type|default|version|description|
|-------|-------|-------|-------|-------|
| <span class="prop-key" style="white-space:nowrap;">header.title</span> | <span class="type type-string">String</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | title of header, not show without specify content |
| <span class="prop-key" style="white-space:nowrap;">footer.title</span> | <span class="type type-string">String</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | title of footer, not show without specify content |
| <span class="prop-key" style="white-space:nowrap;">footer.link</span> | <span class="type type-string">String</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | link in the bottom, normal url or a v-link argument |

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

|name|description|version|
|-------|-------|-------|
| <span class="prop-key" style="white-space:nowrap;">header</span> | header | <span style="font-size:12px;white-space:nowrap;"></span> |
| <span class="prop-key" style="white-space:nowrap;">content</span> | content, the main body part | <span style="font-size:12px;white-space:nowrap;"></span> |
| <span class="prop-key" style="white-space:nowrap;">footer</span> | footer | <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-click-footer</span> |   &nbsp; | emits when clicking the footer | <span style="font-size:12px;white-space:nowrap;"></span> |
| <span class="prop-key" style="white-space:nowrap;">on-click-header</span> |   &nbsp; | emits when clicking the header | <span style="font-size:12px;white-space:nowrap;"></span> |


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





---

### 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>





---

### ColorPicker
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="https://gitlab.lixinio.com/frontend/cvux/tree/master/src/components/color-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/color-picker" target="_blank">Demo page</a>&nbsp;&nbsp;
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="demo/#/component/color-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/ColorPicker.vue" target="_blank">Demo source</a>&nbsp;&nbsp;

``` js
import { ColorPicker } 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> | form value |
| <span class="prop-key" style="white-space:nowrap;">colors</span> | <span class="type type-array">Array</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | color list |
| <span class="prop-key" style="white-space:nowrap;">size</span> | <span class="type type-string">String</span> | large | <span style="font-size:12px;white-space:nowrap;"></span> | button size, enum: large, middle, small |


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





---

### Countdown
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="https://gitlab.lixinio.com/frontend/cvux/tree/master/src/components/countdown/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/countdown" target="_blank">Demo page</a>&nbsp;&nbsp;
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="demo/#/component/countdown" 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/Countdown.vue" target="_blank">Demo source</a>&nbsp;&nbsp;

``` js
import { Countdown } 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-number">number</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | total sections |
| <span class="prop-key" style="white-space:nowrap;">start</span> | <span class="type type-boolean">Boolean</span> | true | <span style="font-size:12px;white-space:nowrap;"></span> | if start counting down |


<a class="vux-demo-link" href="#" router-link="/zh-CN/demos/countdown">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>





---

### Divider
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="https://gitlab.lixinio.com/frontend/cvux/tree/master/src/components/divider/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/divider" target="_blank">Demo page</a>&nbsp;&nbsp;
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="demo/#/component/divider" 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/Divider.vue" target="_blank">Demo source</a>&nbsp;&nbsp;

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

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

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


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





---

### FlexboxItem
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="https://gitlab.lixinio.com/frontend/cvux/tree/master/src/components/flexbox-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/flexbox" target="_blank">Demo page</a>&nbsp;&nbsp;
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="demo/#/component/flexbox-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/FlexboxItem.vue" target="_blank">Demo source</a>&nbsp;&nbsp;

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

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

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

|name|type|default|version|description|
|-------|-------|-------|-------|-------|
| <span class="prop-key" style="white-space:nowrap;">gutter</span> | <span class="type type-number">Number</span> | 8 | <span style="font-size:12px;white-space:nowrap;"></span> | gap size (px) |
| <span class="prop-key" style="white-space:nowrap;">orient</span> | <span class="type type-string">String</span> | horizontal | <span style="font-size:12px;white-space:nowrap;"></span> | can be in ['horizontal', 'vertical'] |
| <span class="prop-key" style="white-space:nowrap;">justify</span> | <span class="type type-string">String</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | `justify-content` in `flex` |
| <span class="prop-key" style="white-space:nowrap;">align</span> | <span class="type type-string">String</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | `align-items` in `flex` |
| <span class="prop-key" style="white-space:nowrap;">wrap</span> | <span class="type type-string">String</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | `flex-wrap` in `flex` |
| <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> | `flex-direction` in `flex` |

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

|name|description|version|
|-------|-------|-------|
| <span class="prop-key" style="white-space:nowrap;">default</span> | content slot for `flexbox-item` | <span style="font-size:12px;white-space:nowrap;"></span> |


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

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

|name|type|default|version|description|
|-------|-------|-------|-------|-------|
| <span class="prop-key" style="white-space:nowrap;">span</span> | <span class="type type-number">Number</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | occupied width. If not set, all flexbox-item will get the same width. |
| <span class="prop-key" style="white-space:nowrap;">order</span> | <span class="type type-string">String</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | `order` in `flex` |

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

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


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





---

### Flexbox
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="https://gitlab.lixinio.com/frontend/cvux/tree/master/src/components/flexbox/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/flexbox" target="_blank">Demo page</a>&nbsp;&nbsp;
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="demo/#/component/flexbox" 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/Flexbox.vue" target="_blank">Demo source</a>&nbsp;&nbsp;

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

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

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

|name|type|default|version|description|
|-------|-------|-------|-------|-------|
| <span class="prop-key" style="white-space:nowrap;">gutter</span> | <span class="type type-number">Number</span> | 8 | <span style="font-size:12px;white-space:nowrap;"></span> | gap size (px) |
| <span class="prop-key" style="white-space:nowrap;">orient</span> | <span class="type type-string">String</span> | horizontal | <span style="font-size:12px;white-space:nowrap;"></span> | can be in ['horizontal', 'vertical'] |
| <span class="prop-key" style="white-space:nowrap;">justify</span> | <span class="type type-string">String</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | `justify-content` in `flex` |
| <span class="prop-key" style="white-space:nowrap;">align</span> | <span class="type type-string">String</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | `align-items` in `flex` |
| <span class="prop-key" style="white-space:nowrap;">wrap</span> | <span class="type type-string">String</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | `flex-wrap` in `flex` |
| <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> | `flex-direction` in `flex` |

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

|name|description|version|
|-------|-------|-------|
| <span class="prop-key" style="white-space:nowrap;">default</span> | content slot for `flexbox-item` | <span style="font-size:12px;white-space:nowrap;"></span> |


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

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

|name|type|default|version|description|
|-------|-------|-------|-------|-------|
| <span class="prop-key" style="white-space:nowrap;">span</span> | <span class="type type-number">Number</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | occupied width. If not set, all flexbox-item will get the same width. |
| <span class="prop-key" style="white-space:nowrap;">order</span> | <span class="type type-string">String</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | `order` in `flex` |

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

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


<a class="vux-demo-link" href="#" router-link="/zh-CN/demos/flexbox">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>





---

### Icon
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="https://gitlab.lixinio.com/frontend/cvux/tree/master/src/components/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/icon" target="_blank">Demo page</a>&nbsp;&nbsp;
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="demo/#/component/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/Icon.vue" target="_blank">Demo source</a>&nbsp;&nbsp;

``` js
import { Icon } 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> |  | <span style="font-size:12px;white-space:nowrap;"></span> | icon name, optional values are shown in demo |
| <span class="prop-key" style="white-space:nowrap;">is-msg</span> | <span class="type type-boolean">Boolean</span> | false | <span style="font-size:12px;white-space:nowrap;"></span> | if used as msg icon. Icon's font-size will be bigger(93px) than default |


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

``` html
<icon type="success"></icon>
<icon type="info"></icon>
<icon type="info-circle"></icon>
<icon type="warn"></icon>
<icon type="waiting"></icon>
<icon type="waiting-circle"></icon>
<icon type="safe-success"></icon>
<icon type="safe-warn"></icon>
<icon type="success-circle"></icon>
<icon type="success-no-circle"></icon>
<icon type="circle"></icon>
<icon type="download"></icon>
<icon type="cancel"></icon>
<icon type="search"></icon>
<icon type="clear"></icon>
<icon type="success" is-msg></icon>
<icon type="info" is-msg></icon>
<icon type="safe-success" is-msg></icon>
<icon type="safe-warn" is-msg></icon>
```






---

### 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>





---

### Loading
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="https://gitlab.lixinio.com/frontend/cvux/tree/master/src/components/loading/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/loading" target="_blank">Demo page</a>&nbsp;&nbsp;
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="demo/#/component/loading" 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/Loading.vue" target="_blank">Demo source</a>&nbsp;&nbsp;

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

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

|name|type|default|version|description|
|-------|-------|-------|-------|-------|
| <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> | visibility of the component. Use `v-model` for binding before v2.5.7, otherwise use `:show` |
| <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> | loading text |
| <span class="prop-key" style="white-space:nowrap;">position</span> | <span class="type type-string">String</span> | fixed | <span style="font-size:12px;white-space:nowrap;"></span> | position, default is `fixed`, you can use `absolute` |
| <span class="prop-key" style="white-space:nowrap;">transition</span> | <span class="type type-string">String</span> | vux-mask | <span style="font-size:12px;white-space:nowrap;"></span> | transition name |

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

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


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





---

### Masker
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="https://gitlab.lixinio.com/frontend/cvux/tree/master/src/components/masker/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/masker" target="_blank">Demo page</a>&nbsp;&nbsp;
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="demo/#/component/masker" 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/Masker.vue" target="_blank">Demo source</a>&nbsp;&nbsp;

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

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

|name|type|default|version|description|
|-------|-------|-------|-------|-------|
| <span class="prop-key" style="white-space:nowrap;">color</span> | <span class="type type-string">String</span> | 0, 0, 0 | <span style="font-size:12px;white-space:nowrap;"></span> | the mask's color in rgb format, for example, '0, 0, 0' |
| <span class="prop-key" style="white-space:nowrap;">opacity</span> | <span class="type type-number">Number</span> | 0.5 | <span style="font-size:12px;white-space:nowrap;"></span> | the opacity of the mask |
| <span class="prop-key" style="white-space:nowrap;">fullscreen</span> | <span class="type type-boolean">Boolean</span> | false | <span style="font-size:12px;white-space:nowrap;"></span> | if masker is fullscreen |

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

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


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





---

### Panel
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="https://gitlab.lixinio.com/frontend/cvux/tree/master/src/components/panel/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/panel" target="_blank">Demo page</a>&nbsp;&nbsp;
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="demo/#/component/panel" 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/Panel.vue" target="_blank">Demo source</a>&nbsp;&nbsp;

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

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

|name|type|default|version|description|
|-------|-------|-------|-------|-------|
| <span class="prop-key" style="white-space:nowrap;">header</span> | <span class="type type-string">String</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | header title |
| <span class="prop-key" style="white-space:nowrap;">footer</span> | <span class="type type-object">Object</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | footer config, `{url: url, title: title}` |
| <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> | content list `[{title, desc, src, fallbackSrc, meta:{source,date,other}}]` |
| <span class="prop-key" style="white-space:nowrap;">type</span> | <span class="type type-string">String</span> | 1 | <span style="font-size:12px;white-space:nowrap;"></span> | one of '1', '2', '3', '4', '5' |

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

|name|params|description|version|
|-------|-------|-------|-------|
| <span class="prop-key" style="white-space:nowrap;">on-click-header</span> |   &nbsp; | emits when clicking header | <span style="font-size:12px;white-space:nowrap;"></span> |
| <span class="prop-key" style="white-space:nowrap;">on-click-item</span> |   `(item)` | emits when clicking item | <span style="font-size:12px;white-space:nowrap;"></span> |
| <span class="prop-key" style="white-space:nowrap;">on-click-footer</span> |   &nbsp; | emits when clicking footer | <span style="font-size:12px;white-space:nowrap;"></span> |


<a class="vux-demo-link" href="#" router-link="/zh-CN/demos/panel">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>





---

### Popup
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="https://gitlab.lixinio.com/frontend/cvux/tree/master/src/components/popup/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" target="_blank">Demo page</a>&nbsp;&nbsp;
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="demo/#/component/popup" 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/Popup.vue" target="_blank">Demo source</a>&nbsp;&nbsp;

``` js
import { Popup } 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-boolean">Boolean</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | visibility of popup, use `v-model` for binding |
| <span class="prop-key" style="white-space:nowrap;">height</span> | <span class="type type-string">String</span> | auto | <span style="font-size:12px;white-space:nowrap;"></span> | popup height, works when position is top or bottom |
| <span class="prop-key" style="white-space:nowrap;">hide-on-blur</span> | <span class="type type-boolean">Boolean</span> | true | <span style="font-size:12px;white-space:nowrap;"></span> | if closing popup when mask being clicked |

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

|name|description|version|
|-------|-------|-------|
| <span class="prop-key" style="white-space:nowrap;">default</span> | content body | <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-hide</span> |   &nbsp; | emits when then popup is closed | <span style="font-size:12px;white-space:nowrap;"></span> |
| <span class="prop-key" style="white-space:nowrap;">on-show</span> |   &nbsp; | emits when the popup shows | <span style="font-size:12px;white-space:nowrap;"></span> |
| <span class="prop-key" style="white-space:nowrap;">on-first-show</span> |   &nbsp; | emits at the first time the popup shows | <span style="font-size:12px;white-space:nowrap;"></span> |


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





---

### Previewer
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="https://gitlab.lixinio.com/frontend/cvux/tree/master/src/components/previewer/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/previewer" target="_blank">Demo page</a>&nbsp;&nbsp;
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="demo/#/component/previewer" 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/Previewer.vue" target="_blank">Demo source</a>&nbsp;&nbsp;

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


example for list:

``` js
[{
  src: 'https://placekitten.com/800/400',
  w: 600,
  h: 400
},
{
  src: 'https://placekitten.com/1200/900',
  msrc: 'https://placekitten.com/120/90', // 缩略图
  w: 1200,
  h: 900
}]
```

<p class="warning">before v2.4.0, `w` and `h` should be specified.</p>

Prevewing an image by index:

``` js
this.$refs.previewer.show(index)
```


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

|name|type|default|version|description|
|-------|-------|-------|-------|-------|
| <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> | images list |
| <span class="prop-key" style="white-space:nowrap;">options</span> | <span class="type type-object">Object</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | options for `photoswipe` |


<a class="vux-demo-link" href="#" router-link="/zh-CN/demos/previewer">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>





---

### ScrollerPage
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="https://gitlab.lixinio.com/frontend/cvux/tree/master/src/components/scroller-page/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/scroller-page" target="_blank">Demo page</a>&nbsp;&nbsp;
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="demo/#/component/scroller-page" 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/ScrollerPage.vue" target="_blank">Demo source</a>&nbsp;&nbsp;

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

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

|name|description|version|
|-------|-------|-------|
| <span class="prop-key" style="white-space:nowrap;">default</span> | title | <span style="font-size:12px;white-space:nowrap;"></span> |
| <span class="prop-key" style="white-space:nowrap;">header</span> | header | <span style="font-size:12px;white-space:nowrap;"></span> |
| <span class="prop-key" style="white-space:nowrap;">footer</span> | footer | <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;">computeHeight</span> |   &nbsp; | Header and footer based height, dynamic calculation of scroller area height |<span style="font-size:12px;white-space:nowrap;"></span> | 


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

<p class="tip">
如需动态控制 header 或 footer 显示状态，需要在 dom 更新完毕之后，调用组件的 computeHeight 方法重新计算 scroller 区域高度。
</p>

``` js
this.$nextTick(() => {
  this.$refs.scrollerPage.computeHeight()
})
```






---

### Scroller
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="https://gitlab.lixinio.com/frontend/cvux/tree/master/src/components/scroller/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/scroller" target="_blank">Demo page</a>&nbsp;&nbsp;
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="demo/#/component/scroller" 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/Scroller.vue" target="_blank">Demo source</a>&nbsp;&nbsp;

``` js
import { Scroller } 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-object">Object</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | current pulldown and pullup status, use `v-model` for binding |
| <span class="prop-key" style="white-space:nowrap;">height</span> | <span class="type type-string">String</span> | viewport height | <span style="font-size:12px;white-space:nowrap;"></span> | scroller's height, you can use `height=-40` to make scroller set to height: `viewportHeight - 40px` |
| <span class="prop-key" style="white-space:nowrap;">lock-x</span> | <span class="type type-boolean">Boolean</span> | false | <span style="font-size:12px;white-space:nowrap;"></span> | lock the horizontal direction |
| <span class="prop-key" style="white-space:nowrap;">lock-y</span> | <span class="type type-boolean">Boolean</span> | false | <span style="font-size:12px;white-space:nowrap;"></span> | lock the vertical direction |
| <span class="prop-key" style="white-space:nowrap;">scrollbar-x</span> | <span class="type type-boolean">Boolean</span> | false | <span style="font-size:12px;white-space:nowrap;"></span> | if show horizontal scrollbar |
| <span class="prop-key" style="white-space:nowrap;">scrollbarY</span> | <span class="type type-boolean">Boolean</span> | false | <span style="font-size:12px;white-space:nowrap;"></span> | if show vertical scrollerbar |
| <span class="prop-key" style="white-space:nowrap;">bounce</span> | <span class="type type-boolean">Boolean</span> | true | <span style="font-size:12px;white-space:nowrap;"></span> | if use bounce effect |
| <span class="prop-key" style="white-space:nowrap;">use-pulldown</span> | <span class="type type-boolean">Boolean</span> | false | <span style="font-size:12px;white-space:nowrap;"></span> | if use pulldown plugin |
| <span class="prop-key" style="white-space:nowrap;">use-pullup</span> | <span class="type type-boolean">Boolean</span> | false | <span style="font-size:12px;white-space:nowrap;"></span> | if use pullup plugin |
| <span class="prop-key" style="white-space:nowrap;">pulldown-config</span> | <span class="type type-object">Object</span> | see below | <span style="font-size:12px;white-space:nowrap;"></span> | config for pulldown plugin |
| <span class="prop-key" style="white-space:nowrap;">pullup-config</span> | <span class="type type-object">Object</span> | see below | <span style="font-size:12px;white-space:nowrap;"></span> | config for pullup plugin |
| <span class="prop-key" style="white-space:nowrap;">scroll-bottom-offset</span> | <span class="type type-number">Number</span> | 0 | <span style="font-size:12px;white-space:nowrap;">v2.2.1-rc.6</span> | where to emit event:on-scroll-bottom before reaching bottom |

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

|name|description|version|
|-------|-------|-------|
| <span class="prop-key" style="white-space:nowrap;">default</span> | scroller content, should has only one `div` root | <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-scroll</span> |   `(position)` | emits when user scrolls | <span style="font-size:12px;white-space:nowrap;"></span> |
| <span class="prop-key" style="white-space:nowrap;">on-scroll-bottom</span> |   &nbsp; | emits when user scrolls to bottom. The event may emit multiple times, so you should use a variable for keeping status if you need fetching data | <span style="font-size:12px;white-space:nowrap;">v2.2.1-rc.6</span> |
| <span class="prop-key" style="white-space:nowrap;">on-pulldown-loading</span> |   &nbsp; | emits when scroller is on pulldown-loading status | <span style="font-size:12px;white-space:nowrap;"></span> |
| <span class="prop-key" style="white-space:nowrap;">on-pullup-loading</span> |   &nbsp; | emits when scroller is on pullup-loading status | <span style="font-size:12px;white-space:nowrap;"></span> |
| <span class="prop-key" style="white-space:nowrap;">on-scroll-start</span> |   &nbsp; | emits when scroller starts scroll | <span style="font-size:12px;white-space:nowrap;"></span> |
| <span class="prop-key" style="white-space:nowrap;">on-scroll-end</span> |   &nbsp; | emits when scroller is scroll to end | <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;">reset</span> |   `(position, duration, easing)` | reset scroller to reset height whenever your data is changed. easing can be one of ease-in, ease-in-out, ease, bezier(n, n, n, n) |<span style="font-size:12px;white-space:nowrap;"></span> | 
| <span class="prop-key" style="white-space:nowrap;">donePullup</span> |   &nbsp; | set pullup done after new data is fetched |<span style="font-size:12px;white-space:nowrap;"></span> | 
| <span class="prop-key" style="white-space:nowrap;">disablePullup</span> |   &nbsp; | disable pullup plugin when there is no more data |<span style="font-size:12px;white-space:nowrap;"></span> | 
| <span class="prop-key" style="white-space:nowrap;">enablePullup</span> |   &nbsp; | enable pullup plugin |<span style="font-size:12px;white-space:nowrap;"></span> | 
| <span class="prop-key" style="white-space:nowrap;">donePulldown</span> |   &nbsp; | set pulldown done after new data is fetched |<span style="font-size:12px;white-space:nowrap;"></span> | 


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

pulldown 默认配置:

``` js
{
  content: 'Pull Down To Refresh',
  height: 60,
  autoRefresh: false,
  downContent: 'Pull Down To Refresh',
  upContent: 'Release To Refresh',
  loadingContent: 'Loading...',
  clsPrefix: 'xs-plugin-pulldown-'
}
```

pullup 默认配置:

``` js
{
  content: 'Pull Up To Refresh',
  pullUpHeight: 60,
  height: 40,
  autoRefresh: false,
  downContent: 'Release To Refresh',
  upContent: 'Pull Up To Refresh',
  loadingContent: 'Loading...',
  clsPrefix: 'xs-plugin-pullup-'
}
```

<span class="vux-qa">QA 如何更新数据</span>

如果展示内容只是简单的增加或者减少，直接调用`reset`方法即可

``` js
this.$nextTick(() => {
  this.$refs.scroller.reset()
})
```

如果展示内容完全重载，那么需要主动设置位置让其能正确回到顶部。适用于改变筛选条件后重载数据的情况

``` js
this.$nextTick(() => {
  this.$refs.scroller.reset({
    top: 0
  })
})
```

<span class="vux-qa">QA 如何设置pullup完成</span>

方法1，直接调用on-pullup-loading绑定事件的回调，传参数time 表示延时time执行，不传参数表示立即执行

``` js
<scroller 
  lock-x scrollbar-y 
  use-pullup 
  @on-pullup-loading="loadMore">
</scroller>
...
...
methods: {
  loadMore(done) {
    ...
    done(100)
  } 
}
```
方法2，直接调用ref的`donePullup`方法

``` js
this.$refs.demo2.donePullup()
```

方法3，绑定value, 重置状态

<p class="tip">自定义pullup模板同样是用v-model来绑定以获取状态变化</p>

``` html
<scroller v-model="status"></scroller>
```

``` js
data () {
  return {
    status: {
      pullupStatus: 'default'
    }
  }
}
```

```
// 重置状态为default
this.status.pullupStatus = 'default
```

<span class="vux-qa">QA 如何设置pulldown完成</span>

参照`pullup`, 使用方法`donePulldown`或者绑定`pulldownStatus`然后重置为`default`。

<span class="vux-qa">QA 如何禁用或者启用pullup</span>

在有些情况下，比如数据不多不需要上拉加载或者已经加载完成，我们需要禁用pullup
同样可以调用方法 `disablePullup` 或者设置`pullupStatus`为`disabled`

反之，则调用方法 `enablePullup` 或者设置`pullupStatus`为`enabled`

<span class="vux-qa">启用keep-alive后滚动有问题</span>

需要在调用Scroller的页面上在 hook: `activated`上执行`reset`

``` js
activated () {
  this.$refs.scroller.reset()
}
```






---

### 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>





---

### Spinner
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="https://gitlab.lixinio.com/frontend/cvux/tree/master/src/components/spinner/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/spinner" target="_blank">Demo page</a>&nbsp;&nbsp;
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="demo/#/component/spinner" 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/Spinner.vue" target="_blank">Demo source</a>&nbsp;&nbsp;

``` js
import { Spinner } 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> | ios | <span style="font-size:12px;white-space:nowrap;"></span> | icon type |


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





---

### Steps
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="https://gitlab.lixinio.com/frontend/cvux/tree/master/src/components/steps/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/steps" target="_blank">Demo page</a>&nbsp;&nbsp;
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="demo/#/component/steps" 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/Steps.vue" target="_blank">Demo source</a>&nbsp;&nbsp;

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


```html
  <steps :steps="steps" :fr-key="'operated_at'">
    <div slot-scope="{ step }" v-if="step.operator_name">
      <p>经手：{{step.operator_name}}（{{step.role_names}}）</p>
    </div>
  </steps>
```
`steps` must be an array, including an attribute named title and Customizing an attribute named title to display four states:
        pending_review, approved, rejected, not_started

`fr-key`: must be a string, Customizing the top right corner

``` js
const steps = [{
  status: 'pending_review',
  title: '通过',
  operator_name: '2018-10-15',
  role_names: '2018-10-15',
  operated_at: '2018-15-15'
}, {
  status: 'approved',
  title: '通过',
  operator_name: '2018-10-15',
  role_names: '2018-10-15',
  operated_at: '2018-15-15'
}, {
  status: 'rejected',
  title: '通过',
  operator_name: '2018-10-15',
  role_names: '2018-10-15',
  operated_at: '2018-15-15'
}]
```


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

|name|type|default|version|description|
|-------|-------|-------|-------|-------|
| <span class="prop-key" style="white-space:nowrap;">steps</span> | <span class="type type-array">Array</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | review list, can be an array with `title & status` |
| <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> | the title of steps |
| <span class="prop-key" style="white-space:nowrap;">frKey</span> | <span class="type type-string">String</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | the top right corner |


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





---

### Sticky
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="https://gitlab.lixinio.com/frontend/cvux/tree/master/src/components/sticky/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/sticky" target="_blank">Demo page</a>&nbsp;&nbsp;
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="demo/#/component/sticky" 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/Sticky.vue" target="_blank">Demo source</a>&nbsp;&nbsp;

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

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

|name|type|default|version|description|
|-------|-------|-------|-------|-------|
| <span class="prop-key" style="white-space:nowrap;">scroll-box</span> | <span class="type type-string">String</span> | window | <span style="font-size:12px;white-space:nowrap;"></span> | scroll tagget |
| <span class="prop-key" style="white-space:nowrap;">check-sticky-support</span> | <span class="type type-boolean">Boolean</span> | true | <span style="font-size:12px;white-space:nowrap;"></span> | if check if sticky is supported on current browser |
| <span class="prop-key" style="white-space:nowrap;">offset</span> | <span class="type type-number">Number</span> | 0 | <span style="font-size:12px;white-space:nowrap;"></span> | top distance |

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

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


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





---

### Swiper
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="https://gitlab.lixinio.com/frontend/cvux/tree/master/src/components/swiper/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/swiper" target="_blank">Demo page</a>&nbsp;&nbsp;
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="demo/#/component/swiper" 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/Swiper.vue" target="_blank">Demo source</a>&nbsp;&nbsp;

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

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

|name|type|default|version|description|
|-------|-------|-------|-------|-------|
| <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> | image list |
| <span class="prop-key" style="white-space:nowrap;">direction</span> | <span class="type type-string">String</span> | horizontal | <span style="font-size:12px;white-space:nowrap;"></span> | swiping direction |
| <span class="prop-key" style="white-space:nowrap;">show-dots</span> | <span class="type type-boolean">Boolean</span> | true | <span style="font-size:12px;white-space:nowrap;"></span> | if show indicators |
| <span class="prop-key" style="white-space:nowrap;">show-desc-mask</span> | <span class="type type-boolean">Boolean</span> | true | <span style="font-size:12px;white-space:nowrap;"></span> | if show description mask |
| <span class="prop-key" style="white-space:nowrap;">dots-position</span> | <span class="type type-string">String</span> | right | <span style="font-size:12px;white-space:nowrap;"></span> | indicator position |
| <span class="prop-key" style="white-space:nowrap;">dots-class</span> | <span class="type type-string">String</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | custom indicator's classname |
| <span class="prop-key" style="white-space:nowrap;">auto</span> | <span class="type type-boolean">Boolean</span> | false | <span style="font-size:12px;white-space:nowrap;"></span> | if auto playing |
| <span class="prop-key" style="white-space:nowrap;">loop</span> | <span class="type type-boolean">Boolean</span> | false | <span style="font-size:12px;white-space:nowrap;"></span> | if use loop mode |
| <span class="prop-key" style="white-space:nowrap;">interval</span> | <span class="type type-number">Number</span> | 3000 | <span style="font-size:12px;white-space:nowrap;"></span> | interval value |
| <span class="prop-key" style="white-space:nowrap;">threshold</span> | <span class="type type-number">Number</span> | 50 | <span style="font-size:12px;white-space:nowrap;"></span> | threshold value |
| <span class="prop-key" style="white-space:nowrap;">duration</span> | <span class="type type-number">Number</span> | 300 | <span style="font-size:12px;white-space:nowrap;"></span> | transition duration |
| <span class="prop-key" style="white-space:nowrap;">height</span> | <span class="type type-string">String</span> | 180px | <span style="font-size:12px;white-space:nowrap;"></span> | height value |
| <span class="prop-key" style="white-space:nowrap;">aspect-ratio</span> | <span class="type type-number">Number</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | if specified, height will be caculated automatically |
| <span class="prop-key" style="white-space:nowrap;">min-moving-distance</span> | <span class="type type-number">Number</span> | 0 | <span style="font-size:12px;white-space:nowrap;"></span> | min distance before moving |
| <span class="prop-key" style="white-space:nowrap;">v-model</span> | <span class="type type-number">Number</span> | 0 | <span style="font-size:12px;white-space:nowrap;"></span> | index value, use `v-model` for binding |

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

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


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





---

### TabItem
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="https://gitlab.lixinio.com/frontend/cvux/tree/master/src/components/tab-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/tab" target="_blank">Demo page</a>&nbsp;&nbsp;
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="demo/#/component/tab-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/TabItem.vue" target="_blank">Demo source</a>&nbsp;&nbsp;

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

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

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

|name|type|default|version|description|
|-------|-------|-------|-------|-------|
| <span class="prop-key" style="white-space:nowrap;">line-width</span> | <span class="type type-number">Number</span> | 3 | <span style="font-size:12px;white-space:nowrap;"></span> | undefined |
| <span class="prop-key" style="white-space:nowrap;">active-color</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;">defaultColor</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;">disabled-color</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;">bar-active-color</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;">animate</span> | <span class="type type-boolean">Boolean</span> | true | <span style="font-size:12px;white-space:nowrap;"></span> | undefined |


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

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

|name|type|default|version|description|
|-------|-------|-------|-------|-------|
| <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> | undefined |
| <span class="prop-key" style="white-space:nowrap;">active-class</span> | <span class="type type-string">String</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | undefined |


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





---

### Tab
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="https://gitlab.lixinio.com/frontend/cvux/tree/master/src/components/tab/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/tab" target="_blank">Demo page</a>&nbsp;&nbsp;
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="demo/#/component/tab" 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/Tab.vue" target="_blank">Demo source</a>&nbsp;&nbsp;

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

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

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

|name|type|default|version|description|
|-------|-------|-------|-------|-------|
| <span class="prop-key" style="white-space:nowrap;">line-width</span> | <span class="type type-number">Number</span> | 3 | <span style="font-size:12px;white-space:nowrap;"></span> | undefined |
| <span class="prop-key" style="white-space:nowrap;">active-color</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;">defaultColor</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;">disabled-color</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;">bar-active-color</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;">animate</span> | <span class="type type-boolean">Boolean</span> | true | <span style="font-size:12px;white-space:nowrap;"></span> | undefined |


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

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

|name|type|default|version|description|
|-------|-------|-------|-------|-------|
| <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> | undefined |
| <span class="prop-key" style="white-space:nowrap;">active-class</span> | <span class="type type-string">String</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | undefined |


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





---

### TabbarItem
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="https://gitlab.lixinio.com/frontend/cvux/tree/master/src/components/tabbar-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/tabbar" target="_blank">Demo page</a>&nbsp;&nbsp;
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="demo/#/component/tabbar-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/TabbarItem.vue" target="_blank">Demo source</a>&nbsp;&nbsp;

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

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

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

|name|type|default|version|description|
|-------|-------|-------|-------|-------|
| <span class="prop-key" style="white-space:nowrap;">icon-class</span> | <span class="type type-string">String</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | icon's classname |

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

|name|description|version|
|-------|-------|-------|
| <span class="prop-key" style="white-space:nowrap;">default</span> | slot for tabbar items | <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-index-change</span> |   &nbsp; | emits when value is changed | <span style="font-size:12px;white-space:nowrap;"></span> |


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

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

|name|type|default|version|description|
|-------|-------|-------|-------|-------|
| <span class="prop-key" style="white-space:nowrap;">selected</span> | <span class="type type-boolean">Boolean</span> | false | <span style="font-size:12px;white-space:nowrap;"></span> | if selected, you can also use `v-model="index"` on tabbar to set item selected |
| <span class="prop-key" style="white-space:nowrap;">badge</span> | <span class="type type-string">String</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | badge text, if not specified, the badge will not show |
| <span class="prop-key" style="white-space:nowrap;">show-dot</span> | <span class="type type-boolean">Boolean</span> | false | <span style="font-size:12px;white-space:nowrap;"></span> | if show the red dot |
| <span class="prop-key" style="white-space:nowrap;">link</span> | <span class="type type-string">String</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | the url for current tabbar item, can be a url or a `vue-router` link value |
| <span class="prop-key" style="white-space:nowrap;">icon-class</span> | <span class="type type-string">String</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | the classname for current icon, if tabbar and tabbar-item both specify icon-class, tabbar-item's will be usePulldown |

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

|name|description|version|
|-------|-------|-------|
| <span class="prop-key" style="white-space:nowrap;">icon</span> | icon area | <span style="font-size:12px;white-space:nowrap;"></span> |
| <span class="prop-key" style="white-space:nowrap;">label</span> | label text | <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-item-click</span> |   &nbsp; | emits when tabbar item is clicked | <span style="font-size:12px;white-space:nowrap;"></span> |


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





---

### Tabbar
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="https://gitlab.lixinio.com/frontend/cvux/tree/master/src/components/tabbar/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/tabbar" target="_blank">Demo page</a>&nbsp;&nbsp;
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="demo/#/component/tabbar" 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/Tabbar.vue" target="_blank">Demo source</a>&nbsp;&nbsp;

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

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

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

|name|type|default|version|description|
|-------|-------|-------|-------|-------|
| <span class="prop-key" style="white-space:nowrap;">icon-class</span> | <span class="type type-string">String</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | icon's classname |

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

|name|description|version|
|-------|-------|-------|
| <span class="prop-key" style="white-space:nowrap;">default</span> | slot for tabbar items | <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-index-change</span> |   &nbsp; | emits when value is changed | <span style="font-size:12px;white-space:nowrap;"></span> |


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

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

|name|type|default|version|description|
|-------|-------|-------|-------|-------|
| <span class="prop-key" style="white-space:nowrap;">selected</span> | <span class="type type-boolean">Boolean</span> | false | <span style="font-size:12px;white-space:nowrap;"></span> | if selected, you can also use `v-model="index"` on tabbar to set item selected |
| <span class="prop-key" style="white-space:nowrap;">badge</span> | <span class="type type-string">String</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | badge text, if not specified, the badge will not show |
| <span class="prop-key" style="white-space:nowrap;">show-dot</span> | <span class="type type-boolean">Boolean</span> | false | <span style="font-size:12px;white-space:nowrap;"></span> | if show the red dot |
| <span class="prop-key" style="white-space:nowrap;">link</span> | <span class="type type-string">String</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | the url for current tabbar item, can be a url or a `vue-router` link value |
| <span class="prop-key" style="white-space:nowrap;">icon-class</span> | <span class="type type-string">String</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | the classname for current icon, if tabbar and tabbar-item both specify icon-class, tabbar-item's will be usePulldown |

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

|name|description|version|
|-------|-------|-------|
| <span class="prop-key" style="white-space:nowrap;">icon</span> | icon area | <span style="font-size:12px;white-space:nowrap;"></span> |
| <span class="prop-key" style="white-space:nowrap;">label</span> | label text | <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-item-click</span> |   &nbsp; | emits when tabbar item is clicked | <span style="font-size:12px;white-space:nowrap;"></span> |


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





---

### Toast
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="https://gitlab.lixinio.com/frontend/cvux/tree/master/src/components/toast/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/toast" target="_blank">Demo page</a>&nbsp;&nbsp;
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="demo/#/component/toast" 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/Toast.vue" target="_blank">Demo source</a>&nbsp;&nbsp;

``` js
import { Toast } 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-boolean">Boolean</span> | false | <span style="font-size:12px;white-space:nowrap;"></span> | if showing toast, use v-model for binding |
| <span class="prop-key" style="white-space:nowrap;">time</span> | <span class="type type-number">Number</span> | 2000 | <span style="font-size:12px;white-space:nowrap;"></span> | show time |
| <span class="prop-key" style="white-space:nowrap;">type</span> | <span class="type type-string">String</span> | success | <span style="font-size:12px;white-space:nowrap;"></span> | toast type, success, warn, cancel, text |
| <span class="prop-key" style="white-space:nowrap;">width</span> | <span class="type type-string">String</span> | 7.6em | <span style="font-size:12px;white-space:nowrap;"></span> | toast's width |
| <span class="prop-key" style="white-space:nowrap;">is-show-mask</span> | <span class="type type-boolean">Boolean</span> | false | <span style="font-size:12px;white-space:nowrap;"></span> | if showing mask, users cannot operate other elements on the page |
| <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> | content of the toast, text or html, the same function as default slot |

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

|name|description|version|
|-------|-------|-------|
| <span class="prop-key" style="white-space:nowrap;">default</span> | default slot, the content of the toast | <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-show</span> |   &nbsp; | emits when toast shows | <span style="font-size:12px;white-space:nowrap;"></span> |
| <span class="prop-key" style="white-space:nowrap;">on-hide</span> |   &nbsp; | emits when toast hides | <span style="font-size:12px;white-space:nowrap;"></span> |


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





---

### UploadPic
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="https://gitlab.lixinio.com/frontend/cvux/tree/master/src/components/upload-pic/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/upload-pic" target="_blank">Demo page</a>&nbsp;&nbsp;
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="demo/#/component/upload-pic" 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/UploadPic.vue" target="_blank">Demo source</a>&nbsp;&nbsp;

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

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

|name|type|default|version|description|
|-------|-------|-------|-------|-------|
| <span class="prop-key" style="white-space:nowrap;">group</span> | <span class="type type-string">String</span> | upload | <span style="font-size:12px;white-space:nowrap;"></span> | undefined |
| <span class="prop-key" style="white-space:nowrap;">showName</span> | <span class="type type-boolean">Boolean</span> | true | <span style="font-size:12px;white-space:nowrap;"></span> | undefined |
| <span class="prop-key" style="white-space:nowrap;">imgKey</span> | <span class="type type-string">String</span> | src | <span style="font-size:12px;white-space:nowrap;"></span> | undefined |
| <span class="prop-key" style="white-space:nowrap;">count</span> | <span class="type type-string">String</span><br><span class="type type-number">Number</span> | 0 | <span style="font-size:12px;white-space:nowrap;"></span> | undefined |
| <span class="prop-key" style="white-space:nowrap;">optional</span> | <span class="type type-boolean">Boolean</span> | false | <span style="font-size:12px;white-space:nowrap;"></span> | undefined |
| <span class="prop-key" style="white-space:nowrap;">dragable</span> | <span class="type type-boolean">Boolean</span> | true | <span style="font-size:12px;white-space:nowrap;"></span> | undefined |
| <span class="prop-key" style="white-space:nowrap;">bgUrl</span> | <span class="type type-string">String</span> | ../../assets/uploadpic/default.png | <span style="font-size:12px;white-space:nowrap;"></span> | undefined |
| <span class="prop-key" style="white-space:nowrap;">images</span> | <span class="type type-array">Array</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | undefined |

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

|name|description|version|
|-------|-------|-------|
| <span class="prop-key" style="white-space:nowrap;">default</span> | undefined | <span style="font-size:12px;white-space:nowrap;"></span> |
| <span class="prop-key" style="white-space:nowrap;">subname</span> | undefined | <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;">upload</span> |   `(index)` | undefined |<span style="font-size:12px;white-space:nowrap;"></span> | 


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





---

### ViewBox
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="https://gitlab.lixinio.com/frontend/cvux/tree/master/src/components/view-box/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/view-box" target="_blank">Demo page</a>&nbsp;&nbsp;
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="demo/#/component/view-box" 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/ViewBox.vue" target="_blank">Demo source</a>&nbsp;&nbsp;

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

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

|name|type|default|version|description|
|-------|-------|-------|-------|-------|
| <span class="prop-key" style="white-space:nowrap;">body-padding-top</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;">body-padding-bottom</span> | <span class="type type-string">String</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | undefined |

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

|name|description|version|
|-------|-------|-------|
| <span class="prop-key" style="white-space:nowrap;">header</span> | undefined | <span style="font-size:12px;white-space:nowrap;"></span> |
| <span class="prop-key" style="white-space:nowrap;">default</span> | undefined | <span style="font-size:12px;white-space:nowrap;"></span> |
| <span class="prop-key" style="white-space:nowrap;">bottom</span> | undefined | <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;">scrollTo</span> |   `(top)` | undefined |<span style="font-size:12px;white-space:nowrap;"></span> | 
| <span class="prop-key" style="white-space:nowrap;">getScrollTop</span> |   &nbsp; | undefined |<span style="font-size:12px;white-space:nowrap;"></span> | 
| <span class="prop-key" style="white-space:nowrap;">getScrollBody</span> |   &nbsp; | undefined |<span style="font-size:12px;white-space:nowrap;"></span> | 


<a class="vux-demo-link" href="#" router-link="/zh-CN/demos/view-box">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>





---

### XAlert
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="https://gitlab.lixinio.com/frontend/cvux/tree/master/src/components/x-alert/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-alert" target="_blank">Demo page</a>&nbsp;&nbsp;
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="demo/#/component/x-alert" 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/XAlert.vue" target="_blank">Demo source</a>&nbsp;&nbsp;

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

Show some information that user should pay attention to and should be closed only after user has clicked the close button

<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;"></span> | visibility of the component, 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> | title |
| <span class="prop-key" style="white-space:nowrap;">button-text</span> | <span class="type type-string">String</span> | ok(确定) | <span style="font-size:12px;white-space:nowrap;"></span> | button text |
| <span class="prop-key" style="white-space:nowrap;">mask-transition</span> | <span class="type type-string">String</span> | vux-fade | <span style="font-size:12px;white-space:nowrap;"></span> | mask transition |
| <span class="prop-key" style="white-space:nowrap;">dialog-transition</span> | <span class="type type-string">String</span> | vux-dialog | <span style="font-size:12px;white-space:nowrap;"></span> | dialog transition |
| <span class="prop-key" style="white-space:nowrap;">content</span> | <span class="type type-string">string</span> | null | <span style="font-size:12px;white-space:nowrap;">1.3.4</span> | undefined |
| <span class="prop-key" style="white-space:nowrap;">autoCloseTime</span> | <span class="type type-number">Number</span> | 0 | <span style="font-size:12px;white-space:nowrap;">1.3.4</span> | undefined |

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

|name|description|version|
|-------|-------|-------|
| <span class="prop-key" style="white-space:nowrap;">default</span> | dialog 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-show</span> |   &nbsp; | emits when dialog shows | <span style="font-size:12px;white-space:nowrap;"></span> |
| <span class="prop-key" style="white-space:nowrap;">on-hide</span> |   &nbsp; | emits when dialog is closed | <span style="font-size:12px;white-space:nowrap;"></span> |


<a class="vux-demo-link" href="#" router-link="/zh-CN/demos/x-alert">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>





---

### XDialog
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="https://gitlab.lixinio.com/frontend/cvux/tree/master/src/components/x-dialog/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-dialog" target="_blank">Demo page</a>&nbsp;&nbsp;
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="demo/#/component/x-dialog" 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/XDialog.vue" target="_blank">Demo source</a>&nbsp;&nbsp;

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

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

|name|type|default|version|description|
|-------|-------|-------|-------|-------|
| <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> | visibility of the dialog, supports the .sync modifier |
| <span class="prop-key" style="white-space:nowrap;">mask-transition</span> | <span class="type type-string">String</span> | vux-mask | <span style="font-size:12px;white-space:nowrap;"></span> | transition of mask |
| <span class="prop-key" style="white-space:nowrap;">dialog-transition</span> | <span class="type type-string">String</span> | vux-dialog | <span style="font-size:12px;white-space:nowrap;"></span> | transition of dialog body |
| <span class="prop-key" style="white-space:nowrap;">hide-on-blur</span> | <span class="type type-boolean">Boolean</span> | false | <span style="font-size:12px;white-space:nowrap;"></span> | if closing dialog when clicking on mask |
| <span class="prop-key" style="white-space:nowrap;">scroll</span> | <span class="type type-boolean">Boolean</span> | true | <span style="font-size:12px;white-space:nowrap;"></span> | [deprecated]if body content can scroll when scrolling on dialog |

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

|name|description|version|
|-------|-------|-------|
| <span class="prop-key" style="white-space:nowrap;">default</span> | main content of the dialog | <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-show</span> |   &nbsp; | emits when opening dialog | <span style="font-size:12px;white-space:nowrap;"></span> |
| <span class="prop-key" style="white-space:nowrap;">on-hide</span> |   &nbsp; | emits when closing dialog | <span style="font-size:12px;white-space:nowrap;"></span> |


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





---

### XHeader
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="https://gitlab.lixinio.com/frontend/cvux/tree/master/src/components/x-header/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-header" target="_blank">Demo page</a>&nbsp;&nbsp;
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="demo/#/component/x-header" 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/XHeader.vue" target="_blank">Demo source</a>&nbsp;&nbsp;

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

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

|name|type|default|version|description|
|-------|-------|-------|-------|-------|
| <span class="prop-key" style="white-space:nowrap;">left-options.showBack</span> | <span class="type type-boolean">Boolean</span> | true | <span style="font-size:12px;white-space:nowrap;"></span> | if show back text |
| <span class="prop-key" style="white-space:nowrap;">left-options.backText</span> | <span class="type type-string">String</span> | Back | <span style="font-size:12px;white-space:nowrap;"></span> | the back text |
| <span class="prop-key" style="white-space:nowrap;">left-options.preventGoBack</span> | <span class="type type-boolean">Boolean</span> | false | <span style="font-size:12px;white-space:nowrap;"></span> | stop go back when clicking |
| <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;">transition</span> | <span class="type type-string">String</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | title transition |
| <span class="prop-key" style="white-space:nowrap;">right-options.showMore</span> | <span class="type type-boolean">Boolean</span> | false | <span style="font-size:12px;white-space:nowrap;"></span> | if show more icon |

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

|name|description|version|
|-------|-------|-------|
| <span class="prop-key" style="white-space:nowrap;">default</span> | title | <span style="font-size:12px;white-space:nowrap;"></span> |
| <span class="prop-key" style="white-space:nowrap;">left</span> | left slot after backText | <span style="font-size:12px;white-space:nowrap;"></span> |
| <span class="prop-key" style="white-space:nowrap;">right</span> | right slot | <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-click-more</span> |   &nbsp; | triggers when more icon is clicked | <span style="font-size:12px;white-space:nowrap;"></span> |
| <span class="prop-key" style="white-space:nowrap;">on-click-back</span> |   &nbsp; | triggers when left part is clicked and the prop 'left-options.preventGoBack' is true | <span style="font-size:12px;white-space:nowrap;"></span> |
| <span class="prop-key" style="white-space:nowrap;">on-click-title</span> |   &nbsp; | triggers when title is clicked | <span style="font-size:12px;white-space:nowrap;"></span> |


<a class="vux-demo-link" href="#" router-link="/zh-CN/demos/x-header">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>





---

### XProgress
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="https://gitlab.lixinio.com/frontend/cvux/tree/master/src/components/x-progress/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-progress" target="_blank">Demo page</a>&nbsp;&nbsp;
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="demo/#/component/x-progress" 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/XProgress.vue" target="_blank">Demo source</a>&nbsp;&nbsp;

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

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

|name|type|default|version|description|
|-------|-------|-------|-------|-------|
| <span class="prop-key" style="white-space:nowrap;">percent</span> | <span class="type type-number">Number</span> | 0 | <span style="font-size:12px;white-space:nowrap;"></span> | percent of the progress, 0-100 |
| <span class="prop-key" style="white-space:nowrap;">show-cancel</span> | <span class="type type-boolean">Boolean</span> | true | <span style="font-size:12px;white-space:nowrap;"></span> | if show the cancel button |

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

|name|params|description|version|
|-------|-------|-------|-------|
| <span class="prop-key" style="white-space:nowrap;">on-cancel</span> |   &nbsp; | triggers when the cancel button is clicked | <span style="font-size:12px;white-space:nowrap;"></span> |


<a class="vux-demo-link" href="#" router-link="/zh-CN/demos/x-progress">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>



