Fxiaoke Developer Manual
Table of Contents

Basic Components

# Basic Components

# Actionsheet

# Demo
<template>
  <div>
    <group>
      <switch title="Normal Usage" :value.sync="show1"></switch>
      <switch title="Show cancel menu" :value.sync="show2"></switch>
      <switch title="menu as tips" :value.sync="show3"></switch>
    </group>
    <actionsheet :show.sync="show1" :menus="menus1" @on-click-menu="click"></actionsheet>
    <actionsheet :show.sync="show2" :menus="menus2" @on-click-menu="click" show-cancel></actionsheet>
    <actionsheet :show.sync="show3" :menus="menus3" @on-click-menu="click" @on-click-menu-delete="onDelete" show-cancel></actionsheet>
    <toast :show.sync="showSuccess">Deleted</toast>
  </div>
</template>

<script>
import { Actionsheet, Group, Switch, Toast } from '../components';

export default {
  components: {
    Actionsheet,
    Group,
    Switch,
    Toast,
  },
  data () {
    return {
      show1: false,
      menus1: {
        menu1: 'Share to friends',
        menu2: 'Share to timeline',
      },
      show2: false,
      menus2: {
        menu1: 'Take Photo',
        menu2: 'Choose from photos',
      },
      show3: false,
      showSuccess: false,
      menus3: {
        'title.noop': `Are you sure?
                       <br/>
                       <span style="color:#666;font-size:12px;">
                          Once deleted, you will never find it.
                       </span>`,
        delete: '<span style="color:red">Delete</span>',
      },
    };
  },
  methods: {
    click(key) {
      console.log(key);
    },
    onDelete() {
      this.showSuccess = true;
    },
  },
};
</script>
# Props
Parameter Description Type Default
cancel-text Cancel button text String cancel
menus Menu list, hash map, format see below Object { }
show Show binding value, two-way binding Boolean false
show-cancel Whether to show cancel button Boolean false

menus Format:

{
  menu1: 'Take Photo',
  menu2: 'Choose from photos'
}
# Events
Event Name Parameter Description
on-menu-click (menuKey, menuValue) Triggered when menu is clicked
on-cancel - - Triggered when cancel is clicked

# Badge

# Demo
<template>
  <div>
    <badge text="Hi"></badge>
    <br/>
    <group>
      <cell title="Used in a Cell" is-link>
        <div class="badge-value" slot="value" class="uik-center-v">
          New Message &nbsp;
          <badge text="8"></badge>
        </div>
      </cell>
      <cell title="Used in a Cell" is-link>
        <div class="badge-value" slot="value" class="uik-center-v">
          New Message &nbsp;
          <badge text="888"></badge>
        </div>
      </cell>
    </group>
  </div>
</template>

<script>
import { Badge, Group, Cell } from '../components';

export default {
  components: {
    Badge,
    Group,
    Cell,
  },
};
</script>

<style lang="less">
.badge-value {
  display: inline-block;
}
</style>
# Props
Parameter Description Type Default
text Description text String none

# Button-Tab

ButtonTab works together with ButtonTabItem component

# Demo
<template>
  <div class="button-tab-container">
    <button-tab>
      <button-tab-item>Today</button-tab-item>
      <button-tab-item selected>This Week</button-tab-item>
      <button-tab-item>This Month</button-tab-item>
    </button-tab>
    <br>
    <button-tab>
      <button-tab-item selected>Article Subscription</button-tab-item>
      <button-tab-item>Product Subscription</button-tab-item>
    </button-tab>
    <br>
    <divider>Red Dot</divider>
    <button-tab>
      <button-tab-item selected>All Message</button-tab-item>
      <button-tab-item><span class="uik-reddot-s">New Message</span></button-tab-item>
    </button-tab>
  </div>
</template>

<script>
import { ButtonTab, ButtonTabItem, Divider } from '../components';

export default {
  components: {
    ButtonTab,
    ButtonTabItem,
    Divider,
  },
};
</script>

<style lang="less" scoped>
  .button-tab-container {
    margin-top: 30px;
  }
</style>
# Props

button-tab

Parameter Description Type Default
height tabHeight Number none

button-tab-item

Parameter Description Type Default
selected Whether checked Boolean false
# Slots
Name Description
defaultslot Tab area
# Events
Event Name Parameter Description
on-item-click - - Triggered when button-tab-item is clicked

# Card

# Demo
<template>
  <div>
    <divider>simple card with header and content</divider>
    <card :header="{title:'My Wallet'}">
      <div slot="content" class="card-demo-flex card-demo-content01">
        <div class="uik-1px-l uik-1px-r">
          <span>1130</span>
          <br/>
          JD Beans
        </div>
        <div class="uik-1px-r">
          <span>15</span>
          <br/>
          JD Coupons
        </div>
        <div class="uik-1px-r">
          <span>0</span>
          <br/>
          JD Card/E-Card
        </div>
        <div>
          <span>88</span>
          <br/>
          Due in 7 Days
        </div>
      </div>
    </card>

    <br>
    <divider>with footer</divider>
    <card :header="{title:'Product Details'}" :footer="{title:'View More',link:'/component/panel'}">
      <p slot="content" class="card-padding">custom content</p>
    </card>

    <br>
    <divider>use header slot and content slot</divider>
    <card>
      <img slot="header" src="http://placeholder.qiniudn.com/640x300" style="width:100%;display:block;">
      <div slot="content" class="card-padding">
        <p style="color:#999;font-size:12px;">Posted on January 21, 2015</p>
        <p style="font-size:14px;line-height:1.2;">
          Quisque eget vestibulum nulla. Quisque quis dui quis ex ultricies efficitur vitae non felis. Phasellus quis nibh hendrerit..
        </p>
      </div>
    </card>
  </div>
