Welink React-ui表单组件ListView

举报
云会议运营喵大人 发表于 2020/02/21 18:25:45 2020/02/21
【摘要】 ListView资讯类列表。ListView UI 提供与WeLink规范一致的视图,包含:带说明跳转。参数说明名称类型默认值说明srcstring图片连接titlestring标题footerstring辅助文本import React from 'react';import { Cells, CellsTitle, ListView, ListViewArea } from '@wec...

ListView


资讯类列表。ListView UI 提供与WeLink规范一致的视图,包含:带说明跳转。

参数说明

名称类型默认值说明
srcstring
图片连接
titlestring
标题
footerstring
辅助文本

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;


【版权声明】本文为华为云社区用户原创内容,未经允许不得转载,如需转载请自行联系原作者进行授权。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

举报
请填写举报理由
0/200