<template>
|
<cl-page :padding="20">
|
<cl-card label="基础用法">
|
<cl-list-item label="账单"></cl-list-item>
|
</cl-card>
|
|
<cl-card label="带图标">
|
<cl-list-item label="神仙">
|
<template #icon>
|
<cl-image :size="60" src="/pages/demo/static/avatar1.png" />
|
</template>
|
</cl-list-item>
|
</cl-card>
|
|
<cl-card label="带描述">
|
<cl-list-item label="余额">
|
<cl-text type="price" :size="30" :value="159.2" />
|
</cl-list-item>
|
</cl-card>
|
|
<cl-card label="禁用">
|
<cl-list-item label="银行卡" disabled>
|
<cl-text color="disabled">兴业银行(***1113)</cl-text>
|
</cl-list-item>
|
</cl-card>
|
|
<cl-card label="滑动">
|
<cl-list-item label="向右滑动" swipe="left">
|
<template #menu>
|
<cl-button type="primary">置顶</cl-button>
|
<cl-button type="error">删除</cl-button>
|
</template>
|
</cl-list-item>
|
|
<cl-list-item label="向左滑动" swipe="right">
|
<template #menu>
|
<cl-button type="primary">置顶</cl-button>
|
<cl-button type="error">删除</cl-button>
|
</template>
|
</cl-list-item>
|
</cl-card>
|
|
<cl-card label="自定义">
|
<cl-list-item justify="start">
|
<cl-row type="flex" align="center">
|
<cl-avatar></cl-avatar>
|
<cl-text value="神仙都没用" :margin="[0, 0, 0, 20]" />
|
</cl-row>
|
|
<template #append>
|
<cl-button>修改头像</cl-button>
|
</template>
|
</cl-list-item>
|
</cl-card>
|
|
<cl-card label="按钮组">
|
<cl-list :radius="20">
|
<cl-list-item label="A"></cl-list-item>
|
<cl-list-item label="B"></cl-list-item>
|
<cl-list-item label="C"></cl-list-item>
|
</cl-list>
|
</cl-card>
|
</cl-page>
|
</template>
|
