@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.
- package/.dev-server-port +1 -0
- package/package.json +8 -9
- package/LICENSE.txt +0 -201
- package/dist/assets/test/pages/72override.html.dda35518.css +0 -1
- package/dist/assets/test/pages/AnimanitionOff.html.b7566ecc.css +0 -1
- package/dist/assets/test/pages/Avatar.html.62cc0573.css +0 -1
- package/dist/assets/test/pages/AvatarGroup.html.20647fe1.css +0 -1
- package/dist/assets/test/pages/Badge.html.bcc1c9a3.css +0 -1
- package/dist/assets/test/pages/Breadcrumbs.html.5753069f.css +0 -1
- package/dist/assets/test/pages/BusyIndicator.html.ce95c23c.css +0 -1
- package/dist/assets/test/pages/Button.html.957848f0.css +0 -1
- package/dist/assets/test/pages/Calendar.html.9ff42e30.css +0 -1
- package/dist/assets/test/pages/Card.html.8c5e4756.css +0 -1
- package/dist/assets/test/pages/Carousel.html.fcdd32a7.css +0 -1
- package/dist/assets/test/pages/CheckBox.html.08ae630d.css +0 -1
- package/dist/assets/test/pages/ColorPalette.html.8c4c4ca3.css +0 -1
- package/dist/assets/test/pages/ColorPalettePopover.html.727f90e2.css +0 -1
- package/dist/assets/test/pages/ColorPicker.html.cc0c0d29.css +0 -1
- package/dist/assets/test/pages/ComboBox.html.14fbc3aa.css +0 -1
- package/dist/assets/test/pages/ComboBox.html.c091a8e7.js +0 -1
- package/dist/assets/test/pages/Components.html.b41617c5.css +0 -1
- package/dist/assets/test/pages/CoreControls.html.dabd050c.css +0 -1
- package/dist/assets/test/pages/CoreControls_exp.html.46ab2dc9.css +0 -1
- package/dist/assets/test/pages/CustomCSS.html.4d6e9b1f.css +0 -1
- package/dist/assets/test/pages/DatePicker.html.e667d0b8.css +0 -1
- package/dist/assets/test/pages/DatePicker_test_page.html.882ab55e.css +0 -1
- package/dist/assets/test/pages/DateRangePicker.html.1b5072fd.css +0 -1
- package/dist/assets/test/pages/DateTimePicker.html.eff0e2e0.css +0 -1
- package/dist/assets/test/pages/DayPicker.html.5700622a.css +0 -1
- package/dist/assets/test/pages/Dialog.html.329cb1dc.css +0 -1
- package/dist/assets/test/pages/DialogLifecycle.html.e4ac6ba2.css +0 -1
- package/dist/assets/test/pages/DialogSemantic.html.f61ec13d.css +0 -1
- package/dist/assets/test/pages/DurationPicker.html.92ecf486.css +0 -1
- package/dist/assets/test/pages/Eventing.html.cd934528.css +0 -1
- package/dist/assets/test/pages/FileUploader.html.30b8cbbd.css +0 -1
- package/dist/assets/test/pages/FormSupport.html.4e02207b.css +0 -1
- package/dist/assets/test/pages/HCB.html.d458990b.css +0 -1
- package/dist/assets/test/pages/Icon.html.5f0fd46d.js +0 -1
- package/dist/assets/test/pages/Icon.html.be3b1acc.css +0 -1
- package/dist/assets/test/pages/Input.html.85ce57b4.css +0 -1
- package/dist/assets/test/pages/Input_quickview.html.86df3de3.css +0 -1
- package/dist/assets/test/pages/InputsAlignment.html.5c5593c2.css +0 -1
- package/dist/assets/test/pages/ItemNavigation.html.f5758aae.css +0 -1
- package/dist/assets/test/pages/Kitchen.html.d0d90fc6.css +0 -1
- package/dist/assets/test/pages/Kitchen.openui5.html.910e3d52.css +0 -1
- package/dist/assets/test/pages/Label.html.26cf5a3e.js +0 -4
- package/dist/assets/test/pages/Label.html.e994dc8e.css +0 -1
- package/dist/assets/test/pages/Link.html.d4c480d9.css +0 -1
- package/dist/assets/test/pages/List.html.65a3c4b3.css +0 -1
- package/dist/assets/test/pages/ListGrowing_Button.html.49bbaf80.css +0 -1
- package/dist/assets/test/pages/ListGrowing_Scroll.html.841dd1ed.css +0 -1
- package/dist/assets/test/pages/List_keyboard_support.html.a7297baf.css +0 -1
- package/dist/assets/test/pages/List_test_page.html.356d4e16.css +0 -1
- package/dist/assets/test/pages/LitKeyFunction.html.f3f9d649.css +0 -1
- package/dist/assets/test/pages/MemoryLeak.html.35d77e5e.css +0 -1
- package/dist/assets/test/pages/Menu.html.a758a26d.css +0 -1
- package/dist/assets/test/pages/MessagePage.html.30ffc162.css +0 -1
- package/dist/assets/test/pages/MessageStrip.html.8c2c85d5.css +0 -1
- package/dist/assets/test/pages/MultiComboBox.html.9ede2c74.css +0 -1
- package/dist/assets/test/pages/MultiInput.html.1c75cdc2.css +0 -1
- package/dist/assets/test/pages/MultiInput_Suggestions.html.79cd0348.css +0 -1
- package/dist/assets/test/pages/OpenUI5.html.cf1daa05.css +0 -1
- package/dist/assets/test/pages/Panel.html.399730d1.css +0 -1
- package/dist/assets/test/pages/Popover.html.6d4f19ad.css +0 -1
- package/dist/assets/test/pages/PopoverArrowBounds.html.c1e5feb1.css +0 -1
- package/dist/assets/test/pages/Popups.html.0d7c434f.js +0 -1
- package/dist/assets/test/pages/Popups.html.bb021765.css +0 -1
- package/dist/assets/test/pages/ProgressIndicator.html.d61b0c53.css +0 -1
- package/dist/assets/test/pages/RTL.html.dbeca857.css +0 -1
- package/dist/assets/test/pages/RadioButton.html.ccfd1850.css +0 -1
- package/dist/assets/test/pages/RangeSlider.html.437a9174.css +0 -1
- package/dist/assets/test/pages/RatingIndicator.html.737cd73b.css +0 -1
- package/dist/assets/test/pages/ResizeHandler.html.ed7c5d20.css +0 -1
- package/dist/assets/test/pages/ResponsivePopover.html.6f67ae07.css +0 -1
- package/dist/assets/test/pages/SegmentedButton.html.8678479b.css +0 -1
- package/dist/assets/test/pages/Select.html.9c98a470.css +0 -1
- package/dist/assets/test/pages/Simple.html.8f2ddb30.css +0 -1
- package/dist/assets/test/pages/Slider.html.8ea10965.css +0 -1
- package/dist/assets/test/pages/SplitButton.html.5c992973.css +0 -1
- package/dist/assets/test/pages/StepInput.html.f22c112d.css +0 -1
- package/dist/assets/test/pages/Switch.html.a4f3262f.css +0 -1
- package/dist/assets/test/pages/TabContainer.html.7f2ade15.css +0 -1
- package/dist/assets/test/pages/Table-perf-pure.html.fce52e4b.css +0 -1
- package/dist/assets/test/pages/Table-perf.html.88634378.css +0 -1
- package/dist/assets/test/pages/Table.html.c43386f4.css +0 -1
- package/dist/assets/test/pages/Table2.html.aca0c111.css +0 -1
- package/dist/assets/test/pages/TableAllPopin.html.ad586de4.css +0 -1
- package/dist/assets/test/pages/TableCustomStyling.html.a85167d6.css +0 -1
- package/dist/assets/test/pages/TableGrouping.html.602ae2ad.css +0 -1
- package/dist/assets/test/pages/TableGrowingWithButton.html.5a39b2bf.css +0 -1
- package/dist/assets/test/pages/TableGrowingWithScroll.html.8ef93d31.css +0 -1
- package/dist/assets/test/pages/TableSelection.html.dba2d678.css +0 -1
- package/dist/assets/test/pages/TextArea.html.f8e10fd6.css +0 -1
- package/dist/assets/test/pages/TimePicker.html.9a4bb300.css +0 -1
- package/dist/assets/test/pages/TimeSelection.html.8ad57759.css +0 -1
- package/dist/assets/test/pages/Title.html.7bb51811.css +0 -1
- package/dist/assets/test/pages/Toast.html.47a93be2.css +0 -1
- package/dist/assets/test/pages/ToggleButton.html.3b7dbb8c.css +0 -1
- package/dist/assets/test/pages/Tree.html.74fe2a1d.css +0 -1
- package/dist/assets/test/pages/WheelSlider_Test_Page.html.8a9a5e49.css +0 -1
- package/dist/assets/test/pages/form.html.f0f82118.css +0 -1
- package/dist/assets/test/pages/i18n-defaultLang.html.b9d79c6b.css +0 -1
- package/dist/assets/test/pages/i18n-demo.html.c6751b5c.css +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 -265
- 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 -255
- package/dist/test/pages/Button.html +0 -267
- package/dist/test/pages/Calendar.html +0 -96
- package/dist/test/pages/Card.html +0 -347
- package/dist/test/pages/Carousel.html +0 -584
- package/dist/test/pages/CheckBox.html +0 -76
- 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 -279
- 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 -193
- package/dist/test/pages/DatePicker_test_page.html +0 -97
- package/dist/test/pages/DateRangePicker.html +0 -64
- package/dist/test/pages/DateTimePicker.html +0 -190
- package/dist/test/pages/DayPicker.html +0 -37
- package/dist/test/pages/Dialog.html +0 -706
- package/dist/test/pages/DialogLifecycle.html +0 -62
- package/dist/test/pages/DialogSemantic.html +0 -58
- package/dist/test/pages/DurationPicker.html +0 -76
- package/dist/test/pages/Eventing.html +0 -33
- package/dist/test/pages/FileUploader.html +0 -138
- package/dist/test/pages/FormSupport.html +0 -59
- package/dist/test/pages/HCB.html +0 -45
- package/dist/test/pages/Icon.html +0 -269
- package/dist/test/pages/Icon_custom.html +0 -26
- package/dist/test/pages/Input.html +0 -722
- package/dist/test/pages/InputFieldMinWidth.html +0 -158
- 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 -638
- package/dist/test/pages/Kitchen.openui5.html +0 -570
- package/dist/test/pages/Label.html +0 -161
- 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 -356
- package/dist/test/pages/LitKeyFunction.html +0 -40
- package/dist/test/pages/MemoryLeak.html +0 -78
- package/dist/test/pages/Menu.html +0 -145
- package/dist/test/pages/MessagePage.html +0 -39
- package/dist/test/pages/MessageStrip.html +0 -55
- package/dist/test/pages/MultiComboBox.html +0 -477
- package/dist/test/pages/MultiInput.html +0 -409
- package/dist/test/pages/MultiInput_Suggestions.html +0 -161
- package/dist/test/pages/OpenUI5.html +0 -83
- package/dist/test/pages/Panel.html +0 -226
- package/dist/test/pages/Popover.html +0 -586
- 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 -85
- package/dist/test/pages/RatingIndicator.html +0 -97
- package/dist/test/pages/ResizeHandler.html +0 -74
- package/dist/test/pages/ResponsivePopover.html +0 -244
- package/dist/test/pages/SegmentedButton.html +0 -116
- package/dist/test/pages/Select.html +0 -240
- package/dist/test/pages/Simple.html +0 -25
- package/dist/test/pages/Slider.html +0 -79
- package/dist/test/pages/SplitButton.html +0 -100
- package/dist/test/pages/StepInput.html +0 -164
- package/dist/test/pages/Switch.html +0 -88
- 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/TextArea.html +0 -222
- package/dist/test/pages/TimePicker.html +0 -81
- package/dist/test/pages/TimeSelection.html +0 -31
- package/dist/test/pages/Title.html +0 -37
- package/dist/test/pages/Toast.html +0 -111
- package/dist/test/pages/ToggleButton.html +0 -69
- package/dist/test/pages/Tree.html +0 -294
- package/dist/test/pages/WheelSlider_Test_Page.html +0 -26
- package/dist/test/pages/base/DOMObserver.html +0 -20
- 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,586 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html class="popover1auto">
|
|
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>Popover</title>
|
|
8
|
-
|
|
9
|
-
<script data-ui5-config type="application/json">
|
|
10
|
-
{
|
|
11
|
-
"language": "EN",
|
|
12
|
-
"libs": "sap.ui.webc.main"
|
|
13
|
-
}
|
|
14
|
-
</script>
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
<script>
|
|
23
|
-
// delete Document.prototype.adoptedStyleSheets
|
|
24
|
-
</script>
|
|
25
|
-
<script type="module" crossorigin src="/assets/bundle.common.33be618c.js"></script>
|
|
26
|
-
<link rel="stylesheet" href="/assets/test/pages/Popover.html.6d4f19ad.css">
|
|
27
|
-
</head>
|
|
28
|
-
|
|
29
|
-
<body class="popover2auto">
|
|
30
|
-
<iframe id="clickThisIframe" src="//localhost:8080"></iframe>
|
|
31
|
-
|
|
32
|
-
<ui5-button id="btn">Click me !</ui5-button>
|
|
33
|
-
|
|
34
|
-
<ui5-popover id="pop" class="popover6auto" placement-type="Top" accessible-name="This popover is important">
|
|
35
|
-
<div slot="header">
|
|
36
|
-
<ui5-button id="first-focusable">I am in the header</ui5-button>
|
|
37
|
-
</div>
|
|
38
|
-
|
|
39
|
-
<ui5-list>
|
|
40
|
-
<ui5-li>Hello</ui5-li>
|
|
41
|
-
<ui5-li>World</ui5-li>
|
|
42
|
-
<ui5-li>Again</ui5-li>
|
|
43
|
-
</ui5-list>
|
|
44
|
-
|
|
45
|
-
<br>
|
|
46
|
-
<br>
|
|
47
|
-
|
|
48
|
-
<ui5-button id="popbtn">Open Popover</ui5-button>
|
|
49
|
-
|
|
50
|
-
<ui5-popover placement-type="Bottom" hide-arrow id="danger">
|
|
51
|
-
|
|
52
|
-
<ui5-list>
|
|
53
|
-
<ui5-li>Hello</ui5-li>
|
|
54
|
-
<ui5-li>World</ui5-li>
|
|
55
|
-
<ui5-li>Again</ui5-li>
|
|
56
|
-
</ui5-list>
|
|
57
|
-
|
|
58
|
-
<br>
|
|
59
|
-
<br>
|
|
60
|
-
|
|
61
|
-
<ui5-button id="bigDanger">Super Danger !</ui5-button>
|
|
62
|
-
|
|
63
|
-
<ui5-popover id="bigDangerPop">
|
|
64
|
-
<ui5-list>
|
|
65
|
-
<ui5-li>Hello</ui5-li>
|
|
66
|
-
<ui5-li>World</ui5-li>
|
|
67
|
-
<ui5-li>Again</ui5-li>
|
|
68
|
-
</ui5-list>
|
|
69
|
-
</ui5-popover>
|
|
70
|
-
</ui5-popover>
|
|
71
|
-
|
|
72
|
-
<br>
|
|
73
|
-
<br>
|
|
74
|
-
|
|
75
|
-
<ui5-select>
|
|
76
|
-
<ui5-option>Hello</ui5-option>
|
|
77
|
-
<ui5-option>World</ui5-option>
|
|
78
|
-
</ui5-select>
|
|
79
|
-
|
|
80
|
-
<br>
|
|
81
|
-
<br>
|
|
82
|
-
|
|
83
|
-
<div slot="footer">
|
|
84
|
-
<ui5-button>I am in the footer</ui5-button>
|
|
85
|
-
</div>
|
|
86
|
-
</ui5-popover>
|
|
87
|
-
|
|
88
|
-
<br>
|
|
89
|
-
<br>
|
|
90
|
-
<ui5-button id="btnOpenWithAttr">Open with Attribute</ui5-button>
|
|
91
|
-
<ui5-popover id="popoverAttr" opener="btnOpenWithAttr">
|
|
92
|
-
<ui5-button id="btnCloseWithMethod">Close with Method</ui5-button>
|
|
93
|
-
<ui5-button id="btnCloseWithAttr">Close with Attribute</ui5-button>
|
|
94
|
-
</ui5-popover>
|
|
95
|
-
|
|
96
|
-
<br>
|
|
97
|
-
<br>
|
|
98
|
-
|
|
99
|
-
<ui5-select>
|
|
100
|
-
<ui5-option>Hello</ui5-option>
|
|
101
|
-
<ui5-option>World</ui5-option>
|
|
102
|
-
</ui5-select>
|
|
103
|
-
|
|
104
|
-
<br>
|
|
105
|
-
<br>
|
|
106
|
-
|
|
107
|
-
<ui5-date-picker id="field"></ui5-date-picker>
|
|
108
|
-
|
|
109
|
-
<br>
|
|
110
|
-
<br>
|
|
111
|
-
|
|
112
|
-
<ui5-multi-combobox>
|
|
113
|
-
<ui5-cb-item text="Hello"></ui5-cb-item>
|
|
114
|
-
<ui5-cb-item text="World"></ui5-cb-item>
|
|
115
|
-
</ui5-multi-combobox>
|
|
116
|
-
|
|
117
|
-
<br>
|
|
118
|
-
<br>
|
|
119
|
-
|
|
120
|
-
<ui5-select id="many-items"></ui5-select>
|
|
121
|
-
|
|
122
|
-
<br>
|
|
123
|
-
<br>
|
|
124
|
-
|
|
125
|
-
<ui5-button id="big-popover-button">
|
|
126
|
-
Open Big Popover
|
|
127
|
-
</ui5-button>
|
|
128
|
-
|
|
129
|
-
<ui5-popover placement-type="Bottom" id="big-popover" header-text="hello world">
|
|
130
|
-
<ui5-list id="bigList"></ui5-list>
|
|
131
|
-
</ui5-popover>
|
|
132
|
-
|
|
133
|
-
<ui5-button id="btnPopModal">Opens modal popover!</ui5-button>
|
|
134
|
-
|
|
135
|
-
<ui5-popover id="modalPopover" modal header-text="Modal popover">
|
|
136
|
-
<ui5-list>
|
|
137
|
-
<ui5-li>Hello</ui5-li>
|
|
138
|
-
<ui5-li>Again</ui5-li>
|
|
139
|
-
<ui5-li>Wooooooooooooooooooooooooooooorld</ui5-li>
|
|
140
|
-
</ui5-list>
|
|
141
|
-
|
|
142
|
-
<div slot="footer">
|
|
143
|
-
<ui5-button id="modalPopoverClose">Close</ui5-button>
|
|
144
|
-
</div>
|
|
145
|
-
</ui5-popover>
|
|
146
|
-
|
|
147
|
-
<ui5-button id="btnPopModalNoLayer">Opens modal popover with no block layer!</ui5-button>
|
|
148
|
-
|
|
149
|
-
<ui5-popover id="modalPopoverNoLayer" modal header-text="Modal popover" hide-backdrop>
|
|
150
|
-
<ui5-list>
|
|
151
|
-
<ui5-li>Hello</ui5-li>
|
|
152
|
-
<ui5-li>Again</ui5-li>
|
|
153
|
-
<ui5-li>Wooooooooooooooooooooooooooooorld</ui5-li>
|
|
154
|
-
</ui5-list>
|
|
155
|
-
|
|
156
|
-
<div slot="footer">
|
|
157
|
-
<ui5-button id="modalPopoverNoLayerClose">Close</ui5-button>
|
|
158
|
-
</div>
|
|
159
|
-
</ui5-popover>
|
|
160
|
-
|
|
161
|
-
<ui5-button id="btnPopFocus">Opens popover with initial focus!</ui5-button>
|
|
162
|
-
|
|
163
|
-
<ui5-popover id="popFocus" initial-focus="focusMe" header-text="Popover header">
|
|
164
|
-
<ui5-list>
|
|
165
|
-
<ui5-li>Hello</ui5-li>
|
|
166
|
-
<ui5-li>Again</ui5-li>
|
|
167
|
-
<ui5-li>Wold</ui5-li>
|
|
168
|
-
</ui5-list>
|
|
169
|
-
|
|
170
|
-
<div slot="footer">
|
|
171
|
-
<ui5-button id="focusMe">Close</ui5-button>
|
|
172
|
-
</div>
|
|
173
|
-
</ui5-popover>
|
|
174
|
-
|
|
175
|
-
<br>
|
|
176
|
-
<br>
|
|
177
|
-
<ui5-title>Test open popup and hide opener</ui5-title>
|
|
178
|
-
<ui5-button id="btnQuickViewCardOpener">Open popup and hide myself</ui5-button>
|
|
179
|
-
<ui5-button id="btnMoveFocus">focusable element</ui5-button>
|
|
180
|
-
<br>
|
|
181
|
-
<br>
|
|
182
|
-
<ui5-title>placement-type="Right" (default)</ui5-title>
|
|
183
|
-
<p>No space on the Right, try Left, Bottom, Top</p>
|
|
184
|
-
<ui5-button id="btnFullWidth" class="popover7auto">Click me !</ui5-button>
|
|
185
|
-
<ui5-button id="btnNormalWidth">Click me !</ui5-button>
|
|
186
|
-
<br>
|
|
187
|
-
<br>
|
|
188
|
-
<ui5-title>placement-type="Right" (default) and allow-target-overlap=true </ui5-title>
|
|
189
|
-
<p>No space on the right, try Left, Bottom, Top and if nothing works, the target will be overlapped</p>
|
|
190
|
-
<ui5-button id="btnFullWidthTargetOverlap" class="popover7auto">Click me !</ui5-button>
|
|
191
|
-
<ui5-button id="btnNormalWidthTargetOverlap">Click me !</ui5-button>
|
|
192
|
-
|
|
193
|
-
<br>
|
|
194
|
-
<br>
|
|
195
|
-
<ui5-title>placement-type="Left"</ui5-title>
|
|
196
|
-
<p>No space on the Left, try Right, Bottom, Top</p>
|
|
197
|
-
<ui5-button id="btnFullWidthLeft" class="popover7auto">Click me !</ui5-button>
|
|
198
|
-
<div class="popover13auto">
|
|
199
|
-
<ui5-button id="btnNormalWidthLeft">Click me !</ui5-button>
|
|
200
|
-
</div>
|
|
201
|
-
|
|
202
|
-
<br>
|
|
203
|
-
<br>
|
|
204
|
-
<ui5-title>placement-type="Left" and allow-target-overlap=true</ui5-title>
|
|
205
|
-
<p>No space on the right, try Roght, Bottom, Top and if nothing works, the target will be overlapped</p>
|
|
206
|
-
<ui5-button id="btnFullWidthLeftTargetOverlap" class="popover7auto">Click me !</ui5-button>
|
|
207
|
-
<div class="popover13auto">
|
|
208
|
-
<ui5-button id="btnNormalWidthLeftTargetOverlap">Click me !</ui5-button>
|
|
209
|
-
</div>
|
|
210
|
-
|
|
211
|
-
<br>
|
|
212
|
-
<br>
|
|
213
|
-
<ui5-title>placement-type="Top"</ui5-title>
|
|
214
|
-
<ui5-button id="btnFullWidthTop" class="popover7auto">Click me !</ui5-button>
|
|
215
|
-
|
|
216
|
-
<br>
|
|
217
|
-
<br>
|
|
218
|
-
<ui5-title>placement-type="Bottom"</ui5-title>
|
|
219
|
-
<ui5-button id="btnFullWidthBottom" class="popover7auto">Click me !</ui5-button>
|
|
220
|
-
|
|
221
|
-
<ui5-popover header-text="My Heading" id="popFullWidth" class="popover6auto">
|
|
222
|
-
<div slot="header">
|
|
223
|
-
<ui5-button id="first-focusable">I am in the header</ui5-button>
|
|
224
|
-
</div>
|
|
225
|
-
|
|
226
|
-
<ui5-list>
|
|
227
|
-
<ui5-li>Hello</ui5-li>
|
|
228
|
-
<ui5-li>World</ui5-li>
|
|
229
|
-
<ui5-li>Again</ui5-li>
|
|
230
|
-
</ui5-list>
|
|
231
|
-
</ui5-popover>
|
|
232
|
-
|
|
233
|
-
<ui5-popover allow-target-overlap header-text="My Heading" id="popFullWidthTargetOverlap" class="popover6auto" >
|
|
234
|
-
<div slot="header">
|
|
235
|
-
<ui5-button id="first-focusable">I am in the header</ui5-button>
|
|
236
|
-
</div>
|
|
237
|
-
|
|
238
|
-
<ui5-list>
|
|
239
|
-
<ui5-li>Hello</ui5-li>
|
|
240
|
-
<ui5-li>World</ui5-li>
|
|
241
|
-
<ui5-li>Again</ui5-li>
|
|
242
|
-
</ui5-list>
|
|
243
|
-
</ui5-popover>
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
<ui5-popover header-text="My Heading" id="popFullWidthLeft" class="popover6auto" placement-type="Left">
|
|
247
|
-
<div slot="header">
|
|
248
|
-
<ui5-button id="first-focusable">I am in the header</ui5-button>
|
|
249
|
-
</div>
|
|
250
|
-
|
|
251
|
-
<ui5-list>
|
|
252
|
-
<ui5-li>Hello</ui5-li>
|
|
253
|
-
<ui5-li>World</ui5-li>
|
|
254
|
-
<ui5-li>Again</ui5-li>
|
|
255
|
-
</ui5-list>
|
|
256
|
-
</ui5-popover>
|
|
257
|
-
|
|
258
|
-
<ui5-popover header-text="My Heading" id="popFullWidthLeftTargetOverlap" class="popover6auto" placement-type="Left" allow-target-overlap>
|
|
259
|
-
<div slot="header">
|
|
260
|
-
<ui5-button id="first-focusable">I am in the header</ui5-button>
|
|
261
|
-
</div>
|
|
262
|
-
|
|
263
|
-
<ui5-list>
|
|
264
|
-
<ui5-li>Hello</ui5-li>
|
|
265
|
-
<ui5-li>World</ui5-li>
|
|
266
|
-
<ui5-li>Again</ui5-li>
|
|
267
|
-
</ui5-list>
|
|
268
|
-
</ui5-popover>
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
<ui5-popover header-text="My Heading" id="popFullWidthTop" class="popover6auto" placement-type="Top">
|
|
272
|
-
<div slot="header">
|
|
273
|
-
<ui5-button id="first-focusable">I am in the header</ui5-button>
|
|
274
|
-
</div>
|
|
275
|
-
|
|
276
|
-
<ui5-list>
|
|
277
|
-
<ui5-li>Hello</ui5-li>
|
|
278
|
-
<ui5-li>World</ui5-li>
|
|
279
|
-
<ui5-li>Again</ui5-li>
|
|
280
|
-
</ui5-list>
|
|
281
|
-
</ui5-popover>
|
|
282
|
-
|
|
283
|
-
<ui5-popover header-text="My Heading" id="popFullWidthBottom" class="popover6auto" placement-type="Bottom">
|
|
284
|
-
<div slot="header">
|
|
285
|
-
<ui5-button id="first-focusable">I am in the header</ui5-button>
|
|
286
|
-
</div>
|
|
287
|
-
|
|
288
|
-
<ui5-list>
|
|
289
|
-
<ui5-li>Hello</ui5-li>
|
|
290
|
-
<ui5-li>World</ui5-li>
|
|
291
|
-
<ui5-li>Again</ui5-li>
|
|
292
|
-
</ui5-list>
|
|
293
|
-
</ui5-popover>
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
<ui5-popover id="quickViewCard" placement-type="Right" height="500px">
|
|
297
|
-
<ui5-input id="searchInput" class="popover6auto">
|
|
298
|
-
<ui5-icon id="searchIcon" slot="icon" name="search"></ui5-icon>
|
|
299
|
-
</ui5-input>
|
|
300
|
-
<ui5-list class="popover8auto">
|
|
301
|
-
<ui5-li-groupheader>Actions</ui5-li-groupheader>
|
|
302
|
-
<ui5-li>Delete Product</ui5-li>
|
|
303
|
-
<ui5-li>Audit Log Settings</ui5-li>
|
|
304
|
-
<ui5-li>OData API Audit</ui5-li>
|
|
305
|
-
<ui5-li-groupheader>Products</ui5-li-groupheader>
|
|
306
|
-
<ui5-li image="./img/HT-1010.jpg" icon="navigation-right-arrow" additional-text="Re-stock" description="#12331232131" additional-text-state="Error">Laptop Lenovo</ui5-li>
|
|
307
|
-
<ui5-li image="./img/HT-1022.jpg" icon="navigation-right-arrow" additional-text="Re-stock" description="#12331232131" additional-text-state="Error">IPhone 3</ui5-li>
|
|
308
|
-
<ui5-li image="./img/HT-1030.jpg" icon-end icon="navigation-right-arrow" description="#12331232131" additional-text="Reuqired" additional-text-state="Error">HP Monitor 24</ui5-li>
|
|
309
|
-
</ui5-list>
|
|
310
|
-
</ui5-popover>
|
|
311
|
-
|
|
312
|
-
<br>
|
|
313
|
-
<br>
|
|
314
|
-
<div id="targetOpener" class="popover9auto"></div>
|
|
315
|
-
|
|
316
|
-
<ui5-button id="btnOpenXLeft">Open Popup Left aligned</ui5-button>
|
|
317
|
-
|
|
318
|
-
<ui5-popover
|
|
319
|
-
header-text="My Heading"
|
|
320
|
-
id="popXLeft" horizontal-align="Left"
|
|
321
|
-
class="popover6auto">
|
|
322
|
-
<div slot="header">
|
|
323
|
-
<ui5-button id="first-focusable">I am in the header</ui5-button>
|
|
324
|
-
</div>
|
|
325
|
-
<div>
|
|
326
|
-
<ui5-button id="first-focusable">I am in the header</ui5-button>
|
|
327
|
-
</div>
|
|
328
|
-
<div>
|
|
329
|
-
<ui5-button id="first-focusable">I am in the header</ui5-button>
|
|
330
|
-
</div>
|
|
331
|
-
</ui5-popover>
|
|
332
|
-
|
|
333
|
-
<div id="targetOpener2" class="popover10auto"></div>
|
|
334
|
-
|
|
335
|
-
<ui5-button id="btnOpenXRight">Open Popup Right aligned</ui5-button>
|
|
336
|
-
|
|
337
|
-
<ui5-popover
|
|
338
|
-
header-text="My Heading"
|
|
339
|
-
id="popXRight" horizontal-align="Right"
|
|
340
|
-
class="popover6auto">
|
|
341
|
-
<div slot="header">
|
|
342
|
-
<ui5-button id="first-focusable">I am in the header</ui5-button>
|
|
343
|
-
</div>
|
|
344
|
-
<div>
|
|
345
|
-
<ui5-button id="first-focusable">I am in the header</ui5-button>
|
|
346
|
-
</div>
|
|
347
|
-
<div>
|
|
348
|
-
<ui5-button id="first-focusable">I am in the header</ui5-button>
|
|
349
|
-
</div>
|
|
350
|
-
</ui5-popover>
|
|
351
|
-
|
|
352
|
-
<div class="popover11auto">
|
|
353
|
-
<p>Right-aligned Popover, wider than button, arrow should be centered on the button</p>
|
|
354
|
-
<ui5-button id="btnOpenXRightWide">Open</ui5-button>
|
|
355
|
-
</div>
|
|
356
|
-
|
|
357
|
-
<ui5-popover id="popXRightWide" placement-type="Bottom" horizontal-align="Right">
|
|
358
|
-
Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni architecto tenetur quia nam reprehenderit quas eveniet possimus similique quisquam culpa distinctio ex doloremque molestiae maxime sed harum, in exercitationem! Incidunt?
|
|
359
|
-
</ui5-popover>
|
|
360
|
-
|
|
361
|
-
<br>
|
|
362
|
-
<br>
|
|
363
|
-
|
|
364
|
-
<ui5-button id="firstBtn">First button</ui5-button>
|
|
365
|
-
<ui5-button id="secondBtn">Second button</ui5-button>
|
|
366
|
-
<ui5-popover id="popNoFocusableContent" placement-type="Bottom">Sample text for the ui5-popover</ui5-popover>
|
|
367
|
-
|
|
368
|
-
<br>
|
|
369
|
-
<br>
|
|
370
|
-
|
|
371
|
-
<div class="popover12auto">
|
|
372
|
-
<ui5-button id="btnOpenDynamic" icon="overflow"></ui5-button>
|
|
373
|
-
</div>
|
|
374
|
-
|
|
375
|
-
<br>
|
|
376
|
-
|
|
377
|
-
<ui5-button id="btnOpenPopoverWithDiv">Open Popover with div Inside</ui5-button>
|
|
378
|
-
|
|
379
|
-
<ui5-popover id="popWithDiv" header-text="Newsletter subscription" modal>
|
|
380
|
-
<div id="divContent">I'm a div, which can't get focus. Click me and see where focus goes.</div>
|
|
381
|
-
<div slot="footer" class="popover-footer">
|
|
382
|
-
<ui5-button design="Emphasized">Subscribe</ui5-button>
|
|
383
|
-
</div>
|
|
384
|
-
</ui5-popover>
|
|
385
|
-
|
|
386
|
-
<div class="popover13auto">
|
|
387
|
-
<ui5-button id="btnRightEdge">Popover on right edge of screen</ui5-button>
|
|
388
|
-
</div>
|
|
389
|
-
|
|
390
|
-
<ui5-popover header-text="Header" id="popoverRightEdge" placement-type="Top">
|
|
391
|
-
<ui5-label>Input field: </ui5-label>
|
|
392
|
-
<ui5-input></ui5-input>
|
|
393
|
-
</ui5-popover>
|
|
394
|
-
|
|
395
|
-
<br>
|
|
396
|
-
<br>
|
|
397
|
-
|
|
398
|
-
<ui5-button id="btnAccNameRef">Popover with accessibleNameRef</ui5-button>
|
|
399
|
-
<ui5-label id="lblAccNameRef">Some label</ui5-label>
|
|
400
|
-
<ui5-popover id="popAccNameRef" accessible-name-ref="lblAccNameRef" header-text="Header text">
|
|
401
|
-
<span>Hello world</span>
|
|
402
|
-
</ui5-popover>
|
|
403
|
-
|
|
404
|
-
<br>
|
|
405
|
-
<br>
|
|
406
|
-
|
|
407
|
-
<ui5-button id="openChainedPopover1">Open chained popover 1</ui5-button>
|
|
408
|
-
<ui5-popover id="chainedPopover1">
|
|
409
|
-
Chained Popover 1
|
|
410
|
-
<ui5-list id="openChainedPopover2List">
|
|
411
|
-
<ui5-li>Open chained popover 2</ui5-li>
|
|
412
|
-
</ui5-list>
|
|
413
|
-
</ui5-popover>
|
|
414
|
-
<ui5-popover id="chainedPopover2" placement-type="Bottom">
|
|
415
|
-
Chained Popover 2
|
|
416
|
-
<ui5-button id="closeChainedPopover2">Close chained popover 2</ui5-button>
|
|
417
|
-
</ui5-popover>
|
|
418
|
-
|
|
419
|
-
<script>
|
|
420
|
-
btn.addEventListener("click", function (event) {
|
|
421
|
-
pop.showAt(btn);
|
|
422
|
-
});
|
|
423
|
-
|
|
424
|
-
btnOpenWithAttr.addEventListener("click", function () {
|
|
425
|
-
popoverAttr.setAttribute("open", "");
|
|
426
|
-
});
|
|
427
|
-
|
|
428
|
-
btnCloseWithMethod.addEventListener("click", function () {
|
|
429
|
-
popoverAttr.close();
|
|
430
|
-
});
|
|
431
|
-
|
|
432
|
-
btnCloseWithAttr.addEventListener("click", function () {
|
|
433
|
-
popoverAttr.removeAttribute("open");
|
|
434
|
-
});
|
|
435
|
-
|
|
436
|
-
popbtn.addEventListener("click", function (event) {
|
|
437
|
-
danger.showAt(popbtn);
|
|
438
|
-
});
|
|
439
|
-
|
|
440
|
-
bigDanger.addEventListener("click", function (event) {
|
|
441
|
-
bigDangerPop.showAt(bigDanger);
|
|
442
|
-
});
|
|
443
|
-
|
|
444
|
-
btnPopModal.addEventListener("click", function (event) {
|
|
445
|
-
modalPopover.showAt(btnPopModal);
|
|
446
|
-
});
|
|
447
|
-
|
|
448
|
-
btnPopModalNoLayer.addEventListener("click", function() {
|
|
449
|
-
modalPopoverNoLayer.showAt(btnPopModalNoLayer);
|
|
450
|
-
});
|
|
451
|
-
|
|
452
|
-
modalPopoverNoLayerClose.addEventListener("click", function() {
|
|
453
|
-
modalPopoverNoLayer.close();
|
|
454
|
-
});
|
|
455
|
-
|
|
456
|
-
modalPopoverClose.addEventListener("click", function (event) {
|
|
457
|
-
modalPopover.close();
|
|
458
|
-
});
|
|
459
|
-
|
|
460
|
-
btnPopFocus.addEventListener("click", function (event) {
|
|
461
|
-
popFocus.showAt(btnPopFocus);
|
|
462
|
-
});
|
|
463
|
-
|
|
464
|
-
document.getElementById("many-items").innerHTML = [].map.call("Ullamco ea ad fugiat enim elit dolore ullamco ad magna excepteur cupidatat.", function (item, index) {
|
|
465
|
-
return "<ui5-option>" + item + "</ui5-option>";
|
|
466
|
-
}).join("");
|
|
467
|
-
|
|
468
|
-
document.getElementById("bigList").innerHTML = [].map.call("Ullamco ea ad fugiat enim elit dolore ullamco ad magna excepteur cupidatat.", function (item, index) {
|
|
469
|
-
return "<ui5-li>" + item + "</ui5-li>";
|
|
470
|
-
}).join("");
|
|
471
|
-
|
|
472
|
-
document.getElementById("big-popover-button").addEventListener("click", function (event) {
|
|
473
|
-
document.getElementById("big-popover").showAt(event.target);
|
|
474
|
-
});
|
|
475
|
-
|
|
476
|
-
btnFullWidth.addEventListener("click", function (event) {
|
|
477
|
-
popFullWidth.showAt(btnFullWidth);
|
|
478
|
-
});
|
|
479
|
-
btnNormalWidth.addEventListener("click", function (event) {
|
|
480
|
-
popFullWidth.showAt(btnNormalWidth);
|
|
481
|
-
});
|
|
482
|
-
|
|
483
|
-
btnFullWidthTargetOverlap.addEventListener("click", function (event) {
|
|
484
|
-
popFullWidthTargetOverlap.showAt(btnFullWidthTargetOverlap);
|
|
485
|
-
});
|
|
486
|
-
btnNormalWidthTargetOverlap.addEventListener("click", function (event) {
|
|
487
|
-
popFullWidthTargetOverlap.showAt(btnNormalWidthTargetOverlap);
|
|
488
|
-
});
|
|
489
|
-
|
|
490
|
-
btnFullWidthLeft.addEventListener("click", function (event) {
|
|
491
|
-
popFullWidthLeft.showAt(btnFullWidthLeft);
|
|
492
|
-
});
|
|
493
|
-
btnNormalWidthLeft.addEventListener("click", function (event) {
|
|
494
|
-
popFullWidthLeft.showAt(btnNormalWidthLeft);
|
|
495
|
-
});
|
|
496
|
-
|
|
497
|
-
btnFullWidthLeftTargetOverlap.addEventListener("click", function (event) {
|
|
498
|
-
popFullWidthLeftTargetOverlap.showAt(btnFullWidthLeftTargetOverlap);
|
|
499
|
-
});
|
|
500
|
-
btnNormalWidthLeftTargetOverlap.addEventListener("click", function (event) {
|
|
501
|
-
popFullWidthLeftTargetOverlap.showAt(btnNormalWidthLeftTargetOverlap);
|
|
502
|
-
});
|
|
503
|
-
|
|
504
|
-
btnFullWidthTop.addEventListener("click", function (event) {
|
|
505
|
-
popFullWidthTop.showAt(btnFullWidthTop);
|
|
506
|
-
});
|
|
507
|
-
|
|
508
|
-
btnFullWidthBottom.addEventListener("click", function (event) {
|
|
509
|
-
popFullWidthBottom.showAt(btnFullWidthBottom);
|
|
510
|
-
});
|
|
511
|
-
|
|
512
|
-
btnQuickViewCardOpener.addEventListener("click", function (event) {
|
|
513
|
-
quickViewCard.showAt(btnQuickViewCardOpener);
|
|
514
|
-
|
|
515
|
-
btnQuickViewCardOpener.setAttribute("hidden", true);
|
|
516
|
-
})
|
|
517
|
-
btnOpenXLeft.addEventListener("click", function (event) {
|
|
518
|
-
popXLeft.showAt(targetOpener);
|
|
519
|
-
});
|
|
520
|
-
btnOpenXRight.addEventListener("click", function (event) {
|
|
521
|
-
popXRight.showAt(targetOpener2);
|
|
522
|
-
});
|
|
523
|
-
|
|
524
|
-
firstBtn.addEventListener("click", function (event) {
|
|
525
|
-
popNoFocusableContent.innerHTML = "First button is clicked";
|
|
526
|
-
popNoFocusableContent.showAt(event.target);
|
|
527
|
-
});
|
|
528
|
-
|
|
529
|
-
secondBtn.addEventListener("click", function (event) {
|
|
530
|
-
popNoFocusableContent.innerHTML = "Second button is clicked";
|
|
531
|
-
popNoFocusableContent.showAt(event.target);
|
|
532
|
-
});
|
|
533
|
-
|
|
534
|
-
btnOpenDynamic.addEventListener("click", function () {
|
|
535
|
-
var popover = document.createElement("ui5-popover"),
|
|
536
|
-
button = document.createElement("ui5-button");
|
|
537
|
-
|
|
538
|
-
button.textContent = "Focusable element";
|
|
539
|
-
popover.appendChild(button);
|
|
540
|
-
popover.setAttribute("id", "dynamic-popover");
|
|
541
|
-
popover.setAttribute("placement-type", "Bottom");
|
|
542
|
-
|
|
543
|
-
document.body.appendChild(popover);
|
|
544
|
-
|
|
545
|
-
popover.showAt(btnOpenDynamic);
|
|
546
|
-
});
|
|
547
|
-
|
|
548
|
-
btnOpenPopoverWithDiv.addEventListener("click", function (event) {
|
|
549
|
-
popWithDiv.showAt(event.target);
|
|
550
|
-
});
|
|
551
|
-
|
|
552
|
-
btnOpenXRightWide.addEventListener("click", function () {
|
|
553
|
-
popXRightWide.showAt(btnOpenXRightWide);
|
|
554
|
-
});
|
|
555
|
-
|
|
556
|
-
btnRightEdge.addEventListener("click", function () {
|
|
557
|
-
popoverRightEdge.showAt(btnRightEdge);
|
|
558
|
-
});
|
|
559
|
-
|
|
560
|
-
btnAccNameRef.addEventListener("click", function () {
|
|
561
|
-
popAccNameRef.showAt(btnAccNameRef);
|
|
562
|
-
});
|
|
563
|
-
|
|
564
|
-
openChainedPopover1.addEventListener("click", function () {
|
|
565
|
-
chainedPopover1.showAt(openChainedPopover1);
|
|
566
|
-
});
|
|
567
|
-
|
|
568
|
-
openChainedPopover2List.addEventListener("ui5-item-click", function () {
|
|
569
|
-
chainedPopover1.close();
|
|
570
|
-
chainedPopover2.showAt(openChainedPopover1);
|
|
571
|
-
});
|
|
572
|
-
|
|
573
|
-
closeChainedPopover2.addEventListener("click", function () {
|
|
574
|
-
chainedPopover2.close();
|
|
575
|
-
});
|
|
576
|
-
|
|
577
|
-
chainedPopover2.addEventListener("after-close", function () {
|
|
578
|
-
var toast = document.createElement("ui5-toast");
|
|
579
|
-
toast.appendChild(document.createTextNode("Closed chained popover 2"));
|
|
580
|
-
document.body.appendChild(toast);
|
|
581
|
-
toast.show();
|
|
582
|
-
});
|
|
583
|
-
</script>
|
|
584
|
-
</body>
|
|
585
|
-
|
|
586
|
-
</html>
|
|
@@ -1,52 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html class="popover1auto">
|
|
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>PopoverArrowBounds</title>
|
|
8
|
-
|
|
9
|
-
<script data-ui5-config type="application/json">
|
|
10
|
-
{
|
|
11
|
-
"language": "EN"
|
|
12
|
-
}
|
|
13
|
-
</script>
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
<script type="module" crossorigin src="/assets/bundle.common.33be618c.js"></script>
|
|
19
|
-
<link rel="stylesheet" href="/assets/test/pages/PopoverArrowBounds.html.c1e5feb1.css">
|
|
20
|
-
</head>
|
|
21
|
-
|
|
22
|
-
<body class="sapUiSizeCompact">
|
|
23
|
-
<ui5-button id="myBtn1" data-placement-type="Left" class="myBtn">1</ui5-button>
|
|
24
|
-
<ui5-button id="myBtn2" data-placement-type="Left" data-vertical-align="Top" class="myBtn">2</ui5-button>
|
|
25
|
-
<ui5-button id="myBtn3" data-placement-type="Bottom" class="myBtn">3</ui5-button>
|
|
26
|
-
<ui5-button id="myBtn4" data-placement-type="Top" class="myBtn">4</ui5-button>
|
|
27
|
-
<ui5-button id="myBtn5" data-placement-type="Left" class="myBtn">5</ui5-button>
|
|
28
|
-
<ui5-button id="myBtn6" data-placement-type="Left" class="myBtn">6</ui5-button>
|
|
29
|
-
|
|
30
|
-
<ui5-toggle-button id="customSizeBtn">Bigger Popover</ui5-toggle-button>
|
|
31
|
-
|
|
32
|
-
<ui5-popover id="myPopover">My Popover</ui5-popover>
|
|
33
|
-
|
|
34
|
-
<script>
|
|
35
|
-
var myPopover = document.getElementById("myPopover");
|
|
36
|
-
|
|
37
|
-
Array.from(document.querySelectorAll(".myBtn")).forEach(function (btn) {
|
|
38
|
-
btn.addEventListener("click", function() {
|
|
39
|
-
myPopover.placementType = btn.dataset.placementType;
|
|
40
|
-
myPopover.verticalAlign = btn.dataset.verticalAlign;
|
|
41
|
-
myPopover.showAt(btn);
|
|
42
|
-
});
|
|
43
|
-
});
|
|
44
|
-
|
|
45
|
-
var customSizeBtn = document.getElementById("customSizeBtn");
|
|
46
|
-
customSizeBtn.addEventListener("click", function (event) {
|
|
47
|
-
myPopover.classList.toggle("customSize");
|
|
48
|
-
})
|
|
49
|
-
</script>
|
|
50
|
-
</body>
|
|
51
|
-
|
|
52
|
-
</html>
|