</template>

<script>
import { Card, Divider } from '../components';

export default {
  components: {
    Card,
    Divider,
  },
};
</script>

<style lang="less" scoped>
.card-demo-flex {
  display: flex;
}
.card-demo-content01 {
  padding: 10px 0;
}
.card-padding {
  padding: 15px;
}
.card-demo-flex > div {
  flex: 1;
  text-align: center;
  font-size: 12px;
}
.card-demo-flex span {
  color: #f74c31;
}
</style>
# Props
Parameter Description Type Default
header hash map, format see below Object none
footer hash map, format see below Object none

header Format:

{
  title: 'Naruto',
}

footer Format:

{
  title: 'Boruto',
  link: 'some/path',
}
# Slots
Name Description
header Card header area
content Card content area
footer Card footer area

# Flexbox

Flexbox Function consists of Flexbox and FlexboxItem Child componentcomponents, must be used together

# Demo
<template>
  <div>
    <divider>Horizontal</divider>
    <flexbox>
      <flexbox-item><div class="flex-demo">1</div></flexbox-item>
      <flexbox-item><div class="flex-demo">2</div></flexbox-item>
    </flexbox>
    <br/>
    <flexbox>
      <flexbox-item><div class="flex-demo">1</div></flexbox-item>
      <flexbox-item><div class="flex-demo">2</div></flexbox-item>
      <flexbox-item><div class="flex-demo">3</div></flexbox-item>
    </flexbox>
    <br/>
    <divider>Honrizontal with no gutter</divider>
    <flexbox :gutter="0">
      <flexbox-item><div class="flex-demo">1</div></flexbox-item>
      <flexbox-item><div class="flex-demo">2</div></flexbox-item>
      <flexbox-item><div class="flex-demo">3</div></flexbox-item>
      <flexbox-item><div class="flex-demo">4</div></flexbox-item>
    </flexbox>
    <br>
    <divider>Vertical</divider>
    <flexbox orient="vertical">
      <flexbox-item><div class="flex-demo">1</div></flexbox-item>
      <flexbox-item><div class="flex-demo">2</div></flexbox-item>
    </flexbox>
    <br>
    <divider>Vertical with no gutter</divider>
    <flexbox orient="vertical" :gutter="0">
      <flexbox-item><div class="flex-demo">1</div></flexbox-item>
      <flexbox-item><div class="flex-demo">2</div></flexbox-item>
    </flexbox>
    <br>
    <divider>Grid support(12 columns)</divider>
    <flexbox>
      <flexbox-item :span="4"><div class="flex-demo">1/3</div></flexbox-item>
      <flexbox-item><div class="flex-demo">2/3</div></flexbox-item>
    </flexbox>
    <br>
    <divider>flexiable grid</divider>
    <flexbox>
      <flexbox-item :span="1/3"><div class="flex-demo">1/3</div></flexbox-item>
      <flexbox-item :span="1/6"><div class="flex-demo">1/6</div></flexbox-item>
      <flexbox-item :span="1/8"><div class="flex-demo">1/8</div></flexbox-item>
      <flexbox-item :span="1/8"><div class="flex-demo">1/8</div></flexbox-item>
      <flexbox-item><div class="flex-demo">rest</div></flexbox-item>
    </flexbox>
    <br>
    <divider>flex-wrap</divider>
    <flexbox :gutter="0" class="flexbox-demo-wrap">
      <flexbox-item :span="1/3"><div class="flex-demo">1/3</div></flexbox-item>
      <flexbox-item :span="1/3"><div class="flex-demo">1/3</div></flexbox-item>
      <flexbox-item :span="1/3"><div class="flex-demo">1/3</div></flexbox-item>
      <flexbox-item :span="1/3"><div class="flex-demo">1/3</div></flexbox-item>
      <flexbox-item :span="1/3"><div class="flex-demo">1/3</div></flexbox-item>
      <flexbox-item :span="1/3"><div class="flex-demo">1/3</div></flexbox-item>
      <flexbox-item :span="1/3"><div class="flex-demo">1/3</div></flexbox-item>
      <flexbox-item :span="1/3"><div class="flex-demo">1/3</div></flexbox-item>
    </flexbox>
  </div>
</template>

<script>
import { Flexbox, FlexboxItem, Divider } from '../components';

export default {
  components: {
    Flexbox,
    FlexboxItem,
    Divider,
  },
};
</script>

<style lang="less">
.flex-demo {
  text-align: center;
  color: #fff;
  background-color: #ffac38;
  border-radius: 4px;
  background-clip: padding-box;
}
.flexbox-demo-wrap {
  flex-wrap: wrap;
}
</style>
# Props

flexbox

Parameter Description Type Default
gutter FlexboxItem spacing between items, unit: px Number 8
orient Flexbox container layout direction(vertical or horizontal) String horizontal

flexbox-item

