Component里的React列表控件的用法是什么

這篇文章主要介紹“Component里的React列表控件的用法是什么”，在日常操作中，相信很多人在Component里的React列表控件的用法是什么問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”Component里的React列表控件的用法是什么”的疑惑有所幫助！接下來，請跟著小編一起來學(xué)習(xí)吧！

從@ui5/webcomponents-react里導(dǎo)入

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>

運(yùn)行時(shí)效果：

到此，關(guān)于“Component里的React列表控件的用法是什么”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識，請繼續(xù)關(guān)注億速云網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬?shí)用的文章！