SAP UI5 Web Component裡最簡單的React列表控制元件的用法

i042416發表於2020-02-20

從@ui5/webcomponents-react裡匯入

List,StandardListItem和ValueState:

SAP UI5 Web Component裡最簡單的React列表控制元件的用法


用下列方式繪製列表(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列表控制元件的用法


來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/24475491/viewspace-2676307/,如需轉載,請註明出處,否則將追究法律責任。

相關文章