Parameter Description Type Default
span flexbox grid, grid layout column ratio Number or String none
# Slots
Name Description
defaultslot HTML content area

# Panel

# Demo
<template>
  <div>
    <group title="switch the type">
      <radio title="type" :value.sync="type" :options="['withIcon', 'rawText', 'cellList']"></radio>
    </group>
    <panel header="Image-Text List" :footer="footer" :list="list" :type="type"></panel>
  </div>
</template>

<script>
import { Panel, Group, Radio } from '../components';

export default {
  components: {
    Panel,
    Group,
    Radio,
  },
  data () {
    return {
      type: 'withIcon',
      list: [{
        src: 'http://placeholder.qiniudn.com/60x60/3cc51f/ffffff',
        title: 'Title一',
        desc: 'Huge spherical celestial body composed of various materials, called planets. Planets have certain shapes and their own orbits.',
        url: '/component/cell',
      }, {
        src: 'http://placeholder.qiniudn.com/60x60/3cc51f/ffffff',
        title: 'Title二',
        desc: 'Huge spherical celestial body composed of various materials, called planets. Planets have certain shapes and their own orbits.',
        url: {
          path: '/component/radio',
          replace: false,
        },
      }],
      footer: {
        title: 'View More',
        url: '/',
      },
    };
  },
};
</script>
# Props
Parameter Description Type Default
footer panel footer structure, hash map, format see below Object none
header Title description text, Array, format see below String none
list panel Content list Array none
type panel type, three options withIcon, rawText, cellList String withIcon

footer Format:

{
    title: 'View More',
    url: 'path/to/some/where',
}

header Format:

[{
    src: 'path/to/some/image',
    title: 'Title一',
    desc: 'Huge spherical celestial body composed of various materials, called planets. Planets have certain shapes and their own orbits.',
    url: '/component/cell',
}, {
    src: 'path/to/some/image',
    title: 'Title二',
    desc: 'Huge spherical celestial body composed of various materials, called planets. Planets have certain shapes and their own orbits.',
    url: {
        path: '/component/radio',
        replace: false,
    },
}]
# Events
Event Name Parameter Description
on-click-header - - Triggered when Title is clicked
on-click-footer - - Triggered when footer is clicked
on-click-item (item) Triggered when each item content area in panel is clicked

# Picker

# Demo
<template>
  <div>
    <group-title>default, select first when defaultValue is not set</group-title>
    <picker :data='years' :value.sync='currentValue' @on-change='change'></picker>
    <br>
    <group-title>Async load and dynamically change data</group-title>
    <picker :data='yearsAsync' :value.sync='yearAsyncCurrentValue' @on-change='change'></picker>
    <br>
    <x-button type="primary" @click="changeValue([[1,3,5,7,9,11],[2,3,4,5],['a','b','c']])">Set Data1</x-button>
    <x-button type="primary" @click="changeValue([[1,3,5,7,9,11],[2,3,4,5]])">Set Data1</x-button>
    <x-button type="primary" @click="changeValue([[2,4,6,8,10,11]])">Set Data2</x-button>
    <br>
    <group-title>When defaultValue is set</group-title>
    <picker :data='years' :value.sync='setDefaultYear' @on-change='change'></picker>
    <br>
    <group-title>Five columns</group-title>
    <picker :data='fiveColumn' :value.sync='fiveColumnCurrentValue' @on-change='change'></picker>
    <br>
    <group-title>Region linkage: Current Value{{correlationCurrentValue}}</group-title>
    <picker :data='correlation' :columns=3 :value.sync='correlationCurrentValue' @on-change='change'></picker>
    <x-button @click="setData1" type="primary">set Value to ["USA", "usa002", "0005"]</x-button>
    <x-button @click="setData2" type="primary">set Value to ["china", "china002", "gz"]</x-button>
    <x-button @click="setList" type="primary">set List</x-button>
  </div>
</template>

<script>
import { Picker, GroupTitle, XButton } from '../components';

const yearsMockData = [];
for (let i = 2000; i <= 2030; i++) {
  yearsMockData.push({
    name: `${i}years`,
    value: `${i}`,
  });
}

