@progress/kendo-themes-html 5.6.1-dev.4 → 5.6.1-dev.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/expansion-panel/tests/expansion-panel-rtl.js +13 -13
- package/dist/expansion-panel/tests/expansion-panel-rtl.js.map +2 -2
- package/dist/expansion-panel/tests/expansion-panel.js +13 -13
- package/dist/expansion-panel/tests/expansion-panel.js.map +1 -1
- package/dist/floating-label/tests/floating-label-flat.js +53 -0
- package/dist/floating-label/tests/floating-label-flat.js.map +4 -4
- package/dist/floating-label/tests/floating-label-outline.js +53 -0
- package/dist/floating-label/tests/floating-label-outline.js.map +4 -4
- package/dist/floating-label/tests/floating-label.js +50 -1
- package/dist/floating-label/tests/floating-label.js.map +4 -4
- package/dist/panelbar/tests/panelbar-angular.js +25 -197
- package/dist/panelbar/tests/panelbar-angular.js.map +2 -2
- package/dist/panelbar/tests/panelbar-rtl-angular.js +263 -0
- package/dist/panelbar/tests/panelbar-rtl-angular.js.map +7 -0
- package/dist/panelbar/tests/{panelbar-universal.js → panelbar-rtl.js} +20 -283
- package/dist/panelbar/tests/panelbar-rtl.js.map +7 -0
- package/dist/panelbar/tests/panelbar.js +355 -0
- package/dist/panelbar/tests/panelbar.js.map +7 -0
- package/package.json +2 -2
- package/src/expansion-panel/tests/expansion-panel-rtl.tsx +13 -13
- package/src/expansion-panel/tests/expansion-panel.tsx +13 -13
- package/src/floating-label/tests/floating-label-flat.tsx +11 -0
- package/src/floating-label/tests/floating-label-outline.tsx +11 -0
- package/src/floating-label/tests/floating-label.tsx +11 -0
- package/src/panelbar/tests/panelbar-angular.tsx +23 -191
- package/src/panelbar/tests/panelbar-rtl-angular.tsx +190 -0
- package/src/panelbar/tests/panelbar-rtl.tsx +238 -0
- package/src/panelbar/tests/panelbar.tsx +238 -0
- package/dist/panelbar/tests/panelbar-jquery.js +0 -427
- package/dist/panelbar/tests/panelbar-jquery.js.map +0 -7
- package/dist/panelbar/tests/panelbar-react.js +0 -467
- package/dist/panelbar/tests/panelbar-react.js.map +0 -7
- package/dist/panelbar/tests/panelbar-universal.js.map +0 -7
- package/src/panelbar/tests/panelbar-jquery.tsx +0 -331
- package/src/panelbar/tests/panelbar-react.tsx +0 -362
- package/src/panelbar/tests/panelbar-universal.tsx +0 -452
|
@@ -3,6 +3,7 @@ import ReactDOM from 'react-dom/client';
|
|
|
3
3
|
import { FloatingLabel } from '../../floating-label';
|
|
4
4
|
import { Textbox } from '../../textbox';
|
|
5
5
|
import { Combobox } from '../../combobox';
|
|
6
|
+
import { Textarea } from '../../textarea';
|
|
6
7
|
|
|
7
8
|
const root = ReactDOM.createRoot(
|
|
8
9
|
document.getElementById('app') as HTMLElement
|
|
@@ -169,6 +170,16 @@ root.render(
|
|
|
169
170
|
<Combobox fillMode="flat" value="Invalid value" invalid />
|
|
170
171
|
</FloatingLabel>
|
|
171
172
|
</div>
|
|
173
|
+
<div>
|
|
174
|
+
<FloatingLabel label="Textarea label" empty>
|
|
175
|
+
<Textarea fillMode="flat" />
|
|
176
|
+
</FloatingLabel>
|
|
177
|
+
</div>
|
|
178
|
+
<div dir="rtl">
|
|
179
|
+
<FloatingLabel label="Textarea label" empty>
|
|
180
|
+
<Textarea fillMode="flat" />
|
|
181
|
+
</FloatingLabel>
|
|
182
|
+
</div>
|
|
172
183
|
</div>
|
|
173
184
|
</>
|
|
174
185
|
);
|
|
@@ -3,6 +3,7 @@ import ReactDOM from 'react-dom/client';
|
|
|
3
3
|
import { FloatingLabel } from '../../floating-label';
|
|
4
4
|
import { Textbox } from '../../textbox';
|
|
5
5
|
import { Combobox } from '../../combobox';
|
|
6
|
+
import { Textarea } from '../../textarea';
|
|
6
7
|
|
|
7
8
|
const root = ReactDOM.createRoot(
|
|
8
9
|
document.getElementById('app') as HTMLElement
|
|
@@ -169,6 +170,16 @@ root.render(
|
|
|
169
170
|
<Combobox fillMode="outline" value="Invalid value" invalid />
|
|
170
171
|
</FloatingLabel>
|
|
171
172
|
</div>
|
|
173
|
+
<div>
|
|
174
|
+
<FloatingLabel label="Textarea label" empty>
|
|
175
|
+
<Textarea fillMode="outline" />
|
|
176
|
+
</FloatingLabel>
|
|
177
|
+
</div>
|
|
178
|
+
<div dir="rtl">
|
|
179
|
+
<FloatingLabel label="Textarea label" empty>
|
|
180
|
+
<Textarea fillMode="outline" />
|
|
181
|
+
</FloatingLabel>
|
|
182
|
+
</div>
|
|
172
183
|
</div>
|
|
173
184
|
</>
|
|
174
185
|
);
|
|
@@ -3,6 +3,7 @@ import ReactDOM from 'react-dom/client';
|
|
|
3
3
|
import { FloatingLabel } from '../../floating-label';
|
|
4
4
|
import { Textbox } from '../../textbox';
|
|
5
5
|
import { Combobox } from '../../combobox';
|
|
6
|
+
import { Textarea } from '../../textarea';
|
|
6
7
|
|
|
7
8
|
const root = ReactDOM.createRoot(
|
|
8
9
|
document.getElementById('app') as HTMLElement
|
|
@@ -169,6 +170,16 @@ root.render(
|
|
|
169
170
|
<Combobox value="Invalid value" invalid />
|
|
170
171
|
</FloatingLabel>
|
|
171
172
|
</div>
|
|
173
|
+
<div>
|
|
174
|
+
<FloatingLabel label="Textarea label" empty>
|
|
175
|
+
<Textarea />
|
|
176
|
+
</FloatingLabel>
|
|
177
|
+
</div>
|
|
178
|
+
<div dir="rtl">
|
|
179
|
+
<FloatingLabel label="Textarea label" empty>
|
|
180
|
+
<Textarea />
|
|
181
|
+
</FloatingLabel>
|
|
182
|
+
</div>
|
|
172
183
|
</div>
|
|
173
184
|
</>
|
|
174
185
|
);
|
|
@@ -23,41 +23,39 @@ root.render(
|
|
|
23
23
|
<style>{styles}</style>
|
|
24
24
|
<div id="test-area" className="k-d-grid k-grid-cols-4">
|
|
25
25
|
|
|
26
|
-
<span className="k-colspan-all k-col-span-full">LTR</span>
|
|
27
|
-
|
|
28
26
|
<section>
|
|
29
27
|
<div className="k-widget k-panelbar">
|
|
30
28
|
<div className="k-item">
|
|
31
29
|
<span className="k-link k-header">
|
|
32
|
-
<Icon name="cog" />
|
|
30
|
+
<Icon name="cog" className="k-panelbar-item-icon" />
|
|
33
31
|
Root
|
|
34
|
-
<Icon className="k-panelbar-expand" name="arrow-
|
|
32
|
+
<Icon className="k-panelbar-expand" name="arrow-chevron-down" />
|
|
35
33
|
</span>
|
|
36
34
|
</div>
|
|
37
35
|
<div className="k-item">
|
|
38
|
-
<span className="k-link k-header k-
|
|
39
|
-
<span className="k-image"></span>
|
|
36
|
+
<span className="k-link k-header k-hover">
|
|
37
|
+
<span className="k-image k-panelbar-item-icon"></span>
|
|
40
38
|
Root hover
|
|
41
|
-
<Icon className="k-panelbar-expand" name="arrow-
|
|
39
|
+
<Icon className="k-panelbar-expand" name="arrow-chevron-down" />
|
|
42
40
|
</span>
|
|
43
41
|
</div>
|
|
44
42
|
<div className="k-item">
|
|
45
|
-
<span className="k-link k-header k-
|
|
43
|
+
<span className="k-link k-header k-focus">
|
|
46
44
|
<span className="k-sprite"></span>
|
|
47
45
|
Root focus
|
|
48
|
-
<Icon className="k-panelbar-expand" name="arrow-
|
|
46
|
+
<Icon className="k-panelbar-expand" name="arrow-chevron-down" />
|
|
49
47
|
</span>
|
|
50
48
|
</div>
|
|
51
49
|
<div className="k-item">
|
|
52
|
-
<span className="k-link k-header k-
|
|
50
|
+
<span className="k-link k-header k-selected">
|
|
53
51
|
Root selected
|
|
54
|
-
<Icon className="k-panelbar-expand" name="arrow-
|
|
52
|
+
<Icon className="k-panelbar-expand" name="arrow-chevron-down" />
|
|
55
53
|
</span>
|
|
56
54
|
</div>
|
|
57
55
|
<div className="k-item">
|
|
58
|
-
<span className="k-link k-header k-
|
|
56
|
+
<span className="k-link k-header k-disabled">
|
|
59
57
|
Root disabled
|
|
60
|
-
<Icon className="k-panelbar-expand" name="arrow-
|
|
58
|
+
<Icon className="k-panelbar-expand" name="arrow-chevron-down" />
|
|
61
59
|
</span>
|
|
62
60
|
</div>
|
|
63
61
|
<div className="k-item">
|
|
@@ -76,7 +74,7 @@ root.render(
|
|
|
76
74
|
<div className="k-item k-expanded">
|
|
77
75
|
<span className="k-link k-header">
|
|
78
76
|
Middle expanded
|
|
79
|
-
<Icon className="k-panelbar-collapse" name="arrow-
|
|
77
|
+
<Icon className="k-panelbar-collapse" name="arrow-chevron-up" />
|
|
80
78
|
</span>
|
|
81
79
|
<div>
|
|
82
80
|
<div className="k-panel k-group">
|
|
@@ -84,27 +82,27 @@ root.render(
|
|
|
84
82
|
<span className="k-link">Child</span>
|
|
85
83
|
</div>
|
|
86
84
|
<div className="k-item">
|
|
87
|
-
<span className="k-link k-
|
|
85
|
+
<span className="k-link k-hover">
|
|
88
86
|
Child hover
|
|
89
|
-
<Icon className="k-panelbar-expand" name="arrow-
|
|
87
|
+
<Icon className="k-panelbar-expand" name="arrow-chevron-down" />
|
|
90
88
|
</span>
|
|
91
89
|
</div>
|
|
92
90
|
<div className="k-item">
|
|
93
|
-
<span className="k-link k-
|
|
91
|
+
<span className="k-link k-focus">
|
|
94
92
|
Child focus
|
|
95
|
-
<Icon className="k-panelbar-expand" name="arrow-
|
|
93
|
+
<Icon className="k-panelbar-expand" name="arrow-chevron-down" />
|
|
96
94
|
</span>
|
|
97
95
|
</div>
|
|
98
96
|
<div className="k-item">
|
|
99
|
-
<span className="k-link k-
|
|
97
|
+
<span className="k-link k-selected">
|
|
100
98
|
Child selected
|
|
101
|
-
<Icon className="k-panelbar-expand" name="arrow-
|
|
99
|
+
<Icon className="k-panelbar-expand" name="arrow-chevron-down" />
|
|
102
100
|
</span>
|
|
103
101
|
</div>
|
|
104
102
|
<div className="k-item k-expanded">
|
|
105
103
|
<span className="k-link">
|
|
106
104
|
Child expanded
|
|
107
|
-
<Icon className="k-panelbar-collapse" name="arrow-
|
|
105
|
+
<Icon className="k-panelbar-collapse" name="arrow-chevron-up" />
|
|
108
106
|
</span>
|
|
109
107
|
<div>
|
|
110
108
|
<div className="k-panel k-group">
|
|
@@ -121,9 +119,9 @@ root.render(
|
|
|
121
119
|
</div>
|
|
122
120
|
</div>
|
|
123
121
|
<div className="k-item">
|
|
124
|
-
<span className="k-link k-
|
|
122
|
+
<span className="k-link k-disabled">
|
|
125
123
|
Child disabled
|
|
126
|
-
<Icon className="k-panelbar-expand" name="arrow-
|
|
124
|
+
<Icon className="k-panelbar-expand" name="arrow-chevron-down" />
|
|
127
125
|
</span>
|
|
128
126
|
</div>
|
|
129
127
|
<div className="k-item">
|
|
@@ -147,7 +145,7 @@ root.render(
|
|
|
147
145
|
<div className="k-item k-expanded">
|
|
148
146
|
<span className="k-link k-header">
|
|
149
147
|
First expanded
|
|
150
|
-
<Icon className="k-panelbar-collapse" name="arrow-
|
|
148
|
+
<Icon className="k-panelbar-collapse" name="arrow-chevron-up" />
|
|
151
149
|
</span>
|
|
152
150
|
<div>
|
|
153
151
|
<div className="k-panelbar-content">
|
|
@@ -176,7 +174,7 @@ root.render(
|
|
|
176
174
|
<div className="k-item k-expanded">
|
|
177
175
|
<span className="k-link k-header">
|
|
178
176
|
Last expanded
|
|
179
|
-
<Icon className="k-panelbar-collapse" name="arrow-
|
|
177
|
+
<Icon className="k-panelbar-collapse" name="arrow-chevron-up" />
|
|
180
178
|
</span>
|
|
181
179
|
<div>
|
|
182
180
|
<div className="k-panelbar-content">
|
|
@@ -187,172 +185,6 @@ root.render(
|
|
|
187
185
|
</div>
|
|
188
186
|
</div>
|
|
189
187
|
</section>
|
|
190
|
-
|
|
191
|
-
<span className="k-colspan-all k-col-span-full">RTL</span>
|
|
192
|
-
|
|
193
|
-
<section>
|
|
194
|
-
<div className="k-widget k-panelbar" dir="rtl">
|
|
195
|
-
<div className="k-item">
|
|
196
|
-
<span className="k-link k-header">
|
|
197
|
-
<Icon name="cog" />
|
|
198
|
-
Root
|
|
199
|
-
<Icon className="k-panelbar-expand" name="arrow-s" />
|
|
200
|
-
</span>
|
|
201
|
-
</div>
|
|
202
|
-
<div className="k-item">
|
|
203
|
-
<span className="k-link k-header k-state-hover">
|
|
204
|
-
<span className="k-image"></span>
|
|
205
|
-
Root hover
|
|
206
|
-
<Icon className="k-panelbar-expand" name="arrow-s" />
|
|
207
|
-
</span>
|
|
208
|
-
</div>
|
|
209
|
-
<div className="k-item">
|
|
210
|
-
<span className="k-link k-header k-state-focus">
|
|
211
|
-
<span className="k-sprite"></span>
|
|
212
|
-
Root focus
|
|
213
|
-
<Icon className="k-panelbar-expand" name="arrow-s" />
|
|
214
|
-
</span>
|
|
215
|
-
</div>
|
|
216
|
-
<div className="k-item">
|
|
217
|
-
<span className="k-link k-header k-state-selected">
|
|
218
|
-
Root selected
|
|
219
|
-
<Icon className="k-panelbar-expand" name="arrow-s" />
|
|
220
|
-
</span>
|
|
221
|
-
</div>
|
|
222
|
-
<div className="k-item">
|
|
223
|
-
<span className="k-link k-header k-state-disabled">
|
|
224
|
-
Root disabled
|
|
225
|
-
<Icon className="k-panelbar-expand" name="arrow-s" />
|
|
226
|
-
</span>
|
|
227
|
-
</div>
|
|
228
|
-
<div className="k-item">
|
|
229
|
-
<span className="k-link k-header">
|
|
230
|
-
Root last
|
|
231
|
-
</span>
|
|
232
|
-
</div>
|
|
233
|
-
</div>
|
|
234
|
-
</section>
|
|
235
|
-
|
|
236
|
-
<section>
|
|
237
|
-
<div className="k-widget k-panelbar" dir="rtl">
|
|
238
|
-
<div className="k-item">
|
|
239
|
-
<span className="k-link k-header">First</span>
|
|
240
|
-
</div>
|
|
241
|
-
<div className="k-item k-expanded">
|
|
242
|
-
<span className="k-link k-header">
|
|
243
|
-
Middle expanded
|
|
244
|
-
<Icon className="k-panelbar-collapse" name="arrow-n" />
|
|
245
|
-
</span>
|
|
246
|
-
<div>
|
|
247
|
-
<div className="k-panel k-group">
|
|
248
|
-
<div className="k-item">
|
|
249
|
-
<span className="k-link">Child</span>
|
|
250
|
-
</div>
|
|
251
|
-
<div className="k-item">
|
|
252
|
-
<span className="k-link k-state-hover">
|
|
253
|
-
Child hover
|
|
254
|
-
<Icon className="k-panelbar-expand" name="arrow-s" />
|
|
255
|
-
</span>
|
|
256
|
-
</div>
|
|
257
|
-
<div className="k-item">
|
|
258
|
-
<span className="k-link k-state-focus">
|
|
259
|
-
Child focus
|
|
260
|
-
<Icon className="k-panelbar-expand" name="arrow-s" />
|
|
261
|
-
</span>
|
|
262
|
-
</div>
|
|
263
|
-
<div className="k-item">
|
|
264
|
-
<span className="k-link k-state-selected">
|
|
265
|
-
Child selected
|
|
266
|
-
<Icon className="k-panelbar-expand" name="arrow-s" />
|
|
267
|
-
</span>
|
|
268
|
-
</div>
|
|
269
|
-
<div className="k-item k-expanded">
|
|
270
|
-
<span className="k-link">
|
|
271
|
-
Child expanded
|
|
272
|
-
<Icon className="k-panelbar-collapse" name="arrow-n" />
|
|
273
|
-
</span>
|
|
274
|
-
<div>
|
|
275
|
-
<div className="k-panel k-group">
|
|
276
|
-
<div className="k-item">
|
|
277
|
-
<span className="k-link">Child</span>
|
|
278
|
-
</div>
|
|
279
|
-
<div className="k-item">
|
|
280
|
-
<span className="k-link">Child</span>
|
|
281
|
-
</div>
|
|
282
|
-
<div className="k-item">
|
|
283
|
-
<span className="k-link">Child</span>
|
|
284
|
-
</div>
|
|
285
|
-
</div>
|
|
286
|
-
</div>
|
|
287
|
-
</div>
|
|
288
|
-
<div className="k-item">
|
|
289
|
-
<span className="k-link k-state-disabled">
|
|
290
|
-
Child disabled
|
|
291
|
-
<Icon className="k-panelbar-expand" name="arrow-s" />
|
|
292
|
-
</span>
|
|
293
|
-
</div>
|
|
294
|
-
<div className="k-item">
|
|
295
|
-
<span className="k-link">
|
|
296
|
-
<span className="k-panelbar-item-text">Child last</span>
|
|
297
|
-
</span>
|
|
298
|
-
</div>
|
|
299
|
-
</div>
|
|
300
|
-
</div>
|
|
301
|
-
</div>
|
|
302
|
-
<div className="k-item">
|
|
303
|
-
<span className="k-link k-header">
|
|
304
|
-
<span className="k-panelbar-item-text">Last</span>
|
|
305
|
-
</span>
|
|
306
|
-
</div>
|
|
307
|
-
</div>
|
|
308
|
-
</section>
|
|
309
|
-
|
|
310
|
-
<section>
|
|
311
|
-
<div className="k-widget k-panelbar" dir="rtl">
|
|
312
|
-
<div className="k-item k-expanded">
|
|
313
|
-
<span className="k-link k-header">
|
|
314
|
-
First expanded
|
|
315
|
-
<Icon className="k-panelbar-collapse" name="arrow-n" />
|
|
316
|
-
</span>
|
|
317
|
-
<div>
|
|
318
|
-
<div className="k-panelbar-content">
|
|
319
|
-
<h4>Title in template</h4>
|
|
320
|
-
<p>Multi line paragraph in template. Some more content to break onto multiple lines</p>
|
|
321
|
-
</div>
|
|
322
|
-
</div>
|
|
323
|
-
</div>
|
|
324
|
-
<div className="k-item">
|
|
325
|
-
<span className="k-link k-header">Middle</span>
|
|
326
|
-
</div>
|
|
327
|
-
<div className="k-item">
|
|
328
|
-
<span className="k-link k-header">Last</span>
|
|
329
|
-
</div>
|
|
330
|
-
</div>
|
|
331
|
-
</section>
|
|
332
|
-
|
|
333
|
-
<section>
|
|
334
|
-
<div className="k-widget k-panelbar" dir="rtl">
|
|
335
|
-
<div className="k-item">
|
|
336
|
-
<span className="k-link k-header">First</span>
|
|
337
|
-
</div>
|
|
338
|
-
<div className="k-item">
|
|
339
|
-
<span className="k-link k-header">Middle</span>
|
|
340
|
-
</div>
|
|
341
|
-
<div className="k-item k-expanded">
|
|
342
|
-
<span className="k-link k-header">
|
|
343
|
-
Last expanded
|
|
344
|
-
<Icon className="k-panelbar-collapse" name="arrow-n" />
|
|
345
|
-
</span>
|
|
346
|
-
<div>
|
|
347
|
-
<div className="k-panelbar-content">
|
|
348
|
-
<h4>Title in template</h4>
|
|
349
|
-
<p>Multi line paragraph in template. Some more content to break onto multiple lines</p>
|
|
350
|
-
</div>
|
|
351
|
-
</div>
|
|
352
|
-
</div>
|
|
353
|
-
</div>
|
|
354
|
-
</section>
|
|
355
|
-
|
|
356
188
|
</div>
|
|
357
189
|
</>
|
|
358
190
|
);
|
|
@@ -0,0 +1,190 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import ReactDOM from 'react-dom/client';
|
|
3
|
+
import { Icon } from '../../icon';
|
|
4
|
+
|
|
5
|
+
const root = ReactDOM.createRoot(
|
|
6
|
+
document.getElementById('app') as HTMLElement
|
|
7
|
+
);
|
|
8
|
+
|
|
9
|
+
const styles = `
|
|
10
|
+
.k-sprite {
|
|
11
|
+
background-color: gray;
|
|
12
|
+
}
|
|
13
|
+
.k-image {
|
|
14
|
+
width: 16px;
|
|
15
|
+
height: 16px;
|
|
16
|
+
display: inline-block;
|
|
17
|
+
background-color: gold;
|
|
18
|
+
}
|
|
19
|
+
`;
|
|
20
|
+
|
|
21
|
+
root.render(
|
|
22
|
+
<>
|
|
23
|
+
<style>{styles}</style>
|
|
24
|
+
<div id="test-area" className="k-d-grid k-grid-cols-4">
|
|
25
|
+
<section>
|
|
26
|
+
<div className="k-widget k-panelbar" dir="rtl">
|
|
27
|
+
<div className="k-item">
|
|
28
|
+
<span className="k-link k-header">
|
|
29
|
+
<Icon name="cog" className="k-panelbar-item-icon" />
|
|
30
|
+
Root
|
|
31
|
+
<Icon className="k-panelbar-expand" name="arrow-chevron-down" />
|
|
32
|
+
</span>
|
|
33
|
+
</div>
|
|
34
|
+
<div className="k-item">
|
|
35
|
+
<span className="k-link k-header k-hover">
|
|
36
|
+
<span className="k-image k-panelbar-item-icon"></span>
|
|
37
|
+
Root hover
|
|
38
|
+
<Icon className="k-panelbar-expand" name="arrow-chevron-down" />
|
|
39
|
+
</span>
|
|
40
|
+
</div>
|
|
41
|
+
<div className="k-item">
|
|
42
|
+
<span className="k-link k-header k-focus">
|
|
43
|
+
<span className="k-sprite"></span>
|
|
44
|
+
Root focus
|
|
45
|
+
<Icon className="k-panelbar-expand" name="arrow-chevron-down" />
|
|
46
|
+
</span>
|
|
47
|
+
</div>
|
|
48
|
+
<div className="k-item">
|
|
49
|
+
<span className="k-link k-header k-selected">
|
|
50
|
+
Root selected
|
|
51
|
+
<Icon className="k-panelbar-expand" name="arrow-chevron-down" />
|
|
52
|
+
</span>
|
|
53
|
+
</div>
|
|
54
|
+
<div className="k-item">
|
|
55
|
+
<span className="k-link k-header k-disabled">
|
|
56
|
+
Root disabled
|
|
57
|
+
<Icon className="k-panelbar-expand" name="arrow-chevron-down" />
|
|
58
|
+
</span>
|
|
59
|
+
</div>
|
|
60
|
+
<div className="k-item">
|
|
61
|
+
<span className="k-link k-header">
|
|
62
|
+
Root last
|
|
63
|
+
</span>
|
|
64
|
+
</div>
|
|
65
|
+
</div>
|
|
66
|
+
</section>
|
|
67
|
+
|
|
68
|
+
<section>
|
|
69
|
+
<div className="k-widget k-panelbar" dir="rtl">
|
|
70
|
+
<div className="k-item">
|
|
71
|
+
<span className="k-link k-header">First</span>
|
|
72
|
+
</div>
|
|
73
|
+
<div className="k-item k-expanded">
|
|
74
|
+
<span className="k-link k-header">
|
|
75
|
+
Middle expanded
|
|
76
|
+
<Icon className="k-panelbar-collapse" name="arrow-chevron-up" />
|
|
77
|
+
</span>
|
|
78
|
+
<div>
|
|
79
|
+
<div className="k-panel k-group">
|
|
80
|
+
<div className="k-item">
|
|
81
|
+
<span className="k-link">Child</span>
|
|
82
|
+
</div>
|
|
83
|
+
<div className="k-item">
|
|
84
|
+
<span className="k-link k-hover">
|
|
85
|
+
Child hover
|
|
86
|
+
<Icon className="k-panelbar-expand" name="arrow-chevron-down" />
|
|
87
|
+
</span>
|
|
88
|
+
</div>
|
|
89
|
+
<div className="k-item">
|
|
90
|
+
<span className="k-link k-focus">
|
|
91
|
+
Child focus
|
|
92
|
+
<Icon className="k-panelbar-expand" name="arrow-chevron-down" />
|
|
93
|
+
</span>
|
|
94
|
+
</div>
|
|
95
|
+
<div className="k-item">
|
|
96
|
+
<span className="k-link k-selected">
|
|
97
|
+
Child selected
|
|
98
|
+
<Icon className="k-panelbar-expand" name="arrow-chevron-down" />
|
|
99
|
+
</span>
|
|
100
|
+
</div>
|
|
101
|
+
<div className="k-item k-expanded">
|
|
102
|
+
<span className="k-link">
|
|
103
|
+
Child expanded
|
|
104
|
+
<Icon className="k-panelbar-collapse" name="arrow-chevron-up" />
|
|
105
|
+
</span>
|
|
106
|
+
<div>
|
|
107
|
+
<div className="k-panel k-group">
|
|
108
|
+
<div className="k-item">
|
|
109
|
+
<span className="k-link">Child</span>
|
|
110
|
+
</div>
|
|
111
|
+
<div className="k-item">
|
|
112
|
+
<span className="k-link">Child</span>
|
|
113
|
+
</div>
|
|
114
|
+
<div className="k-item">
|
|
115
|
+
<span className="k-link">Child</span>
|
|
116
|
+
</div>
|
|
117
|
+
</div>
|
|
118
|
+
</div>
|
|
119
|
+
</div>
|
|
120
|
+
<div className="k-item">
|
|
121
|
+
<span className="k-link k-disabled">
|
|
122
|
+
Child disabled
|
|
123
|
+
<Icon className="k-panelbar-expand" name="arrow-chevron-down" />
|
|
124
|
+
</span>
|
|
125
|
+
</div>
|
|
126
|
+
<div className="k-item">
|
|
127
|
+
<span className="k-link">
|
|
128
|
+
<span className="k-panelbar-item-text">Child last</span>
|
|
129
|
+
</span>
|
|
130
|
+
</div>
|
|
131
|
+
</div>
|
|
132
|
+
</div>
|
|
133
|
+
</div>
|
|
134
|
+
<div className="k-item">
|
|
135
|
+
<span className="k-link k-header">
|
|
136
|
+
<span className="k-panelbar-item-text">Last</span>
|
|
137
|
+
</span>
|
|
138
|
+
</div>
|
|
139
|
+
</div>
|
|
140
|
+
</section>
|
|
141
|
+
|
|
142
|
+
<section>
|
|
143
|
+
<div className="k-widget k-panelbar" dir="rtl">
|
|
144
|
+
<div className="k-item k-expanded">
|
|
145
|
+
<span className="k-link k-header">
|
|
146
|
+
First expanded
|
|
147
|
+
<Icon className="k-panelbar-collapse" name="arrow-chevron-up" />
|
|
148
|
+
</span>
|
|
149
|
+
<div>
|
|
150
|
+
<div className="k-panelbar-content">
|
|
151
|
+
<h4>Title in template</h4>
|
|
152
|
+
<p>Multi line paragraph in template. Some more content to break onto multiple lines</p>
|
|
153
|
+
</div>
|
|
154
|
+
</div>
|
|
155
|
+
</div>
|
|
156
|
+
<div className="k-item">
|
|
157
|
+
<span className="k-link k-header">Middle</span>
|
|
158
|
+
</div>
|
|
159
|
+
<div className="k-item">
|
|
160
|
+
<span className="k-link k-header">Last</span>
|
|
161
|
+
</div>
|
|
162
|
+
</div>
|
|
163
|
+
</section>
|
|
164
|
+
|
|
165
|
+
<section>
|
|
166
|
+
<div className="k-widget k-panelbar" dir="rtl">
|
|
167
|
+
<div className="k-item">
|
|
168
|
+
<span className="k-link k-header">First</span>
|
|
169
|
+
</div>
|
|
170
|
+
<div className="k-item">
|
|
171
|
+
<span className="k-link k-header">Middle</span>
|
|
172
|
+
</div>
|
|
173
|
+
<div className="k-item k-expanded">
|
|
174
|
+
<span className="k-link k-header">
|
|
175
|
+
Last expanded
|
|
176
|
+
<Icon className="k-panelbar-collapse" name="arrow-chevron-up" />
|
|
177
|
+
</span>
|
|
178
|
+
<div>
|
|
179
|
+
<div className="k-panelbar-content">
|
|
180
|
+
<h4>Title in template</h4>
|
|
181
|
+
<p>Multi line paragraph in template. Some more content to break onto multiple lines</p>
|
|
182
|
+
</div>
|
|
183
|
+
</div>
|
|
184
|
+
</div>
|
|
185
|
+
</div>
|
|
186
|
+
</section>
|
|
187
|
+
|
|
188
|
+
</div>
|
|
189
|
+
</>
|
|
190
|
+
);
|