云社区 博客 博客详情
云社区 博客 博客详情

Welink React-ui表单组件ListView

云会议运营喵大人 发表于 2020-02-21 18:25:45 02-21 18:25
云会议运营喵大人 发表于 2020-02-21 18:25:45 2020/02/21
0
0

【摘要】 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;


登录后可下载附件,请登录或者注册

【版权声明】本文为华为云社区用户原创内容,未经允许不得转载,如需转载请发送邮件至:huaweicloud.bbs@huawei.com;如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容。
评论文章 //点赞 收藏 0
点赞
分享文章到微博
分享文章到朋友圈

评论 (0)


0/1000
评论

登录后可评论,请 登录注册

评论

您还没有写博客的权限!

温馨提示

您确认删除评论吗?

确定
取消
温馨提示

您确认删除评论吗?

删除操作无法恢复,请谨慎操作。

确定
取消
温馨提示

您确认删除博客吗?

确定
取消

确认删除

您确认删除博客吗?

确认删除

您确认删除评论吗?

温馨提示

登录超时或用户已下线,请重新登录!!!

确定
取消