ITPub博客

首页 > 应用开发 > IT综合 > SAP UI5 Web Component里最简单的React列表控件的用法

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

原创 IT综合 作者:i042416 时间:2020-02-20 08:43:28 0 删除 编辑

从@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>

运行时效果:


来自 “ ITPUB博客 ” ,链接:https://blog.itpub.net/24475491/viewspace-2676307/ ,如需转载,请注明出处,否则将追究法律责任。

请登录后发表评论 登录
全部评论
测试

注册时间:2018-01-20

  • 博文量
    3822
  • 访问量
    1983347