export default {
  components: {
    Picker,
    GroupTitle,
    XButton,
  },
  data () {
    return {
      years: [yearsMockData],
      yearsAsync: [],
      yearAsyncCurrentValue: [''],
      currentValue: [''],
      setDefaultYear: ['2002'],
      fiveColumn: [
        ['你', '我', '他'],
        ['you', 'I', 'him'],
        ['ni', 'wo', 'ta'],
        [1, 2, 3, 4, 5],
        [5, 4, 3, 2, 1],
      ],
      fiveColumnCurrentValue: ['我', 'him', 'ni', '1', '2'],
      correlation: [{
        name: '中国',
        value: 'china',
        parent: 0,
      }, {
        name: '美国',
        value: 'USA',
        parent: 0,
      }, {
        name: '广东',
        value: 'china001',
        parent: 'china',
      }, {
        name: '广西',
        value: 'china002',
        parent: 'china',
      }, {
        name: '美国001',
        value: 'usa001',
        parent: 'USA',
      }, {
        name: '美国002',
        value: 'usa002',
        parent: 'USA',
      }, {
        name: '广州',
        value: 'gz',
        parent: 'china001',
      }, {
        name: '深圳',
        value: 'sz',
        parent: 'china001',
      }, {
        name: '广西001',
        value: 'gz',
        parent: 'china002',
      }, {
        name: '广西002',
        value: 'sz',
        parent: 'china002',
      }, {
        name: '美国001_001',
        value: '0003',
        parent: 'usa001',
      }, {
        name: '美国001_002',
        value: '0004',
        parent: 'usa001',
      }, {
        name: '美国002_001',
        value: '0005',
        parent: 'usa002',
      }, {
        name: '美国002_002',
        value: '0006',
        parent: 'usa002',
      }],
      correlationCurrentValue: [],
    };
  },
  methods: {
    change(value) {
      console.log('new Value', value);
    },
    changeValue (value) {
      this.yearsAsync = value;
    },
    setData1() {
      this.correlationCurrentValue = ['USA', 'usa002', '0005'];
    },
    setData2() {
      this.correlationCurrentValue = ['china', 'china002', 'gz'];
    },
    setList() {
      this.correlation.push({
        name: '美国002_003',
        value: '0007',
        parent: 'usa002',
      });
    },
  },
};
</script>
# Props
Parameter Description Type Default
columns Set scroll columns, Note: only set when multi-level linkage is needed, default no linkage Number 0
data Data source, can be multi-dimensional array or object array, format: Array none
item-class CSS class selector name for each option contained in each column of Picker String scroller-item
value Picker current value, two-way binding Array none

data Format:

Multi-dimensional array case, each array member represents a column of data


[   ['你', '我', '他'],   ['you', 'I', 'him'],   ['ni', 'wo', 'ta'],   [1, 2, 3, 4, 5],   [5, 4, 3, 2, 1], ]

Object array case, used for multi-level linkage, the number of columns in Picker is determined by the dependency relationship at each level contained in the data source, Note: This component uses a flattened data structure. When using, please convert the original data source (such as tree structure) to a flattened structure, as follows


[{
    name: '中国',
    value: 'china',
    parent: 0,
},{
    name: '云南',
    value: 'china001',
    parent: 'china',
},  {
    name: '昆明',
    value: 'kunming',
    parent: 'china001',
}, {
    name: '大理',
    value: 'dali',
    parent: 'china001',
}, {
    name: '广东',
    value: 'china002',
    parent: 'china',
}, {
    name: '广州',
    value: 'gz',
    parent: 'china002',
}, {
    name: '深圳',
    value: 'sz',
    parent: 'china002',
}]
# Events
Event Name Parameter Description
on-change value ValueTriggered on change
# Demo
<template>
  <div>
    <group>
      <switch title="Default popup" :value.sync="show"></switch>
      <switch title="Full popup" :value.sync="showFull"></switch>
      <switch title="Multi popup (first)" :value.sync="showMulti"></switch>
    </group>
    <popup :show.sync="show">
      <div class="popup0">
        <group>
          <switch title="Another Switcher" :value.sync="show"></switch>
          <switch title="Show Toast" :value.sync="showToast"></switch>
        </group>
      </div>
    </popup>

    <toast :show.sync="showToast">You did it!</toast>

    <popup :show.sync="showFull" height="100%">
      <div class="popup1">
        <group>
          <switch title="Another Switcher" :value.sync="showFull"></switch>
        </group>
      </div>
    </popup>

    <popup :show.sync="showMulti">
      <div class="popup2">
        <group>
          <switch title="Multi Popup (first)" :value.sync="showMulti"></switch>
          <switch title="Multi Popup (second)" :value.sync="showSecond"></switch>
        </group>
        this is the first popup
      </div>
    </popup>

    <popup :show.sync="showSecond">
      <div class="popup2">
        <group>
          <switch title="Multi Popup (second)" :value.sync="showSecond"></switch>
        </group>
        this is the second popup
      </div>
    </popup>
  </div>
</template>

<script>
import { Popup, Group, Switch, Toast } from '../components';

export default {
  components: {
    Popup,
    Group,
    Scroller,
    Toast,
  },
  data () {
     return {
      show: false,
      showFull: false,
      showMulti: false,
      showSecond: false,
      showToast: false,
    };
  },
};
</script>

<style>
.popup0 {
  padding-bottom:15px;
  height:200px;
}
.popup1 {
  width:100%;
  height:100%;
}
.popup2 {
  padding-bottom:15px;
  height:400px;
}
</style>
# Props
Parameter Description Type Default
height Popup height String auto
show Whether to show popup, two-way binding Boolean false

If you want the popup to fill the entire screen, you can set height=100%

# Slots
Name Description
defaultslot Popup content area, can embed any DOM element or component
# Events
Event Name Parameter Description
on-first-show - - Triggered on first appearance, used when async data fetch or necessary UI rendering is needed on first load (e.g., when Popup contains Scroller)
on-hide - - Triggered on hide

PopupPicker depends on the Picker component

# Demo
<template>
  <div>
    <group title="single column">
      <popup-picker :title="title1" :data="list1" :value.sync="value1"></popup-picker>
    </group>
    <br>
    <div class="picker-buttons">
      <x-button type="primary" @click="changeList10">Reassign value list</x-button>
      <x-button type="primary" @click="changeList11">Update list via push</x-button>
    </div>
    <group title="double columns">
      <popup-picker :title="title2" :data="list2" :value.sync="value2"></popup-picker>
    </group>
    <br>

    <group title="chained columns">
      <popup-picker :title="title3" :data="list3" :columns="3" :value.sync="value3"></popup-picker>
      <popup-picker :title="title4" :data="list3" :columns="3" :value.sync="value4" show-name></popup-picker>
    </group>

    <br>
    <div class="picker-buttons">
      <x-button type="primary" @click="changeList21">Update list via push</x-button>
    </div>

  </div>
