icitymui v1.0.7

Install

npm install icitymui --save

Quick Start

import Vue from 'vue'
import { Button } from 'icitymui'

Vue.component(Button.name, Button)

Browser Support

Modern browsers and Internet Explorer 10+.

Usage

• Spin
• Button
• Card
• Badge
• Tabs
• Prompt
• Title
• Skeleton
• Search
• Alert
• Dialog
• Toast
• ImagePicker
• Picker
• Input
• Password
• Switch
• ListView

Spin

import { Spin } from 'icitymui'   
Vue.component(Spin.name, Spin)   

<i-spin />

Button

import { Button } from 'icitymui'   
Vue.component(Button.name, Button)   

<i-button>按钮</i-button>
<i-button className="btn" type="primary" size="small" @click="go">按钮</i-button>

• className: 自定义样式类（不支持scoped）
• type: normal|primary|dashed
• size: small|large
• disabled: true|false

• @click: () => {}

  

Card

import { Card } from 'icitymui'   
Vue.component(Card.name, Card)   

<i-card>I am a card.</i-card>

• className: 自定义样式类（不支持scoped）

  

Badge

import { Badge } from 'icitymui'   
Vue.component(Badge.name, Badge)   

<i-badge :count=99>
  <div class="square"></div>
</i-badge>

• count: 数量

  

Tabs

import { Tabs } from 'icitymui'   
Vue.component(Tabs.name, Tabs)   

<i-tabs :data="DATA" @change="" />

• data: { icon: '', name: '' }

• @change: (val) => {}

  

Prompt

import { Prompt } from 'icitymui'   
Vue.component(Prompt.name, Prompt)   

<i-prompt title="prompt" okText='Go' @click="">
  This is a description.
</i-prompt>

• icon: 图标
• title: 标题
• okText: 按钮文字

• @click: () => {}

  

Title

import { Title } from 'icitymui'   
Vue.component(Title.name, Title)   

<i-title @click="" okText="more">Title</i-title>

• title: 标题
• okText: 按钮文字

• @click: () => {}

  

Skeleton

import { Skeleton } from 'icitymui'   
Vue.component(Skeleton.name, Skeleton)   

<i-skeleton />

Search

import { Search } from 'icitymui'   
Vue.component(Search.name, Search)   

<i-search placeholder="请输入搜索内容" align="center" />

• type: normal|image|foucs 展示类型
• align: left|center 对齐方式
• value: 双向数据绑定字段
• placeholder: 默认提示
• @search: (val)=>{}

• @cancel: ()=>{}

  

Alert

import { Alert } from 'icitymui'   
Vue.use(Alert)   

this.$iui.alert.show({
  title: 'I am a alert.'
})

• title: 标题
• content: 内容
• @confirm: ()=>{}

• @cancel: ()=>{}

  

Dialog

import { Dialog } from 'icitymui'   
Vue.use(Dialog)   

this.$iui.dialog.show({
  title: 'I am a dialog.'
})

• title: 标题
• content: 内容
• @confirm: ()=>{}

• @cancel: ()=>{}

  

Toast

import { Toast } from 'icitymui'   
Vue.use(Toast)   

this.$iui.toast.show(text, millisecond)

• text: 内容

• millisecond: 显示时间，毫秒

  

ImagePicker

import { ImagePicker } from 'icitymui'   
Vue.use(ImagePicker)   

this.$iui.imagePicker.show({
  title: '请选择',
  confirm: (type)=>{},
  cancel: ()=>{}
})

• type: camera|gallery

  

Picker

import { Picker } from 'icitymui'   
Vue.use(Picker)   

this.$iui.picker.show({
  title: '请选择',
  data: [{name: '科技'}],
  confirm: (val)=>{},
  cancel: ()=>{}
})

Input

import { Input } from 'icitymui'   
Vue.component(Input.name, Input)   

<i-input label="Label" placeholder="please input..." />

• label: 标题
• value: 值
• placeholder: 默认提示语

• @input: (val)=>{}

  

Password

import { Password } from 'icitymui'   
Vue.component(Password.name, Password)   

<i-password label="Label" placeholder="please input..." />

• label: 标题
• value: 值
• placeholder: 默认提示语

• @input: (val)=>{}

  

Switch

import { Switch } from 'icitymui'   
Vue.component(Switch.name, Switch)   

<i-switch label="Label" defaultValue="on" />

• label: 标题
• defaultValue: on|off

• @toggle: (val)=>{}

  

ListView

import { ListView } from 'icitymui'   
Vue.component(ListView.name, ListView)   

<i-listview>
  <div v-for="i in 20">{{i}}</div>
</i-listview>

• slot='header' 列表头部
• slot='footer' 列表底部
• @load: (done)=>{} 调用done()关闭加载动作