@ui5/webcomponents 1.14.3 → 1.14.4
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/.vscode/diff/vulsCount.txt +1 -0
- package/.vscode/settings.json +3 -0
- package/package.json +7 -8
- package/LICENSE.txt +0 -201
- package/dist/assets/test/pages/ComboBox.html.81ae00e2.js +0 -1
- package/dist/assets/test/pages/Icon.html.1951ea7c.js +0 -1
- package/dist/assets/test/pages/Label.html.e50a04af.js +0 -4
- package/dist/assets/test/pages/Popups.html.d7a532db.js +0 -1
- package/dist/test/pages/72override.html +0 -33
- package/dist/test/pages/AnimanitionOff.html +0 -52
- package/dist/test/pages/Avatar.html +0 -264
- package/dist/test/pages/AvatarGroup.html +0 -376
- package/dist/test/pages/Badge.html +0 -75
- package/dist/test/pages/Breadcrumbs.html +0 -239
- package/dist/test/pages/BusyIndicator.html +0 -278
- package/dist/test/pages/Button.html +0 -273
- package/dist/test/pages/Calendar.html +0 -103
- package/dist/test/pages/Card.html +0 -347
- package/dist/test/pages/Carousel.html +0 -613
- package/dist/test/pages/CheckBox.html +0 -90
- package/dist/test/pages/ColorPalette.html +0 -126
- package/dist/test/pages/ColorPalettePopover.html +0 -141
- package/dist/test/pages/ColorPicker.html +0 -66
- package/dist/test/pages/ComboBox.html +0 -292
- package/dist/test/pages/Components.html +0 -106
- package/dist/test/pages/CoreControls.html +0 -203
- package/dist/test/pages/CoreControls_exp.html +0 -203
- package/dist/test/pages/CustomCSS.html +0 -55
- package/dist/test/pages/DatePicker.html +0 -211
- package/dist/test/pages/DatePicker_test_page.html +0 -109
- package/dist/test/pages/DateRangePicker.html +0 -67
- package/dist/test/pages/DateTimePicker.html +0 -199
- package/dist/test/pages/DateTimePicker_Timezone.html +0 -72
- package/dist/test/pages/DayPicker.html +0 -37
- package/dist/test/pages/Dialog.html +0 -813
- package/dist/test/pages/DialogLifecycle.html +0 -62
- package/dist/test/pages/DialogSemantic.html +0 -58
- package/dist/test/pages/Eventing.html +0 -33
- package/dist/test/pages/F6Test1.html +0 -42
- package/dist/test/pages/F6Test2.html +0 -42
- package/dist/test/pages/F6Test3.html +0 -39
- package/dist/test/pages/F6Test4.html +0 -46
- package/dist/test/pages/F6Test5.html +0 -42
- package/dist/test/pages/F6Test6.html +0 -39
- package/dist/test/pages/F6Test7.html +0 -36
- package/dist/test/pages/FileUploader.html +0 -138
- package/dist/test/pages/FormComponents.html +0 -76
- package/dist/test/pages/FormSupport.html +0 -59
- package/dist/test/pages/HCB.html +0 -45
- package/dist/test/pages/Icon.html +0 -278
- package/dist/test/pages/Icon_and_theming.html +0 -67
- package/dist/test/pages/Icon_custom.html +0 -26
- package/dist/test/pages/Input.html +0 -731
- package/dist/test/pages/InputFieldLabels.html +0 -355
- package/dist/test/pages/InputFieldMinWidth.html +0 -230
- package/dist/test/pages/InputIcons.html +0 -80
- package/dist/test/pages/Input_quickview.html +0 -204
- package/dist/test/pages/InputsAlignment.html +0 -131
- package/dist/test/pages/InputsLazyLoading.html +0 -244
- package/dist/test/pages/ItemNavigation.html +0 -94
- package/dist/test/pages/Kitchen.html +0 -637
- package/dist/test/pages/Kitchen.openui5.html +0 -570
- package/dist/test/pages/Label.html +0 -192
- package/dist/test/pages/Link.html +0 -201
- package/dist/test/pages/List.html +0 -465
- package/dist/test/pages/ListGrowing_Button.html +0 -64
- package/dist/test/pages/ListGrowing_Scroll.html +0 -93
- package/dist/test/pages/List_keyboard_support.html +0 -130
- package/dist/test/pages/List_test_page.html +0 -395
- package/dist/test/pages/LitKeyFunction.html +0 -40
- package/dist/test/pages/MemoryLeak.html +0 -78
- package/dist/test/pages/Menu.html +0 -161
- package/dist/test/pages/MessagePage.html +0 -39
- package/dist/test/pages/MessageStrip.html +0 -55
- package/dist/test/pages/MultiComboBox.html +0 -489
- package/dist/test/pages/MultiInput.html +0 -451
- package/dist/test/pages/MultiInput_Suggestions.html +0 -161
- package/dist/test/pages/OpenUI5-second.html +0 -60
- package/dist/test/pages/OpenUI5.html +0 -83
- package/dist/test/pages/OpenUI5Nightly.html +0 -83
- package/dist/test/pages/Panel.html +0 -226
- package/dist/test/pages/Popover.html +0 -658
- package/dist/test/pages/PopoverArrowBounds.html +0 -52
- package/dist/test/pages/Popups.html +0 -131
- package/dist/test/pages/ProgressIndicator.html +0 -151
- package/dist/test/pages/RTL.html +0 -118
- package/dist/test/pages/RadioButton.html +0 -201
- package/dist/test/pages/RangeSlider.html +0 -96
- package/dist/test/pages/RatingIndicator.html +0 -97
- package/dist/test/pages/ResizeHandler.html +0 -74
- package/dist/test/pages/ResponsivePopover.html +0 -267
- package/dist/test/pages/SegmentedButton.html +0 -151
- package/dist/test/pages/Select.html +0 -272
- package/dist/test/pages/Simple.html +0 -25
- package/dist/test/pages/Slider.html +0 -79
- package/dist/test/pages/SplitButton.html +0 -101
- package/dist/test/pages/StepInput.html +0 -189
- package/dist/test/pages/Switch.html +0 -97
- package/dist/test/pages/TabContainer.html +0 -904
- package/dist/test/pages/Table-perf-pure.html +0 -73
- package/dist/test/pages/Table-perf.html +0 -76
- package/dist/test/pages/Table.html +0 -2808
- package/dist/test/pages/Table2.html +0 -53
- package/dist/test/pages/TableAllPopin.html +0 -228
- package/dist/test/pages/TableCustomStyling.html +0 -89
- package/dist/test/pages/TableGrouping.html +0 -109
- package/dist/test/pages/TableGrowingWithButton.html +0 -805
- package/dist/test/pages/TableGrowingWithScroll.html +0 -801
- package/dist/test/pages/TableSelection.html +0 -445
- package/dist/test/pages/Test.html +0 -15
- package/dist/test/pages/TextArea.html +0 -222
- package/dist/test/pages/TimePicker.html +0 -89
- package/dist/test/pages/TimeSelection.html +0 -31
- package/dist/test/pages/Title.html +0 -60
- package/dist/test/pages/Toast.html +0 -111
- package/dist/test/pages/ToggleButton.html +0 -71
- package/dist/test/pages/Tokenizer.html +0 -91
- package/dist/test/pages/Tree.html +0 -307
- package/dist/test/pages/TreeDynamic.html +0 -56
- package/dist/test/pages/WheelSlider_Test_Page.html +0 -26
- package/dist/test/pages/base/AriaLabelHelper.html +0 -334
- package/dist/test/pages/base/DOMObserver.html +0 -20
- package/dist/test/pages/base/IconCollection.html +0 -23
- package/dist/test/pages/base/IconCollectionInCustomTheme.html +0 -25
- package/dist/test/pages/base/IgnoreCustomElements.html +0 -26
- package/dist/test/pages/base/InvisibleMessage.html +0 -44
- package/dist/test/pages/form.html +0 -123
- package/dist/test/pages/i18n-defaultLang.html +0 -31
- package/dist/test/pages/i18n-demo.html +0 -79
|
@@ -1,904 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html>
|
|
3
|
-
|
|
4
|
-
<head>
|
|
5
|
-
<meta charset="utf-8">
|
|
6
|
-
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
|
7
|
-
<title>Tab Container</title>
|
|
8
|
-
|
|
9
|
-
<script data-ui5-config type="application/json">
|
|
10
|
-
{
|
|
11
|
-
"theme": "sap_fiori_3",
|
|
12
|
-
"language": "EN"
|
|
13
|
-
}
|
|
14
|
-
</script>
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
<script type="module" crossorigin src="/assets/bundle.common.ad270030.js"></script>
|
|
18
|
-
<link rel="stylesheet" href="/assets/TabContainer.718b814c.css">
|
|
19
|
-
</head>
|
|
20
|
-
|
|
21
|
-
<body class="tabcontainer1auto">
|
|
22
|
-
|
|
23
|
-
<header class="header">
|
|
24
|
-
<h1 class="header-title">ui5-tabcontainer</h1>
|
|
25
|
-
</header>
|
|
26
|
-
<ui5-toggle-button id="densityToggle">Compact</ui5-toggle-button>
|
|
27
|
-
|
|
28
|
-
<section>
|
|
29
|
-
<h2>Nested Tabs</h2>
|
|
30
|
-
<ui5-tabcontainer id="tabContainerNestedTabs" collapsed>
|
|
31
|
-
<ui5-tab text="One">
|
|
32
|
-
<ui5-button>Button 1</ui5-button>
|
|
33
|
-
</ui5-tab>
|
|
34
|
-
|
|
35
|
-
<ui5-tab-separator></ui5-tab-separator>
|
|
36
|
-
|
|
37
|
-
<ui5-tab text="Two">
|
|
38
|
-
<ui5-button id="button2">Button 2</ui5-button>
|
|
39
|
-
|
|
40
|
-
<ui5-tab slot="subTabs" text="2.1">
|
|
41
|
-
<ui5-button id="button21">Button 21</ui5-button>
|
|
42
|
-
|
|
43
|
-
<ui5-tab slot="subTabs" text="2.1.1" selected>
|
|
44
|
-
<ui5-button id="button211">Button 211</ui5-button>
|
|
45
|
-
</ui5-tab>
|
|
46
|
-
|
|
47
|
-
<ui5-tab-separator slot="subTabs"></ui5-tab-separator>
|
|
48
|
-
|
|
49
|
-
<ui5-tab slot="subTabs" text="2.1.2">
|
|
50
|
-
<ui5-tab slot="subTabs" text="2.1.2.1">
|
|
51
|
-
<ui5-button id="button2121">Button 2121</ui5-button>
|
|
52
|
-
</ui5-tab>
|
|
53
|
-
|
|
54
|
-
<ui5-button id="button212">Button 212</ui5-button>
|
|
55
|
-
</ui5-tab>
|
|
56
|
-
|
|
57
|
-
</ui5-tab>
|
|
58
|
-
|
|
59
|
-
<ui5-tab text="2.2" slot="subTabs">
|
|
60
|
-
Text for 2.2
|
|
61
|
-
</ui5-tab>
|
|
62
|
-
</ui5-tab>
|
|
63
|
-
|
|
64
|
-
<ui5-tab text="Three">
|
|
65
|
-
<ui5-tab slot="subTabs" icon="sap-icon://menu2" text="3.1">
|
|
66
|
-
<ui5-button>Button 3.1</ui5-button>
|
|
67
|
-
|
|
68
|
-
<ui5-tab slot="subTabs" icon="sap-icon://menu2" text="3.1.1">
|
|
69
|
-
<ui5-button>Button 3.1.1</ui5-button>
|
|
70
|
-
</ui5-tab>
|
|
71
|
-
<ui5-tab-separator slot="subTabs"></ui5-tab-separator>
|
|
72
|
-
<ui5-tab slot="subTabs" icon="sap-icon://menu2" text="3.1.2">
|
|
73
|
-
<ui5-button>Button 3.1.2</ui5-button>
|
|
74
|
-
</ui5-tab>
|
|
75
|
-
</ui5-tab>
|
|
76
|
-
</ui5-tab>
|
|
77
|
-
|
|
78
|
-
<ui5-tab text="Four">
|
|
79
|
-
<ui5-button>Button 4</ui5-button>
|
|
80
|
-
|
|
81
|
-
<ui5-tab-separator slot="subTabs"></ui5-tab-separator>
|
|
82
|
-
<ui5-tab slot="subTabs" text="Four 1">
|
|
83
|
-
<ui5-button>Button 41</ui5-button>
|
|
84
|
-
|
|
85
|
-
<ui5-tab-separator slot="subTabs"></ui5-tab-separator>
|
|
86
|
-
<ui5-tab design="Positive" slot="subTabs" text="Four 1.1">
|
|
87
|
-
<ui5-button>Button 411</ui5-button>
|
|
88
|
-
|
|
89
|
-
<ui5-tab-separator slot="subTabs"></ui5-tab-separator>
|
|
90
|
-
<ui5-tab slot="subTabs" text="Four 1.1.1">
|
|
91
|
-
<ui5-button>Button 4111</ui5-button>
|
|
92
|
-
|
|
93
|
-
<ui5-tab-separator slot="subTabs"></ui5-tab-separator>
|
|
94
|
-
<ui5-tab slot="subTabs" text="Four 1.1.1.1">
|
|
95
|
-
<ui5-button>Button 41111</ui5-button>
|
|
96
|
-
|
|
97
|
-
<ui5-tab-separator slot="subTabs"></ui5-tab-separator>
|
|
98
|
-
</ui5-tab>
|
|
99
|
-
</ui5-tab>
|
|
100
|
-
</ui5-tab>
|
|
101
|
-
</ui5-tab>
|
|
102
|
-
</ui5-tab>
|
|
103
|
-
|
|
104
|
-
<ui5-tab text="Five">Tab Content</ui5-tab>
|
|
105
|
-
<ui5-tab text="Six">Tab Content</ui5-tab>
|
|
106
|
-
<ui5-tab text="Seven"></ui5-tab>
|
|
107
|
-
<ui5-tab-separator>Tab Content</ui5-tab-separator>
|
|
108
|
-
<ui5-tab text="Eight">Tab Content</ui5-tab>
|
|
109
|
-
<ui5-tab text="Nine">Tab Content</ui5-tab>
|
|
110
|
-
<ui5-tab text="Ten">Tab Content
|
|
111
|
-
<ui5-tab slot="subTabs" text="Ten 1">Tab 10.1 Content
|
|
112
|
-
<ui5-tab slot="subTabs" text="Ten 1.1">Tab 10.1.1 Content
|
|
113
|
-
<ui5-tab-separator slot="subTabs"></ui5-tab-separator>
|
|
114
|
-
<ui5-tab slot="subTabs" text="Ten 1.1.1">Tab Content
|
|
115
|
-
<ui5-tab slot="subTabs" text="Ten 1.1.1.1"></ui5-tab>
|
|
116
|
-
</ui5-tab>
|
|
117
|
-
</ui5-tab>
|
|
118
|
-
</ui5-tab>
|
|
119
|
-
</ui5-tab>
|
|
120
|
-
<ui5-tab text="Eleven"></ui5-tab>
|
|
121
|
-
<ui5-tab-separator></ui5-tab-separator>
|
|
122
|
-
<ui5-tab text="Twelve"></ui5-tab>
|
|
123
|
-
<ui5-tab text="Thirteen"></ui5-tab>
|
|
124
|
-
<ui5-tab text="Fourteen">
|
|
125
|
-
<ui5-tab slot="subTabs" text="Fourteen 1">1
|
|
126
|
-
<ui5-tab slot="subTabs" text="Fourteen 1.1">1.1</ui5-tab>
|
|
127
|
-
</ui5-tab>
|
|
128
|
-
<ui5-tab slot="subTabs" text="Fourteen 2">2
|
|
129
|
-
<ui5-tab slot="subTabs" text="Fourteen 2.1">2.1
|
|
130
|
-
<ui5-tab slot="subTabs" text="Fourteen 2.1.1">2.1.1</ui5-tab>
|
|
131
|
-
</ui5-tab>
|
|
132
|
-
<ui5-tab slot="subTabs" text="Fourteen 2.2">2.2</ui5-tab>
|
|
133
|
-
</ui5-tab>
|
|
134
|
-
</ui5-tab>
|
|
135
|
-
<ui5-tab text="Fifteen"></ui5-tab>
|
|
136
|
-
<ui5-tab text="Sixteen"></ui5-tab>
|
|
137
|
-
<ui5-tab text="Seventeen"></ui5-tab>
|
|
138
|
-
<ui5-tab-separator></ui5-tab-separator>
|
|
139
|
-
<ui5-tab text="Eighteen"></ui5-tab>
|
|
140
|
-
|
|
141
|
-
</ui5-tabcontainer>
|
|
142
|
-
</section>
|
|
143
|
-
|
|
144
|
-
<section>
|
|
145
|
-
<h2>Text only End Overflow</h2>
|
|
146
|
-
<ui5-tabcontainer id="tabContainerEndOverflow" collapsed fixed>
|
|
147
|
-
<ui5-tab design="Positive" text="One"></ui5-tab>
|
|
148
|
-
<ui5-tab design="Negative" text="Two" disabled>
|
|
149
|
-
<ui5-tab slot="subTabs" text="2.1"></ui5-tab>
|
|
150
|
-
</ui5-tab>
|
|
151
|
-
<ui5-tab design="Critical" text="Three">
|
|
152
|
-
<ui5-tab slot="subTabs" design="Positive" text="3.1">
|
|
153
|
-
<ui5-button>Button 3</ui5-button>
|
|
154
|
-
</ui5-tab>
|
|
155
|
-
</ui5-tab>
|
|
156
|
-
<ui5-tab text="Four"></ui5-tab>
|
|
157
|
-
|
|
158
|
-
<ui5-tab text="Five">
|
|
159
|
-
<ui5-tab slot="subTabs" text="nested in Five">
|
|
160
|
-
<ui5-tab slot="subTabs" text="nested deeper in Five">text</ui5-tab>
|
|
161
|
-
text
|
|
162
|
-
</ui5-tab>
|
|
163
|
-
</ui5-tab>
|
|
164
|
-
|
|
165
|
-
<ui5-tab text="Six"></ui5-tab>
|
|
166
|
-
<ui5-tab text="Seven"></ui5-tab>
|
|
167
|
-
<ui5-tab-separator></ui5-tab-separator>
|
|
168
|
-
<ui5-tab design="Positive" text="Eight"></ui5-tab>
|
|
169
|
-
<ui5-tab design="Negative" text="Nine"></ui5-tab>
|
|
170
|
-
<ui5-tab design="Critical" text="Ten"></ui5-tab>
|
|
171
|
-
<ui5-tab text="Eleven"></ui5-tab>
|
|
172
|
-
<ui5-tab-separator></ui5-tab-separator>
|
|
173
|
-
<ui5-tab text="Twelve"></ui5-tab>
|
|
174
|
-
<ui5-tab text="Thirteen" selected></ui5-tab>
|
|
175
|
-
<ui5-tab text="Fourteen"></ui5-tab>
|
|
176
|
-
<ui5-tab text="Fifteen"></ui5-tab>
|
|
177
|
-
<ui5-tab text="Sixteen"></ui5-tab>
|
|
178
|
-
<ui5-tab text="Seventeen"></ui5-tab>
|
|
179
|
-
<ui5-tab text="Eighteen"></ui5-tab>
|
|
180
|
-
<ui5-tab-separator></ui5-tab-separator>
|
|
181
|
-
<ui5-tab text="Nineteen"></ui5-tab>
|
|
182
|
-
<ui5-tab text="Twenty"></ui5-tab>
|
|
183
|
-
<ui5-tab text="Twenty One"></ui5-tab>
|
|
184
|
-
<ui5-tab text="Twenty Two"></ui5-tab>
|
|
185
|
-
<ui5-tab text="Twenty Three"></ui5-tab>
|
|
186
|
-
<ui5-tab text="Twenty Four"></ui5-tab>
|
|
187
|
-
<ui5-tab-separator></ui5-tab-separator>
|
|
188
|
-
<ui5-tab text="Twenty Five"></ui5-tab>
|
|
189
|
-
<ui5-tab text="Twenty Six"></ui5-tab>
|
|
190
|
-
<ui5-tab text="Twenty Seven"></ui5-tab>
|
|
191
|
-
<ui5-tab-separator></ui5-tab-separator>
|
|
192
|
-
<ui5-tab text="Twenty Eight"></ui5-tab>
|
|
193
|
-
<ui5-tab text="Twenty Nine"></ui5-tab>
|
|
194
|
-
<ui5-tab text="Thirty"></ui5-tab>
|
|
195
|
-
</ui5-tabcontainer>
|
|
196
|
-
</section>
|
|
197
|
-
|
|
198
|
-
<section>
|
|
199
|
-
<h2>Text only Start And End Overflow</h2>
|
|
200
|
-
<ui5-tabcontainer id="tabContainerStartAndEndOverflow" tabs-overflow-mode="StartAndEnd" collapsed fixed>
|
|
201
|
-
<ui5-tab text="One"></ui5-tab>
|
|
202
|
-
<ui5-tab text="Two"></ui5-tab>
|
|
203
|
-
<ui5-tab text="Three"></ui5-tab>
|
|
204
|
-
<ui5-tab text="Four"></ui5-tab>
|
|
205
|
-
<ui5-tab text="Five"></ui5-tab>
|
|
206
|
-
<ui5-tab text="Six"></ui5-tab>
|
|
207
|
-
<ui5-tab text="Seven"></ui5-tab>
|
|
208
|
-
<ui5-tab text="Eight"></ui5-tab>
|
|
209
|
-
<ui5-tab text="Nine"></ui5-tab>
|
|
210
|
-
<ui5-tab text="Ten"></ui5-tab>
|
|
211
|
-
<ui5-tab text="Eleven"></ui5-tab>
|
|
212
|
-
<ui5-tab text="Twelve"></ui5-tab>
|
|
213
|
-
<ui5-tab text="Thirteen"></ui5-tab>
|
|
214
|
-
<ui5-tab text="Fourteen"></ui5-tab>
|
|
215
|
-
<ui5-tab text="Fifteen"></ui5-tab>
|
|
216
|
-
<ui5-tab text="Sixteen" design="Positive"></ui5-tab>
|
|
217
|
-
<ui5-tab text="Seventeen" design="Negative"></ui5-tab>
|
|
218
|
-
<ui5-tab text="Eighteen" design="Critical"></ui5-tab>
|
|
219
|
-
<ui5-tab text="Nineteen"></ui5-tab>
|
|
220
|
-
<ui5-tab text="Twenty" selected></ui5-tab>
|
|
221
|
-
<ui5-tab text="Twenty One"></ui5-tab>
|
|
222
|
-
<ui5-tab text="Twenty Two"></ui5-tab>
|
|
223
|
-
<ui5-tab text="Twenty Three"></ui5-tab>
|
|
224
|
-
<ui5-tab text="Twenty Four"></ui5-tab>
|
|
225
|
-
<ui5-tab text="Twenty Five"></ui5-tab>
|
|
226
|
-
<ui5-tab text="Twenty Six"></ui5-tab>
|
|
227
|
-
<ui5-tab text="Twenty Seven"></ui5-tab>
|
|
228
|
-
<ui5-tab text="Twenty Eight"></ui5-tab>
|
|
229
|
-
<ui5-tab text="Twenty Nine"></ui5-tab>
|
|
230
|
-
<ui5-tab text="Thirty"></ui5-tab>
|
|
231
|
-
</ui5-tabcontainer>
|
|
232
|
-
</section>
|
|
233
|
-
|
|
234
|
-
<section>
|
|
235
|
-
<h2>Tab Container</h2>
|
|
236
|
-
<ui5-checkbox text="prevent tab-select event" id="cbPrevent"></ui5-checkbox>
|
|
237
|
-
<ui5-tabcontainer id="tabContainer1" fixed collapsed>
|
|
238
|
-
<ui5-tab stable-dom-ref="products-ref" text="Products" additional-text="125"></ui5-tab>
|
|
239
|
-
<ui5-tab-separator></ui5-tab-separator>
|
|
240
|
-
<ui5-tab icon="sap-icon://menu2" text="Laptops" design="Positive" additional-text="25"></ui5-tab>
|
|
241
|
-
<ui5-tab icon="sap-icon://menu" text="Monitors" selected design="Critical"></ui5-tab>
|
|
242
|
-
<ui5-tab icon="sap-icon://menu2" text="Keyboards" design="Negative" additional-text="15"></ui5-tab>
|
|
243
|
-
<ui5-tab icon="sap-icon://menu2" disabled text="Disabled" design="Negative" additional-text="40"></ui5-tab>
|
|
244
|
-
<ui5-tab icon="sap-icon://menu2" text="Neutral" design="Neutral" additional-text="40"></ui5-tab>
|
|
245
|
-
<ui5-tab icon="sap-icon://menu2" text="Default" additional-text="40"></ui5-tab>
|
|
246
|
-
</ui5-tabcontainer>
|
|
247
|
-
</section>
|
|
248
|
-
|
|
249
|
-
<section>
|
|
250
|
-
<h2>Tab Container Start And End Overflow</h2>
|
|
251
|
-
<ui5-tabcontainer id="tabContainer2" fixed collapsed tabs-overflow-mode="StartAndEnd">
|
|
252
|
-
<ui5-tab stable-dom-ref="products-ref" text="Products" additional-text="125"></ui5-tab>
|
|
253
|
-
<ui5-tab-separator></ui5-tab-separator>
|
|
254
|
-
<ui5-tab icon="sap-icon://menu2" text="Laptops" design="Positive" additional-text="25"></ui5-tab>
|
|
255
|
-
<ui5-tab icon="sap-icon://menu" text="Monitors" selected design="Critical" additional-text="45"></ui5-tab>
|
|
256
|
-
<ui5-tab icon="sap-icon://menu2" text="Keyboards" design="Negative" additional-text="15"></ui5-tab>
|
|
257
|
-
<ui5-tab icon="sap-icon://menu2" disabled text="Disabled" design="Negative" additional-text="40"></ui5-tab>
|
|
258
|
-
<ui5-tab icon="sap-icon://menu2" text="Neutral" design="Neutral" additional-text="40"></ui5-tab>
|
|
259
|
-
<ui5-tab icon="sap-icon://menu2" text="Default" additional-text="40"></ui5-tab>
|
|
260
|
-
</ui5-tabcontainer>
|
|
261
|
-
</section>
|
|
262
|
-
|
|
263
|
-
<section>
|
|
264
|
-
<h2>Icon only</h2>
|
|
265
|
-
<ui5-tabcontainer id="tabContainerIconOnly">
|
|
266
|
-
<ui5-tab icon="sap-icon://card" selected>
|
|
267
|
-
<ui5-button>Button 11</ui5-button>
|
|
268
|
-
<ui5-button>Button 12</ui5-button>
|
|
269
|
-
</ui5-tab>
|
|
270
|
-
<ui5-tab icon="sap-icon://employee">
|
|
271
|
-
<ui5-button>Button 3</ui5-button>
|
|
272
|
-
</ui5-tab>
|
|
273
|
-
<ui5-tab icon="sap-icon://employee">
|
|
274
|
-
<ui5-button>Button 3</ui5-button>
|
|
275
|
-
</ui5-tab>
|
|
276
|
-
<ui5-tab icon="sap-icon://menu2">
|
|
277
|
-
<ui5-button>Button 2</ui5-button>
|
|
278
|
-
</ui5-tab>
|
|
279
|
-
<ui5-tab icon="sap-icon://menu2">
|
|
280
|
-
<ui5-button>Button 2</ui5-button>
|
|
281
|
-
</ui5-tab>
|
|
282
|
-
<ui5-tab icon="sap-icon://employee">
|
|
283
|
-
<ui5-button>Button 3</ui5-button>
|
|
284
|
-
</ui5-tab>
|
|
285
|
-
<ui5-tab icon="sap-icon://employee">
|
|
286
|
-
<ui5-button>Button 3</ui5-button>
|
|
287
|
-
</ui5-tab>
|
|
288
|
-
<ui5-tab icon="sap-icon://employee">
|
|
289
|
-
<ui5-button>Button 3</ui5-button>
|
|
290
|
-
</ui5-tab>
|
|
291
|
-
<ui5-tab icon="sap-icon://employee">
|
|
292
|
-
<ui5-button>Button 3</ui5-button>
|
|
293
|
-
</ui5-tab>
|
|
294
|
-
<ui5-tab icon="sap-icon://employee">
|
|
295
|
-
<ui5-button>Button 3</ui5-button>
|
|
296
|
-
</ui5-tab>
|
|
297
|
-
<ui5-tab icon="sap-icon://employee">
|
|
298
|
-
<ui5-button>Button 3</ui5-button>
|
|
299
|
-
</ui5-tab>
|
|
300
|
-
<ui5-tab icon="sap-icon://menu2">
|
|
301
|
-
<ui5-button>Button 2</ui5-button>
|
|
302
|
-
</ui5-tab>
|
|
303
|
-
<ui5-tab icon="sap-icon://employee">
|
|
304
|
-
<ui5-button>Button 3</ui5-button>
|
|
305
|
-
</ui5-tab>
|
|
306
|
-
</ui5-tabcontainer>
|
|
307
|
-
</section>
|
|
308
|
-
|
|
309
|
-
<section>
|
|
310
|
-
<h2>Text only</h2>
|
|
311
|
-
<ui5-tabcontainer id="tabContainerTextOnly">
|
|
312
|
-
<ui5-tab text="Products ID" selected>
|
|
313
|
-
<ui5-button>Button 11</ui5-button>
|
|
314
|
-
<ui5-button>Button 12</ui5-button>
|
|
315
|
-
</ui5-tab>
|
|
316
|
-
<ui5-tab text="Availability">
|
|
317
|
-
<ui5-button>Button 2</ui5-button>
|
|
318
|
-
</ui5-tab>
|
|
319
|
-
<ui5-tab text="Expiration Date">
|
|
320
|
-
<ui5-button>Button 3</ui5-button>
|
|
321
|
-
</ui5-tab>
|
|
322
|
-
<ui5-tab text="Date of Delivery">
|
|
323
|
-
<ui5-button>Button 4</ui5-button>
|
|
324
|
-
</ui5-tab>
|
|
325
|
-
<ui5-tab text="Date of Manufacture">
|
|
326
|
-
<ui5-button>Button 4</ui5-button>
|
|
327
|
-
</ui5-tab>
|
|
328
|
-
<ui5-tab text="Value">
|
|
329
|
-
<ui5-button>Button 4</ui5-button>
|
|
330
|
-
</ui5-tab>
|
|
331
|
-
<ui5-tab text="Price">
|
|
332
|
-
<ui5-button>Button 4</ui5-button>
|
|
333
|
-
</ui5-tab>
|
|
334
|
-
<ui5-tab text="Net Profit">
|
|
335
|
-
<ui5-button>Button 4</ui5-button>
|
|
336
|
-
</ui5-tab>
|
|
337
|
-
<ui5-tab text="Company Name">
|
|
338
|
-
<ui5-button>Button 4</ui5-button>
|
|
339
|
-
</ui5-tab>
|
|
340
|
-
<ui5-tab text="Warehouse Location">
|
|
341
|
-
<ui5-button>Button 4</ui5-button>
|
|
342
|
-
</ui5-tab>
|
|
343
|
-
<ui5-tab text="Address">
|
|
344
|
-
<ui5-button>Button 4</ui5-button>
|
|
345
|
-
</ui5-tab>
|
|
346
|
-
<ui5-tab text="Country">
|
|
347
|
-
<ui5-button>Button 4</ui5-button>
|
|
348
|
-
</ui5-tab>
|
|
349
|
-
</ui5-tabcontainer>
|
|
350
|
-
</section>
|
|
351
|
-
|
|
352
|
-
<section class="tabcontainer2auto">
|
|
353
|
-
<h2>Scrollable child</h2>
|
|
354
|
-
<ui5-tabcontainer fixed class="tabcontainer3auto" id="tc-scrollable-child">
|
|
355
|
-
<ui5-tab text="Tab 1" selected id="scrollable-tab">
|
|
356
|
-
<ui5-button>Toggle style</ui5-button>
|
|
357
|
-
|
|
358
|
-
<ui5-table>
|
|
359
|
-
<ui5-table-column slot="columns">Source</ui5-table-column>
|
|
360
|
-
<ui5-table-column slot="columns">Method</ui5-table-column>
|
|
361
|
-
|
|
362
|
-
<ui5-table-row>
|
|
363
|
-
<ui5-table-cell>Cell 1</ui5-table-cell>
|
|
364
|
-
<ui5-table-cell>Cell 2</ui5-table-cell>
|
|
365
|
-
</ui5-table-row>
|
|
366
|
-
|
|
367
|
-
<ui5-table-row>
|
|
368
|
-
<ui5-table-cell>Cell 1</ui5-table-cell>
|
|
369
|
-
<ui5-table-cell>Cell 2</ui5-table-cell>
|
|
370
|
-
</ui5-table-row>
|
|
371
|
-
|
|
372
|
-
<ui5-table-row>
|
|
373
|
-
<ui5-table-cell>Cell 1</ui5-table-cell>
|
|
374
|
-
<ui5-table-cell>Cell 2</ui5-table-cell>
|
|
375
|
-
</ui5-table-row>
|
|
376
|
-
|
|
377
|
-
<ui5-table-row>
|
|
378
|
-
<ui5-table-cell>Cell 1</ui5-table-cell>
|
|
379
|
-
<ui5-table-cell>Cell 2</ui5-table-cell>
|
|
380
|
-
</ui5-table-row>
|
|
381
|
-
|
|
382
|
-
<ui5-table-row>
|
|
383
|
-
<ui5-table-cell>Cell 1</ui5-table-cell>
|
|
384
|
-
<ui5-table-cell>Cell 2</ui5-table-cell>
|
|
385
|
-
</ui5-table-row>
|
|
386
|
-
|
|
387
|
-
<ui5-table-row>
|
|
388
|
-
<ui5-table-cell>Cell 1</ui5-table-cell>
|
|
389
|
-
<ui5-table-cell>Cell 2</ui5-table-cell>
|
|
390
|
-
</ui5-table-row>
|
|
391
|
-
<ui5-table-row>
|
|
392
|
-
<ui5-table-cell>Cell 1</ui5-table-cell>
|
|
393
|
-
<ui5-table-cell>Cell 2</ui5-table-cell>
|
|
394
|
-
</ui5-table-row>
|
|
395
|
-
<ui5-table-row>
|
|
396
|
-
<ui5-table-cell>Cell 1</ui5-table-cell>
|
|
397
|
-
<ui5-table-cell>Cell 2</ui5-table-cell>
|
|
398
|
-
</ui5-table-row>
|
|
399
|
-
<ui5-table-row>
|
|
400
|
-
<ui5-table-cell>Cell 1</ui5-table-cell>
|
|
401
|
-
<ui5-table-cell>Cell 2</ui5-table-cell>
|
|
402
|
-
</ui5-table-row>
|
|
403
|
-
<ui5-table-row>
|
|
404
|
-
<ui5-table-cell>Cell 1</ui5-table-cell>
|
|
405
|
-
<ui5-table-cell>Cell 2</ui5-table-cell>
|
|
406
|
-
</ui5-table-row>
|
|
407
|
-
</ui5-table>
|
|
408
|
-
</ui5-tab>
|
|
409
|
-
|
|
410
|
-
</ui5-tabcontainer>
|
|
411
|
-
</section>
|
|
412
|
-
|
|
413
|
-
<section>
|
|
414
|
-
<h2>Icon and Text</h2>
|
|
415
|
-
|
|
416
|
-
<ui5-tabcontainer>
|
|
417
|
-
<ui5-tab icon="sap-icon://card" text="Tab 1" additional-text="123">
|
|
418
|
-
<div class="tabcontainer2auto">
|
|
419
|
-
<h4>Content with set height: 300px</h4>
|
|
420
|
-
<ui5-button>Button 11</ui5-button>
|
|
421
|
-
<ui5-button>Button 12</ui5-button>
|
|
422
|
-
</div>
|
|
423
|
-
</ui5-tab>
|
|
424
|
-
<ui5-tab icon="sap-icon://menu2" text="Tab 2" additional-text="444" selected>
|
|
425
|
-
<ui5-button>Button 2</ui5-button>
|
|
426
|
-
</ui5-tab>
|
|
427
|
-
<ui5-tab icon="sap-icon://employee" text="Tab 3" additional-text="123">
|
|
428
|
-
<ui5-button>Button 3</ui5-button>
|
|
429
|
-
</ui5-tab>
|
|
430
|
-
</ui5-tabcontainer>
|
|
431
|
-
</section>
|
|
432
|
-
|
|
433
|
-
<section>
|
|
434
|
-
<h2>Icon and Text with tabLayout="Inline"</h2>
|
|
435
|
-
|
|
436
|
-
<ui5-tabcontainer tab-layout="Inline">
|
|
437
|
-
<ui5-tab icon="sap-icon://card" text="Tab 1" additional-text="123">
|
|
438
|
-
<div class="tabcontainer2auto">
|
|
439
|
-
<h4>Content with set height: 300px</h4>
|
|
440
|
-
<ui5-button>Button 11</ui5-button>
|
|
441
|
-
<ui5-button>Button 12</ui5-button>
|
|
442
|
-
</div>
|
|
443
|
-
</ui5-tab>
|
|
444
|
-
<ui5-tab icon="sap-icon://menu2" text="Tab 2" additional-text="444" selected>
|
|
445
|
-
<ui5-button>Button 2</ui5-button>
|
|
446
|
-
</ui5-tab>
|
|
447
|
-
<ui5-tab icon="sap-icon://employee" text="Tab 3" additional-text="123">
|
|
448
|
-
<ui5-button>Button 3</ui5-button>
|
|
449
|
-
</ui5-tab>
|
|
450
|
-
</ui5-tabcontainer>
|
|
451
|
-
</section>
|
|
452
|
-
|
|
453
|
-
<section>
|
|
454
|
-
<h2>Text and additional text</h2>
|
|
455
|
-
|
|
456
|
-
<ui5-tabcontainer>
|
|
457
|
-
<ui5-tab text="Tab 1" additional-text="additional">
|
|
458
|
-
<ui5-button>Button 11</ui5-button>
|
|
459
|
-
<ui5-button>Button 12</ui5-button>
|
|
460
|
-
</ui5-tab>
|
|
461
|
-
<ui5-tab text="Tab 2" additional-text="additional" selected>
|
|
462
|
-
<ui5-button>Button 2</ui5-button>
|
|
463
|
-
</ui5-tab>
|
|
464
|
-
<ui5-tab text="Tab 3" additional-text="additional">
|
|
465
|
-
<ui5-button>Button 3</ui5-button>
|
|
466
|
-
</ui5-tab>
|
|
467
|
-
</ui5-tabcontainer>
|
|
468
|
-
</section>
|
|
469
|
-
|
|
470
|
-
<section>
|
|
471
|
-
<h2>Text and additional text with tabLayout="Inline"</h2>
|
|
472
|
-
|
|
473
|
-
<ui5-tabcontainer tab-layout="Inline">
|
|
474
|
-
<ui5-tab text="Monitors" additional-text="10">
|
|
475
|
-
<ui5-button>Button 11</ui5-button>
|
|
476
|
-
<ui5-button>Button 12</ui5-button>
|
|
477
|
-
</ui5-tab>
|
|
478
|
-
<ui5-tab text="Cameras" additional-text="2" selected>
|
|
479
|
-
<ui5-button>Button 2</ui5-button>
|
|
480
|
-
</ui5-tab>
|
|
481
|
-
<ui5-tab text="Rooms" additional-text="16">
|
|
482
|
-
<ui5-button>Button 3</ui5-button>
|
|
483
|
-
</ui5-tab>
|
|
484
|
-
</ui5-tabcontainer>
|
|
485
|
-
</section>
|
|
486
|
-
|
|
487
|
-
<section>
|
|
488
|
-
<h2>Tabs with input elements</h2>
|
|
489
|
-
|
|
490
|
-
<ui5-tabcontainer>
|
|
491
|
-
<ui5-tab text="Tab 1" selected>
|
|
492
|
-
<p>ui5-input</p>
|
|
493
|
-
<ui5-input></ui5-input>
|
|
494
|
-
</ui5-tab>
|
|
495
|
-
<ui5-tab text="Tab 2">
|
|
496
|
-
<p>browser input</p>
|
|
497
|
-
<input type="text">
|
|
498
|
-
</ui5-tab>
|
|
499
|
-
</ui5-tabcontainer>
|
|
500
|
-
</section>
|
|
501
|
-
|
|
502
|
-
<section class="result">
|
|
503
|
-
<h2>Result</h2>
|
|
504
|
-
<span id="result"></span>
|
|
505
|
-
<span id="resultIdx"></span>
|
|
506
|
-
</section>
|
|
507
|
-
|
|
508
|
-
<section class="ui5-content-density-compact">
|
|
509
|
-
<h3>TabContainer in Compact</h3>
|
|
510
|
-
<div>
|
|
511
|
-
<ui5-tabcontainer>
|
|
512
|
-
<ui5-tab text="Products ID">
|
|
513
|
-
<ui5-button>Button 11</ui5-button>
|
|
514
|
-
<ui5-button>Button 12</ui5-button>
|
|
515
|
-
</ui5-tab>
|
|
516
|
-
<ui5-tab text="Availability">
|
|
517
|
-
<ui5-button>Button 2</ui5-button>
|
|
518
|
-
</ui5-tab>
|
|
519
|
-
<ui5-tab text="Expiration Date">
|
|
520
|
-
<ui5-button>Button 3</ui5-button>
|
|
521
|
-
</ui5-tab>
|
|
522
|
-
<ui5-tab text="Date of Delivery">
|
|
523
|
-
<ui5-button>Button 4</ui5-button>
|
|
524
|
-
</ui5-tab>
|
|
525
|
-
<ui5-tab text="Date of Manufacture">
|
|
526
|
-
<ui5-button>Button 4</ui5-button>
|
|
527
|
-
</ui5-tab>
|
|
528
|
-
<ui5-tab text="Value">
|
|
529
|
-
<ui5-button>Button 4</ui5-button>
|
|
530
|
-
</ui5-tab>
|
|
531
|
-
<ui5-tab text="Price">
|
|
532
|
-
<ui5-button>Button 4</ui5-button>
|
|
533
|
-
</ui5-tab>
|
|
534
|
-
<ui5-tab text="Net Profit">
|
|
535
|
-
<ui5-button>Button 4</ui5-button>
|
|
536
|
-
</ui5-tab>
|
|
537
|
-
<ui5-tab text="Company Name">
|
|
538
|
-
<ui5-button>Button 4</ui5-button>
|
|
539
|
-
</ui5-tab>
|
|
540
|
-
<ui5-tab text="Warehouse Location">
|
|
541
|
-
<ui5-button>Button 4</ui5-button>
|
|
542
|
-
</ui5-tab>
|
|
543
|
-
<ui5-tab text="Address">
|
|
544
|
-
<ui5-button>Button 4</ui5-button>
|
|
545
|
-
</ui5-tab>
|
|
546
|
-
<ui5-tab text="Country">
|
|
547
|
-
<ui5-button>Button 4</ui5-button>
|
|
548
|
-
</ui5-tab>
|
|
549
|
-
</ui5-tabcontainer>
|
|
550
|
-
|
|
551
|
-
<ui5-tabcontainer id="tabContainer1Compact" fixed collapsed>
|
|
552
|
-
<ui5-tab stable-dom-ref="products-ref" text="Products" additional-text="125"></ui5-tab>
|
|
553
|
-
<ui5-tab-separator></ui5-tab-separator>
|
|
554
|
-
<ui5-tab icon="sap-icon://menu2" text="Laptops" design="Positive" additional-text="25"></ui5-tab>
|
|
555
|
-
<ui5-tab icon="sap-icon://menu" text="Monitors" selected design="Critical" additional-text="45"></ui5-tab>
|
|
556
|
-
<ui5-tab icon="sap-icon://menu2" text="Keyboards" design="Negative" additional-text="15"></ui5-tab>
|
|
557
|
-
<ui5-tab icon="sap-icon://menu2" disabled text="Disabled" design="Negative" additional-text="40"></ui5-tab>
|
|
558
|
-
<ui5-tab icon="sap-icon://menu2" text="Neutral" design="Neutral" additional-text="40"></ui5-tab>
|
|
559
|
-
<ui5-tab icon="sap-icon://menu2" text="Default" additional-text="40"></ui5-tab>
|
|
560
|
-
</ui5-tabcontainer>
|
|
561
|
-
|
|
562
|
-
<ui5-tabcontainer id="tabContainerIconOnlyCompact">
|
|
563
|
-
<ui5-tab icon="sap-icon://card" selected>
|
|
564
|
-
<ui5-button>Button 11</ui5-button>
|
|
565
|
-
<ui5-button>Button 12</ui5-button>
|
|
566
|
-
</ui5-tab>
|
|
567
|
-
<ui5-tab icon="sap-icon://employee">
|
|
568
|
-
<ui5-button>Button 3</ui5-button>
|
|
569
|
-
</ui5-tab>
|
|
570
|
-
<ui5-tab icon="sap-icon://employee">
|
|
571
|
-
<ui5-button>Button 3</ui5-button>
|
|
572
|
-
</ui5-tab>
|
|
573
|
-
<ui5-tab icon="sap-icon://menu2">
|
|
574
|
-
<ui5-button>Button 2</ui5-button>
|
|
575
|
-
</ui5-tab>
|
|
576
|
-
<ui5-tab icon="sap-icon://menu2">
|
|
577
|
-
<ui5-button>Button 2</ui5-button>
|
|
578
|
-
</ui5-tab>
|
|
579
|
-
<ui5-tab icon="sap-icon://employee">
|
|
580
|
-
<ui5-button>Button 3</ui5-button>
|
|
581
|
-
</ui5-tab>
|
|
582
|
-
<ui5-tab icon="sap-icon://employee">
|
|
583
|
-
<ui5-button>Button 3</ui5-button>
|
|
584
|
-
</ui5-tab>
|
|
585
|
-
<ui5-tab icon="sap-icon://employee">
|
|
586
|
-
<ui5-button>Button 3</ui5-button>
|
|
587
|
-
</ui5-tab>
|
|
588
|
-
<ui5-tab icon="sap-icon://employee">
|
|
589
|
-
<ui5-button>Button 3</ui5-button>
|
|
590
|
-
</ui5-tab>
|
|
591
|
-
<ui5-tab icon="sap-icon://employee">
|
|
592
|
-
<ui5-button>Button 3</ui5-button>
|
|
593
|
-
</ui5-tab>
|
|
594
|
-
<ui5-tab icon="sap-icon://employee">
|
|
595
|
-
<ui5-button>Button 3</ui5-button>
|
|
596
|
-
</ui5-tab>
|
|
597
|
-
<ui5-tab icon="sap-icon://menu2">
|
|
598
|
-
<ui5-button>Button 2</ui5-button>
|
|
599
|
-
</ui5-tab>
|
|
600
|
-
<ui5-tab icon="sap-icon://employee">
|
|
601
|
-
<ui5-button>Button 3</ui5-button>
|
|
602
|
-
</ui5-tab>
|
|
603
|
-
</ui5-tabcontainer>
|
|
604
|
-
|
|
605
|
-
</div>
|
|
606
|
-
</section>
|
|
607
|
-
|
|
608
|
-
<section>
|
|
609
|
-
<h2>No paddings for the Content</h2>
|
|
610
|
-
<ui5-tabcontainer class="tabContainerNoContentPaddings">
|
|
611
|
-
<ui5-tab icon="sap-icon://card" selected>
|
|
612
|
-
<ui5-table>
|
|
613
|
-
<ui5-table-column slot="columns">Source</ui5-table-column>
|
|
614
|
-
<ui5-table-column slot="columns">Method</ui5-table-column>
|
|
615
|
-
|
|
616
|
-
<ui5-table-row>
|
|
617
|
-
<ui5-table-cell>Cell 1</ui5-table-cell>
|
|
618
|
-
<ui5-table-cell>Cell 2</ui5-table-cell>
|
|
619
|
-
</ui5-table-row>
|
|
620
|
-
|
|
621
|
-
<ui5-table-row>
|
|
622
|
-
<ui5-table-cell>Cell 1</ui5-table-cell>
|
|
623
|
-
<ui5-table-cell>Cell 2</ui5-table-cell>
|
|
624
|
-
</ui5-table-row>
|
|
625
|
-
|
|
626
|
-
<ui5-table-row>
|
|
627
|
-
<ui5-table-cell>Cell 1</ui5-table-cell>
|
|
628
|
-
<ui5-table-cell>Cell 2</ui5-table-cell>
|
|
629
|
-
</ui5-table-row>
|
|
630
|
-
|
|
631
|
-
<ui5-table-row>
|
|
632
|
-
<ui5-table-cell>Cell 1</ui5-table-cell>
|
|
633
|
-
<ui5-table-cell>Cell 2</ui5-table-cell>
|
|
634
|
-
</ui5-table-row>
|
|
635
|
-
|
|
636
|
-
<ui5-table-row>
|
|
637
|
-
<ui5-table-cell>Cell 1</ui5-table-cell>
|
|
638
|
-
<ui5-table-cell>Cell 2</ui5-table-cell>
|
|
639
|
-
</ui5-table-row>
|
|
640
|
-
</ui5-table>
|
|
641
|
-
</ui5-tab>
|
|
642
|
-
|
|
643
|
-
<ui5-tab icon="sap-icon://employee">
|
|
644
|
-
<ui5-table>
|
|
645
|
-
<ui5-table-column slot="columns">Source</ui5-table-column>
|
|
646
|
-
<ui5-table-column slot="columns">Method</ui5-table-column>
|
|
647
|
-
|
|
648
|
-
<ui5-table-row>
|
|
649
|
-
<ui5-table-cell>Cell 3</ui5-table-cell>
|
|
650
|
-
<ui5-table-cell>Cell 4</ui5-table-cell>
|
|
651
|
-
</ui5-table-row>
|
|
652
|
-
|
|
653
|
-
<ui5-table-row>
|
|
654
|
-
<ui5-table-cell>Cell 3</ui5-table-cell>
|
|
655
|
-
<ui5-table-cell>Cell 4</ui5-table-cell>
|
|
656
|
-
</ui5-table-row>
|
|
657
|
-
|
|
658
|
-
<ui5-table-row>
|
|
659
|
-
<ui5-table-cell>Cell 3</ui5-table-cell>
|
|
660
|
-
<ui5-table-cell>Cell 4</ui5-table-cell>
|
|
661
|
-
</ui5-table-row>
|
|
662
|
-
|
|
663
|
-
<ui5-table-row>
|
|
664
|
-
<ui5-table-cell>Cell 3</ui5-table-cell>
|
|
665
|
-
<ui5-table-cell>Cell 4</ui5-table-cell>
|
|
666
|
-
</ui5-table-row>
|
|
667
|
-
|
|
668
|
-
<ui5-table-row>
|
|
669
|
-
<ui5-table-cell>Cell 3</ui5-table-cell>
|
|
670
|
-
<ui5-table-cell>Cell 4</ui5-table-cell>
|
|
671
|
-
</ui5-table-row>
|
|
672
|
-
</ui5-table>
|
|
673
|
-
</ui5-tab>
|
|
674
|
-
</ui5-tabcontainer>
|
|
675
|
-
</section>
|
|
676
|
-
|
|
677
|
-
<section>
|
|
678
|
-
<h2>Background design</h2>
|
|
679
|
-
<div class="design-options">
|
|
680
|
-
<div role="radiogroup" id="radioGroup-headerDesign" class="radio-button-group">
|
|
681
|
-
<ui5-label>Header Background</ui5-label>
|
|
682
|
-
<ui5-radio-button text="Solid" checked name="Group1"></ui5-radio-button>
|
|
683
|
-
<ui5-radio-button text="Transparent" name="Group1"></ui5-radio-button>
|
|
684
|
-
<ui5-radio-button text="Translucent" name="Group1"></ui5-radio-button>
|
|
685
|
-
</div>
|
|
686
|
-
|
|
687
|
-
<div role="radiogroup2" id="radioGroup-contentDesign" class="radio-button-group">
|
|
688
|
-
<ui5-label>Content Background</ui5-label>
|
|
689
|
-
<ui5-radio-button text="Solid" name="Group2"></ui5-radio-button>
|
|
690
|
-
<ui5-radio-button text="Transparent" checked name="Group2"></ui5-radio-button>
|
|
691
|
-
<ui5-radio-button text="Translucent" name="Group2"></ui5-radio-button>
|
|
692
|
-
</div>
|
|
693
|
-
</div>
|
|
694
|
-
<ui5-tabcontainer id="tabContainerBackgroundDesign" header-background-design="Solid" content-background-design="Transparent">
|
|
695
|
-
<ui5-tab text="Tab 1" selected>
|
|
696
|
-
<ui5-label>Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita voluptates accusamus est quibusdam inventore ipsam?</ui5-label>
|
|
697
|
-
</ui5-tab>
|
|
698
|
-
<ui5-tab text="Tab 2">
|
|
699
|
-
<ui5-label>Accusamus minus aperiam sunt ipsam eos quos et maxime facilis tempora neque ratione nemo laborum expedita aliquid officiis nisi, necessitatibus quasi distinctio?</ui5-label>
|
|
700
|
-
</ui5-tab>
|
|
701
|
-
<ui5-tab text="Tab 3">
|
|
702
|
-
<ui5-label>Dolores totam perferendis numquam incidunt obcaecati, id quo at alias rem deserunt praesentium repellat ipsum commodi consequuntur veniam et ducimus animi qui nobis accusantium tenetur eveniet culpa non!</ui5-label>
|
|
703
|
-
</ui5-tab>
|
|
704
|
-
</ui5-tabcontainer>
|
|
705
|
-
</section>
|
|
706
|
-
|
|
707
|
-
<section>
|
|
708
|
-
<h2>Text only Start And End Overflow Custom Overflow Buttons</h2>
|
|
709
|
-
<ui5-tabcontainer id="tabContainerCustomOverflowButtons" tabs-overflow-mode="StartAndEnd" collapsed fixed>
|
|
710
|
-
<ui5-button slot="startOverflowButton" id="startOverflowButton">Start</ui5-button>
|
|
711
|
-
<ui5-button slot="overflowButton" id="endOverflowButton">End</ui5-button>
|
|
712
|
-
<ui5-tab text="One"></ui5-tab>
|
|
713
|
-
<ui5-tab text="Two"></ui5-tab>
|
|
714
|
-
<ui5-tab text="Three"></ui5-tab>
|
|
715
|
-
<ui5-tab text="Four"></ui5-tab>
|
|
716
|
-
<ui5-tab text="Five"></ui5-tab>
|
|
717
|
-
<ui5-tab text="Six"></ui5-tab>
|
|
718
|
-
<ui5-tab text="Seven"></ui5-tab>
|
|
719
|
-
<ui5-tab text="Eight"></ui5-tab>
|
|
720
|
-
<ui5-tab text="Nine"></ui5-tab>
|
|
721
|
-
<ui5-tab text="Ten"></ui5-tab>
|
|
722
|
-
<ui5-tab text="Eleven"></ui5-tab>
|
|
723
|
-
<ui5-tab text="Twelve"></ui5-tab>
|
|
724
|
-
<ui5-tab text="Thirteen"></ui5-tab>
|
|
725
|
-
<ui5-tab text="Fourteen"></ui5-tab>
|
|
726
|
-
<ui5-tab text="Fifteen"></ui5-tab>
|
|
727
|
-
<ui5-tab text="Sixteen"></ui5-tab>
|
|
728
|
-
<ui5-tab text="Seventeen"></ui5-tab>
|
|
729
|
-
<ui5-tab text="Eighteen"></ui5-tab>
|
|
730
|
-
<ui5-tab text="Nineteen"></ui5-tab>
|
|
731
|
-
<ui5-tab text="Twenty" selected></ui5-tab>
|
|
732
|
-
<ui5-tab text="Twenty One"></ui5-tab>
|
|
733
|
-
<ui5-tab text="Twenty Two"></ui5-tab>
|
|
734
|
-
<ui5-tab text="Twenty Three"></ui5-tab>
|
|
735
|
-
<ui5-tab text="Twenty Four"></ui5-tab>
|
|
736
|
-
<ui5-tab text="Twenty Five"></ui5-tab>
|
|
737
|
-
<ui5-tab text="Twenty Six"></ui5-tab>
|
|
738
|
-
<ui5-tab text="Twenty Seven"></ui5-tab>
|
|
739
|
-
<ui5-tab text="Twenty Eight"></ui5-tab>
|
|
740
|
-
<ui5-tab text="Twenty Nine"></ui5-tab>
|
|
741
|
-
<ui5-tab text="Thirty"></ui5-tab>
|
|
742
|
-
</ui5-tabcontainer>
|
|
743
|
-
|
|
744
|
-
<ui5-tabcontainer>
|
|
745
|
-
<ui5-tab text="First tab" design="Positive" additional-text="1">
|
|
746
|
-
<ui5-button>Button 1</ui5-button>
|
|
747
|
-
</ui5-tab>
|
|
748
|
-
<ui5-tab text="Second tab" design="Critical" additional-text="2">
|
|
749
|
-
<ui5-button>Button 1</ui5-button>
|
|
750
|
-
</ui5-tab>
|
|
751
|
-
<ui5-tab text="Third tab" design="Negative" additional-text="3">
|
|
752
|
-
<ui5-button>Button 1</ui5-button>
|
|
753
|
-
</ui5-tab>
|
|
754
|
-
<ui5-tab text="Fourth tab" design="Neutral" additional-text="4">
|
|
755
|
-
<ui5-button>Button 1</ui5-button>
|
|
756
|
-
</ui5-tab>
|
|
757
|
-
</ui5-tabcontainer>
|
|
758
|
-
|
|
759
|
-
<section>
|
|
760
|
-
<ui5-title>Select tabs programmatically</ui5-title>
|
|
761
|
-
<ui5-tabcontainer id="tcSmall" style="width: 200px;">
|
|
762
|
-
<ui5-tab id="firstTab" text="First tab">
|
|
763
|
-
<ui5-button>Button 1</ui5-button>
|
|
764
|
-
</ui5-tab>
|
|
765
|
-
<ui5-tab text="Second tab">
|
|
766
|
-
<ui5-button>Button 1</ui5-button>
|
|
767
|
-
</ui5-tab>
|
|
768
|
-
<ui5-tab text="Third tab" selected>
|
|
769
|
-
<ui5-button>Button 1</ui5-button>
|
|
770
|
-
</ui5-tab>
|
|
771
|
-
<ui5-tab text="Fourth tab">
|
|
772
|
-
<ui5-button>Button 1</ui5-button>
|
|
773
|
-
</ui5-tab>
|
|
774
|
-
<ui5-tab text="Fifth tab">
|
|
775
|
-
<ui5-button>Button 1</ui5-button>
|
|
776
|
-
</ui5-tab>
|
|
777
|
-
<ui5-tab text="Sixth tab">
|
|
778
|
-
<ui5-button>Button 1</ui5-button>
|
|
779
|
-
</ui5-tab>
|
|
780
|
-
<ui5-tab id="nestedTabParent" text="Seventh tab">
|
|
781
|
-
<ui5-button>Button 1</ui5-button>
|
|
782
|
-
|
|
783
|
-
<ui5-tab id="nestedTab" slot="subTabs" text="Nested tab">
|
|
784
|
-
<ui5-button>Button 1</ui5-button>
|
|
785
|
-
</ui5-tab>
|
|
786
|
-
</ui5-tab>
|
|
787
|
-
<ui5-tab id="lastTab" text="Eighth tab">
|
|
788
|
-
<ui5-button>Button 1</ui5-button>
|
|
789
|
-
</ui5-tab>
|
|
790
|
-
</ui5-tabcontainer>
|
|
791
|
-
|
|
792
|
-
<ui5-button id="selectFirst">Select First Tab</ui5-button>
|
|
793
|
-
<ui5-button id="selectLast">Select Last Tab</ui5-button>
|
|
794
|
-
<ui5-button id="selectNested">Select a Nested Tab</ui5-button>
|
|
795
|
-
</section>
|
|
796
|
-
<section>
|
|
797
|
-
<ui5-title>Empty Tab Container</ui5-title>
|
|
798
|
-
<ui5-tabcontainer id="tabContainerEmpty">
|
|
799
|
-
</ui5-tabcontainer>
|
|
800
|
-
</section>
|
|
801
|
-
<section>
|
|
802
|
-
<h3>Add new selected tab programmatically</h3>
|
|
803
|
-
<ui5-tabcontainer id="tabContainerAddTabsProgrammatically">
|
|
804
|
-
<ui5-tab text="Tab 0" selected></ui5-tab>
|
|
805
|
-
<ui5-tab text="Tab 1"></ui5-tab>
|
|
806
|
-
</ui5-tabcontainer>
|
|
807
|
-
<ui5-button id="buttonAddTabs">add tabs</ui5-button>
|
|
808
|
-
</section>
|
|
809
|
-
|
|
810
|
-
</section>
|
|
811
|
-
|
|
812
|
-
<script>
|
|
813
|
-
document.getElementById("tabContainer1").addEventListener("ui5-tab-select", async function (event) {
|
|
814
|
-
result.innerHTML = event.detail.tab.text;
|
|
815
|
-
resultIdx.innerHTML = event.detail.tabIndex;
|
|
816
|
-
});
|
|
817
|
-
|
|
818
|
-
let preventTabSelect = false;
|
|
819
|
-
document.getElementById("cbPrevent").addEventListener("ui5-change", event => {
|
|
820
|
-
preventTabSelect = event.target.checked;
|
|
821
|
-
});
|
|
822
|
-
|
|
823
|
-
document.getElementById("tabContainer1").addEventListener("ui5-tab-select", event => {
|
|
824
|
-
if (preventTabSelect) {
|
|
825
|
-
event.preventDefault();
|
|
826
|
-
}
|
|
827
|
-
});
|
|
828
|
-
|
|
829
|
-
document.getElementById("densityToggle").addEventListener("ui5-click", function (event) {
|
|
830
|
-
document.body.classList.toggle("sapUiSizeCompact")
|
|
831
|
-
});
|
|
832
|
-
|
|
833
|
-
const selectFirstTabBtn = document.getElementById("selectFirst");
|
|
834
|
-
const selectLastTabBtn = document.getElementById("selectLast");
|
|
835
|
-
const selectNestedTabBtn = document.getElementById("selectNested");
|
|
836
|
-
|
|
837
|
-
function walk(tabs, callback) {
|
|
838
|
-
[...tabs].forEach(tab => {
|
|
839
|
-
callback(tab);
|
|
840
|
-
if (tab.subTabs) {
|
|
841
|
-
walk(tab.subTabs, callback);
|
|
842
|
-
}});
|
|
843
|
-
};
|
|
844
|
-
|
|
845
|
-
function getTabSelectorCallback(target) {
|
|
846
|
-
return (tab) => tab.selected = tab === target;
|
|
847
|
-
}
|
|
848
|
-
|
|
849
|
-
selectFirstTabBtn.addEventListener("click", () => {
|
|
850
|
-
const tabContainer = document.getElementById("tcSmall");
|
|
851
|
-
const firstTab = tabContainer.querySelector("#firstTab");
|
|
852
|
-
|
|
853
|
-
walk(tabContainer.items, getTabSelectorCallback(firstTab));
|
|
854
|
-
})
|
|
855
|
-
|
|
856
|
-
selectLastTabBtn.addEventListener("click", () => {
|
|
857
|
-
const tabContainer = document.getElementById("tcSmall");
|
|
858
|
-
const lastTab = tabContainer.querySelector("#lastTab");
|
|
859
|
-
|
|
860
|
-
walk(tabContainer.items, getTabSelectorCallback(lastTab));
|
|
861
|
-
});
|
|
862
|
-
|
|
863
|
-
selectNestedTabBtn.addEventListener("click", () => {
|
|
864
|
-
const tabContainer = document.getElementById("tcSmall");
|
|
865
|
-
const nestedTab = tabContainer.querySelector("#nestedTab");
|
|
866
|
-
|
|
867
|
-
walk(tabContainer.items, getTabSelectorCallback(nestedTab));
|
|
868
|
-
});
|
|
869
|
-
|
|
870
|
-
const radioGroupHeaderDesign = document.getElementById("radioGroup-headerDesign");
|
|
871
|
-
const radioGroupContentDesign = document.getElementById("radioGroup-contentDesign");
|
|
872
|
-
const tabContainerBackgroundDesign = document.getElementById("tabContainerBackgroundDesign");
|
|
873
|
-
radioGroupHeaderDesign.addEventListener("change", function (e) {
|
|
874
|
-
tabContainerBackgroundDesign.headerBackgroundDesign = e.target.text;
|
|
875
|
-
});
|
|
876
|
-
|
|
877
|
-
radioGroupContentDesign.addEventListener("change", function (e) {
|
|
878
|
-
tabContainerBackgroundDesign.contentBackgroundDesign = e.target.text;
|
|
879
|
-
});
|
|
880
|
-
|
|
881
|
-
let tabIndex = 1;
|
|
882
|
-
document.getElementById("buttonAddTabs").addEventListener("click", function () {
|
|
883
|
-
const tabcontainer = document.getElementById("tabContainerAddTabsProgrammatically");
|
|
884
|
-
|
|
885
|
-
tabcontainer.items.forEach(item => (item.selected = false));
|
|
886
|
-
|
|
887
|
-
function addTab(selected = false) {
|
|
888
|
-
tabcontainer.appendChild(
|
|
889
|
-
Object.assign(document.createElement("ui5-tab"), {
|
|
890
|
-
text: `Tab ${++tabIndex}`,
|
|
891
|
-
selected
|
|
892
|
-
})
|
|
893
|
-
);
|
|
894
|
-
}
|
|
895
|
-
|
|
896
|
-
addTab(true);
|
|
897
|
-
addTab();
|
|
898
|
-
addTab();
|
|
899
|
-
});
|
|
900
|
-
|
|
901
|
-
</script>
|
|
902
|
-
</body>
|
|
903
|
-
|
|
904
|
-
</html>
|