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>
執行時效果:
來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/24475491/viewspace-2676307/,如需轉載,請註明出處,否則將追究法律責任。
相關文章
- SAP UI5 Web Component的React表格控制元件用法UIWebReact控制元件
- 如何實現SAP UI5 Web Component React控制元件的載入效果UIWebReact控制元件
- 如何使用SAP UI5 Web Component for React的padding功能UIWebReactpadding
- SAP UI5 Web Component for React的圖示和圖片處理UIWebReact
- SAP UI5 Web Component React應用如何在Component之間跳轉UIWebReact
- SAP UI5 Web Component裡如何自定義CSS styleUIWebCSS
- SAP UI5 Web Component的圖示實現UIWeb
- SAP UI5 Web Component不同React頁面的跳轉實現UIWebReact
- 利用react-to-web-component封裝react控制元件ReactWeb封裝控制元件
- SAP UI5應用裡的列表處理UI
- SAP UI5 檢視裡的 OverflowToolbar 控制元件UI控制元件
- 通過最簡單的button控制元件,深入學習SAP UI5框架程式碼系列之零控制元件UI框架
- SAP UI5 裡的 Busy Dialog 控制元件使用概述UI控制元件
- SAP UI5 裡的 Busy Indicator 控制元件使用概述UIIndicator控制元件
- 如何在SAP Fiori應用裡使用React componentReact
- SAP UI5 應用裡 FlexBox 控制元件的設計原理UIFlex控制元件
- 什麼是SAP UI5的Component-preload.jsUIJS
- 一個最簡單的web componentsWeb
- 關於 SAP UI5 SimpleForm 控制元件裡的 ColumnsL 和 labelSpanXL 的測試UIORM控制元件
- 如何建立最簡單的 SAP Kyma FunctionFunction
- SAP UI5 應用裡一些容器控制元件的介紹UI控制元件
- 使用SAP UI5 Web Components開發React應用UIWebReact
- python中yield的用法詳解——最簡單,最清晰的解釋Python
- SAP UI5 下拉選單(Select) 控制元件的使用方式試讀版UI控制元件
- SAP UI5 應用開發教程之六十 - SAP UI5 地圖控制元件的一些高階用法試讀版UI地圖控制元件
- SAP UI5 SimpleForm 控制元件的 adjustLabelSpan 屬性UIORM控制元件
- SAP UI5 sap.ui.comp.filterbar.FilterBar beforeVariantFetch 事件的用法UIFilter事件
- 用 React 結合 SAP UI5 Web Components 來開發 SAP Fiori 應用ReactUIWeb
- SAP UI5 Form 控制元件的 ColumnLayout 佈局特性UIORM控制元件
- Promise的簡單用法Promise
- SAP UI5 應用在 Business Application Studio 裡的構建單步分析UIAPP
- 最簡單的SAP雲平臺開發教程 - 如何開發UI5應用並執行在SAP雲平臺上UI
- SAP UI5的控制元件DatePicker的DateFormat屬性詳解UI控制元件ORM
- React 的 PureComponent Vs ComponentReact
- html裡列表滑動刪除的實現如此簡單HTML
- 什麼是 SAP UI5 的 Hybrid Web ContainersUIWebAI
- SAP UI5應用裡型別為Edm.DateTime的日期控制元件設計原理UI型別控制元件
- SAP MTA 裡定義 SAP UI5 module 的一個例子UI