-
Notifications
You must be signed in to change notification settings - Fork 273
/
Copy pathButton.html
215 lines (170 loc) · 6.81 KB
/
Button.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Button</title>
<script>
delete Document.prototype.adoptedStyleSheets
</script>
<script src="../../webcomponentsjs/webcomponents-loader.js"></script>
<script src="../../resources/bundle.esm.js" type="module"></script>
<script nomodule src="../../resources/bundle.es5.js"></script>
<style>
.long-button {
width: 1000px;
}
.long-button-begin::part(button) {
justify-content: flex-start;
}
.long-button-end::part(button) {
justify-content: flex-end;
}
</style>
</head>
<body style="background-color: var(--sapBackgroundColor);">
<ui5-button icon="home"><!----><!----></ui5-button>
<ui5-button>
<ui5-avatar
id="btnImage"
size="XS"
image="https://openui5nightly.hana.ondemand.com/test-resources/sap/f/images/Woman_avatar_01.png">
</ui5-avatar>
</ui5-button>
<ui5-icon name="invalid_name"></ui5-icon>
<ui5-button design="Emphasized" icon="invalid_name">Press</ui5-button>
<ui5-button id="button1" design="Emphasized" aria-expanded="true">Action Bar Button</ui5-button>
<ui5-button style="height: auto">Primary <br> button</ui5-button>
<ui5-button style="height: auto" design="Transparent">Secondary <span style="color:red;">button</span></ui5-button>
<ui5-button disabled id="button-disabled">Inactive</ui5-button>
<ui5-button design="Positive">Accept</ui5-button>
<ui5-button design="Negative">Decline</ui5-button>
<br />
<br />
<div>
<ui5-togglebutton design="Positive" icon="add"></ui5-togglebutton>
<ui5-togglebutton design="Negative" icon="add"></ui5-togglebutton>
</div>
<br />
<br />
<ui5-input id="click-counter"></ui5-input>
<ui5-button style="height: auto" design="Emphasized">Action<br> Bar<br> Button</ui5-button>
<ui5-button>Primary button</ui5-button>
<ui5-button design="Transparent">Secondary button</ui5-button>
<ui5-button disabled>Inactive</ui5-button>
<ui5-button design="Positive">Agree</ui5-button>
<ui5-button design="Negative">Decline</ui5-button>
<br/>
<br/>
<br/>
<ui5-button icon="download" aria-label="Download application"></ui5-button>
<ui5-button icon="employee" aria-label="Download book">Action Bar Button</ui5-button>
<ui5-button icon="download"></ui5-button>
<ui5-button icon="employee" aria-label="Download book" style="width: 6rem;">Action Bar Button</ui5-button>
<ui5-button icon="employee" icon-end aria-label="Download book" style="width: 6rem;">Action Bar Button</ui5-button>
<br />
<br />
<ui5-label id="1download-text">Download Application</ui5-label>
<ui5-label id="download-text2">From This Button</ui5-label>
<ui5-button icon="employee" aria-label="Help me">Action Bar Button</ui5-button>
<ui5-button icon="download" aria-label="Help me" aria-labelledby="1download-text"></ui5-button>
<ui5-button icon="employee" aria-labelledby="1download-text download-text2">Action Bar Button</ui5-button>
<ui5-button icon="download" aria-labelledby="1download-text"></ui5-button>
<br/>
<br/>
<br/>
<ui5-button design="Default" icon="employee">Default</ui5-button>
<ui5-button disabled design="Default" icon="employee">Default</ui5-button>
<br/>
<br/>
<ui5-button design="Positive" icon="employee">Agree</ui5-button>
<ui5-button disabled design="Positive" icon="employee">Agree</ui5-button>
<br/>
<br/>
<ui5-button design="Negative" icon="employee">Decline</ui5-button>
<ui5-button disabled design="Negative" icon="employee">Decline</ui5-button>
<br/>
<br/>
<ui5-button design="Transparent" icon="employee">Transparent</ui5-button>
<ui5-button disabled design="Transparent" icon="employee">Transparent</ui5-button>
<br/>
<br/>
<ui5-button design="Emphasized" icon="employee">Emphasized</ui5-button>
<ui5-button disabled design="Emphasized" icon="employee">Emphasized</ui5-button>
<br/>
<br/>
<br/>
<br/>
<br/>
<ui5-button icon-end icon="employee">Icon last</ui5-button>
<ui5-checkbox text="Option A"></ui5-checkbox>
<ui5-checkbox disabled text="Option A"></ui5-checkbox>
<br/>
<ui5-label>"This is a label, this is a label"</ui5-label>
<br/>
<br/>
<br/>
<br/>
<br/>
<ui5-togglebutton design="Emphasized">Action Bar Button</ui5-togglebutton>
<ui5-togglebutton>Primary button</ui5-togglebutton>
<ui5-togglebutton design="Transparent">Secondary button</ui5-togglebutton>
<ui5-togglebutton disabled>Inactive</ui5-togglebutton>
<ui5-togglebutton design="Positive">Agree</ui5-togglebutton>
<ui5-togglebutton design="Negative">Decline</ui5-togglebutton>
<br/>
<br/>
<br/>
<ui5-togglebutton icon="employee">Action Bar Button</ui5-togglebutton>
<ui5-togglebutton icon="download"></ui5-togglebutton>
<ui5-togglebutton icon="download"></ui5-togglebutton>
<br/>
<br/>
<br/>
<ui5-togglebutton design="Default" icon="employee">Default</ui5-togglebutton>
<ui5-togglebutton disabled design="Default" icon="employee">Default</ui5-togglebutton>
<br/>
<br/>
<ui5-togglebutton design="Positive" icon="employee">Agree</ui5-togglebutton>
<ui5-togglebutton disabled design="Positive" icon="employee">Agree</ui5-togglebutton>
<br/>
<br/>
<ui5-togglebutton design="Negative" icon="employee">Decline</ui5-togglebutton>
<ui5-togglebutton disabled design="Negative" icon="employee">Decline</ui5-togglebutton>
<br/>
<br/>
<ui5-togglebutton design="Transparent" icon="employee">Transparent</ui5-togglebutton>
<ui5-togglebutton disabled design="Transparent" icon="employee">Transparent</ui5-togglebutton>
<br/>
<br/>
<ui5-togglebutton design="Emphasized" icon="employee">Emphasized</ui5-togglebutton>
<ui5-togglebutton disabled design="Emphasized" icon="employee">Emphasized</ui5-togglebutton>
<br/>
<br/>
<ui5-button class="long-button long-button-begin" icon="download">Download</ui5-button>
<ui5-button class="long-button" icon="download">Download</ui5-button>
<ui5-button class="long-button long-button-end" icon="download">Download</ui5-button>
<br/>
<br/>
<ui5-title>Buttons with tooltip</ui5-title>
<br/>
<ui5-button icon="home" title="Go home"></ui5-button>
<ui5-button icon="accept" title="Accept terms & conditions"></ui5-button>
<ui5-button icon="action-settings" title="Go to settings"></ui5-button>
<ui5-button icon="alert" title="Fire an alert"></ui5-button>
<ui5-button icon="arrow-down" title="Go down"></ui5-button>
<script>
var clickCounter = document.querySelector("#click-counter");
var button = document.querySelector("#button1");
var disabledButton = document.querySelector("#button-disabled");
var clickCount = 0;
[button, disabledButton].forEach(function (el) {
el.addEventListener("click", function(event) {
clickCount += 1;
clickCounter.value = clickCount;
});
});
</script>
</body>
</html>