webcomponents-fiori
2024-05-26 12:50:56
官方文档
https://www.npmjs.com/package/@ui5/webcomponents-fiori
| Web Component | Tag name | Module import |
|---|---|---|
| Bar |
ui5-bar
|
import "@ui5/webcomponents-fiori/dist/Bar.js";
|
| Barcode Scanner Dialog |
ui5-barcode-scanner-dialog
|
import "@ui5/webcomponents-fiori/dist/BarcodeScannerDialog.js";
|
| Dynamic Side Content |
ui5-dynamic-side-content
|
import "@ui5/webcomponents-fiori/dist/DynamicSideContent.js";
|
| Flexible Column Layout |
ui5-flexible-column-layout
|
import "@ui5/webcomponents-fiori/dist/FlexibleColumnLayout.js";
|
| Illustrated Message |
ui5-illustrated-message
|
import "@ui5/webcomponents-fiori/dist/IllustratedMessage.js";
|
| Media Gallery |
ui5-media-gallery
|
import "@ui5/webcomponents-fiori/dist/MediaGallery.js";
|
| Media Gallery Item |
ui5-media-gallery-item
|
comes with ui5-media-gallery
|
| Notification List Item |
ui5-li-notifcation
|
import "@ui5/webcomponents-fiori/dist/NotifcationListItem.js";
|
| Notification Group List Item |
ui5-li-notification-group
|
import "@ui5/webcomponents-fiori/dist/NotifcationListGroupItem.js";
|
| Notification Action |
ui5-notification-action
|
import "@ui5/webcomponents-fiori/dist/NotificationAction.js";
|
| Page |
ui5-page
|
import "@ui5/webcomponents-fiori/dist/Page.js";
|
| Product Switch |
ui5-product-switch
|
import "@ui5/webcomponents-fiori/dist/ProductSwitch.js";
|
| Product Switch Item |
ui5-product-switch-item
|
import "@ui5/webcomponents-fiori/dist/ProductSwitchItem.js";
|
| Shell Bar |
ui5-shellbar
|
import "@ui5/webcomponents-fiori/dist/ShellBar.js";
|
| Shell Bar Item |
ui5-shellbar-item
|
import "@ui5/webcomponents-fiori/dist/ShellBarItem.js";
|
| Side Navigation |
ui5-side-navigation
|
import "@ui5/webcomponents-fiori/dist/SideNavigation.js";
|
| Side Navigation Item |
ui5-side-navigation-item
|
import "@ui5/webcomponents-fiori/dist/SideNavigationItem.js";
|
| Side Navigation Sub Item |
ui5-side-navigation-sub-item
|
import "@ui5/webcomponents-fiori/dist/SideNavigationSubItem.js";
|
| Timeline |
ui5-timeline
|
import "@ui5/webcomponents-fiori/dist/Timeline.js";
|
| Timeline Item |
ui5-timeline-item
|
comes with ui5-timeline
|
| Upload Collection |
ui5-upload-collection
|
import "@ui5/webcomponents-fiori/dist/UploadCollection.js";
|
| Upload Collection Item |
ui5-upload-collection-item
|
import "@ui5/webcomponents-fiori/dist/UploadCollectionItem.js";
|
| View Settings Dialog |
ui5-view-settings-dialog
|
import "@ui5/webcomponents-fiori/dist/ViewSettingsDialog.js";
|
| View Settings Dialog - Sort Item |
ui5-sort-item
|
import "@ui5/webcomponents-fiori/dist/SortItem.js";
|
| View Settings Dialog - Filter Item |
ui5-filter-item
|
import "@ui5/webcomponents-fiori/dist/FilterItem.js";
|
| View Settings Dialog - Filter Item Option |
ui5-filter-item-option
|
import "@ui5/webcomponents-fiori/dist/FilterItemOption.js";
|
| Wizard |
ui5-wizard
|
import "@ui5/webcomponents-fiori/dist/Wizard.js";
|
| Wizard Step |
ui5-wizard-step
|
comes with ui5-wizard
|
@ui5/webcomponents https://www.npmjs.com/package/@ui5/webcomponents
| Web Component | Tag name | Module import |
|---|---|---|
| Avatar |
ui5-avatar
|
import "@ui5/webcomponents/dist/Avatar.js";
|
| Avatar Group |
ui5-avatar-group
|
import "@ui5/webcomponents/dist/AvatarGroup.js";
|
| Badge |
ui5-badge
|
import "@ui5/webcomponents/dist/Badge.js";
|
| Breadcrumbs |
ui5-breadcrumbs
|
import "@ui5/webcomponents/dist/Breadcrumbs.js";
|
| Breadcrumbs Item |
ui5-breadcrumbs-item
|
comes with ui5-breadcrumbs
|
| Badge |
ui5-badge
|
import "@ui5/webcomponents/dist/Badge.js";
|
| Busy Indicator |
ui5-busy-indicator
|
import "@ui5/webcomponents/dist/BusyIndicator.js";
|
| Button |
ui5-button
|
import "@ui5/webcomponents/dist/Button.js";
|
| Calendar |
ui5-calendar
|
import "@ui5/webcomponents/dist/Calendar.js";
|
| Calendar Date |
ui5-calendar-date
|
comes with ui5-calendar
|
| Card |
ui5-card
|
import "@ui5/webcomponents/dist/Card.js";
|
| CardHeader |
ui5-card-header
|
import "@ui5/webcomponents/dist/CardHeader.js";
|
| Carousel |
ui5-carousel
|
import "@ui5/webcomponents/dist/Carousel.js";
|
| Checkbox |
ui5-checkbox
|
import "@ui5/webcomponents/dist/CheckBox.js";
|
| Color Palette |
ui5-color-palette
|
import "@ui5/webcomponents/dist/ColorPalette.js";
|
| Color Palette Item |
ui5-color-palette-item
|
comes with ui5-color-palette
|
| Color Palette Popover |
ui5-color-palette-popover
|
comes with ui5-color-palette-popover
|
| Color Picker |
ui5-color-picker
|
import "@ui5/webcomponents/dist/ComboPicker.js";
|
| ComboBox |
ui5-combobox
|
import "@ui5/webcomponents/dist/ComboBox.js";
|
| ComboBox Item |
ui5-cb-item
|
comes with ui5-combobox
|
| ComboBox Group Item |
ui5-cb-group-item
|
comes with ui5-combobox
|
| Date Picker |
ui5-date-picker
|
import "@ui5/webcomponents/dist/DatePicker.js";
|
| Date Range Picker |
ui5-daterange-picker
|
import "@ui5/webcomponents/dist/DateRangePicker.js";
|
| Date Time Picker |
ui5-datetime-picker
|
import "@ui5/webcomponents/dist/DateTimePicker.js";
|
| Dialog |
ui5-dialog
|
import "@ui5/webcomponents/dist/Dialog.js";
|
| File Uploader |
ui5-file-uploader
|
import "@ui5/webcomponents/dist/FileUploader.js";
|
| Icon |
ui5-icon
|
import "@ui5/webcomponents/dist/Icon.js";
|
| Input |
ui5-input
|
import "@ui5/webcomponents/dist/Input.js";
|
| Label |
ui5-label
|
import "@ui5/webcomponents/dist/Label.js";
|
| Link |
ui5-link
|
import "@ui5/webcomponents/dist/Link.js";
|
| List |
ui5-list
|
import "@ui5/webcomponents/dist/List.js";
|
| List - Standard Item |
ui5-li
|
import "@ui5/webcomponents/dist/StandardListItem.js";
|
| List - Custom Item |
ui5-li-custom
|
import "@ui5/webcomponents/dist/CustomListItem.js";
|
| List - Group Header Item |
ui5-li-groupheader
|
import "@ui5/webcomponents/dist/GroupHeaderListItem.js";
|
| Message Strip |
ui5-message-strip
|
import "@ui5/webcomponents/dist/MessageStrip.js";
|
| Multi ComboBox |
ui5-multi-combobox
|
import "@ui5/webcomponents/dist/MultiComboBox.js";
|
| Multi ComboBox Item |
ui5-mcb-item
|
comes with ui5-multi-combobox
|
| Multi Input |
ui5-multi-input
|
import "@ui5/webcomponents/dist/MultiInput.js";
|
| Panel |
ui5-panel
|
import "@ui5/webcomponents/dist/Panel.js";
|
| Popover |
ui5-popover
|
import "@ui5/webcomponents/dist/Popover.js";
|
| ProgressIndicator |
ui5-progress-indicator
|
import "@ui5/webcomponents/dist/ProgressIndicator.js";
|
| Radio Button |
ui5-radio-button
|
import "@ui5/webcomponents/dist/RadioButton.js";
|
| Range Slider |
ui5-range-slider
|
import "@ui5/webcomponents/dist/RangeSlider.js";
|
| Rating Indicator |
ui5-rating-indicator
|
import "@ui5/webcomponents/dist/RatingIndicator.js";
|
| Responsive Popover |
ui5-responsive-popover
|
import "@ui5/webcomponents/dist/ResponsivePopover.js";
|
| Segmented Button |
ui5-segmented-button
|
import "@ui5/webcomponents/dist/SegmentedButton.js";
|
| Segmented Button Item |
ui5-segmented-button-item
|
comes with ui5-segmented-button
|
| Select |
ui5-select
|
import "@ui5/webcomponents/dist/Select.js";
|
| Select Option |
ui5-option
|
comes with ui5-select
|
| Slider |
ui5-slider
|
import "@ui5/webcomponents/dist/Slider.js";
|
| Split Button |
ui5-split-button
|
import "@ui5/webcomponents/dist/SplitButton.js";
|
| Step Input |
ui5-step-input
|
import "@ui5/webcomponents/dist/StepInput.js";
|
| Suggestion Item |
ui5-suggestion-item
|
comes with InputSuggestions.js feature - see below
|
| Switch |
ui5-switch
|
import "@ui5/webcomponents/dist/Switch.js";
|
| Tab Container |
ui5-tabcontainer
|
import "@ui5/webcomponents/dist/TabContainer.js";
|
| Tab |
ui5-tab
|
import "@ui5/webcomponents/dist/Tab.js";
|
| Tab Separator |
ui5-tab-separator
|
import "@ui5/webcomponents/dist/TabSeparator.js";
|
| Table |
ui5-table
|
import "@ui5/webcomponents/dist/Table.js";
|
| Table Column |
ui5-table-column
|
import "@ui5/webcomponents/dist/TableColumn.js";
|
| Table Row |
ui5-table-row
|
import "@ui5/webcomponents/dist/TableRow.js";
|
| Table Group Row |
ui5-table-group-row
|
import "@ui5/webcomponents/dist/TableGroupRow.js";
|
| Table Cell |
ui5-table-cell
|
import "@ui5/webcomponents/dist/TableCell.js";
|
| Textarea |
ui5-textarea
|
import "@ui5/webcomponents/dist/TextArea.js";
|
| TimePicker |
ui5-time-picker
|
import "@ui5/webcomponents/dist/TimePicker.js";
|
| Title |
ui5-title
|
import "@ui5/webcomponents/dist/Title.js";
|
| Toast |
ui5-toast
|
import "@ui5/webcomponents/dist/Toast.js";
|
| Toggle Button |
ui5-toggle-button
|
import "@ui5/webcomponents/dist/ToggleButton.js";
|
| Tree |
ui5-tree
|
import "@ui5/webcomponents/dist/Tree.js";
|
| Tree Item |
ui5-tree-item
|
comes with ui5-tree
|
webcomponents-fiori相关推荐
- 用React开发SAP Fiori应用
Jerry曾经写过两篇文章: SAP Fiori + Vue = ? - 2018年12月18日 Fiori Fundamentals和SAP UI5 Web Components - 2019年2月 ...
- Fiori Fundamentals和SAP UI5 Web Components
这周有位同事邀请我给团队讲一讲SAP技术的演进历史,所以我准备了下面几个主题来介绍. 其中SAP的技术回顾和演进,我的思路就是从前后台两方面分别介绍. 我画了一张非常简单的图: 去年5月我写过一篇文章 ...
- 《SAP FIORI 开发入门》课程答疑 第二期
课程上线已经一个星期,本人也接到了同学们提出的一些问题.在这里把典型的问题的回答重新整理一下,帮助后来的同学. 再次放上课程的连接: SAP FIORI开发入门 希望老师能够再放开一章免费的课程. 已 ...
- SAP Fiori学习笔记
资料链接:有些是需要自带梯子的哦- Fiori Design Guidelinesexperience.sap.com戴团长:SAP Fiori Designzhuanlan.zhihu.com如 ...
- SAP Fiori应用的三种部署方式
封面图片来自Google搜索,关键字: Fiori Deployment 方式1 On premise环境下以BSP应用作为Fiori应用部署和运行的载体 在SAP成都labs我曾经担任过CRM这几个 ...
- 如何将UI5应用部署到Fiori On-Premise和On-Cloud的Launchpad上去
On-Premise Launchpad 具体步骤参考我的博客: 如何将BSP应用配置成Fiori Launchpad上的一个tile On-Cloud Launchpad Fiori Cloud L ...
- SAP Fiori + Vue = ？
2017年3月28日,我到国内一个SAP CRM客户那里,同他们的架构师关于二次开发的UI框架选择SAP UI5还是Vue进行了一番探讨.回到SAP研究院之后,我把这个问题扔到了公司的微信群里,引起了 ...
- SAP Fiori开发工具——Eclipse环境搭建
SAP Fiori开发工具--Eclipse环境搭建 这里我们选择Eclipse Web的Mars版本进行下载. 进入Eclipse官网:Eclipse Downloads | The Eclipse ...
- 【学习笔记】SAP Fiori相关概念介绍
SAP Fiori相关概念介绍 SAP Fiori是由SAP公司开发并实施维护的,它可以称之为前端UI技术框架,也可以称之为前端的交互系统,更可以称之为前端的交互标准,三者合一,我们可以称之为全新的用 ...
- 【转：SAP学习篇】Fiori 的开发工具
Fiori 的开发工具基本包含了如下三个: SAP HANA Studio/Eclipse SAP WebIDE ABAP/4 SAP HANA Studio/Eclipse SAP HANA Stu ...
最新文章
- 数字通信介绍（5）什么是MIMO？
- SonarQube代码质量管理平台安装与使用--转载
- python和sqlserver_利用python实现mysql数据库向sqlserver的同步
- CentOS 7 yum方式快速安装MongoDB
- hibernate JPA 双向多对多 bi-directional many-to-many association
- 基于Web Services建立Asp与Asp.Net之间Session数据桥的应用研究
- 云计算再次升温 百度亮剑
- gradle引入依赖:_Gradle入门：依赖管理
- android自定义adapter怎么优化,Android必学-BaseAdapter的使用与优化
- 托管非托管_如何利用Kubernetes的力量来优化您的托管成本
- django 1.8 官方文档翻译： 1-2-3 编写你的第一个Django应用，第3部分
- 【31】将文件间的编译依存关系降至最低
- 第十篇：Map/Reduce 工作机制分析 - 数据的流向分析
- 具体数学-第10课（素数和阶乘的有趣性质）
- svn 同步 linux,linux SVN 中 配置钩子 实现 线上项目同步
- java 悬浮提示框_弹出提示框的方式——java
- 错排公式的推导及应用
- cocos-lua 获取鼠标点击位置
- 小学生机器人挑战赛_适合小学生参加的机器人比赛有哪些？
- 动态网站加速,cdn义不容辞