</template>

<script>
import { PopupPicker, Group, Picker, XButton } from '../components';

export default {
  components: {
    PopupPicker,
    Group,
    Picker,
    XButton,
  },
  methods: {
    changeList10 () {
      this.list1 = [['小米1', 'iPhone1', '华为1', '情怀1', '三星1', '其他1', '不告诉你1']];
    },
    changeList11 () {
      this.list1[0].push('我是push条目');
    },
    changeList20 () {},
    changeList21 () {
      this.list3.push({
        name: '美国002_007',
        value: '0007',
        parent: 'usa002',
      });
    },
  },
  data () {
    return {
      title1: '手机机型',
      title2: '详细机型',
      title3: '联动显示值',
      title4: '联动显示文字',
      list1: [['小米', 'iPhone', '华为', '情怀', '三星', '其他', '不告诉你']],
      list2: [['小米', 'iPhone', '华为', '情怀', '三星', '其他', '不告诉你'],
        ['小米1', 'iPhone2', '华为3', '情怀4', '三星5', '其他6', '不告诉你7']],
      list3: [{
        name: '中国',
        value: 'china',
        parent: 0,
      }, {
        name: '美国',
        value: 'USA',
        parent: 0,
      }, {
        name: '广东',
        value: 'china001',
        parent: 'china',
      }, {
        name: '广西',
        value: 'china002',
        parent: 'china',
      }, {
        name: '美国001',
        value: 'usa001',
        parent: 'USA',
      }, {
        name: '美国002',
        value: 'usa002',
        parent: 'USA',
      }, {
        name: '广州',
        value: 'gz',
        parent: 'china001',
      }, {
        name: '深圳',
        value: 'sz',
        parent: 'china001',
      }, {
        name: '广西001',
        value: 'gx001',
        parent: 'china002',
      }, {
        name: '广西002',
        value: 'gx002',
        parent: 'china002',
      }, {
        name: '美国001_001',
        value: '0003',
        parent: 'usa001',
      }, {
        name: '美国001_002',
        value: '0004',
        parent: 'usa001',
      }, {
        name: '美国002_001',
        value: '0005',
        parent: 'usa002',
      }, {
        name: '美国002_002',
        value: '0006',
        parent: 'usa002',
      }],
      value1: ['iPhone'],
      value2: ['iPhone', '华为3'],
      value3: [],
      value4: [],
    };
  },
};
</script>

<style scoped>
.picker-buttons {
  margin: 0 15px;
}
</style>
# Props
Parameter Description Type Default
columns Set scroll columns, Note: only set when multi-level linkage is needed, default no linkage Number 0
data Data source, can be multi-dimensional array or object array, format: Array [ ]
inline-desc optional, cell subtitle String none
placeholder optional, custom display content, supports HTML String none
show-name optional, whether to show corresponding text for value Boolean false
title cell main title String none
value Picker current value, two-way binding Array [ ]

data Format:

Multi-dimensional array case, each array member represents a column of data


[   ['你', '我', '他'],   ['you', 'I', 'him'],   ['ni', 'wo', 'ta'],   [1, 2, 3, 4, 5],   [5, 4, 3, 2, 1], ]

Object array case, used for multi-level linkage, the number of columns in Picker is determined by the dependency relationship at each level contained in the data source, Note: This component uses a flattened data structure. When using, please convert the original data source (such as tree structure) to a flattened structure, as follows


[{
    name: '中国',
    value: 'china',
    parent: 0,
},{
    name: '云南',
    value: 'china001',
    parent: 'china',
},  {
    name: '昆明',
    value: 'kunming',
    parent: 'china001',
}, {
    name: '大理',
    value: 'dali',
    parent: 'china001',
}, {
    name: '广东',
    value: 'china002',
    parent: 'china',
}, {
    name: '广州',
    value: 'gz',
    parent: 'china002',
}, {
    name: '深圳',
    value: 'sz',
    parent: 'china002',
}]

# Progress

Progress component uses MProgress (opens new window) to control progress by default. For detailed API, refer to MProgress documentation. Note: If you want to call MProgress API in parent component to control the lifecycle of Progress, it is recommended to use parent.$refs.progressInstance.progress for reference

# Demo
<template>
  <div>
    <progress></progress>
    <br/>
    <progress :percent.sync="percent1"></progress>
    <br/>
    <progress :template="2"></progress>
    <br/>
    <progress :template="3"></progress>
    <br/>
    <progress :template="4"></progress>
  </div>
</template>

<script>
import { Progress } from '../components';

export default {
  components: {
    Progress,
  },
  data () {
    return {
      percent1: 50,
    };
  },
};
</script>
# Props
Parameter Description Type Default
percent Progress indicator, two-way binding, uses percentage, Note: this property is for custom progress controller scenarios, default uses MProgress Number 0
template Progress type, total 5 types, including 4 default types and 1 custom type, see below Number 0

The template type is as follows

