@ui5/webcomponents 1.9.3 → 1.9.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +19 -0
- package/LICENSE.txt +201 -0
- package/dist/AvatarGroup.js +2 -19
- package/dist/assets/test/pages/72override.html.dda35518.css +1 -0
- package/dist/assets/test/pages/AnimanitionOff.html.b7566ecc.css +1 -0
- package/dist/assets/test/pages/Avatar.html.62cc0573.css +1 -0
- package/dist/assets/test/pages/AvatarGroup.html.20647fe1.css +1 -0
- package/dist/assets/test/pages/Badge.html.bcc1c9a3.css +1 -0
- package/dist/assets/test/pages/Breadcrumbs.html.5753069f.css +1 -0
- package/dist/assets/test/pages/BusyIndicator.html.ce95c23c.css +1 -0
- package/dist/assets/test/pages/Button.html.957848f0.css +1 -0
- package/dist/assets/test/pages/Calendar.html.9ff42e30.css +1 -0
- package/dist/assets/test/pages/Card.html.8c5e4756.css +1 -0
- package/dist/assets/test/pages/Carousel.html.fcdd32a7.css +1 -0
- package/dist/assets/test/pages/CheckBox.html.08ae630d.css +1 -0
- package/dist/assets/test/pages/ColorPalette.html.8c4c4ca3.css +1 -0
- package/dist/assets/test/pages/ColorPalettePopover.html.727f90e2.css +1 -0
- package/dist/assets/test/pages/ColorPicker.html.cc0c0d29.css +1 -0
- package/dist/assets/test/pages/ComboBox.html.14fbc3aa.css +1 -0
- package/dist/assets/test/pages/ComboBox.html.9e0c6210.js +1 -0
- package/dist/assets/test/pages/Components.html.b41617c5.css +1 -0
- package/dist/assets/test/pages/CoreControls.html.dabd050c.css +1 -0
- package/dist/assets/test/pages/CoreControls_exp.html.46ab2dc9.css +1 -0
- package/dist/assets/test/pages/CustomCSS.html.4d6e9b1f.css +1 -0
- package/dist/assets/test/pages/DatePicker.html.e667d0b8.css +1 -0
- package/dist/assets/test/pages/DatePicker_test_page.html.882ab55e.css +1 -0
- package/dist/assets/test/pages/DateRangePicker.html.1b5072fd.css +1 -0
- package/dist/assets/test/pages/DateTimePicker.html.eff0e2e0.css +1 -0
- package/dist/assets/test/pages/DayPicker.html.5700622a.css +1 -0
- package/dist/assets/test/pages/Dialog.html.329cb1dc.css +1 -0
- package/dist/assets/test/pages/DialogLifecycle.html.e4ac6ba2.css +1 -0
- package/dist/assets/test/pages/DialogSemantic.html.f61ec13d.css +1 -0
- package/dist/assets/test/pages/DurationPicker.html.92ecf486.css +1 -0
- package/dist/assets/test/pages/Eventing.html.cd934528.css +1 -0
- package/dist/assets/test/pages/FileUploader.html.30b8cbbd.css +1 -0
- package/dist/assets/test/pages/FormSupport.html.4e02207b.css +1 -0
- package/dist/assets/test/pages/HCB.html.d458990b.css +1 -0
- package/dist/assets/test/pages/Icon.html.37ed8a16.js +1 -0
- package/dist/assets/test/pages/Icon.html.be3b1acc.css +1 -0
- package/dist/assets/test/pages/Input.html.85ce57b4.css +1 -0
- package/dist/assets/test/pages/Input_quickview.html.86df3de3.css +1 -0
- package/dist/assets/test/pages/InputsAlignment.html.5c5593c2.css +1 -0
- package/dist/assets/test/pages/ItemNavigation.html.f5758aae.css +1 -0
- package/dist/assets/test/pages/Kitchen.html.d0d90fc6.css +1 -0
- package/dist/assets/test/pages/Kitchen.openui5.html.910e3d52.css +1 -0
- package/dist/assets/test/pages/Label.html.e994dc8e.css +1 -0
- package/dist/assets/test/pages/Label.html.eeaddd05.js +4 -0
- package/dist/assets/test/pages/Link.html.d4c480d9.css +1 -0
- package/dist/assets/test/pages/List.html.65a3c4b3.css +1 -0
- package/dist/assets/test/pages/ListGrowing_Button.html.49bbaf80.css +1 -0
- package/dist/assets/test/pages/ListGrowing_Scroll.html.841dd1ed.css +1 -0
- package/dist/assets/test/pages/List_keyboard_support.html.a7297baf.css +1 -0
- package/dist/assets/test/pages/List_test_page.html.356d4e16.css +1 -0
- package/dist/assets/test/pages/LitKeyFunction.html.f3f9d649.css +1 -0
- package/dist/assets/test/pages/MemoryLeak.html.35d77e5e.css +1 -0
- package/dist/assets/test/pages/Menu.html.a758a26d.css +1 -0
- package/dist/assets/test/pages/MessagePage.html.30ffc162.css +1 -0
- package/dist/assets/test/pages/MessageStrip.html.8c2c85d5.css +1 -0
- package/dist/assets/test/pages/MultiComboBox.html.f06e18eb.css +1 -0
- package/dist/assets/test/pages/MultiInput.html.1c75cdc2.css +1 -0
- package/dist/assets/test/pages/MultiInput_Suggestions.html.79cd0348.css +1 -0
- package/dist/assets/test/pages/OpenUI5.html.cf1daa05.css +1 -0
- package/dist/assets/test/pages/Panel.html.399730d1.css +1 -0
- package/dist/assets/test/pages/Popover.html.87315ecf.css +1 -0
- package/dist/assets/test/pages/PopoverArrowBounds.html.c1e5feb1.css +1 -0
- package/dist/assets/test/pages/Popups.html.38b5aa5e.js +1 -0
- package/dist/assets/test/pages/Popups.html.bb021765.css +1 -0
- package/dist/assets/test/pages/ProgressIndicator.html.d61b0c53.css +1 -0
- package/dist/assets/test/pages/RTL.html.dbeca857.css +1 -0
- package/dist/assets/test/pages/RadioButton.html.ccfd1850.css +1 -0
- package/dist/assets/test/pages/RangeSlider.html.437a9174.css +1 -0
- package/dist/assets/test/pages/RatingIndicator.html.737cd73b.css +1 -0
- package/dist/assets/test/pages/ResizeHandler.html.ed7c5d20.css +1 -0
- package/dist/assets/test/pages/ResponsivePopover.html.6f67ae07.css +1 -0
- package/dist/assets/test/pages/SegmentedButton.html.8678479b.css +1 -0
- package/dist/assets/test/pages/Select.html.9c98a470.css +1 -0
- package/dist/assets/test/pages/Simple.html.8f2ddb30.css +1 -0
- package/dist/assets/test/pages/Slider.html.8ea10965.css +1 -0
- package/dist/assets/test/pages/SplitButton.html.5c992973.css +1 -0
- package/dist/assets/test/pages/StepInput.html.f22c112d.css +1 -0
- package/dist/assets/test/pages/Switch.html.a4f3262f.css +1 -0
- package/dist/assets/test/pages/TabContainer.html.7f2ade15.css +1 -0
- package/dist/assets/test/pages/Table-perf-pure.html.fce52e4b.css +1 -0
- package/dist/assets/test/pages/Table-perf.html.88634378.css +1 -0
- package/dist/assets/test/pages/Table.html.c43386f4.css +1 -0
- package/dist/assets/test/pages/Table2.html.aca0c111.css +1 -0
- package/dist/assets/test/pages/TableAllPopin.html.ad586de4.css +1 -0
- package/dist/assets/test/pages/TableCustomStyling.html.a85167d6.css +1 -0
- package/dist/assets/test/pages/TableGrouping.html.602ae2ad.css +1 -0
- package/dist/assets/test/pages/TableGrowingWithButton.html.5a39b2bf.css +1 -0
- package/dist/assets/test/pages/TableGrowingWithScroll.html.8ef93d31.css +1 -0
- package/dist/assets/test/pages/TableSelection.html.dba2d678.css +1 -0
- package/dist/assets/test/pages/TextArea.html.f8e10fd6.css +1 -0
- package/dist/assets/test/pages/TimePicker.html.9a4bb300.css +1 -0
- package/dist/assets/test/pages/TimeSelection.html.8ad57759.css +1 -0
- package/dist/assets/test/pages/Title.html.7bb51811.css +1 -0
- package/dist/assets/test/pages/Toast.html.47a93be2.css +1 -0
- package/dist/assets/test/pages/ToggleButton.html.3b7dbb8c.css +1 -0
- package/dist/assets/test/pages/Tree.html.74fe2a1d.css +1 -0
- package/dist/assets/test/pages/WheelSlider_Test_Page.html.8a9a5e49.css +1 -0
- package/dist/assets/test/pages/form.html.f0f82118.css +1 -0
- package/dist/assets/test/pages/i18n-defaultLang.html.b9d79c6b.css +1 -0
- package/dist/assets/test/pages/i18n-demo.html.c6751b5c.css +1 -0
- package/dist/test/pages/72override.html +33 -0
- package/dist/test/pages/AnimanitionOff.html +52 -0
- package/dist/test/pages/Avatar.html +265 -0
- package/dist/test/pages/AvatarGroup.html +376 -0
- package/dist/test/pages/Badge.html +75 -0
- package/dist/test/pages/Breadcrumbs.html +239 -0
- package/dist/test/pages/BusyIndicator.html +255 -0
- package/dist/test/pages/Button.html +267 -0
- package/dist/test/pages/Calendar.html +96 -0
- package/dist/test/pages/Card.html +347 -0
- package/dist/test/pages/Carousel.html +574 -0
- package/dist/test/pages/CheckBox.html +76 -0
- package/dist/test/pages/ColorPalette.html +126 -0
- package/dist/test/pages/ColorPalettePopover.html +141 -0
- package/dist/test/pages/ColorPicker.html +66 -0
- package/dist/test/pages/ComboBox.html +279 -0
- package/dist/test/pages/Components.html +106 -0
- package/dist/test/pages/CoreControls.html +203 -0
- package/dist/test/pages/CoreControls_exp.html +203 -0
- package/dist/test/pages/CustomCSS.html +55 -0
- package/dist/test/pages/DatePicker.html +193 -0
- package/dist/test/pages/DatePicker_test_page.html +97 -0
- package/dist/test/pages/DateRangePicker.html +64 -0
- package/dist/test/pages/DateTimePicker.html +190 -0
- package/dist/test/pages/DayPicker.html +37 -0
- package/dist/test/pages/Dialog.html +667 -0
- package/dist/test/pages/DialogLifecycle.html +62 -0
- package/dist/test/pages/DialogSemantic.html +59 -0
- package/dist/test/pages/DurationPicker.html +76 -0
- package/dist/test/pages/Eventing.html +33 -0
- package/dist/test/pages/FileUploader.html +138 -0
- package/dist/test/pages/FormSupport.html +59 -0
- package/dist/test/pages/HCB.html +45 -0
- package/dist/test/pages/Icon.html +257 -0
- package/dist/test/pages/Icon_custom.html +26 -0
- package/dist/test/pages/Input.html +722 -0
- package/dist/test/pages/InputFieldMinWidth.html +72 -0
- package/dist/test/pages/Input_quickview.html +204 -0
- package/dist/test/pages/InputsAlignment.html +131 -0
- package/dist/test/pages/InputsLazyLoading.html +244 -0
- package/dist/test/pages/ItemNavigation.html +94 -0
- package/dist/test/pages/Kitchen.html +638 -0
- package/dist/test/pages/Kitchen.openui5.html +570 -0
- package/dist/test/pages/Label.html +161 -0
- package/dist/test/pages/Link.html +201 -0
- package/dist/test/pages/List.html +432 -0
- package/dist/test/pages/ListGrowing_Button.html +64 -0
- package/dist/test/pages/ListGrowing_Scroll.html +93 -0
- package/dist/test/pages/List_keyboard_support.html +132 -0
- package/dist/test/pages/List_test_page.html +334 -0
- package/dist/test/pages/LitKeyFunction.html +40 -0
- package/dist/test/pages/MemoryLeak.html +78 -0
- package/dist/test/pages/Menu.html +79 -0
- package/dist/test/pages/MessagePage.html +39 -0
- package/dist/test/pages/MessageStrip.html +55 -0
- package/dist/test/pages/MultiComboBox.html +446 -0
- package/dist/test/pages/MultiInput.html +409 -0
- package/dist/test/pages/MultiInput_Suggestions.html +161 -0
- package/dist/test/pages/OpenUI5.html +83 -0
- package/dist/test/pages/Panel.html +227 -0
- package/dist/test/pages/Popover.html +614 -0
- package/dist/test/pages/PopoverArrowBounds.html +54 -0
- package/dist/test/pages/Popups.html +133 -0
- package/dist/test/pages/ProgressIndicator.html +151 -0
- package/dist/test/pages/RTL.html +118 -0
- package/dist/test/pages/RadioButton.html +201 -0
- package/dist/test/pages/RangeSlider.html +69 -0
- package/dist/test/pages/RatingIndicator.html +97 -0
- package/dist/test/pages/ResizeHandler.html +74 -0
- package/dist/test/pages/ResponsivePopover.html +204 -0
- package/dist/test/pages/SegmentedButton.html +116 -0
- package/dist/test/pages/Select.html +240 -0
- package/dist/test/pages/Simple.html +34 -0
- package/dist/test/pages/Slider.html +79 -0
- package/dist/test/pages/SplitButton.html +100 -0
- package/dist/test/pages/StepInput.html +164 -0
- package/dist/test/pages/Switch.html +88 -0
- package/dist/test/pages/TabContainer.html +876 -0
- package/dist/test/pages/Table-perf-pure.html +73 -0
- package/dist/test/pages/Table-perf.html +76 -0
- package/dist/test/pages/Table.html +2808 -0
- package/dist/test/pages/Table2.html +53 -0
- package/dist/test/pages/TableAllPopin.html +205 -0
- package/dist/test/pages/TableCustomStyling.html +89 -0
- package/dist/test/pages/TableGrouping.html +109 -0
- package/dist/test/pages/TableGrowingWithButton.html +805 -0
- package/dist/test/pages/TableGrowingWithScroll.html +801 -0
- package/dist/test/pages/TableSelection.html +445 -0
- package/dist/test/pages/TextArea.html +212 -0
- package/dist/test/pages/TimePicker.html +81 -0
- package/dist/test/pages/TimeSelection.html +31 -0
- package/dist/test/pages/Title.html +37 -0
- package/dist/test/pages/Toast.html +111 -0
- package/dist/test/pages/ToggleButton.html +69 -0
- package/dist/test/pages/Tree.html +294 -0
- package/dist/test/pages/WheelSlider_Test_Page.html +26 -0
- package/dist/test/pages/base/DOMObserver.html +20 -0
- package/dist/test/pages/base/InvisibleMessage.html +44 -0
- package/dist/test/pages/form.html +123 -0
- package/dist/test/pages/i18n-defaultLang.html +31 -0
- package/dist/test/pages/i18n-demo.html +79 -0
- package/package.json +9 -8
- package/src/AvatarGroup.js +2 -19
|
@@ -0,0 +1,257 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html>
|
|
3
|
+
<head>
|
|
4
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
|
5
|
+
<meta charset="utf-8">
|
|
6
|
+
|
|
7
|
+
<title>Icon</title>
|
|
8
|
+
<script>
|
|
9
|
+
// delete Document.prototype.adoptedStyleSheets;
|
|
10
|
+
</script>
|
|
11
|
+
<script data-id="sap-ui-config" type="application/json">
|
|
12
|
+
{
|
|
13
|
+
"language": "EN",
|
|
14
|
+
"xx-wc-size-compact": false
|
|
15
|
+
}
|
|
16
|
+
</script>
|
|
17
|
+
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
|
|
21
|
+
|
|
22
|
+
|
|
23
|
+
<script type="module" crossorigin src="/assets/test/pages/Icon.html.37ed8a16.js"></script>
|
|
24
|
+
<link rel="modulepreload" href="/assets/bundle.common.9d78332e.js">
|
|
25
|
+
<link rel="stylesheet" href="/assets/test/pages/Icon.html.be3b1acc.css">
|
|
26
|
+
</head>
|
|
27
|
+
|
|
28
|
+
<body class="icon1auto">
|
|
29
|
+
<ui5-toggle-button id="myBtn">Fiori 3/Next</ui5-toggle-button>
|
|
30
|
+
<br>
|
|
31
|
+
<ui5-icon title="add equipment" class="icon2auto" id="myIcon" show-tooltip accessible-name="Hello SVG Icon" name="add-equipment"></ui5-icon>
|
|
32
|
+
<ui5-icon name="direction-arrows" class="icon-blue icon-medium"></ui5-icon>
|
|
33
|
+
<ui5-icon name="male" class="icon-blue icon-small"></ui5-icon>
|
|
34
|
+
<ui5-icon name="female" class="icon-red"></ui5-icon>
|
|
35
|
+
<ui5-icon name="accept" class="icon-red icon-medium"></ui5-icon>
|
|
36
|
+
<ui5-icon name="action" class="icon-red icon-small"></ui5-icon>
|
|
37
|
+
<ui5-icon show-tooltip name="message-error"></ui5-icon>
|
|
38
|
+
|
|
39
|
+
<h3>Icon with aria-hidden="true"</h3>
|
|
40
|
+
<ui5-icon id="araHiddenIcon" name="add-employee" aria-hidden="true" class="icon-red icon-small"></ui5-icon>
|
|
41
|
+
|
|
42
|
+
<h3>Interactive Icon</h3>
|
|
43
|
+
<ui5-icon id="accRoleIcon" accessible-role="link" interactive class="samples-margin" accessible-name="Hello World" name="horizon/accept"></ui5-icon>
|
|
44
|
+
<ui5-icon
|
|
45
|
+
id="myInteractiveIcon"
|
|
46
|
+
interactive
|
|
47
|
+
name="add-equipment"
|
|
48
|
+
class="icon3auto">
|
|
49
|
+
</ui5-icon>
|
|
50
|
+
<br>
|
|
51
|
+
<ui5-input id="click-event-2"></ui5-input>
|
|
52
|
+
|
|
53
|
+
<br>
|
|
54
|
+
<ui5-icon name="add-employee"></ui5-icon>
|
|
55
|
+
<br>
|
|
56
|
+
<ui5-icon class="icon4auto" name="add-employee"></ui5-icon>
|
|
57
|
+
<ui5-icon class="icon5auto" name="factory"></ui5-icon>
|
|
58
|
+
<br>
|
|
59
|
+
|
|
60
|
+
<ui5-button icon="add-equipment"></ui5-button>
|
|
61
|
+
<div id="content"></div>
|
|
62
|
+
<ui5-icon name="appointment-2"></ui5-icon>
|
|
63
|
+
<ui5-icon name="appointment-2"></ui5-icon>
|
|
64
|
+
<ui5-icon name="appointment-2"></ui5-icon>
|
|
65
|
+
<ui5-icon name="appointment-2"></ui5-icon>
|
|
66
|
+
|
|
67
|
+
<br />
|
|
68
|
+
|
|
69
|
+
<ui5-date-picker class="icon6auto" placeholder="test" value="Value State None">
|
|
70
|
+
</ui5-date-picker>
|
|
71
|
+
|
|
72
|
+
<ui5-date-picker class="icon6auto" value-state="Success" value="Value State Success">
|
|
73
|
+
</ui5-date-picker>
|
|
74
|
+
|
|
75
|
+
<ui5-date-picker class="icon6auto" value-state="Warning" value="Value State Warning">
|
|
76
|
+
</ui5-date-picker>
|
|
77
|
+
|
|
78
|
+
<ui5-date-picker class="icon6auto" value-state="Error" value="Value State Error">
|
|
79
|
+
</ui5-date-picker>
|
|
80
|
+
|
|
81
|
+
<br/><br/>
|
|
82
|
+
|
|
83
|
+
<ui5-icon id="interactive-icon" name="add-equipment" class="icon-blue icon-medium" interactive></ui5-icon>
|
|
84
|
+
<ui5-icon id="non-interactive-icon" name="add-equipment" class="icon-blue icon-medium"></ui5-icon>
|
|
85
|
+
<ui5-input id="click-event" value="0"></ui5-input>
|
|
86
|
+
|
|
87
|
+
<br/>
|
|
88
|
+
<br/>
|
|
89
|
+
|
|
90
|
+
<ui5-button icon="overflow"></ui5-button>
|
|
91
|
+
<ui5-icon name="overflow" class="icon7auto"></ui5-icon>
|
|
92
|
+
<br>
|
|
93
|
+
<br>
|
|
94
|
+
|
|
95
|
+
<ui5-title>Some icons can display default tooltip</ui5-title>
|
|
96
|
+
<br>
|
|
97
|
+
<ui5-icon id="iconWithTooltip" name="save" show-tooltip></ui5-icon>
|
|
98
|
+
<ui5-icon name="overflow" show-tooltip></ui5-icon>
|
|
99
|
+
<ui5-icon name="settings" show-tooltip></ui5-icon>
|
|
100
|
+
|
|
101
|
+
<h3>Auto, SAP-icons, horizon</h3>
|
|
102
|
+
<ui5-icon name="company-view" class="icon-blue icon-medium"></ui5-icon>
|
|
103
|
+
<ui5-icon name="SAP-icons/company-view" class="icon-blue icon-medium"></ui5-icon>
|
|
104
|
+
<ui5-icon name="horizon/company-view" class="icon-blue icon-medium"></ui5-icon>
|
|
105
|
+
|
|
106
|
+
<h3>SAP Icons</h3>
|
|
107
|
+
<ui5-icon name="SAP-icons/appointment-2"></ui5-icon>
|
|
108
|
+
<ui5-icon name="SAP-icons/slim-arrow-down"></ui5-icon>
|
|
109
|
+
<ui5-icon name="SAP-icons/accept"></ui5-icon>
|
|
110
|
+
<ui5-icon name="SAP-icons/resize-corner"></ui5-icon>
|
|
111
|
+
<ui5-icon show-tooltip name="SAP-icons/error"></ui5-icon>
|
|
112
|
+
<ui5-icon show-tooltip name="SAP-icons/bookmark"></ui5-icon>
|
|
113
|
+
<ui5-icon show-tooltip name="SAP-icons/bookmark-2"></ui5-icon>
|
|
114
|
+
|
|
115
|
+
|
|
116
|
+
<h3>SAP Fiori Next Icons</h3>
|
|
117
|
+
<ui5-icon name="horizon/appointment-2"></ui5-icon>
|
|
118
|
+
<ui5-icon name="horizon/slim-arrow-down"></ui5-icon>
|
|
119
|
+
<ui5-icon name="horizon/accept"></ui5-icon>
|
|
120
|
+
<ui5-icon name="horizon/resize-corner"></ui5-icon>
|
|
121
|
+
<ui5-icon show-tooltip name="horizon/error"></ui5-icon>
|
|
122
|
+
<ui5-icon show-tooltip name="horizon/bookmark"></ui5-icon>
|
|
123
|
+
<ui5-icon show-tooltip name="horizon/bookmark-2"></ui5-icon>
|
|
124
|
+
|
|
125
|
+
<h3>SAP Fiori Tools Icons</h3>
|
|
126
|
+
<div class="snippet">
|
|
127
|
+
<ui5-icon class="samples-margin" name="tnt/actor"></ui5-icon>
|
|
128
|
+
<ui5-icon class="samples-margin" name="tnt/aggregator"></ui5-icon>
|
|
129
|
+
<ui5-icon class="samples-margin" name="tnt/association"></ui5-icon>
|
|
130
|
+
<ui5-icon class="samples-margin" name="tnt/network"></ui5-icon>
|
|
131
|
+
<ui5-icon class="samples-margin" name="tnt/repeater"></ui5-icon>
|
|
132
|
+
</div>
|
|
133
|
+
|
|
134
|
+
<h3>SAP business-suite Icons</h3>
|
|
135
|
+
<div class="snippet">
|
|
136
|
+
<ui5-icon class="samples-margin" name="business-suite/add-polygone"></ui5-icon>
|
|
137
|
+
<ui5-icon class="samples-margin" name="business-suite/2x1-grid-layout"></ui5-icon>
|
|
138
|
+
<ui5-icon class="samples-margin" name="business-suite/activate"></ui5-icon>
|
|
139
|
+
<ui5-icon class="samples-margin" name="business-suite/3d"></ui5-icon>
|
|
140
|
+
<ui5-icon class="samples-margin" name="business-suite/ab-testing"></ui5-icon>
|
|
141
|
+
</div>
|
|
142
|
+
|
|
143
|
+
<script>
|
|
144
|
+
var icon = document.getElementById("interactive-icon"),
|
|
145
|
+
nonInteractiveIcon = document.getElementById("non-interactive-icon"),
|
|
146
|
+
input = document.getElementById("click-event"),
|
|
147
|
+
input2 = document.getElementById("click-event-2"),
|
|
148
|
+
inputValue = 0;
|
|
149
|
+
inputValue2 = 0;
|
|
150
|
+
|
|
151
|
+
icon.addEventListener("ui5-click", function() {
|
|
152
|
+
input.value = ++inputValue;
|
|
153
|
+
});
|
|
154
|
+
|
|
155
|
+
nonInteractiveIcon.addEventListener("ui5-click", function() {
|
|
156
|
+
input.value = ++inputValue;
|
|
157
|
+
});
|
|
158
|
+
|
|
159
|
+
myInteractiveIcon.addEventListener("click", function() {
|
|
160
|
+
input2.value = ++inputValue2;
|
|
161
|
+
});
|
|
162
|
+
</script>
|
|
163
|
+
|
|
164
|
+
|
|
165
|
+
|
|
166
|
+
<script nomodule>
|
|
167
|
+
window["sap-ui-webcomponents-bundle"].getIconNames().then(function(iconNames) {
|
|
168
|
+
iconNames.forEach(function(iconName) {
|
|
169
|
+
var icon = document.createElement("ui5-icon");
|
|
170
|
+
icon.name = iconName;
|
|
171
|
+
allIcons.appendChild(icon);
|
|
172
|
+
});
|
|
173
|
+
});
|
|
174
|
+
</script>
|
|
175
|
+
|
|
176
|
+
|
|
177
|
+
<section id="allIcons">
|
|
178
|
+
<h3>All icons</h3>
|
|
179
|
+
</section>
|
|
180
|
+
|
|
181
|
+
<section class="sectionLTR1" dir="ltr">
|
|
182
|
+
<h3>Icons in ltr</h3>
|
|
183
|
+
<ui5-icon name="accept"></ui5-icon>
|
|
184
|
+
<ui5-icon name="sales-document"></ui5-icon>
|
|
185
|
+
<ui5-icon name="sales-notification"></ui5-icon>
|
|
186
|
+
<ui5-icon name="search"></ui5-icon>
|
|
187
|
+
<ui5-icon name="simple-payment"></ui5-icon>
|
|
188
|
+
<ui5-icon name="sound-loud"></ui5-icon>
|
|
189
|
+
<ui5-icon name="sound-off"></ui5-icon>
|
|
190
|
+
<ui5-icon name="sound"></ui5-icon>
|
|
191
|
+
<ui5-icon name="sys-help"></ui5-icon>
|
|
192
|
+
<ui5-icon name="text-align-justified"></ui5-icon>
|
|
193
|
+
<ui5-icon name="text-align-center"></ui5-icon>
|
|
194
|
+
<ui5-icon name="text-align-left"></ui5-icon>
|
|
195
|
+
<ui5-icon name="text-align-right"></ui5-icon>
|
|
196
|
+
<ui5-icon name="text-formatting"></ui5-icon>
|
|
197
|
+
<ui5-icon name="line-chart-time-axis"></ui5-icon>
|
|
198
|
+
<br>
|
|
199
|
+
<ui5-checkbox checked></ui5-checkbox>
|
|
200
|
+
</section>
|
|
201
|
+
|
|
202
|
+
<section class="sectionRTLNotMirrored" dir="rtl">
|
|
203
|
+
<h3>Icons in RTL, but not mirrored</h3>
|
|
204
|
+
<ui5-icon name="accept"></ui5-icon>
|
|
205
|
+
<ui5-icon name="sales-document"></ui5-icon>
|
|
206
|
+
<ui5-icon name="sales-notification"></ui5-icon>
|
|
207
|
+
<ui5-icon name="search"></ui5-icon>
|
|
208
|
+
<ui5-icon name="simple-payment"></ui5-icon>
|
|
209
|
+
<ui5-icon name="sound-loud"></ui5-icon>
|
|
210
|
+
<ui5-icon name="sound-off"></ui5-icon>
|
|
211
|
+
<ui5-icon name="sound"></ui5-icon>
|
|
212
|
+
<ui5-icon name="sys-help"></ui5-icon>
|
|
213
|
+
<ui5-icon name="text-align-justified"></ui5-icon>
|
|
214
|
+
<ui5-icon name="text-align-center"></ui5-icon>
|
|
215
|
+
<ui5-icon name="text-align-left"></ui5-icon>
|
|
216
|
+
<ui5-icon name="text-align-right"></ui5-icon>
|
|
217
|
+
<ui5-icon name="text-formatting"></ui5-icon>
|
|
218
|
+
<ui5-icon name="line-chart-time-axis"></ui5-icon>
|
|
219
|
+
<br>
|
|
220
|
+
<ui5-checkbox checked></ui5-checkbox>
|
|
221
|
+
</section>
|
|
222
|
+
|
|
223
|
+
<section class="sectionLTR2" dir="ltr">
|
|
224
|
+
<h3>Icons in LTR</h3>
|
|
225
|
+
<ui5-icon name="slim-arrow-left"></ui5-icon>
|
|
226
|
+
<ui5-icon name="slim-arrow-right"></ui5-icon>
|
|
227
|
+
<ui5-icon name="media-play"></ui5-icon>
|
|
228
|
+
<ui5-icon name="media-reverse"></ui5-icon>
|
|
229
|
+
<ui5-icon name="nav-back"></ui5-icon>
|
|
230
|
+
<ui5-icon name="trend-down"></ui5-icon>
|
|
231
|
+
<ui5-icon name="trend-up"></ui5-icon>
|
|
232
|
+
<ui5-icon name="undo"></ui5-icon>
|
|
233
|
+
<ui5-icon name="step"></ui5-icon>
|
|
234
|
+
</section>
|
|
235
|
+
|
|
236
|
+
<section class="sectionRTLMirrored" dir="rtl">
|
|
237
|
+
<h3>Icons in RTL and mirrored</h3>
|
|
238
|
+
<ui5-icon name="slim-arrow-left"></ui5-icon>
|
|
239
|
+
<ui5-icon name="slim-arrow-right"></ui5-icon>
|
|
240
|
+
<ui5-icon name="media-play"></ui5-icon>
|
|
241
|
+
<ui5-icon name="media-reverse"></ui5-icon>
|
|
242
|
+
<ui5-icon name="nav-back"></ui5-icon>
|
|
243
|
+
<ui5-icon name="trend-down"></ui5-icon>
|
|
244
|
+
<ui5-icon name="trend-up"></ui5-icon>
|
|
245
|
+
<ui5-icon name="undo"></ui5-icon>
|
|
246
|
+
<ui5-icon name="step"></ui5-icon>
|
|
247
|
+
</section>
|
|
248
|
+
|
|
249
|
+
<script>
|
|
250
|
+
myBtn.addEventListener("click", function(event) {
|
|
251
|
+
var theme = event.target.pressed ? "sap_horizon" : "sap_fiori_3";
|
|
252
|
+
var Conf = window["sap-ui-webcomponents-bundle"].configuration;
|
|
253
|
+
Conf.setTheme(theme);
|
|
254
|
+
});
|
|
255
|
+
</script>
|
|
256
|
+
</body>
|
|
257
|
+
</html>
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html>
|
|
3
|
+
<head>
|
|
4
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
|
5
|
+
<meta charset="utf-8">
|
|
6
|
+
|
|
7
|
+
<title>Custom Icon Colelction</title>
|
|
8
|
+
|
|
9
|
+
<script type="module" crossorigin src="/assets/bundle.common.9d78332e.js"></script>
|
|
10
|
+
</head>
|
|
11
|
+
|
|
12
|
+
<body>
|
|
13
|
+
<ui5-title>Custom Icon collection in Button and List Item</ui5-title>
|
|
14
|
+
<ui5-icon name="my-custom-icons/mark"></ui5-icon>
|
|
15
|
+
|
|
16
|
+
<ui5-button icon="my-custom-icons/mark"></ui5-button>
|
|
17
|
+
|
|
18
|
+
<ui5-avatar icon="my-custom-icons/mark"></ui5-avatar>
|
|
19
|
+
|
|
20
|
+
<ui5-list>
|
|
21
|
+
<ui5-li icon="my-custom-icons/mark" additional-text="Available">MacBook Air</ui5-li>
|
|
22
|
+
<ui5-li icon="my-custom-icons/mark" additional-text="Re-stock" description="#12331232131" additional-text-state="Error">Laptop Lenovo</ui5-li>
|
|
23
|
+
<ui5-li icon="my-custom-icons/mark" additional-text="Re-stock" description="#12331232131" additional-text-state="Information">IPhone 3</ui5-li>
|
|
24
|
+
</ui5-list>
|
|
25
|
+
</body>
|
|
26
|
+
</html>
|