SAP UI5 Web Component的React表格控件用法

从@ui5/webcomponents-react导入表格组件AnalyticalTable：

生成表格的抬头列标签数组和行数据数组：

使用AnalyticalTable标签页，将data和columns属性分别绑定到之前创建的数据数组和抬头数组：

最后效果如图：

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

运行时效果：

例子：我的SAP UI5 Web Component开发而成的React应用上，显示了这个加号图标：

在React Component里引入加号图标：

在此处给ShellBarItem的icon属性赋以add按钮：

运行时效果如下：

我们再回过头看看在代码里导入的add.js的内容：

pathData里包含的值，其实就是基于SVG绘制而成的加号图标在浏览器里对应的g标签的d属性，如下图所示：