Type Corresponding Value (template) Description
custom 0 Auto embedded in Progress component
Determinate 1 Auto append to body, positioned at page top
Buffer 2 Auto embedded in Progress component
Indeterminate 3 Auto embedded in Progress component
Query Indeterminate and Determinate 4 Auto embedded in Progress component
# Demo
<template>
  <div>
    <search @result-click="resultClick" @on-change="getResult" :results="results" :value.sync="value" :cancel-text="cancelText"></search>
  </div>
</template>

<script>
import { Search } from '../components';

function getResult (val) {
  let rs = [];
  for (let i = 0; i < 40; i++) {
    rs.push({
      title: `${val} result: ${i + 1} `,
      other: i,
    });
  }
  return rs;
}

export default {
  components: {
    Search,
  },
  methods: {
    resultClick (item) {
      alert('you click the result item: ' + JSON.stringify(item));
    },
    getResult (val) {
      this.results = getResult(this.value);
    },
  },
  data () {
    return {
      results: [],
      value: '',
      cancelText: '取消',
    };
  },
};
</script>
# Props
Parameter Description Type Default
auto-fixed Whether to auto-fix search input box Boolean true
cancel-text cancelButtontext String cancel
placeholder Toast text String Search
results Search result list, object array Array [ ]
value Real-time input search keyword, two-way binding String ''
# Events
Event Name Parameter Description
on-change value Triggered when search keyword changes
on-submit value Triggered when calling backend async API for submission
result-click (item) Triggered when clicking a specific search result item

# Spinner

# Demo
<template>
  <div>
    <group>
      <cell v-for="type in types" :title="type">
        <spinner :type="type" slot="value"></spinner>
      </cell>
    </group>
  </div>
</template>

<script>
import { Spinner, Group, Cell } from '../components';

export default {
  components: {
    Spinner,
    Cell,
    Group,
  },
  data () {
    return {
      types: ['android', 'ios', 'ios-small', 'bubbles', 'circles', 'crescent', 'dots', 'lines', 'ripple', 'spiral'],
    };
  },
};
</script>
# Props
Parameter Description Type Default
type Type, optional values: 'android', 'ios', 'ios-small', 'bubbles', 'circles', 'crescent', 'dots', 'lines', 'ripple', 'spiral' String ios

# Swiper

Swiper provides quick list setup and SwiperItem child component for convenient definition. Uses wechatui (opens new window)

# Demo
<template>
  <div>
    <group-title>In list mode, default height is 180px. If aspect-ratio is set, height will be calculated automatically based on width</group-title>
    <swiper :list="demo01_list" :index="demo01_index" @on-index-change="demo01_onIndexChange"></swiper>
    <p>current index: {{demo01_index}}</p>
    <x-button @click="demo01_index = 0">go to 0</x-button>
    <x-button @click="demo01_index = 1">go to 1</x-button>
    <x-button @click="demo01_index = 2">go to 2</x-button>

    <br/>
    <br/>
    <divider>Gorgeous dividing line</divider>


    <group-title>Set the aspect-ratio, and the Height will be automatically calculated based on the Width.</group-title>
    <swiper :list="demo02_list" style="width:85%;margin:0 auto;" :aspect-ratio="300/800" dots-position="center"></swiper>

    <br/>
    <br/>
    <divider>Gorgeous dividing line</divider>

    <group-title>Automatic rotation</group-title>
    <swiper :list="demo03_list" auto style="width:80%;margin:0 auto;" height="180px" dots-class="custom-bottom" dots-position="center"></swiper>
    <br/>
    <br/>
    <divider>Gorgeous dividing line</divider>

    <group-title>use swiper-item for image list</group-title>
    <swiper :aspect-ratio="300/800">
      <swiper-item class="swiper-demo-img" v-for="item in demo04_list"><img :src="item"></swiper-item>
    </swiper>

    <br/>
    <br/>
    <divider>Gorgeous dividing line</divider>

    <group-title>Async setting list data</group-title>
    <swiper :list="demo05_list" auto height="180px" @on-index-change="demo05_onIndexChange"></swiper>
    <p> current index: {{demo05_index}}</p>
    <x-button @click="demo05_onLoad(1)" type="primary" style="margin: 10px 0;">Load list1</x-button>
    <x-button @click="demo05_onLoad(2)" type="primary" style="margin: 10px 0;">Load list2</x-button>

    <br/>
    <br/>
    <divider>Gorgeous dividing line</divider>

    <group-title>Introduce swiper-itemcustomitemContent, and use height to define Height</group-title>
    <swiper auto height="100px">
      <swiper-item class="black"><h2 class="title fadeInUp animated">它none孔不入</h2></swiper-item>
      <swiper-item class="black"><h2 class="title fadeInUp animated">你none处可藏</h2></swiper-item>
      <swiper-item class="black"><h2 class="title fadeInUp animated">不是它可恶</h2></swiper-item>
      <swiper-item class="black"><h2 class="title fadeInUp animated">而是它不懂你</h2></swiper-item>
      <swiper-item class="black"><h2 class="title fadeInUp animated">我们试图</h2></swiper-item>
      <swiper-item class="black"><h2 class="title fadeInUp animated">做些改变</h2></swiper-item>
    </swiper>

    <br/>
    <br/>
    <divider>Gorgeous dividing line</divider>

    <group-title>Vertical text scrolling</group-title>
    <swiper auto height="30px" direction="vertical" :interval="2000" class="text-scroll" :show-dots="false">
      <swiper-item><p>义务爱了 完成传奇世界H5-王者归来任务 获得20金币</p></swiper-item>
      <swiper-item><p>基本世神 兑换《传奇世界H5》畅玩级礼包 消耗30金币</p></swiper-item>
      <swiper-item><p>零哥章魚 完成传奇世界H5-王者归来任务 获得30金币</p></swiper-item>
      <swiper-item><p>做迎而為 兑换【饿了么】畅享美食红包 消耗20金币</p></swiper-item>
      <swiper-item><p>只知道不知道 兑换【饿了么】畅享美食红包 消耗20金币</p></swiper-item>
      <swiper-item><p>基本世神 兑换《传奇世界H5》畅玩级礼包 消耗30金币</p></swiper-item>
    </swiper>

    <br/>
    <br/>
    <divider>Gorgeous dividing line</divider>

    <group-title>Loop mode</group-title>
    <swiper loop auto :list="demo06_list" :index="demo06_index" @on-index-change="demo06_onIndexChange"></swiper>
    <p>current index: {{demo06_index}}</p>
  </div>
