@ui5/webcomponents 1.10.1 → 1.10.2

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.
Files changed (205) hide show
  1. package/.dev-server-port +1 -0
  2. package/package.json +8 -9
  3. package/LICENSE.txt +0 -201
  4. package/dist/assets/test/pages/72override.html.dda35518.css +0 -1
  5. package/dist/assets/test/pages/AnimanitionOff.html.b7566ecc.css +0 -1
  6. package/dist/assets/test/pages/Avatar.html.62cc0573.css +0 -1
  7. package/dist/assets/test/pages/AvatarGroup.html.20647fe1.css +0 -1
  8. package/dist/assets/test/pages/Badge.html.bcc1c9a3.css +0 -1
  9. package/dist/assets/test/pages/Breadcrumbs.html.5753069f.css +0 -1
  10. package/dist/assets/test/pages/BusyIndicator.html.ce95c23c.css +0 -1
  11. package/dist/assets/test/pages/Button.html.957848f0.css +0 -1
  12. package/dist/assets/test/pages/Calendar.html.9ff42e30.css +0 -1
  13. package/dist/assets/test/pages/Card.html.8c5e4756.css +0 -1
  14. package/dist/assets/test/pages/Carousel.html.fcdd32a7.css +0 -1
  15. package/dist/assets/test/pages/CheckBox.html.08ae630d.css +0 -1
  16. package/dist/assets/test/pages/ColorPalette.html.8c4c4ca3.css +0 -1
  17. package/dist/assets/test/pages/ColorPalettePopover.html.727f90e2.css +0 -1
  18. package/dist/assets/test/pages/ColorPicker.html.cc0c0d29.css +0 -1
  19. package/dist/assets/test/pages/ComboBox.html.14fbc3aa.css +0 -1
  20. package/dist/assets/test/pages/ComboBox.html.c091a8e7.js +0 -1
  21. package/dist/assets/test/pages/Components.html.b41617c5.css +0 -1
  22. package/dist/assets/test/pages/CoreControls.html.dabd050c.css +0 -1
  23. package/dist/assets/test/pages/CoreControls_exp.html.46ab2dc9.css +0 -1
  24. package/dist/assets/test/pages/CustomCSS.html.4d6e9b1f.css +0 -1
  25. package/dist/assets/test/pages/DatePicker.html.e667d0b8.css +0 -1
  26. package/dist/assets/test/pages/DatePicker_test_page.html.882ab55e.css +0 -1
  27. package/dist/assets/test/pages/DateRangePicker.html.1b5072fd.css +0 -1
  28. package/dist/assets/test/pages/DateTimePicker.html.eff0e2e0.css +0 -1
  29. package/dist/assets/test/pages/DayPicker.html.5700622a.css +0 -1
  30. package/dist/assets/test/pages/Dialog.html.329cb1dc.css +0 -1
  31. package/dist/assets/test/pages/DialogLifecycle.html.e4ac6ba2.css +0 -1
  32. package/dist/assets/test/pages/DialogSemantic.html.f61ec13d.css +0 -1
  33. package/dist/assets/test/pages/DurationPicker.html.92ecf486.css +0 -1
  34. package/dist/assets/test/pages/Eventing.html.cd934528.css +0 -1
  35. package/dist/assets/test/pages/FileUploader.html.30b8cbbd.css +0 -1
  36. package/dist/assets/test/pages/FormSupport.html.4e02207b.css +0 -1
  37. package/dist/assets/test/pages/HCB.html.d458990b.css +0 -1
  38. package/dist/assets/test/pages/Icon.html.5f0fd46d.js +0 -1
  39. package/dist/assets/test/pages/Icon.html.be3b1acc.css +0 -1
  40. package/dist/assets/test/pages/Input.html.85ce57b4.css +0 -1
  41. package/dist/assets/test/pages/Input_quickview.html.86df3de3.css +0 -1
  42. package/dist/assets/test/pages/InputsAlignment.html.5c5593c2.css +0 -1
  43. package/dist/assets/test/pages/ItemNavigation.html.f5758aae.css +0 -1
  44. package/dist/assets/test/pages/Kitchen.html.d0d90fc6.css +0 -1
  45. package/dist/assets/test/pages/Kitchen.openui5.html.910e3d52.css +0 -1
  46. package/dist/assets/test/pages/Label.html.26cf5a3e.js +0 -4
  47. package/dist/assets/test/pages/Label.html.e994dc8e.css +0 -1
  48. package/dist/assets/test/pages/Link.html.d4c480d9.css +0 -1
  49. package/dist/assets/test/pages/List.html.65a3c4b3.css +0 -1
  50. package/dist/assets/test/pages/ListGrowing_Button.html.49bbaf80.css +0 -1
  51. package/dist/assets/test/pages/ListGrowing_Scroll.html.841dd1ed.css +0 -1
  52. package/dist/assets/test/pages/List_keyboard_support.html.a7297baf.css +0 -1
  53. package/dist/assets/test/pages/List_test_page.html.356d4e16.css +0 -1
  54. package/dist/assets/test/pages/LitKeyFunction.html.f3f9d649.css +0 -1
  55. package/dist/assets/test/pages/MemoryLeak.html.35d77e5e.css +0 -1
  56. package/dist/assets/test/pages/Menu.html.a758a26d.css +0 -1
  57. package/dist/assets/test/pages/MessagePage.html.30ffc162.css +0 -1
  58. package/dist/assets/test/pages/MessageStrip.html.8c2c85d5.css +0 -1
  59. package/dist/assets/test/pages/MultiComboBox.html.9ede2c74.css +0 -1
  60. package/dist/assets/test/pages/MultiInput.html.1c75cdc2.css +0 -1
  61. package/dist/assets/test/pages/MultiInput_Suggestions.html.79cd0348.css +0 -1
  62. package/dist/assets/test/pages/OpenUI5.html.cf1daa05.css +0 -1
  63. package/dist/assets/test/pages/Panel.html.399730d1.css +0 -1
  64. package/dist/assets/test/pages/Popover.html.6d4f19ad.css +0 -1
  65. package/dist/assets/test/pages/PopoverArrowBounds.html.c1e5feb1.css +0 -1
  66. package/dist/assets/test/pages/Popups.html.0d7c434f.js +0 -1
  67. package/dist/assets/test/pages/Popups.html.bb021765.css +0 -1
  68. package/dist/assets/test/pages/ProgressIndicator.html.d61b0c53.css +0 -1
  69. package/dist/assets/test/pages/RTL.html.dbeca857.css +0 -1
  70. package/dist/assets/test/pages/RadioButton.html.ccfd1850.css +0 -1
  71. package/dist/assets/test/pages/RangeSlider.html.437a9174.css +0 -1
  72. package/dist/assets/test/pages/RatingIndicator.html.737cd73b.css +0 -1
  73. package/dist/assets/test/pages/ResizeHandler.html.ed7c5d20.css +0 -1
  74. package/dist/assets/test/pages/ResponsivePopover.html.6f67ae07.css +0 -1
  75. package/dist/assets/test/pages/SegmentedButton.html.8678479b.css +0 -1
  76. package/dist/assets/test/pages/Select.html.9c98a470.css +0 -1
  77. package/dist/assets/test/pages/Simple.html.8f2ddb30.css +0 -1
  78. package/dist/assets/test/pages/Slider.html.8ea10965.css +0 -1
  79. package/dist/assets/test/pages/SplitButton.html.5c992973.css +0 -1
  80. package/dist/assets/test/pages/StepInput.html.f22c112d.css +0 -1
  81. package/dist/assets/test/pages/Switch.html.a4f3262f.css +0 -1
  82. package/dist/assets/test/pages/TabContainer.html.7f2ade15.css +0 -1
  83. package/dist/assets/test/pages/Table-perf-pure.html.fce52e4b.css +0 -1
  84. package/dist/assets/test/pages/Table-perf.html.88634378.css +0 -1
  85. package/dist/assets/test/pages/Table.html.c43386f4.css +0 -1
  86. package/dist/assets/test/pages/Table2.html.aca0c111.css +0 -1
  87. package/dist/assets/test/pages/TableAllPopin.html.ad586de4.css +0 -1
  88. package/dist/assets/test/pages/TableCustomStyling.html.a85167d6.css +0 -1
  89. package/dist/assets/test/pages/TableGrouping.html.602ae2ad.css +0 -1
  90. package/dist/assets/test/pages/TableGrowingWithButton.html.5a39b2bf.css +0 -1
  91. package/dist/assets/test/pages/TableGrowingWithScroll.html.8ef93d31.css +0 -1
  92. package/dist/assets/test/pages/TableSelection.html.dba2d678.css +0 -1
  93. package/dist/assets/test/pages/TextArea.html.f8e10fd6.css +0 -1
  94. package/dist/assets/test/pages/TimePicker.html.9a4bb300.css +0 -1
  95. package/dist/assets/test/pages/TimeSelection.html.8ad57759.css +0 -1
  96. package/dist/assets/test/pages/Title.html.7bb51811.css +0 -1
  97. package/dist/assets/test/pages/Toast.html.47a93be2.css +0 -1
  98. package/dist/assets/test/pages/ToggleButton.html.3b7dbb8c.css +0 -1
  99. package/dist/assets/test/pages/Tree.html.74fe2a1d.css +0 -1
  100. package/dist/assets/test/pages/WheelSlider_Test_Page.html.8a9a5e49.css +0 -1
  101. package/dist/assets/test/pages/form.html.f0f82118.css +0 -1
  102. package/dist/assets/test/pages/i18n-defaultLang.html.b9d79c6b.css +0 -1
  103. package/dist/assets/test/pages/i18n-demo.html.c6751b5c.css +0 -1
  104. package/dist/test/pages/72override.html +0 -33
  105. package/dist/test/pages/AnimanitionOff.html +0 -52
  106. package/dist/test/pages/Avatar.html +0 -265
  107. package/dist/test/pages/AvatarGroup.html +0 -376
  108. package/dist/test/pages/Badge.html +0 -75
  109. package/dist/test/pages/Breadcrumbs.html +0 -239
  110. package/dist/test/pages/BusyIndicator.html +0 -255
  111. package/dist/test/pages/Button.html +0 -267
  112. package/dist/test/pages/Calendar.html +0 -96
  113. package/dist/test/pages/Card.html +0 -347
  114. package/dist/test/pages/Carousel.html +0 -584
  115. package/dist/test/pages/CheckBox.html +0 -76
  116. package/dist/test/pages/ColorPalette.html +0 -126
  117. package/dist/test/pages/ColorPalettePopover.html +0 -141
  118. package/dist/test/pages/ColorPicker.html +0 -66
  119. package/dist/test/pages/ComboBox.html +0 -279
  120. package/dist/test/pages/Components.html +0 -106
  121. package/dist/test/pages/CoreControls.html +0 -203
  122. package/dist/test/pages/CoreControls_exp.html +0 -203
  123. package/dist/test/pages/CustomCSS.html +0 -55
  124. package/dist/test/pages/DatePicker.html +0 -193
  125. package/dist/test/pages/DatePicker_test_page.html +0 -97
  126. package/dist/test/pages/DateRangePicker.html +0 -64
  127. package/dist/test/pages/DateTimePicker.html +0 -190
  128. package/dist/test/pages/DayPicker.html +0 -37
  129. package/dist/test/pages/Dialog.html +0 -706
  130. package/dist/test/pages/DialogLifecycle.html +0 -62
  131. package/dist/test/pages/DialogSemantic.html +0 -58
  132. package/dist/test/pages/DurationPicker.html +0 -76
  133. package/dist/test/pages/Eventing.html +0 -33
  134. package/dist/test/pages/FileUploader.html +0 -138
  135. package/dist/test/pages/FormSupport.html +0 -59
  136. package/dist/test/pages/HCB.html +0 -45
  137. package/dist/test/pages/Icon.html +0 -269
  138. package/dist/test/pages/Icon_custom.html +0 -26
  139. package/dist/test/pages/Input.html +0 -722
  140. package/dist/test/pages/InputFieldMinWidth.html +0 -158
  141. package/dist/test/pages/InputIcons.html +0 -80
  142. package/dist/test/pages/Input_quickview.html +0 -204
  143. package/dist/test/pages/InputsAlignment.html +0 -131
  144. package/dist/test/pages/InputsLazyLoading.html +0 -244
  145. package/dist/test/pages/ItemNavigation.html +0 -94
  146. package/dist/test/pages/Kitchen.html +0 -638
  147. package/dist/test/pages/Kitchen.openui5.html +0 -570
  148. package/dist/test/pages/Label.html +0 -161
  149. package/dist/test/pages/Link.html +0 -201
  150. package/dist/test/pages/List.html +0 -465
  151. package/dist/test/pages/ListGrowing_Button.html +0 -64
  152. package/dist/test/pages/ListGrowing_Scroll.html +0 -93
  153. package/dist/test/pages/List_keyboard_support.html +0 -130
  154. package/dist/test/pages/List_test_page.html +0 -356
  155. package/dist/test/pages/LitKeyFunction.html +0 -40
  156. package/dist/test/pages/MemoryLeak.html +0 -78
  157. package/dist/test/pages/Menu.html +0 -145
  158. package/dist/test/pages/MessagePage.html +0 -39
  159. package/dist/test/pages/MessageStrip.html +0 -55
  160. package/dist/test/pages/MultiComboBox.html +0 -477
  161. package/dist/test/pages/MultiInput.html +0 -409
  162. package/dist/test/pages/MultiInput_Suggestions.html +0 -161
  163. package/dist/test/pages/OpenUI5.html +0 -83
  164. package/dist/test/pages/Panel.html +0 -226
  165. package/dist/test/pages/Popover.html +0 -586
  166. package/dist/test/pages/PopoverArrowBounds.html +0 -52
  167. package/dist/test/pages/Popups.html +0 -131
  168. package/dist/test/pages/ProgressIndicator.html +0 -151
  169. package/dist/test/pages/RTL.html +0 -118
  170. package/dist/test/pages/RadioButton.html +0 -201
  171. package/dist/test/pages/RangeSlider.html +0 -85
  172. package/dist/test/pages/RatingIndicator.html +0 -97
  173. package/dist/test/pages/ResizeHandler.html +0 -74
  174. package/dist/test/pages/ResponsivePopover.html +0 -244
  175. package/dist/test/pages/SegmentedButton.html +0 -116
  176. package/dist/test/pages/Select.html +0 -240
  177. package/dist/test/pages/Simple.html +0 -25
  178. package/dist/test/pages/Slider.html +0 -79
  179. package/dist/test/pages/SplitButton.html +0 -100
  180. package/dist/test/pages/StepInput.html +0 -164
  181. package/dist/test/pages/Switch.html +0 -88
  182. package/dist/test/pages/TabContainer.html +0 -904
  183. package/dist/test/pages/Table-perf-pure.html +0 -73
  184. package/dist/test/pages/Table-perf.html +0 -76
  185. package/dist/test/pages/Table.html +0 -2808
  186. package/dist/test/pages/Table2.html +0 -53
  187. package/dist/test/pages/TableAllPopin.html +0 -228
  188. package/dist/test/pages/TableCustomStyling.html +0 -89
  189. package/dist/test/pages/TableGrouping.html +0 -109
  190. package/dist/test/pages/TableGrowingWithButton.html +0 -805
  191. package/dist/test/pages/TableGrowingWithScroll.html +0 -801
  192. package/dist/test/pages/TableSelection.html +0 -445
  193. package/dist/test/pages/TextArea.html +0 -222
  194. package/dist/test/pages/TimePicker.html +0 -81
  195. package/dist/test/pages/TimeSelection.html +0 -31
  196. package/dist/test/pages/Title.html +0 -37
  197. package/dist/test/pages/Toast.html +0 -111
  198. package/dist/test/pages/ToggleButton.html +0 -69
  199. package/dist/test/pages/Tree.html +0 -294
  200. package/dist/test/pages/WheelSlider_Test_Page.html +0 -26
  201. package/dist/test/pages/base/DOMObserver.html +0 -20
  202. package/dist/test/pages/base/InvisibleMessage.html +0 -44
  203. package/dist/test/pages/form.html +0 -123
  204. package/dist/test/pages/i18n-defaultLang.html +0 -31
  205. package/dist/test/pages/i18n-demo.html +0 -79
package/dist/test/pages/TabContainer.html DELETED
@@ -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.33be618c.js"></script>
18
- <link rel="stylesheet" href="/assets/test/pages/TabContainer.html.7f2ade15.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" additional-text="45"></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>