示例

PCPhonePad

HTMLJAVASCRIPTCSS

<page>
    <!-- spaceSize: small(4) default(8) large(16) number    -->
    <!-- spaceDirection: horizontal vertical     -->
    <!-- spaceAlign: start end center baseline     -->
    <card title="xxx"  spaceSize="10" spaceAlign="baseline" spaceDirection="horizontal">
        <!-- width: 1 ~ 6     -->
        <card-item type="data" :value="a"  width="3" @click="clickHandle"></card-item>
        <card-item type="datainfo" :value="b"  width="3" @click="clickHandle"></card-item>
        <card-item type="entry" :value="c"  width="3" @click="clickHandle"></card-item>
        <card-item type="card" :value="d"  width="3" @click="clickHandle"></card-item>
        <card-item type="cardinfo" :value="e"  width="4" @click="clickHandle"></card-item>
    </card>
</page>

export default XPage({
    data: {
        a: {
            headIcon: 'x-icon-directive-left',
            title: '标题',
            subTitle: '副标题副标题副标题副标题副标题副标题副标题副标题副标题副标题副标题副标题副标题副标题副标题副标题副标题副标题副标题副标题副标题副标题副标题副标题副标题副标题副标题副标题副标题',
            icon: 'x-icon-action-keep-side',
        },
        b: {
            img: 'http://teststatic.dmall.com/kayak-project/cabin_wiki/dist/cabin_wiki/assets/index/bg.png',
            title: '标题',
            subTitle: '副标题副标题副标题副标题副标题副标题副标题副标题副标题副标题副标题副标题副标题副标题副标题副标题副标题副标题副标题副标题副标题副标题副标题副标题副标题副标题副标题副标题副标题',
            tips: 'tipsxxxxx',
            icon: 'x-icon-action-keep-side',
            info: [
                {
                    label: 'label',
                    value: 'value',
                    color: 'red',
                    icon: 'x-icon-directive-ups-arrow',
                },
                {
                    label: 'label',
                    value: 'value',
                    color: 'green',
                    icon: 'x-icon-directive-downs-arrow',
                },
            ],
        },
        c: {
            img: 'http://teststatic.dmall.com/kayak-project/cabin_wiki/dist/cabin_wiki/assets/index/bg.png',
            title: '标题',
            subTitle: '副标题副标题副标题副标题副标题副标题副标题副标题副标题副标题副标题副标题副标题副标题副标题副标题副标题副标题副标题副标题副标题副标题副标题副标题副标题副标题副标题副标题副标题',
            icon: 'x-icon-action-keep-side',
        },
        d: {
            img: 'http://teststatic.dmall.com/kayak-project/cabin_wiki/dist/cabin_wiki/assets/index/bg.png',
            title: '标题',
            subTitle: '副标题副标题副标题副标题副标题副标题副标题副标题副标题副标题副标题副标题副标题副标题副标题副标题副标题副标题副标题副标题副标题副标题副标题副标题副标题副标题副标题副标题副标题',
            icon: 'x-icon-action-keep-side',
            info: [
                {
                    label: 'label',
                    value: 'value',
                    color: 'red',
                    icon: 'x-icon-directive-ups-arrow',
                },
                {
                    label: 'label',
                    value: 'value',
                    color: 'green',
                    icon: 'x-icon-directive-downs-arrow',
                },
            ],
        },
        e: {
            img: 'http://teststatic.dmall.com/kayak-project/cabin_wiki/dist/cabin_wiki/assets/index/bg.png',
            title: '标题',
            subTitle: '副标题副标题副标题副标题副标题副标题副标题副标题副标题副标题副标题副标题副标题副标题副标题副标题副标题副标题副标题副标题副标题副标题副标题副标题副标题副标题副标题副标题副标题',
            tips: 'tipsxxxxx',
            icon: 'x-icon-action-keep-side',
            tags: [
                {
                    text: '标签一',
                    status: '',
                },
            ],
            info: [
                {
                    label: 'label',
                    value: 'value',
                    color: 'red',
                    icon: 'x-icon-directive-ups-arrow',
                },
                {
                    label: 'label',
                    value: 'value',
                    color: 'green',
                    icon: 'x-icon-directive-downs-arrow',
                },
            ],
        },
    
    },
    clickHandle() {
        console.info('clickHandle');
    }
});

Attributes

参数	说明	类型	可选值	默认值	端	版本
spaceSize	间隙大小	String/Number	small(4px) default(8px) large(16px) / Number	default	PC	--
spaceAlign	对齐方式	String	baseline/start/end	start	PC	--
spaceDirection	排列方向	String	horizontal/vertical	horizontal	PC	--
title	标题	String	--	null	PC	--

card-item Attributes

参数	说明	类型	可选值	默认值	端	版本
type	类型	String	data/datainfo/entry/card/cardinfo	--	PC	--
value	值	Object	--	null	PC	--
width	栅格布局宽度，设置后item之间会有默认间隔，间隔大小受spaceSize 影响	Number	1~6	null	PC	--
click	点击事件回调	Function	Function	null	PC	--

Value

key	说明	类型
img	图片地址	String
headIcon	图标（和img 冲突）可选范围为cabinx图标库	String
title	标题	String
subTitle	副标题	String
tips	提示	String
icon	点击按钮图标(cabinx图标库)	String
tags	标签 设置同cabinx tag	Array
info	展示值 [{label,value,color,icon}]	Array