</template>

<script>
import { Swiper, GroupTitle, SwiperItem, XButton, Divider } from '../components';

const baseList = [{
    url: '',
    img: 'http://7xqzw4.com2.z0.glb.qiniucdn.com/1.jpg',
    title: '如何手制一份秋意的茶？',
}, {
    url: '',
    img: 'http://7xqzw4.com2.z0.glb.qiniucdn.com/2.jpg',
    title: '茶包VS原叶茶',
}, {
    url: '',
    img: 'http://7xqzw4.com2.z0.glb.qiniucdn.com/3.jpg',
    title: '播下茶籽，明春可发芽？',
}];
const imgList = [
  'http://placeholder.qiniudn.com/800x300/FF3B3B/ffffff',
  'http://placeholder.qiniudn.com/800x300/FFEF7D/ffffff',
  'http://placeholder.qiniudn.com/800x300/8AEEB1/ffffff',
];
const demoList = imgList.map((one) => ({
  url: '',
  img: one,
}));
export default {
  components: {
    Swiper,
    SwiperItem,
    GroupTitle,
    XButton,
    Divider,
  },
  ready () {
  },
  methods: {
    demo01_onIndexChange (index) {
      this.demo01_index = index;
    },
    demo05_onIndexChange (index) {
      this.demo05_index = index;
    },
    demo05_onLoad (id) {
      this.demo05_list = id === 1 ? baseList : demoList;
    },
    demo06_onIndexChange (index) {
      this.demo06_index = index;
    },
  },
  data () {
    return {
      demo01_list: baseList,
      demo02_list: demoList,
      demo03_list: demoList,
      demo04_list: imgList,
      demo05_list: [],
      demo06_list: baseList,
      demo01_index: 0,
      demo05_index: 0,
      demo06_index: 0,
    };
  },
};
</script>

<style scoped>
.text-scroll {
  border: 1px solid #ddd;
  border-left: none;
  border-right: none;
}
.text-scroll p{
  font-size: 12px;
  text-align: center;
  line-height: 30px;
}
.black {
  background-color: #000;
}
.title{
  line-height: 100px;
  text-align: center;
  color: #fff;
}
.animated {
  animation-duration: 1s;
  animation-fill-mode: both;
}
.uik-indicator.custom-bottom {
  bottom: 30px;
}
@-webkit-keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 100%, 0);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 100%, 0);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
.fadeInUp {
  animation-name: fadeInUp;
}
.swiper-demo-img img {
  width: 100%;
}
</style>
# Props
Parameter Description Type Default
threshold Sliding distance threshold: when you press and hold the screen and slide beyond this distance, it will slide automatically when you release your hand; otherwise, it will not slide. Number 50
duration Swipe animation time, in milliseconds. The smaller the value, the faster the sliding. Number 300
list List data Array null
dots-position indicator position String right
dots-class Additional style classes for indicator String 无
auto Whether to play automatically Boolean false
interval Carousel interval, in milliseconds Number 3000
direction Playback direction String horizontal
height Container height String auto
aspect-ratio Aspect ratio: if set, the height will be automatically calculated based on the width. Number null
index Specify the display of items Number 0
loop Whether to play in a loop Boolean null
min-moving-distance Minimum sliding distance Number 0
show-desc-mask Whether to display the description mask Boolean true
show-dots Whether to display the indicator Boolean true
# Slots
Name Description
defaultslot Carousel area

# Tab

Tab component is used together with TabItem component

