Welink React-ui表单组件ListView
ListView
资讯类列表。ListView UI 提供与WeLink规范一致的视图,包含:带说明跳转。
参数说明
名称 | 类型 | 默认值 | 说明 |
---|---|---|---|
src | string | 图片连接 | |
title | string | 标题 | |
footer | string | 辅助文本 |
import React from 'react';
import {
Cells, CellsTitle, ListView, ListViewArea
} from '@wecode/react-weui';
import image01 from './images/1.png';
import image02 from './images/2.png';
import image03 from './images/3.png';
import image04 from './images/4.png';
import image05 from './images/5.png';
import image06 from './images/6.png';
import image07 from './images/7.png';
const ListViewDemo = () => (
<section>
<CellsTitle>上图下文 - 无辅助文本</CellsTitle>
<Cells>
<ListView src={image01} title="AI系列培训-Introduction to AI & ML-分布式" />
</Cells>
<CellsTitle>上图下文 - 辅助文本</CellsTitle>
<Cells>
<ListView
src={image02}
title="AI系列培训-Introduction to AI & ML-分布式与并行与交流,分布式与并行与交流,分布式与并行与交流,分布式与并行与交流,分布式与并行与交流,分布式与并行与交流"
footer="01-14 00:00"
/>
</Cells>
<CellsTitle>上图下文 - 图标+辅助文本</CellsTitle>
<Cells>
<ListView
src={image03}
title="AI系列培训-Introduction to AI & ML-分布式与并行与交流,分布式与并行与交流,分布式与并行与交流,分布式与并行与交流,分布式与并行与交流,分布式与并行与交流"
footer={(
<span>
<i className="icon-16 icon-16-comment" />
1235评论
</span>
)}
/>
</Cells>
<CellsTitle>上图下文(小图) - 图标+辅助文本</CellsTitle>
<Cells>
<ListViewArea>
<ListView
src={image04}
title="AI系列培训-Introduction to AI & ML-分布式与并行与交流,分布式与并行与交流,分布式与并行与交流,分布式与并行与交流,分布式与并行与交流,分布式与并行与交流"
footer="1235播放"
/>
<ListView src={image05} title="AI系列培训" footer="1235播放" />
</ListViewArea>
</Cells>
<CellsTitle>上图下文(小图)</CellsTitle>
<Cells>
<ListViewArea>
<ListView
src={image06}
title="AI系列培训-Introduction to AI & ML-分布式与并行与交流,分布式与并行与交流,分布式与并行与交流,分布式与并行与交流,分布式与并行与交流,分布式与并行与交流"
/>
<ListView src={image07} title="AI系列培训" />
</ListViewArea>
</Cells>
</section>
);
export default ListViewDemo;
- 点赞
- 收藏
- 关注作者
评论(0)