feat(cell-item): add new cell-item component
BREAKING CHANGE: new cell-item component
This commit is contained in:
moyus
parent
0cfc25cb27
commit
62995470df
|
|
@ -0,0 +1,46 @@
|
|||
---
|
||||
title: CellItem
|
||||
preview: https://didi.github.io/mand-mobile/examples/#/cell-item
|
||||
---
|
||||
|
||||
Arrange vertically and display current contents, status and other allowable operations.
|
||||
|
||||
### Import
|
||||
|
||||
```javascript
|
||||
import { CellItem } from 'mand-mobile'
|
||||
|
||||
Vue.component(CellItem.name, CellItem)
|
||||
```
|
||||
|
||||
### Code Examples
|
||||
<!-- DEMO -->
|
||||
|
||||
### API
|
||||
|
||||
#### CellItem Props
|
||||
|Props | Description | Type | Default | Note|
|
||||
|----|-----|------|------|------|
|
||||
|title|title|String|-|-|
|
||||
|brief|description text|String|-|-|
|
||||
|addon|help info text|String|-|-|
|
||||
|disabled|disable item operation|Boolean|false|-|
|
||||
|arrow|arrow indicator|Boolean|false|-|
|
||||
|
||||
#### CellItem Events
|
||||
##### @click(event)
|
||||
click event when not disabled
|
||||
|
||||
#### CellItem Slots
|
||||
|
||||
##### default
|
||||
default content slot
|
||||
|
||||
##### start
|
||||
start content slot
|
||||
|
||||
##### addon
|
||||
addon content slot
|
||||
|
||||
##### children
|
||||
extra children slot
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
---
|
||||
title: CellItem 单元格
|
||||
preview: https://didi.github.io/mand-mobile/examples/#/cell-item
|
||||
---
|
||||
|
||||
列表用于展现并列层级的信息内容，列表可承载功能入口、功能操作、信息展示等功能。
|
||||
|
||||
### 引入
|
||||
|
||||
```javascript
|
||||
import { CellItem } from 'mand-mobile'
|
||||
|
||||
Vue.component(CellItem.name, CellItem)
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
<!-- DEMO -->
|
||||
|
||||
### API
|
||||
|
||||
#### CellItem Props
|
||||
|属性 | 说明 | 类型 | 默认值|备注|
|
||||
|----|-----|------|------|------|
|
||||
|title|标题|String|-|-|
|
||||
|brief|描述文案|String|-|-|
|
||||
|addon|附加文案|String|-|-|
|
||||
|disabled|是否禁用项目|Boolean|false|-|
|
||||
|arrow|动作箭头标识|Boolean|false|-|
|
||||
|
||||
#### CellItem Events
|
||||
##### @click(event)
|
||||
非禁用状态下的点击事件
|
||||
|
||||
#### CellItem Slots
|
||||
|
||||
##### default
|
||||
内容默认插槽
|
||||
|
||||
##### start
|
||||
头部区域插槽
|
||||
|
||||
##### addon
|
||||
末尾附加内容插槽
|
||||
|
||||
##### children
|
||||
额外内容插槽
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
export default {
|
||||
'name': 'cell-item',
|
||||
'text': '列表单元',
|
||||
'category': 'basic',
|
||||
'description': '列表用于展现并列层级的信息内容，列表可承载功能入口、功能操作、信息展示等功能',
|
||||
'author': 'liuxinyumichael'
|
||||
}
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
<template>
|
||||
<div class="md-example-child md-example-child-cell-item md-example-child-cell-item-0">
|
||||
<md-field>
|
||||
<md-cell-item title="普通条目" />
|
||||
<md-cell-item title="动作条目" arrow @click="onClick" />
|
||||
<md-cell-item title="禁用条目" arrow disabled />
|
||||
</md-field>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
import {Field, CellItem, Dialog, Icon} from 'mand-mobile'
|
||||
|
||||
export default {
|
||||
name: 'cell-item-demo',
|
||||
|
||||
components: {
|
||||
[Field.name]: Field,
|
||||
[CellItem.name]: CellItem,
|
||||
[Icon.name]: Icon,
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
open: false,
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
onClick() {
|
||||
Dialog.alert({
|
||||
content: '点击了',
|
||||
})
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
<template>
|
||||
<div class="md-example-child md-example-child-cell-item md-example-child-cell-item-1">
|
||||
<md-field>
|
||||
<md-cell-item title="滴水贷" arrow />
|
||||
<md-cell-item title="信用付">
|
||||
<md-switch slot="addon" v-model="open" />
|
||||
</md-cell-item>
|
||||
<md-cell-item title="滴水贷" addon="可用8000.34" arrow />
|
||||
<md-cell-item title="信用付" addon="可用8000.34" />
|
||||
<md-cell-item title="滴水贷" addon="可用8000.34" arrow>
|
||||
<div class="holder" slot="start"></div>
|
||||
</md-cell-item>
|
||||
<md-cell-item title="信用付" addon="可用8000.34" arrow>
|
||||
<div class="holder" slot="start"></div>
|
||||
</md-cell-item>
|
||||
</md-field>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
import {Field, CellItem, Switch} from 'mand-mobile'
|
||||
|
||||
export default {
|
||||
name: 'cell-item-demo',
|
||||
/* DELETE */
|
||||
title: '单行列表',
|
||||
titleEnUS: 'Simple List',
|
||||
/* DELETE */
|
||||
components: {
|
||||
[Field.name]: Field,
|
||||
[CellItem.name]: CellItem,
|
||||
[Switch.name]: Switch,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
open: false,
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
.holder
|
||||
display block
|
||||
width 48px
|
||||
height 48px
|
||||
background-color #E6E6E6
|
||||
</style>
|
||||
|
|
@ -0,0 +1,52 @@
|
|||
<template>
|
||||
<div class="md-example-child md-example-child-cell-item md-example-child-cell-item-2">
|
||||
<md-field>
|
||||
<md-cell-item title="交通银行(尾号3089)" describe="展示摘要描述" />
|
||||
<md-cell-item title="招商银行(尾号2342)" describe="展示摘要描述">
|
||||
<md-switch v-model="open" slot="addon" />
|
||||
</md-cell-item>
|
||||
<md-cell-item title="交通银行(尾号3089)" describe="展示摘要描述" addon="附加文案" arrow />
|
||||
<md-cell-item title="交通银行" describe="展示摘要描述" addon="附加文案" arrow>
|
||||
<span class="holder" slot="start"></span>
|
||||
</md-cell-item>
|
||||
<md-cell-item title="招商银行" describe="展示摘要描述" addon="禁用的项目" disabled arrow>
|
||||
<span class="holder" slot="start"></span>
|
||||
</md-cell-item>
|
||||
<md-cell-item title="建设银行" describe="摘要描述" arrow>
|
||||
<p slot="children">
|
||||
中国建设银行，在全球范围内为台湾、香港、美国、澳大利亚等国家或地区提供全面金融服务，主要经营公司银行业务、个人银行业务和资金业务，包括居民储蓄存款、信贷资金贷款、住房类贷款、外汇、信用卡，以及投资理财等多种业务。
|
||||
</p>
|
||||
</md-cell-item>
|
||||
</md-field>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
import {Field, CellItem, Switch} from 'mand-mobile'
|
||||
|
||||
export default {
|
||||
name: 'cell-item-demo',
|
||||
/* DELETE */
|
||||
title: '多行列表',
|
||||
titleEnUS: 'Content List',
|
||||
/* DELETE */
|
||||
components: {
|
||||
[Field.name]: Field,
|
||||
[CellItem.name]: CellItem,
|
||||
[Switch.name]: Switch,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
open: false,
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
.holder
|
||||
display block
|
||||
width 88px
|
||||
height 88px
|
||||
border-radius 44px
|
||||
background-color #E6E6E6
|
||||
</style>
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
<template>
|
||||
<div class="md-example cell-item">
|
||||
<section class="md-example-section" v-for="(demo, index) in demos" :key="index">
|
||||
<div class="md-example-title" v-html="demo.title || '基础'"></div>
|
||||
<div class="md-example-content">
|
||||
<component :is="demo"></component>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
import createDemoModule from '../../../examples/create-demo-module'
|
||||
import Demo0 from './cases/demo0'
|
||||
import Demo1 from './cases/demo1'
|
||||
import Demo2 from './cases/demo2'
|
||||
export default {...createDemoModule('cell-item', [Demo0, Demo1, Demo2])}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,122 @@
|
|||
<template>
|
||||
<div class="md-cell-item" :class="{ 'is-disabled': disabled }" @click="$_onClick">
|
||||
<div class="md-cell-item-content">
|
||||
<div class="md-cell-item-start" v-if="$slots.start">
|
||||
<slot name="start"></slot>
|
||||
</div>
|
||||
<div class="md-cell-item-inner">
|
||||
<p class="md-cell-item-title" v-if="title" v-text="title"></p>
|
||||
<p class="md-cell-item-brief" v-if="brief" v-text="brief"></p>
|
||||
<slot></slot>
|
||||
</div>
|
||||
<div class="md-cell-item-addon" v-if="arrow || addon || $slots.addon">
|
||||
<slot name="addon">
|
||||
{{ addon }}
|
||||
</slot>
|
||||
<md-icon v-if="arrow" name="arrow-right" size="lg" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="md-cell-item-children" v-if="$slots.children">
|
||||
<slot name="children"></slot>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
import Icon from '../icon'
|
||||
|
||||
export default {
|
||||
name: 'md-cell-item',
|
||||
|
||||
components: {
|
||||
[Icon.name]: Icon,
|
||||
},
|
||||
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
brief: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
addon: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
arrow: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
|
||||
methods: {
|
||||
$_onClick(e) {
|
||||
if (!this.disabled) {
|
||||
this.$emit('click', e)
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="stylus">
|
||||
.md-cell-item
|
||||
position relative
|
||||
&:not(:last-child)
|
||||
hairline(bottom, cell-item-border-color)
|
||||
|
||||
.md-cell-item-content
|
||||
display flex
|
||||
align-items center
|
||||
justify-content space-between
|
||||
min-height cell-item-min-height
|
||||
padding-top cell-item-padding-v
|
||||
padding-bottom cell-item-padding-v
|
||||
box-sizing border-box
|
||||
|
||||
.md-cell-item-start
|
||||
flex-shrink 0
|
||||
margin-right h-gap-lg
|
||||
|
||||
.md-cell-item-inner
|
||||
flex 1 1 0%
|
||||
color cell-item-color
|
||||
font-size cell-item-font-size
|
||||
line-height 1.2
|
||||
|
||||
.md-cell-item-addon
|
||||
flex-shrink 0
|
||||
margin-left h-gap-sm
|
||||
display inline-flex
|
||||
align-items center
|
||||
justify-content flex-end
|
||||
color cell-item-addon-color
|
||||
font-size cell-item-addon-font-size
|
||||
.md-icon-arrow-right
|
||||
margin-right -12px
|
||||
|
||||
.md-cell-item-title
|
||||
line-height 1.2
|
||||
|
||||
.md-cell-item-brief
|
||||
color #858B9C
|
||||
font-size 24px
|
||||
line-height 1.4
|
||||
margin-top v-gap-sm
|
||||
|
||||
.md-cell-item-children
|
||||
padding-bottom cell-item-padding-v
|
||||
|
||||
.md-cell-item
|
||||
&.is-disabled
|
||||
.md-cell-item-inner,
|
||||
.md-cell-item-title,
|
||||
.md-cell-item-describe,
|
||||
.md-cell-item-addon
|
||||
color color-text-disabled
|
||||
</style>
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
import CellItem from '../index'
|
||||
import {mount} from 'avoriaz'
|
||||
|
||||
describe('CellItem', () => {
|
||||
let wrapper
|
||||
|
||||
afterEach(() => {
|
||||
wrapper && wrapper.destroy()
|
||||
})
|
||||
|
||||
it('create a simple cell-item with title', () => {
|
||||
wrapper = mount(CellItem, {
|
||||
propsData: {
|
||||
title: 'Cell title',
|
||||
},
|
||||
})
|
||||
expect(wrapper.hasClass('md-cell-item')).to.be.true
|
||||
expect(wrapper.vm.title).to.equal('Cell title')
|
||||
})
|
||||
})
|
||||
|
|
@ -33,6 +33,7 @@ import TabPicker from './tab-picker'
|
|||
import Dialog from './dialog'
|
||||
import Field from './field'
|
||||
import FieldItem from './field-item'
|
||||
import CellItem from './cell-item'
|
||||
import Switch from './switch'
|
||||
import Agree from './agree'
|
||||
import Radio from './radio'
|
||||
|
|
@ -94,6 +95,7 @@ export const components = {
|
|||
Dialog,
|
||||
Field,
|
||||
FieldItem,
|
||||
CellItem,
|
||||
Switch,
|
||||
Agree,
|
||||
Radio,
|
||||
|
|
@ -173,6 +175,7 @@ export {
|
|||
Dialog,
|
||||
Field,
|
||||
FieldItem,
|
||||
CellItem,
|
||||
Switch,
|
||||
Agree,
|
||||
Radio,
|
||||
|
|
|
|||
|
|
@ -1 +1,230 @@
|
|||
[{"category":"basic","name":"Basic","text":"基础","list":[{"name":"ActionBar","path":"/action-bar","icon":"action-bar","text":"操作栏"},{"name":"ActivityIndicator","path":"/activity-indicator","icon":"activity-indicator","text":"活动指示器"},{"path":"/button","name":"Button","icon":"button","text":"按钮"},{"name":"DropMenu","path":"/drop-menu","icon":"drop-menu","text":"下拉菜单"},{"path":"/icon","name":"Icon","icon":"icon","text":"图标"},{"name":"ImageReader","path":"/image-reader","icon":"image-reader","text":"图片选择器"},{"name":"ImageViewer","path":"/image-viewer","icon":"image-viewer","text":"图片浏览器"},{"name":"NoticeBar","path":"/notice-bar","icon":"notice-bar","text":"通知栏"},{"name":"Stepper","path":"/stepper","icon":"stepper","text":"步进器"},{"name":"Steps","path":"/steps","icon":"steps","text":"步骤条"},{"name":"Swiper","path":"/swiper","icon":"swiper","text":"轮播"},{"name":"TabBar","path":"/tab-bar","icon":"tab-bar","text":"标签栏"},{"name":"Tabs","path":"/tabs","icon":"tabs","text":"标签页"},{"name":"Tag","path":"/tag","icon":"tag","text":"标签"}]},{"category":"business","name":"Business","text":"业务相关","list":[{"name":"Bill","path":"/bill","icon":"bill","text":"票据"},{"name":"Captcha","path":"/captcha","icon":"captcha","text":"验证码窗口"},{"name":"Cashier","path":"/cashier","icon":"cashier","text":"收银台"},{"name":"Chart","path":"/chart","icon":"chart","text":"折线图表"},{"name":"Landscape","path":"/landscape","icon":"landscape","text":"压屏窗"},{"name":"ResultPage","path":"/result-page","icon":"result-page","text":"结果页"},{"name":"WaterMark","path":"/water-mark","icon":"water-mark","text":"水印"}]},{"category":"feedback","name":"Feedback","text":"操作反馈","list":[{"name":"ActionSheet","path":"/action-sheet","icon":"action-sheet","text":"动作面板"},{"name":"DatePicker","path":"/date-picker","icon":"date-picker","text":"日期选择器"},{"name":"Dialog","path":"/dialog","icon":"dialog","text":"模态窗"},{"name":"Picker","path":"/picker","icon":"picker","text":"选择器"},{"name":"Popup","path":"/popup","icon":"popup","text":"弹出层"},{"name":"Selector","path":"/selector","icon":"selector","text":"列表选择器"},{"name":"TabPicker","path":"/tab-picker","icon":"tab-picker","text":"多频道选择器"},{"name":"Tip","path":"/tip","icon":"tip","text":"气泡提示"},{"name":"Toast","path":"/toast","icon":"toast","text":"轻提示"},{"name":"Transition","path":"/transition","icon":"transition","text":"动画"}]},{"category":"form","name":"Form","text":"表单相关","list":[{"name":"Agree","path":"/agree","icon":"agree","text":"勾选按钮"},{"name":"CheckBox","path":"/check-box","icon":"check-box","text":"复选框"},{"name":"CheckGroup","path":"/check-group","icon":"check-group","text":"选择项组"},{"name":"CheckList","path":"/check-list","icon":"check-list","text":"多选列表"},{"name":"Codebox","path":"/codebox","icon":"codebox","text":"字符码输入框"},{"name":"Field","path":"/field","icon":"field","text":"区域列表组合"},{"name":"InputItem","path":"/input-item","icon":"input-item","text":"输入框"},{"name":"NumberKeyboard","path":"/number-keyboard","icon":"number-keyboard","text":"数字键盘"},{"name":"Radio","path":"/radio","icon":"radio","text":"单选框"},{"name":"Switch","path":"/switch","icon":"switch","text":"开关"}]},{"category":"gesture","name":"Gesture","text":"手势","list":[{"name":"ScrollView","path":"/scroll-view","icon":"scroll-view","text":"滚动区域/下拉刷新"}]}]
|
||||
[
|
||||
{
|
||||
"category": "basic",
|
||||
"name": "Basic",
|
||||
"text": "基础",
|
||||
"list": [
|
||||
{
|
||||
"name": "ActionBar",
|
||||
"path": "/action-bar",
|
||||
"icon": "action-bar",
|
||||
"text": "操作栏"
|
||||
},
|
||||
{
|
||||
"name": "ActivityIndicator",
|
||||
"path": "/activity-indicator",
|
||||
"icon": "activity-indicator",
|
||||
"text": "活动指示器"
|
||||
},
|
||||
{ "path": "/button", "name": "Button", "icon": "button", "text": "按钮" },
|
||||
{
|
||||
"name": "DropMenu",
|
||||
"path": "/drop-menu",
|
||||
"icon": "drop-menu",
|
||||
"text": "下拉菜单"
|
||||
},
|
||||
{ "path": "/icon", "name": "Icon", "icon": "icon", "text": "图标" },
|
||||
{
|
||||
"name": "ImageReader",
|
||||
"path": "/image-reader",
|
||||
"icon": "image-reader",
|
||||
"text": "图片选择器"
|
||||
},
|
||||
{
|
||||
"name": "ImageViewer",
|
||||
"path": "/image-viewer",
|
||||
"icon": "image-viewer",
|
||||
"text": "图片浏览器"
|
||||
},
|
||||
{
|
||||
"name": "NoticeBar",
|
||||
"path": "/notice-bar",
|
||||
"icon": "notice-bar",
|
||||
"text": "通知栏"
|
||||
},
|
||||
{
|
||||
"name": "Stepper",
|
||||
"path": "/stepper",
|
||||
"icon": "stepper",
|
||||
"text": "步进器"
|
||||
},
|
||||
{ "name": "Steps", "path": "/steps", "icon": "steps", "text": "步骤条" },
|
||||
{ "name": "Swiper", "path": "/swiper", "icon": "swiper", "text": "轮播" },
|
||||
{ "name": "CellItem", "path": "/cell-item", "icon": "cell-item", "text": "列表单元" },
|
||||
{
|
||||
"name": "TabBar",
|
||||
"path": "/tab-bar",
|
||||
"icon": "tab-bar",
|
||||
"text": "标签栏"
|
||||
},
|
||||
{ "name": "Tabs", "path": "/tabs", "icon": "tabs", "text": "标签页" },
|
||||
{ "name": "Tag", "path": "/tag", "icon": "tag", "text": "标签" }
|
||||
]
|
||||
},
|
||||
{
|
||||
"category": "business",
|
||||
"name": "Business",
|
||||
"text": "业务相关",
|
||||
"list": [
|
||||
{ "name": "Bill", "path": "/bill", "icon": "bill", "text": "票据" },
|
||||
{
|
||||
"name": "Captcha",
|
||||
"path": "/captcha",
|
||||
"icon": "captcha",
|
||||
"text": "验证码窗口"
|
||||
},
|
||||
{
|
||||
"name": "Cashier",
|
||||
"path": "/cashier",
|
||||
"icon": "cashier",
|
||||
"text": "收银台"
|
||||
},
|
||||
{
|
||||
"name": "Chart",
|
||||
"path": "/chart",
|
||||
"icon": "chart",
|
||||
"text": "折线图表"
|
||||
},
|
||||
{
|
||||
"name": "Landscape",
|
||||
"path": "/landscape",
|
||||
"icon": "landscape",
|
||||
"text": "压屏窗"
|
||||
},
|
||||
{
|
||||
"name": "ResultPage",
|
||||
"path": "/result-page",
|
||||
"icon": "result-page",
|
||||
"text": "结果页"
|
||||
},
|
||||
{
|
||||
"name": "WaterMark",
|
||||
"path": "/water-mark",
|
||||
"icon": "water-mark",
|
||||
"text": "水印"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"category": "feedback",
|
||||
"name": "Feedback",
|
||||
"text": "操作反馈",
|
||||
"list": [
|
||||
{
|
||||
"name": "ActionSheet",
|
||||
"path": "/action-sheet",
|
||||
"icon": "action-sheet",
|
||||
"text": "动作面板"
|
||||
},
|
||||
{
|
||||
"name": "DatePicker",
|
||||
"path": "/date-picker",
|
||||
"icon": "date-picker",
|
||||
"text": "日期选择器"
|
||||
},
|
||||
{
|
||||
"name": "Dialog",
|
||||
"path": "/dialog",
|
||||
"icon": "dialog",
|
||||
"text": "模态窗"
|
||||
},
|
||||
{
|
||||
"name": "Picker",
|
||||
"path": "/picker",
|
||||
"icon": "picker",
|
||||
"text": "选择器"
|
||||
},
|
||||
{ "name": "Popup", "path": "/popup", "icon": "popup", "text": "弹出层" },
|
||||
{
|
||||
"name": "Selector",
|
||||
"path": "/selector",
|
||||
"icon": "selector",
|
||||
"text": "列表选择器"
|
||||
},
|
||||
{
|
||||
"name": "TabPicker",
|
||||
"path": "/tab-picker",
|
||||
"icon": "tab-picker",
|
||||
"text": "多频道选择器"
|
||||
},
|
||||
{ "name": "Tip", "path": "/tip", "icon": "tip", "text": "气泡提示" },
|
||||
{ "name": "Toast", "path": "/toast", "icon": "toast", "text": "轻提示" },
|
||||
{
|
||||
"name": "Transition",
|
||||
"path": "/transition",
|
||||
"icon": "transition",
|
||||
"text": "动画"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"category": "form",
|
||||
"name": "Form",
|
||||
"text": "表单相关",
|
||||
"list": [
|
||||
{
|
||||
"name": "Agree",
|
||||
"path": "/agree",
|
||||
"icon": "agree",
|
||||
"text": "勾选按钮"
|
||||
},
|
||||
{
|
||||
"name": "CheckBox",
|
||||
"path": "/check-box",
|
||||
"icon": "check-box",
|
||||
"text": "复选框"
|
||||
},
|
||||
{
|
||||
"name": "CheckGroup",
|
||||
"path": "/check-group",
|
||||
"icon": "check-group",
|
||||
"text": "选择项组"
|
||||
},
|
||||
{
|
||||
"name": "CheckList",
|
||||
"path": "/check-list",
|
||||
"icon": "check-list",
|
||||
"text": "多选列表"
|
||||
},
|
||||
{
|
||||
"name": "Codebox",
|
||||
"path": "/codebox",
|
||||
"icon": "codebox",
|
||||
"text": "字符码输入框"
|
||||
},
|
||||
{
|
||||
"name": "Field",
|
||||
"path": "/field",
|
||||
"icon": "field",
|
||||
"text": "区域列表组合"
|
||||
},
|
||||
{
|
||||
"name": "InputItem",
|
||||
"path": "/input-item",
|
||||
"icon": "input-item",
|
||||
"text": "输入框"
|
||||
},
|
||||
{
|
||||
"name": "NumberKeyboard",
|
||||
"path": "/number-keyboard",
|
||||
"icon": "number-keyboard",
|
||||
"text": "数字键盘"
|
||||
},
|
||||
{ "name": "Radio", "path": "/radio", "icon": "radio", "text": "单选框" },
|
||||
{ "name": "Switch", "path": "/switch", "icon": "switch", "text": "开关" }
|
||||
]
|
||||
},
|
||||
{
|
||||
"category": "gesture",
|
||||
"name": "Gesture",
|
||||
"text": "手势",
|
||||
"list": [
|
||||
{
|
||||
"name": "ScrollView",
|
||||
"path": "/scroll-view",
|
||||
"icon": "scroll-view",
|
||||
"text": "滚动区域/下拉刷新"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
|
|
|
|||
|
|
@ -27,6 +27,7 @@ export {default as ImageViewer} from '../components/image-viewer/demo'
|
|||
export {default as ImageReader} from '../components/image-reader/demo'
|
||||
export {default as TabPicker} from '../components/tab-picker/demo'
|
||||
export {default as Field} from '../components/field/demo'
|
||||
export {default as Cell} from '../components/cell/demo'
|
||||
export {default as Switch} from '../components/switch/demo'
|
||||
export {default as Agree} from '../components/agree/demo'
|
||||
export {default as Radio} from '../components/radio/demo'
|
||||
|
|
@ -43,4 +44,5 @@ export {default as CheckBox} from '../components/check-box/demo'
|
|||
export {default as ScrollView} from '../components/scroll-view/demo'
|
||||
export {default as Bill} from '../components/bill/demo'
|
||||
export {default as WaterMark} from '../components/water-mark/demo'
|
||||
export {default as Transition} from '../components/transition/demo'
/* @init<%export {default as ${componentNameUpper}} from '../components/${componentName}/demo'%> */
|
||||
export {default as Transition} from '../components/transition/demo'
|
||||
/* @init<%export {default as ${componentNameUpper}} from '../components/${componentName}/demo'%> */
|
||||
|
|
|
|||
|
|
@ -28,6 +28,7 @@ export const ImageViewer = r => require.ensure([], () => r(require('../component
|
|||
export const ImageReader = r => require.ensure([], () => r(require('../components/image-reader/demo')), 'image-reader')
|
||||
export const TabPicker = r => require.ensure([], () => r(require('../components/tab-picker/demo')), 'tab-picker')
|
||||
export const Field = r => require.ensure([], () => r(require('../components/field/demo')), 'field')
|
||||
export const CellItem = r => require.ensure([], () => r(require('../components/cell-item/demo')), 'cell-item')
|
||||
export const Switch = r => require.ensure([], () => r(require('../components/switch/demo')), 'switch')
|
||||
export const Agree = r => require.ensure([], () => r(require('../components/agree/demo')), 'agree')
|
||||
export const Radio = r => require.ensure([], () => r(require('../components/radio/demo')), 'radio')
|
||||
|
|
@ -44,4 +45,5 @@ export const CheckBox = r => require.ensure([], () => r(require('../components/
|
|||
export const ScrollView = r => require.ensure([], () => r(require('../components/scroll-view/demo')), 'scroll-view')
|
||||
export const Bill = r => require.ensure([], () => r(require('../components/bill/demo')), 'bill')
|
||||
export const WaterMark = r => require.ensure([], () => r(require('../components/water-mark/demo')), 'water-mark')
|
||||
export const Transition = r => require.ensure([], () => r(require('../components/transition/demo')), 'transition')
/* @init<%export const ${componentNameUpper} = r => require.ensure([], () => r(require('../components/${componentName}/demo')), '${componentName}')%> */
|
||||
export const Transition = r => require.ensure([], () => r(require('../components/transition/demo')), 'transition')
|
||||
/* @init<%export const ${componentNameUpper} = r => require.ensure([], () => r(require('../components/${componentName}/demo')), '${componentName}')%> */
|
||||
|
|
|
|||
Loading…
Reference in New Issue