@cainiaofe/cn-ui-m
Version:
61 lines (60 loc) • 3.54 kB
JavaScript
import React from 'react';
import { CnBox, CnCard, CnListPro, CnListProItem, CnPage, } from "../../..";
export default {
title: 'demo/CnListPro',
};
export var 栅格布局 = function () {
return (React.createElement(CnPage, { title: "\u6805\u683C\u5E03\u5C40" },
React.createElement(CnCard, { title: "\u56FA\u5B9A\u5217\u6570" },
React.createElement(CnListPro, { imagePosition: "top", dataSource: [
{
title: '标题1',
description: '描述1',
avatar: 'https://gw.alicdn.com/imgextra/i2/O1CN01ZwZHYg1Z1sTgvq6QZ_!!6000000003135-2-tps-500-500.png',
},
{
title: '标题2',
description: '描述2',
avatar: 'https://gw.alicdn.com/imgextra/i2/O1CN01ZwZHYg1Z1sTgvq6QZ_!!6000000003135-2-tps-500-500.png',
},
{
title: '标题3',
description: '描述3',
avatar: 'https://gw.alicdn.com/imgextra/i2/O1CN01ZwZHYg1Z1sTgvq6QZ_!!6000000003135-2-tps-500-500.png',
},
{
title: '标题4',
description: '描述4',
avatar: 'https://gw.alicdn.com/imgextra/i2/O1CN01ZwZHYg1Z1sTgvq6QZ_!!6000000003135-2-tps-500-500.png',
},
], renderItem: function (item) {
return (React.createElement(CnListProItem, { title: React.createElement(CnBox, { justify: "center", direction: "row" }, item.title), avatar: React.createElement("img", { style: { width: 50, height: 50 }, src: item.avatar }) }));
}, grid: { column: 4, wrap: true } })),
React.createElement(CnCard, { title: "\u54CD\u5E94\u5F0F" },
React.createElement(CnListPro, { imagePosition: "top", dataSource: [
{
title: '标题1',
description: '描述1',
avatar: 'https://gw.alicdn.com/imgextra/i2/O1CN01ZwZHYg1Z1sTgvq6QZ_!!6000000003135-2-tps-500-500.png',
},
{
title: '标题2',
description: '描述2',
avatar: 'https://gw.alicdn.com/imgextra/i2/O1CN01ZwZHYg1Z1sTgvq6QZ_!!6000000003135-2-tps-500-500.png',
},
{
title: '标题3',
description: '描述3',
avatar: 'https://gw.alicdn.com/imgextra/i2/O1CN01ZwZHYg1Z1sTgvq6QZ_!!6000000003135-2-tps-500-500.png',
},
{
title: '标题4',
description: '描述4',
avatar: 'https://gw.alicdn.com/imgextra/i2/O1CN01ZwZHYg1Z1sTgvq6QZ_!!6000000003135-2-tps-500-500.png',
},
], renderItem: function (item) {
return (React.createElement(CnListProItem, { title: React.createElement(CnBox, { justify: "center", direction: "row" }, item.title), avatar: React.createElement("img", { style: { width: 50, height: 50 }, src: item.avatar }) }));
}, grid: { wrap: true, xxs: 1, xs: 1, s: 2, m: 3, l: 3, xl: 4 } }))));
};
栅格布局.desc =
'通过设置grid属性实现, 推荐搭配imagePosition为top使用,常用于图标入口场景';