zoukankan      html  css  js  c++  java
  • SAP UI5 Web Component里最简单的React列表控件的用法

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

    运行时效果:

    要获取更多Jerry的原创文章,请关注公众号"汪子熙":

  • 相关阅读:
    Docker 安装 Logstash
    Docker 安装 Kibana
    go命令行参数
    小程序 表单提交
    小程序picker日历
    小程序,验证码倒计时效果
    flex图片垂直居中
    小程序单选框样式
    wechat-wxparse 使用
    小程序Banner跳转
  • 原文地址:https://www.cnblogs.com/sap-jerry/p/12302500.html
Copyright © 2011-2022 走看看