# Demo
<template>
  <div>
    <div>
    <tab>
      <tab-item :selected="demo1 === '已发货'" @click="demo1 = '已发货'">已发货</tab-item>
      <tab-item :selected="demo1 === '未发货'" @click="demo1 = '未发货'">未发货</tab-item>
      <tab-item :selected="demo1 === '全部订单'" @click="demo1 = '全部订单'">全部订单</tab-item>
    </tab>
    <br/>
    <br/>
    <br/>
    <divider>different active class</divider>
    <tab :animate="false">
      <tab-item active-class="active-6-1" :selected="demo6 === '已发货'" @click="demo6 = '已发货'">已发货</tab-item>
      <tab-item active-class="active-6-2" :selected="demo6 === '未发货'" @click="demo6 = '未发货'">未发货</tab-item>
      <tab-item active-class="active-6-3" :selected="demo6 === '全部订单'" @click="demo6 = '全部订单'">全部订单</tab-item>
    </tab>
    <br/>
    <br/>
    <br/>
    <divider>no animation</divider>
    <tab :animate="false">
      <tab-item :selected="demo5 === '已发货'" @click="demo5 = '已发货'">已发货</tab-item>
      <tab-item :selected="demo5 === '未发货'" @click="demo5 = '未发货'">未发货</tab-item>
      <tab-item :selected="demo5 === '全部订单'" @click="demo5 = '全部订单'">全部订单</tab-item>
    </tab>
    <br/>
    <br/>
    <br/>
    <tab :line-width="2" active-color='#fc378c'>
      <tab-item :selected="demo2 === item" v-for="item in list2" @click="demo2 = item">{{item}}</tab-item>
    </tab>
    <br/>
    <x-button @click="addTab" :disabled="list2.length === 5" type="primary">Add tab item</x-button>
    <x-button @click="removeTab" :disabled="list2.length <= 2" type="primary">Remove tab item</x-button>
    <br/>
    <br/>
    <tab :line-width="2">
      <tab-item :selected="demo3 === item" v-for="(index, item) in list3" :class="{'uik-1px-r': index===0}" @click="demo3 = item">{{item}}</tab-item>
    </tab>
    <br/>
    <br/>
    <br/>
    <sticky>
      <tab :line-width="1">
        <tab-item :selected="demo4 === item" v-for="item in list4" @click="demo4 = item">{{item}}</tab-item>
      </tab>
    </sticky>
</template>

<script>
import { Tab, TabItem, Sticky, Divider, XButton } from '../components';

const list = () => ['精选', '美食', '电影', '酒店', '外卖'];

export default {
  components: {
    Tab,
    TabItem,
    Sticky,
    Divider,
    XButton,
  },
  data () {
    return {
      demo1: '未发货',
      list2: list(),
      demo5: '未发货',
      demo2: '美食',
      list3: ['收到的消息', '发出的消息'],
      demo3: '收到的消息',
      list4: ['正在正映', '即将上映'],
      demo4: '即将上映',
      demo6: '未发货',
    };
  },
  methods: {
    addTab () {
      if (this.list2.length < 5) {
        this.list2 = list().slice(0, this.list2.length + 1);
      }
    },
    removeTab () {
      if (this.list2.length > 1) {
        this.list2 = list().slice(0, this.list2.length - 1);
      }
    },
  },
};
</script>

<style>
  .active-6-1 {
    color: rgb(252, 55, 140) !important;
    border-color: rgb(252, 55, 140) !important;
  }
  .active-6-2 {
    color: #04be02 !important;
    border-color: #04be02 !important;
  }
  .active-6-3 {
    color: rgb(55, 174, 252) !important;
    border-color: rgb(55, 174, 252) !important;
  }
</style>
# Props

tab| Parameter | Description | Type | Default | |---------------|-----------------------------|---------|---------| | default-color | optional, default text color | String | #999 | | active-color | optional, highlighted text and line color | String | #ffac38 | | animate | optional, whether to use animation | Boolean | true | | line-width | optional, border line width | Number | 3 |

tab-item| Parameter | Description | Type | Default | |----------|---------|---------|--------| | selected | Whether highlighted | Boolean | false |

# Slots
Name Description
defaultslot Tab area
# Events
Event Name Parameter Description
on-item-click - - Triggered when clicking tab-item

# XHeader

Currently XHeader does not handle position, please set it manually using class or style.

# Demo
<template>
  <div>
    <x-header>This is the page title.</x-header>
    <br>
    <x-header :left-options="{showBack: false}">do not show Back</x-header>
    <br>
    <x-header :right-options="{showMore: true}" @on-click-more="showMenus = true">with more menu</x-header>
    <br>
    <x-header>with right link<a slot="right">Feedback</a></x-header>
    <br>
    <x-header>long long long long long long long text<a slot="right">Feedback</a></x-header>
    <br>
    <x-header>with left slot<a slot="left">Close</a></x-header>
    <br>
    <x-header style="background-color:#000;">custom background color</x-header>
    <actionsheet :menus="menus" :show.sync="showMenus" show-cancel></actionsheet>
  </div>
</template>

<script>
import XHeader from '../components/x-header';
import { Actionsheet } from '../components';

export default {
  components: {
    XHeader,
    Actionsheet,
  },
  data () {
    return {
      menus: {
        menu1: 'Take Photo',
        menu2: 'Choose from photos',
      },
      showMenus: false,
    };
  },
};
</script>
# Props
Parameter Description Type Default
leftOptions.showBack Whether to show back arrow Boolean true
leftOptions.backText Back button text, can be empty String Back
leftOptions.preventGoBack Whether to prevent going back when clicking Back, default will call history.back() Boolean false
rightOptions.showMore Whether to showMoreIcon Boolean false
# Events
Event Name Parameter Description
on-click-back - - Triggered when clicking back button or text, only triggered when leftOptions.preventGoBack is set to true
on-click-more - - Triggered when clicking more icon
# Slots
Name Description
defaultslot Title text
left Content positioned after back button
right Content positioned after rightOptions.showMore
Utilities
Form

← Form→