SAP UI5 Web Component里最简单的React列表控件的用法

  1. 云栖社区>
  2. 汪子熙>
  3. 博客>
  4. 正文

SAP UI5 Web Component里最简单的React列表控件的用法

jerrywangsap 2020-02-13 10:28:52 浏览144
展开阅读全文

从@ui5/webcomponents-react里导入
List,StandardListItem和ValueState:

用下列方式绘制列表(list):

<List>
  <StandardListItem info="finished" infoState={ValueState.Success}>
    Activity 1
  </StandardListItem>
  <StandardListItem info="failed" infoState={ValueState.Error}>
    Activity 2
  </StandardListItem>
  <StandardListItem
    info="in progress"
    infoState={ValueState.Warning}
    style={{ height: "80px" }}>
    <FlexBox direction={FlexBoxDirection.Column}>
      <Title level={TitleLevel.H5}>Activity 3</Title>
      <ProgressIndicator
        displayValue="89%"
        percentValue={89}
        width="180px"
        state={ValueState.Success}/>
    </FlexBox>
  </StandardListItem>
  <StandardListItem
    info="in progress"
    infoState={ValueState.Warning}
    style={{ height: "80px" }}>
    <FlexBox direction={FlexBoxDirection.Column}>
      <Title level={TitleLevel.H5}>Activity 4</Title>
      <ProgressIndicator
        displayValue="5%"
        percentValue={5}
        width="180px"
        state={ValueState.Error}/>
    </FlexBox>
  </StandardListItem>
</List>

运行时效果:

本文来自云栖社区合作伙伴“汪子熙”,了解相关信息可以关注微信公众号"汪子熙"。

网友评论

登录后评论
0/500
评论
jerrywangsap
+ 关注
所属团队号: 汪子熙