@king-design/vue 3.6.0-beta.0 → 3.6.1
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/__tests__/__snapshots__/Vue Next Demos.md +115 -51
- package/__tests__/components/editable.spec.ts +1 -1
- package/__tests__/components/misc.spec.ts +93 -0
- package/__tests__/components/table.spec.ts +1 -0
- package/components/cascader/index.spec.js +18 -19
- package/components/copy/index.spec.js +14 -31
- package/components/datepicker/basepicker.d.ts +6 -27
- package/components/datepicker/basepicker.js +23 -268
- package/components/datepicker/calendar.d.ts +4 -2
- package/components/datepicker/dayjs.d.ts +2 -13
- package/components/datepicker/helpers.d.ts +3 -2
- package/components/datepicker/helpers.js +2 -3
- package/components/datepicker/index.d.ts +21 -29
- package/components/datepicker/index.js +22 -32
- package/components/datepicker/index.spec.js +1277 -484
- package/components/datepicker/index.vdt.js +39 -38
- package/components/datepicker/shortcuts.d.ts +1 -1
- package/components/datepicker/styles.d.ts +7 -2
- package/components/datepicker/styles.js +10 -15
- package/components/datepicker/useConfirm.d.ts +6 -0
- package/components/datepicker/useConfirm.js +65 -0
- package/components/datepicker/useDisabled.d.ts +5 -3
- package/components/datepicker/useDisabled.js +22 -27
- package/components/datepicker/useFormats.d.ts +2 -2
- package/components/datepicker/useFormats.js +6 -2
- package/components/datepicker/useHighlight.d.ts +14 -0
- package/components/datepicker/useHighlight.js +60 -0
- package/components/datepicker/useKeyboards.js +2 -1
- package/components/datepicker/useMergeRange.d.ts +1 -1
- package/components/datepicker/useMergeRange.js +11 -16
- package/components/datepicker/useMonths.js +5 -3
- package/components/datepicker/usePanel.d.ts +1 -10
- package/components/datepicker/usePanel.js +19 -32
- package/components/datepicker/useShowDate.d.ts +1 -1
- package/components/datepicker/useShowDate.js +15 -40
- package/components/datepicker/useStatus.js +33 -16
- package/components/datepicker/useValue.d.ts +11 -6
- package/components/datepicker/useValue.js +49 -69
- package/components/datepicker/useValueBase.d.ts +28 -0
- package/components/datepicker/useValueBase.js +280 -0
- package/components/datepicker/useYears.js +6 -3
- package/components/dropdown/dropdown.d.ts +1 -0
- package/components/dropdown/dropdown.js +7 -4
- package/components/form/form.d.ts +1 -0
- package/components/form/form.js +7 -0
- package/components/form/index.spec.js +10 -8
- package/components/input/index.d.ts +2 -0
- package/components/input/index.js +6 -0
- package/components/input/index.spec.js +45 -0
- package/components/input/index.vdt.js +4 -3
- package/components/input/useAutoWidth.d.ts +2 -0
- package/components/input/useAutoWidth.js +19 -1
- package/components/menu/index.spec.js +28 -0
- package/components/menu/styles.js +2 -2
- package/components/scrollSelect/useMouseEvents.js +5 -4
- package/components/select/base.d.ts +1 -1
- package/components/select/base.js +3 -2
- package/components/select/base.vdt.js +4 -3
- package/components/select/index.spec.js +346 -218
- package/components/select/menu.js +1 -1
- package/components/select/option.js +2 -1
- package/components/select/select.js +2 -1
- package/components/select/styles.d.ts +79 -0
- package/components/select/styles.js +1 -0
- package/components/select/useCard.d.ts +4 -3
- package/components/select/useCard.js +15 -4
- package/components/select/useInput.d.ts +1 -1
- package/components/select/useInput.js +4 -4
- package/components/spinner/index.spec.js +82 -44
- package/components/spinner/useValue.js +2 -1
- package/components/table/index.spec.js +84 -6
- package/components/table/useStickyHeader.js +1 -1
- package/components/timepicker/index.spec.js +298 -128
- package/components/timepicker/panelPicker.d.ts +21 -16
- package/components/timepicker/panelPicker.js +7 -4
- package/components/timepicker/panelPicker.vdt.js +5 -9
- package/components/timepicker/selectPicker.d.ts +4 -3
- package/components/timepicker/styles.js +1 -1
- package/components/timepicker/useConfirm.d.ts +6 -0
- package/components/timepicker/useConfirm.js +19 -0
- package/components/timepicker/useDefaultValue.d.ts +4 -0
- package/components/timepicker/useDefaultValue.js +27 -0
- package/components/timepicker/useDisabled.d.ts +6 -3
- package/components/timepicker/useDisabled.js +13 -4
- package/components/timepicker/useFormats.d.ts +1 -1
- package/components/timepicker/useValue.d.ts +13 -8
- package/components/timepicker/useValue.js +14 -15
- package/components/tour/index.spec.js +1 -1
- package/index.d.ts +2 -2
- package/index.js +2 -2
- package/package.json +2 -2
- package/yarn-error.log +44 -43
- package/components/datepicker/usePosition.d.ts +0 -10
- package/components/datepicker/usePosition.js +0 -166
|
@@ -31,13 +31,13 @@
|
|
|
31
31
|
#### `Breadcrumb basic`
|
|
32
32
|
|
|
33
33
|
```
|
|
34
|
-
"<div class=\"k-breadcrumb css-
|
|
34
|
+
"<div class=\"k-breadcrumb css-10qdcy4\"><div class=\"k-breadcrumb-item\"><a class=\"k-breadcrumb-link\">item 1</a></div><span class=\"k-breadcrumb-separator\"><i class=\"k-icon k-icon-right k-small css-16qej3\"></i></span><div class=\"k-breadcrumb-item\"><a class=\"k-breadcrumb-link\">item 2</a></div><span class=\"k-breadcrumb-separator\"><i class=\"k-icon k-icon-right k-small css-16qej3\"></i></span><div class=\"k-breadcrumb-item\"><span class=\"k-breadcrumb-link\">item 3</span></div></div>"
|
|
35
35
|
```
|
|
36
36
|
|
|
37
37
|
#### `Breadcrumb separator`
|
|
38
38
|
|
|
39
39
|
```
|
|
40
|
-
"<div class=\"k-breadcrumb css-
|
|
40
|
+
"<div class=\"k-breadcrumb css-10qdcy4\"><div class=\"k-breadcrumb-item\"><a class=\"k-breadcrumb-link\"><i class=\"k-icon ion-home k-small css-16qej3\"></i> item 1 </a></div><span class=\"k-breadcrumb-separator\"><i class=\"k-icon ion-ios-arrow-thin-right separator css-16qej3\"></i></span><div class=\"k-breadcrumb-item\"><a class=\"k-breadcrumb-link\"><i class=\"k-icon ion-earth k-small css-16qej3\"></i> item 2 </a></div><span class=\"k-breadcrumb-separator\"><i class=\"k-icon ion-ios-arrow-thin-right separator css-16qej3\"></i></span><div class=\"k-breadcrumb-item\"><span class=\"k-breadcrumb-link\"><i class=\"k-icon ion-planet k-small css-16qej3\"></i> item 3 </span></div></div>"
|
|
41
41
|
```
|
|
42
42
|
|
|
43
43
|
## `button`
|
|
@@ -45,7 +45,7 @@
|
|
|
45
45
|
#### `Button basic`
|
|
46
46
|
|
|
47
47
|
```
|
|
48
|
-
"<div><button class=\"k-btn k-default css-h31bz\" tabindex=\"0\" type=\"button\">default</button><button class=\"k-btn k-primary css-h31bz\" tabindex=\"0\" type=\"button\">primary</button><button class=\"k-btn k-secondary css-h31bz\" tabindex=\"0\" type=\"button\">secondary</button><button class=\"k-btn k-warning css-h31bz\" tabindex=\"0\" type=\"button\">warning</button><button class=\"k-btn k-danger css-h31bz\" tabindex=\"0\" type=\"button\">danger</button><button class=\"k-btn k-success css-h31bz\" tabindex=\"0\" type=\"button\">success</button><button class=\"k-btn k-none css-h31bz\" tabindex=\"0\" type=\"button\">none</button><button class=\"k-btn k-link css-h31bz\" tabindex=\"0\" type=\"button\">link</button><button class=\"k-btn k-flat css-h31bz\" tabindex=\"0\" type=\"button\">flat</button><button class=\"k-btn k-custom css-989a5g\" tabindex=\"0\" type=\"button\">custom</button><button class=\"k-btn k-custom css-1k0icaw\" tabindex=\"0\" type=\"button\">custom</button
|
|
48
|
+
"<div><button class=\"k-btn k-default css-h31bz\" tabindex=\"0\" type=\"button\">default</button><button class=\"k-btn k-primary css-h31bz\" tabindex=\"0\" type=\"button\">primary</button><button class=\"k-btn k-secondary css-h31bz\" tabindex=\"0\" type=\"button\">secondary</button><button class=\"k-btn k-warning css-h31bz\" tabindex=\"0\" type=\"button\">warning</button><button class=\"k-btn k-danger css-h31bz\" tabindex=\"0\" type=\"button\">danger</button><button class=\"k-btn k-success css-h31bz\" tabindex=\"0\" type=\"button\">success</button><button class=\"k-btn k-none css-h31bz\" tabindex=\"0\" type=\"button\">none</button><button class=\"k-btn k-link css-h31bz\" tabindex=\"0\" type=\"button\">link</button><button class=\"k-btn k-flat css-h31bz\" tabindex=\"0\" type=\"button\">flat</button><button class=\"k-btn k-custom css-989a5g\" tabindex=\"0\" type=\"button\">custom</button><button class=\"k-btn k-custom css-1k0icaw\" tabindex=\"0\" type=\"button\">custom</button></div>"
|
|
49
49
|
```
|
|
50
50
|
|
|
51
51
|
#### `Button disabled`
|
|
@@ -321,61 +321,69 @@
|
|
|
321
321
|
#### `Datepicker basic`
|
|
322
322
|
|
|
323
323
|
```
|
|
324
|
-
"<div><div class=\"k-select k-datepicker css-
|
|
324
|
+
"<div><div class=\"k-select k-datepicker css-1bseial\" tabindex=\"0\"><div class=\"k-select-main\"><input type=\"hidden\"><div class=\"k-input k-fluid k-inline css-1x5beu2\"><div class=\"k-input-wrapper\"><input class=\"k-input-inner\" readonly=\"\" placeholder=\"请选择日期\"></div></div></div><span class=\"k-select-suffix\"><span class=\"k-select-suffix-icon\"><i class=\"k-icon k-icon-calendar css-16qej3\"></i></span></span></div><!--portal--><div class=\"k-select k-flat k-datepicker css-1bseial\" tabindex=\"0\"><div class=\"k-select-main\"><input type=\"hidden\"><div class=\"k-input k-fluid k-inline k-flat css-1x5beu2\"><div class=\"k-input-wrapper\"><input class=\"k-input-inner\" readonly=\"\" placeholder=\"请选择日期\"></div></div></div><span class=\"k-select-suffix\"><span class=\"k-select-suffix-icon\"><i class=\"k-icon k-icon-calendar css-16qej3\"></i></span></span></div><!--portal--><div class=\"k-select k-disabled k-datepicker css-1bseial\" tabindex=\"-1\"><div class=\"k-select-main\"><input type=\"hidden\" value=\"2018-01-01\"><div class=\"k-input k-disabled k-fluid k-inline css-1x5beu2\"><div class=\"k-input-wrapper\"><input class=\"k-input-inner\" readonly=\"\" placeholder=\"2018-01-01\" disabled=\"\" value=\"2018-01-01\"></div></div></div><span class=\"k-select-suffix\"><span class=\"k-select-suffix-icon\"><i class=\"k-icon k-icon-calendar css-16qej3\"></i></span></span></div><!--portal--></div>"
|
|
325
325
|
```
|
|
326
326
|
|
|
327
327
|
#### `Datepicker clearable`
|
|
328
328
|
|
|
329
329
|
```
|
|
330
|
-
"<div class=\"k-select k-datepicker css-
|
|
330
|
+
"<div class=\"k-select k-datepicker css-1bseial\" tabindex=\"0\"><div class=\"k-select-main\"><input type=\"hidden\"><div class=\"k-input k-fluid k-inline css-1x5beu2\"><div class=\"k-input-wrapper\"><input class=\"k-input-inner\" readonly=\"\" placeholder=\"请选择日期\"></div></div></div><span class=\"k-select-suffix\"><i class=\"k-icon k-hoverable k-select-clear ion-ios-close css-16qej3\"></i><span class=\"k-select-suffix-icon\"><i class=\"k-icon k-icon-calendar css-16qej3\"></i></span></span></div><!--portal-->"
|
|
331
331
|
```
|
|
332
332
|
|
|
333
333
|
#### `Datepicker datetime`
|
|
334
334
|
|
|
335
335
|
```
|
|
336
|
-
"<div><div class=\"k-select k-datepicker css-
|
|
336
|
+
"<div><div class=\"k-select k-datepicker css-1bseial\" tabindex=\"0\"><div class=\"k-select-main\"><input type=\"hidden\"><div class=\"k-input k-fluid k-inline css-1x5beu2\"><div class=\"k-input-wrapper\"><input class=\"k-input-inner\" readonly=\"\" placeholder=\"请选择日期和时间\"></div></div></div><span class=\"k-select-suffix\"><i class=\"k-icon k-hoverable k-select-clear ion-ios-close css-16qej3\"></i><span class=\"k-select-suffix-icon\"><i class=\"k-icon k-icon-calendar css-16qej3\"></i></span></span></div><!--portal--><div class=\"k-select k-datepicker css-1bseial\" tabindex=\"0\"><div class=\"k-select-main\"><input type=\"hidden\"><div class=\"k-input k-fluid k-inline css-1x5beu2\"><div class=\"k-input-wrapper\"><input class=\"k-input-inner\" readonly=\"\" placeholder=\"时间精确到分钟\"></div></div></div><span class=\"k-select-suffix\"><span class=\"k-select-suffix-icon\"><i class=\"k-icon k-icon-calendar css-16qej3\"></i></span></span></div><!--portal--></div>"
|
|
337
337
|
```
|
|
338
338
|
|
|
339
339
|
#### `Datepicker disabledDate`
|
|
340
340
|
|
|
341
341
|
```
|
|
342
|
-
"<div><div class=\"k-select k-datepicker css-
|
|
342
|
+
"<div><div class=\"k-select k-datepicker css-1bseial\" tabindex=\"0\"><div class=\"k-select-main\"><input type=\"hidden\"><div class=\"k-input k-fluid k-inline css-1x5beu2\"><div class=\"k-input-wrapper\"><input class=\"k-input-inner\" readonly=\"\" placeholder=\"请选择日期\"></div></div></div><span class=\"k-select-suffix\"><span class=\"k-select-suffix-icon\"><i class=\"k-icon k-icon-calendar css-16qej3\"></i></span></span></div><!--portal--><br><br><div class=\"k-select k-datepicker css-1bseial\" tabindex=\"0\"><div class=\"k-select-main\"><input type=\"hidden\"><div class=\"k-input k-fluid k-inline css-1x5beu2\"><div class=\"k-input-wrapper\"><input class=\"k-input-inner\" readonly=\"\" placeholder=\"请选择月份\"></div></div></div><span class=\"k-select-suffix\"><span class=\"k-select-suffix-icon\"><i class=\"k-icon k-icon-calendar css-16qej3\"></i></span></span></div><!--portal--><br><br><div class=\"k-select k-datepicker css-1bseial\" tabindex=\"0\"><div class=\"k-select-main\"><input type=\"hidden\"><div class=\"k-input k-fluid k-inline css-1x5beu2\"><div class=\"k-input-wrapper\"><input class=\"k-input-inner\" readonly=\"\" placeholder=\"请选择年份\"></div></div></div><span class=\"k-select-suffix\"><span class=\"k-select-suffix-icon\"><i class=\"k-icon k-icon-calendar css-16qej3\"></i></span></span></div><!--portal--></div>"
|
|
343
343
|
```
|
|
344
344
|
|
|
345
345
|
#### `Datepicker format`
|
|
346
346
|
|
|
347
347
|
```
|
|
348
|
-
"<div><div><div class=\"k-select k-datepicker css-
|
|
348
|
+
"<div><div><div class=\"k-select k-datepicker css-1bseial\" tabindex=\"0\"><div class=\"k-select-main\"><input type=\"hidden\"><div class=\"k-input k-fluid k-inline css-1x5beu2\"><div class=\"k-input-wrapper\"><input class=\"k-input-inner\" readonly=\"\" placeholder=\"请选择日期\"></div></div></div><span class=\"k-select-suffix\"><span class=\"k-select-suffix-icon\"><i class=\"k-icon k-icon-calendar css-16qej3\"></i></span></span></div><!--portal--> value: </div><div><div class=\"k-select k-datepicker css-1bseial\" tabindex=\"0\"><div class=\"k-select-main\"><input type=\"hidden\"><div class=\"k-input k-fluid k-inline css-1x5beu2\"><div class=\"k-input-wrapper\"><input class=\"k-input-inner\" readonly=\"\" placeholder=\"请选择日期\"></div></div></div><span class=\"k-select-suffix\"><span class=\"k-select-suffix-icon\"><i class=\"k-icon k-icon-calendar css-16qej3\"></i></span></span></div><!--portal--> value: </div><div><div class=\"k-select k-datepicker css-1bseial\" tabindex=\"0\"><div class=\"k-select-main\"><input type=\"hidden\"><div class=\"k-input k-fluid k-inline css-1x5beu2\"><div class=\"k-input-wrapper\"><input class=\"k-input-inner\" readonly=\"\" placeholder=\"请选择日期和时间\"></div></div></div><span class=\"k-select-suffix\"><span class=\"k-select-suffix-icon\"><i class=\"k-icon k-icon-calendar css-16qej3\"></i></span></span></div><!--portal--> value: </div></div>"
|
|
349
349
|
```
|
|
350
350
|
|
|
351
351
|
#### `Datepicker maxMin`
|
|
352
352
|
|
|
353
353
|
```
|
|
354
|
-
"<div><div class=\"k-select k-datepicker css-
|
|
354
|
+
"<div><div class=\"k-select k-datepicker css-1bseial\" tabindex=\"0\"><div class=\"k-select-main\"><input type=\"hidden\"><div class=\"k-input k-fluid k-inline css-1x5beu2\"><div class=\"k-input-wrapper\"><input class=\"k-input-inner\" readonly=\"\" placeholder=\"开始日期\"></div></div></div><span class=\"k-select-suffix\"><span class=\"k-select-suffix-icon\"><i class=\"k-icon k-icon-calendar css-16qej3\"></i></span></span></div><!--portal--> ~ <div class=\"k-select k-datepicker css-1bseial\" tabindex=\"0\"><div class=\"k-select-main\"><input type=\"hidden\"><div class=\"k-input k-fluid k-inline css-1x5beu2\"><div class=\"k-input-wrapper\"><input class=\"k-input-inner\" readonly=\"\" placeholder=\"结束日期\"></div></div></div><span class=\"k-select-suffix\"><span class=\"k-select-suffix-icon\"><i class=\"k-icon k-icon-calendar css-16qej3\"></i></span></span></div><!--portal--><br><br><div class=\"k-select k-datepicker css-1bseial\" tabindex=\"0\"><div class=\"k-select-main\"><input type=\"hidden\"><div class=\"k-input k-fluid k-inline css-1x5beu2\"><div class=\"k-input-wrapper\"><input class=\"k-input-inner\" readonly=\"\" placeholder=\"开始时间\"></div></div></div><span class=\"k-select-suffix\"><span class=\"k-select-suffix-icon\"><i class=\"k-icon k-icon-calendar css-16qej3\"></i></span></span></div><!--portal--> ~ <div class=\"k-select k-datepicker css-1bseial\" tabindex=\"0\"><div class=\"k-select-main\"><input type=\"hidden\"><div class=\"k-input k-fluid k-inline css-1x5beu2\"><div class=\"k-input-wrapper\"><input class=\"k-input-inner\" readonly=\"\" placeholder=\"结束时间\"></div></div></div><span class=\"k-select-suffix\"><span class=\"k-select-suffix-icon\"><i class=\"k-icon k-icon-calendar css-16qej3\"></i></span></span></div><!--portal--></div>"
|
|
355
355
|
```
|
|
356
356
|
|
|
357
357
|
#### `Datepicker multiple`
|
|
358
358
|
|
|
359
359
|
```
|
|
360
|
-
"<div><div class=\"k-select k-datepicker css-
|
|
360
|
+
"<div><div class=\"k-select k-datepicker css-1bseial\" tabindex=\"0\"><div class=\"k-select-main\"><input type=\"hidden\" value=\"\"><div class=\"k-select-values\"><div class=\"k-tags css-czb0gm\"><div class=\"k-input k-auto-width k-inline k-select-input css-1x5beu2\"><div class=\"k-input-wrapper\"><input class=\"k-input-inner\" readonly=\"\" placeholder=\"请选择日期\" style=\"width: px;\"><div class=\"k-input-fake\"><pre>请选择日期</pre></div></div></div></div></div></div><span class=\"k-select-suffix\"><i class=\"k-icon k-hoverable k-select-clear ion-ios-close css-16qej3\"></i><span class=\"k-select-suffix-icon\"><i class=\"k-icon k-icon-calendar css-16qej3\"></i></span></span></div><!--portal--> You selected: [] <br><br><div class=\"k-select k-datepicker css-1bseial\" tabindex=\"0\"><div class=\"k-select-main\"><input type=\"hidden\" value=\"\"><div class=\"k-select-values\"><div class=\"k-tags css-czb0gm\"><div class=\"k-input k-auto-width k-inline k-select-input css-1x5beu2\"><div class=\"k-input-wrapper\"><input class=\"k-input-inner\" readonly=\"\" placeholder=\"请选择日期和时间\" style=\"width: px;\"><div class=\"k-input-fake\"><pre>请选择日期和时间</pre></div></div></div></div></div></div><span class=\"k-select-suffix\"><span class=\"k-select-suffix-icon\"><i class=\"k-icon k-icon-calendar css-16qej3\"></i></span></span></div><!--portal--> You selected: [] <br><br><div class=\"k-select k-datepicker css-1bseial\" tabindex=\"0\"><div class=\"k-select-main\"><input type=\"hidden\" value=\"\"><div class=\"k-select-values\"><div class=\"k-tags css-czb0gm\"><div class=\"k-input k-auto-width k-inline k-select-input css-1x5beu2\"><div class=\"k-input-wrapper\"><input class=\"k-input-inner\" readonly=\"\" placeholder=\"请选择年份\" style=\"width: px;\"><div class=\"k-input-fake\"><pre>请选择年份</pre></div></div></div></div></div></div><span class=\"k-select-suffix\"><span class=\"k-select-suffix-icon\"><i class=\"k-icon k-icon-calendar css-16qej3\"></i></span></span></div><!--portal--> You selected: [] <br><br><div class=\"k-select k-datepicker css-1bseial\" tabindex=\"0\"><div class=\"k-select-main\"><input type=\"hidden\" value=\"\"><div class=\"k-select-values\"><div class=\"k-tags css-czb0gm\"><div class=\"k-input k-auto-width k-inline k-select-input css-1x5beu2\"><div class=\"k-input-wrapper\"><input class=\"k-input-inner\" readonly=\"\" placeholder=\"请选择月份\" style=\"width: px;\"><div class=\"k-input-fake\"><pre>请选择月份</pre></div></div></div></div></div></div><span class=\"k-select-suffix\"><span class=\"k-select-suffix-icon\"><i class=\"k-icon k-icon-calendar css-16qej3\"></i></span></span></div><!--portal--> You selected: [] <br><br><div class=\"k-select k-datepicker css-15o9y0o\" tabindex=\"0\"><div class=\"k-select-main\"><input type=\"hidden\" value=\"\"><div class=\"k-select-values\"><div class=\"k-tags css-czb0gm\"><div class=\"k-input k-auto-width k-inline k-select-input css-1x5beu2\"><div class=\"k-input-wrapper\"><input class=\"k-input-inner\" readonly=\"\" placeholder=\"开始日期 ~ 结束日期\" style=\"width: px;\"><div class=\"k-input-fake\"><pre>开始日期 ~ 结束日期</pre></div></div></div></div></div></div><span class=\"k-select-suffix\"><span class=\"k-select-suffix-icon\"><i class=\"k-icon k-icon-calendar css-16qej3\"></i></span></span></div><!--portal--> You selected: [] <br><br><div class=\"k-select k-datepicker css-15o9y0o\" tabindex=\"0\"><div class=\"k-select-main\"><input type=\"hidden\" value=\"\"><div class=\"k-select-values\"><div class=\"k-tags css-czb0gm\"><div class=\"k-input k-auto-width k-inline k-select-input css-1x5beu2\"><div class=\"k-input-wrapper\"><input class=\"k-input-inner\" readonly=\"\" placeholder=\"开始时间 ~ 结束时间\" style=\"width: px;\"><div class=\"k-input-fake\"><pre>开始时间 ~ 结束时间</pre></div></div></div></div></div></div><span class=\"k-select-suffix\"><span class=\"k-select-suffix-icon\"><i class=\"k-icon k-icon-calendar css-16qej3\"></i></span></span></div><!--portal--> You selected: [] <br><br></div>"
|
|
361
361
|
```
|
|
362
362
|
|
|
363
363
|
#### `Datepicker range`
|
|
364
364
|
|
|
365
365
|
```
|
|
366
|
-
"<div><div class=\"k-select k-datepicker css-
|
|
366
|
+
"<div><div class=\"k-select k-datepicker css-68s2gf\" tabindex=\"0\"><div class=\"k-select-main\"><input type=\"hidden\"><div class=\"k-input k-fluid k-inline css-1x5beu2\"><div class=\"k-input-wrapper\"><input class=\"k-input-inner\" readonly=\"\" placeholder=\"开始日期 ~ 结束日期\"></div></div></div><span class=\"k-select-suffix\"><i class=\"k-icon k-hoverable k-select-clear ion-ios-close css-16qej3\"></i><span class=\"k-select-suffix-icon\"><i class=\"k-icon k-icon-calendar css-16qej3\"></i></span></span></div><!--portal--> You selected: null <br><br><div class=\"k-select k-datepicker css-15o9y0o\" tabindex=\"0\"><div class=\"k-select-main\"><input type=\"hidden\"><div class=\"k-input k-fluid k-inline css-1x5beu2\"><div class=\"k-input-wrapper\"><input class=\"k-input-inner\" readonly=\"\" placeholder=\"开始时间 ~ 结束时间\"></div></div></div><span class=\"k-select-suffix\"><i class=\"k-icon k-hoverable k-select-clear ion-ios-close css-16qej3\"></i><span class=\"k-select-suffix-icon\"><i class=\"k-icon k-icon-calendar css-16qej3\"></i></span></span></div><!--portal--> You selected: null <br><br><div class=\"k-select k-datepicker css-15o9y0o\" tabindex=\"0\"><div class=\"k-select-main\"><input type=\"hidden\"><div class=\"k-input k-fluid k-inline css-1x5beu2\"><div class=\"k-input-wrapper\"><input class=\"k-input-inner\" readonly=\"\" placeholder=\"开始年份 ~ 结束年份\"></div></div></div><span class=\"k-select-suffix\"><i class=\"k-icon k-hoverable k-select-clear ion-ios-close css-16qej3\"></i><span class=\"k-select-suffix-icon\"><i class=\"k-icon k-icon-calendar css-16qej3\"></i></span></span></div><!--portal--> You selected: null <br><br><div class=\"k-select k-datepicker css-15o9y0o\" tabindex=\"0\"><div class=\"k-select-main\"><input type=\"hidden\"><div class=\"k-input k-fluid k-inline css-1x5beu2\"><div class=\"k-input-wrapper\"><input class=\"k-input-inner\" readonly=\"\" placeholder=\"开始月份 ~ 结束月份\"></div></div></div><span class=\"k-select-suffix\"><i class=\"k-icon k-hoverable k-select-clear ion-ios-close css-16qej3\"></i><span class=\"k-select-suffix-icon\"><i class=\"k-icon k-icon-calendar css-16qej3\"></i></span></span></div><!--portal--> You selected: null <br><br></div>"
|
|
367
367
|
```
|
|
368
368
|
|
|
369
369
|
#### `Datepicker shortcuts`
|
|
370
370
|
|
|
371
371
|
```
|
|
372
|
-
"<div><div class=\"k-select k-datepicker css-
|
|
372
|
+
"<div><div class=\"k-select k-datepicker css-1bseial\" tabindex=\"0\"><div class=\"k-select-main\"><input type=\"hidden\"><div class=\"k-input k-fluid k-inline css-1x5beu2\"><div class=\"k-input-wrapper\"><input class=\"k-input-inner\" readonly=\"\" placeholder=\"请选择日期\"></div></div></div><span class=\"k-select-suffix\"><span class=\"k-select-suffix-icon\"><i class=\"k-icon k-icon-calendar css-16qej3\"></i></span></span></div><!--portal--><div class=\"k-select k-datepicker css-15o9y0o\" tabindex=\"0\"><div class=\"k-select-main\"><input type=\"hidden\"><div class=\"k-input k-fluid k-inline css-1x5beu2\"><div class=\"k-input-wrapper\"><input class=\"k-input-inner\" readonly=\"\" placeholder=\"开始时间 ~ 结束时间\"></div></div></div><span class=\"k-select-suffix\"><span class=\"k-select-suffix-icon\"><i class=\"k-icon k-icon-calendar css-16qej3\"></i></span></span></div><!--portal--></div>"
|
|
373
373
|
```
|
|
374
374
|
|
|
375
375
|
#### `Datepicker yearMonth`
|
|
376
376
|
|
|
377
377
|
```
|
|
378
|
-
"<div><div class=\"k-select k-datepicker css-
|
|
378
|
+
"<div><div class=\"k-select k-datepicker css-1bseial\" tabindex=\"0\"><div class=\"k-select-main\"><input type=\"hidden\"><div class=\"k-input k-fluid k-inline css-1x5beu2\"><div class=\"k-input-wrapper\"><input class=\"k-input-inner\" readonly=\"\" placeholder=\"请选择年份\"></div></div></div><span class=\"k-select-suffix\"><span class=\"k-select-suffix-icon\"><i class=\"k-icon k-icon-calendar css-16qej3\"></i></span></span></div><!--portal--><div class=\"k-select k-datepicker css-1bseial\" tabindex=\"0\"><div class=\"k-select-main\"><input type=\"hidden\"><div class=\"k-input k-fluid k-inline css-1x5beu2\"><div class=\"k-input-wrapper\"><input class=\"k-input-inner\" readonly=\"\" placeholder=\"请选择月份\"></div></div></div><span class=\"k-select-suffix\"><i class=\"k-icon k-hoverable k-select-clear ion-ios-close css-16qej3\"></i><span class=\"k-select-suffix-icon\"><i class=\"k-icon k-icon-calendar css-16qej3\"></i></span></span></div><!--portal--></div>"
|
|
379
|
+
```
|
|
380
|
+
|
|
381
|
+
#### `Datepicker nowrap`
|
|
382
|
+
|
|
383
|
+
```
|
|
384
|
+
"<div><div class=\"k-select k-nowrap k-datepicker css-15o9y0o\" tabindex=\"0\"><div class=\"k-select-main\"><input type=\"hidden\" value=\"\"><div class=\"k-select-values\"><div class=\"k-tags k-nowrap css-czb0gm\"><div class=\"k-tag k-tags-more c-hidden k-tags-tooltip k-none css-1weg519\">
|
|
385
|
+
+0</div><!--portal--><div class=\"k-input k-auto-width k-inline k-select-input css-1x5beu2\"><div class=\"k-input-wrapper\"><input class=\"k-input-inner\" readonly=\"\" placeholder=\"开始日期 ~ 结束日期\" style=\"width: px;\"><div class=\"k-input-fake\"><pre>开始日期 ~ 结束日期</pre></div></div></div></div></div></div><span class=\"k-select-suffix\"><span class=\"k-select-suffix-icon\"><i class=\"k-icon k-icon-calendar css-16qej3\"></i></span></span></div><!--portal--> You selected: [] <br><br><div class=\"k-select k-nowrap k-datepicker css-15o9y0o\" ismerge=\"\" tabindex=\"0\"><div class=\"k-select-main\"><input type=\"hidden\" value=\"\"><div class=\"k-select-values\"><div class=\"k-tags k-nowrap css-czb0gm\"><div class=\"k-tag k-tags-more c-hidden k-tags-tooltip k-none css-1weg519\">
|
|
386
|
+
+0</div><!--portal--><div class=\"k-input k-auto-width k-inline k-select-input css-1x5beu2\"><div class=\"k-input-wrapper\"><input class=\"k-input-inner\" readonly=\"\" placeholder=\"开始日期 ~ 结束日期\" style=\"width: px;\"><div class=\"k-input-fake\"><pre>开始日期 ~ 结束日期</pre></div></div></div></div></div></div><span class=\"k-select-suffix\"><span class=\"k-select-suffix-icon\"><i class=\"k-icon k-icon-calendar css-16qej3\"></i></span></span></div><!--portal--> You selected: [] <br><br></div>"
|
|
379
387
|
```
|
|
380
388
|
|
|
381
389
|
## `descriptions`
|
|
@@ -383,19 +391,19 @@
|
|
|
383
391
|
#### `Descriptions basic`
|
|
384
392
|
|
|
385
393
|
```
|
|
386
|
-
"<div><div class=\"k-descriptions css-1t0vgme\"><div class=\"k-descriptions-title\">基础信息</div><div class=\"k-descriptions-content\"><div class=\"k-description-item css-qruqir\"><div class=\"k-description-item-label\">label1</div><div class=\"k-description-centent\"><div class=\"k-ellipsis css-
|
|
394
|
+
"<div><div class=\"k-descriptions css-1t0vgme\"><div class=\"k-descriptions-title\">基础信息</div><div class=\"k-descriptions-content\"><div class=\"k-description-item css-qruqir\"><div class=\"k-description-item-label\">label1</div><div class=\"k-description-centent\"><div class=\"k-ellipsis css-1vrj62t\"><div class=\"c-ellipsis k-ellipsis-wrapper\">测试1</div></div></div></div><div class=\"k-description-item css-qruqir\"><div class=\"k-description-item-label\">label2</div><div class=\"k-description-centent\"><div class=\"k-ellipsis css-1vrj62t\"><div class=\"c-ellipsis k-ellipsis-wrapper\">测试测试</div></div></div></div><div class=\"k-description-item css-qruqir\"><div class=\"k-description-item-label\">label3</div><div class=\"k-description-centent\"><div class=\"k-ellipsis css-1vrj62t\"><div class=\"c-ellipsis k-ellipsis-wrapper\">测试3</div></div></div></div><div class=\"k-description-item css-qruqir\"><div class=\"k-description-item-label\">label4</div><div class=\"k-description-centent\"><div class=\"k-ellipsis css-1vrj62t\"><div class=\"c-ellipsis k-ellipsis-wrapper\">测试4</div></div><div class=\"k-description-option\">option</div></div></div></div></div><div class=\"k-descriptions css-85ywe6\"><div class=\"k-descriptions-title\">基础信息</div><div class=\"k-descriptions-content\"><div class=\"k-description-item css-qruqir\"><div class=\"k-description-item-label\">测试1</div><div class=\"k-description-centent\"><div class=\"k-ellipsis css-1vrj62t\"><div class=\"c-ellipsis k-ellipsis-wrapper\">测试1</div></div></div></div><div class=\"k-description-item css-qruqir\"><div class=\"k-description-item-label\">测试2</div><div class=\"k-description-centent\"><div class=\"k-ellipsis css-1vrj62t\"><div class=\"c-ellipsis k-ellipsis-wrapper\">测试超长测试超长测试超长测试超长测试超长测试超长测试超长测试超长测试超长测试超长</div></div></div></div><div class=\"k-description-item css-qruqir\"><div class=\"k-description-item-label\">测试3</div><div class=\"k-description-centent\"><div class=\"k-ellipsis css-1vrj62t\"><div class=\"c-ellipsis k-ellipsis-wrapper\">测试3</div></div></div></div><div class=\"k-description-item css-qruqir\"><div class=\"k-description-item-label\">测试4</div><div class=\"k-description-centent\"><div class=\"k-ellipsis css-1vrj62t\"><div class=\"c-ellipsis k-ellipsis-wrapper\">测试4</div></div></div></div><div class=\"k-description-item css-qruqir\"><div class=\"k-description-item-label\">测试5</div><div class=\"k-description-centent\"><div class=\"k-ellipsis css-1vrj62t\"><div class=\"c-ellipsis k-ellipsis-wrapper\">测试5</div></div></div></div></div></div></div>"
|
|
387
395
|
```
|
|
388
396
|
|
|
389
397
|
#### `Descriptions custom`
|
|
390
398
|
|
|
391
399
|
```
|
|
392
|
-
"<div><div class=\"k-descriptions css-85ywe6\"><div class=\"k-descriptions-title\"><span>自定义标题</span><i class=\"k-icon k-icon-question css-16qej3\"></i><!--portal--></div><div class=\"k-descriptions-content\"><div class=\"k-description-item css-qruqir\"><div class=\"k-description-item-label\">label1</div><div class=\"k-description-centent\"><div class=\"k-ellipsis css-
|
|
400
|
+
"<div><div class=\"k-descriptions css-85ywe6\"><div class=\"k-descriptions-title\"><span>自定义标题</span><i class=\"k-icon k-icon-question css-16qej3\"></i><!--portal--></div><div class=\"k-descriptions-content\"><div class=\"k-description-item css-qruqir\"><div class=\"k-description-item-label\">label1</div><div class=\"k-description-centent\"><div class=\"k-ellipsis css-1vrj62t\"><div class=\"c-ellipsis k-ellipsis-wrapper\"> 测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试 </div></div><div class=\"k-description-option\"><i class=\"k-icon k-hoverable k-icon-clone k-copy css-t3aops css-16qej3\" title=\"复制\"></i></div></div></div><div class=\"k-description-item css-qruqir\"><div class=\"k-description-item-label\">label2</div><div class=\"k-description-centent\"><div class=\"k-ellipsis css-1vrj62t\"><div class=\"c-ellipsis k-ellipsis-wrapper\"> 测试 </div></div></div></div><div class=\"k-description-item css-qruqir\"><div class=\"k-description-item-label\"><span>自定义label</span><i class=\"k-icon k-icon-question css-16qej3\"></i><!--portal--></div><div class=\"k-description-centent\"><div class=\"k-ellipsis css-1vrj62t\"><div class=\"c-ellipsis k-ellipsis-wrapper\"> 测试 </div></div></div></div><div class=\"k-description-item css-qruqir\"><div class=\"k-description-item-label\">label4</div><div class=\"k-description-centent\"><div class=\"k-ellipsis css-1vrj62t\"><div class=\"c-ellipsis k-ellipsis-wrapper\"><span>测试4</span><button class=\"k-btn k-link css-h31bz\" tabindex=\"0\" type=\"button\">分配项目</button></div></div></div></div><div class=\"k-description-item css-qruqir\"><div class=\"k-description-item-label\">label5</div><div class=\"k-description-centent\"><div class=\"k-ellipsis css-1vrj62t\"><div class=\"c-ellipsis k-ellipsis-wrapper\">测试5</div></div></div></div><div class=\"k-description-item css-qruqir\"><div class=\"k-description-item-label\">label6</div><div class=\"k-description-centent\"><div class=\"k-ellipsis css-1vrj62t\"><div class=\"c-ellipsis k-ellipsis-wrapper\">测试6</div></div></div></div></div></div></div>"
|
|
393
401
|
```
|
|
394
402
|
|
|
395
403
|
#### `Descriptions vertical`
|
|
396
404
|
|
|
397
405
|
```
|
|
398
|
-
"<div><div class=\"k-descriptions k-vertical css-85ywe6\"><div class=\"k-descriptions-title\">基础信息</div><div class=\"k-descriptions-content\"><div class=\"k-description-item css-qruqir\"><div class=\"k-description-item-label\">测试1</div><div class=\"k-description-centent\"><div class=\"k-ellipsis css-
|
|
406
|
+
"<div><div class=\"k-descriptions k-vertical css-85ywe6\"><div class=\"k-descriptions-title\">基础信息</div><div class=\"k-descriptions-content\"><div class=\"k-description-item css-qruqir\"><div class=\"k-description-item-label\">测试1</div><div class=\"k-description-centent\"><div class=\"k-ellipsis css-1vrj62t\"><div class=\"c-ellipsis k-ellipsis-wrapper\">测试1</div></div></div></div><div class=\"k-description-item css-qruqir\"><div class=\"k-description-item-label\">测试2</div><div class=\"k-description-centent\"><div class=\"k-ellipsis css-1vrj62t\"><div class=\"c-ellipsis k-ellipsis-wrapper\">测试2</div></div></div></div><div class=\"k-description-item css-qruqir\"><div class=\"k-description-item-label\">测试3</div><div class=\"k-description-centent\"><div class=\"k-ellipsis css-1vrj62t\"><div class=\"c-ellipsis k-ellipsis-wrapper\">测试3</div></div></div></div><div class=\"k-description-item css-qruqir\"><div class=\"k-description-item-label\">测试4</div><div class=\"k-description-centent\"><div class=\"k-ellipsis css-1vrj62t\"><div class=\"c-ellipsis k-ellipsis-wrapper\">测试4</div></div></div></div><div class=\"k-description-item css-qruqir\"><div class=\"k-description-item-label\">测试5</div><div class=\"k-description-centent\"><div class=\"k-ellipsis css-1vrj62t\"><div class=\"c-ellipsis k-ellipsis-wrapper\">测试5</div></div></div></div></div></div></div>"
|
|
399
407
|
```
|
|
400
408
|
|
|
401
409
|
## `diagram`
|
|
@@ -403,7 +411,7 @@
|
|
|
403
411
|
#### `Diagram basic`
|
|
404
412
|
|
|
405
413
|
```
|
|
406
|
-
"<div class=\"k-diagram css-ohhwil\"><div class=\"k-diagram-scheme\"><dtreelayout><drectangle></drectangle><ddiamond></ddiamond><dcircle></dcircle><dline></dline><dline></dline></dtreelayout></div><div class=\"k-diagram-canvas\" style=\"position: relative; width: 193px; height: 187px;\"><svg style=\"left: 0px; top: 0px; width: 100%; height: 100%; display: block; min-width: 193px; min-height: 187px;\"><g><g></g><g><g transform=\"translate(0.5,0.5)\" style=\"visibility: visible;\"><rect x=\"36\" y=\"0\" width=\"120\" height=\"60\" fill=\"#ffffff\" stroke=\"#000000\" pointer-events=\"all\"></rect></g><g style=\"\"><g transform=\"translate(
|
|
414
|
+
"<div class=\"k-diagram css-ohhwil\"><div class=\"k-diagram-scheme\"><dtreelayout><drectangle></drectangle><ddiamond></ddiamond><dcircle></dcircle><dline></dline><dline></dline></dtreelayout></div><div class=\"k-diagram-canvas\" style=\"position: relative; width: 193px; height: 187px;\"><svg style=\"left: 0px; top: 0px; width: 100%; height: 100%; display: block; min-width: 193px; min-height: 187px;\"><g><g></g><g><g transform=\"translate(0.5,0.5)\" style=\"visibility: visible;\"><rect x=\"36\" y=\"0\" width=\"120\" height=\"60\" fill=\"#ffffff\" stroke=\"#000000\" pointer-events=\"all\"></rect></g><g style=\"\"><g transform=\"translate(75,6)\"><foreignObject style=\"overflow:visible;\" pointer-events=\"all\" width=\"42\" height=\"49\"><div style=\"display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; vertical-align: top; width: 43px; white-space: normal; overflow-wrap: normal; text-align: center;\"><div xmlns=\"http://www.w3.org/1999/xhtml\" style=\"display:inline-block;text-align:inherit;text-decoration:inherit;white-space:normal;\"><h2>hello</h2></div></div></foreignObject></g></g><g transform=\"translate(0.5,0.5)\" style=\"visibility: visible;\"><path d=\"M 40 106 L 80 146 L 40 186 L 0 146 Z\" fill=\"#ffffff\" stroke=\"#000000\" stroke-miterlimit=\"10\" pointer-events=\"all\"></path></g><g style=\"\"><g transform=\"translate(26,140)\"><foreignObject style=\"overflow:visible;\" pointer-events=\"all\" width=\"29\" height=\"12\"><div style=\"display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; vertical-align: top; width: 30px; white-space: normal; overflow-wrap: normal; text-align: center;\"><div xmlns=\"http://www.w3.org/1999/xhtml\" style=\"display:inline-block;text-align:inherit;text-decoration:inherit;white-space:normal;\">world</div></div></foreignObject></g></g><g transform=\"translate(0.5,0.5)\" style=\"visibility: visible;\"><ellipse cx=\"152\" cy=\"146\" rx=\"40\" ry=\"40\" fill=\"#ffffff\" stroke=\"#000000\" pointer-events=\"all\"></ellipse></g><g style=\"\"><g transform=\"translate(143,140)\"><foreignObject style=\"overflow:visible;\" pointer-events=\"all\" width=\"19\" height=\"12\"><div style=\"display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; vertical-align: top; width: 20px; white-space: normal; overflow-wrap: normal; text-align: center;\"><div xmlns=\"http://www.w3.org/1999/xhtml\" style=\"display:inline-block;text-align:inherit;text-decoration:inherit;white-space:normal;\">kpc</div></div></foreignObject></g></g><g transform=\"translate(0.5,0.5)\" style=\"visibility: visible;\"><path d=\"M 96 60 L 96 73 Q 96 83 86 83 L 50 83 Q 40 83 40 91.32 L 40 99.63\" fill=\"none\" stroke=\"white\" stroke-miterlimit=\"10\" pointer-events=\"stroke\" visibility=\"hidden\" stroke-width=\"9\"></path><path d=\"M 96 60 L 96 73 Q 96 83 86 83 L 50 83 Q 40 83 40 91.32 L 40 99.63\" fill=\"none\" stroke=\"#000000\" stroke-miterlimit=\"10\" pointer-events=\"stroke\"></path><path d=\"M 40 104.88 L 36.5 97.88 L 40 99.63 L 43.5 97.88 Z\" fill=\"#000000\" stroke=\"#000000\" stroke-miterlimit=\"10\" pointer-events=\"all\"></path></g><g transform=\"translate(0.5,0.5)\" style=\"visibility: visible;\"><path d=\"M 96 60 L 96 73 Q 96 83 106 83 L 142 83 Q 152 83 152 91.32 L 152 99.63\" fill=\"none\" stroke=\"white\" stroke-miterlimit=\"10\" pointer-events=\"stroke\" visibility=\"hidden\" stroke-width=\"9\"></path><path d=\"M 96 60 L 96 73 Q 96 83 106 83 L 142 83 Q 152 83 152 91.32 L 152 99.63\" fill=\"none\" stroke=\"#000000\" stroke-miterlimit=\"10\" pointer-events=\"stroke\"></path><path d=\"M 152 104.88 L 148.5 97.88 L 152 99.63 L 155.5 97.88 Z\" fill=\"#000000\" stroke=\"#000000\" stroke-miterlimit=\"10\" pointer-events=\"all\"></path></g></g><g></g><g></g></g></svg></div></div>"
|
|
407
415
|
```
|
|
408
416
|
|
|
409
417
|
#### `Diagram children`
|
|
@@ -601,25 +609,25 @@
|
|
|
601
609
|
#### `Ellipsis basic`
|
|
602
610
|
|
|
603
611
|
```
|
|
604
|
-
"<div class=\"k-split k-horizontal css-1ug4f89 k-last-auto\" style=\"width: 400px;\"><div class=\"k-split-first\" style=\"width: 50%;\"><div class=\"k-ellipsis css-
|
|
612
|
+
"<div class=\"k-split k-horizontal css-1ug4f89 k-last-auto\" style=\"width: 400px;\"><div class=\"k-split-first\" style=\"width: 50%;\"><div class=\"k-ellipsis css-1vrj62t\"><div class=\"c-ellipsis k-ellipsis-wrapper panel\">测试测试测试测试测试测试</div></div><br><div class=\"k-ellipsis k-multiline css-1uouvw7\"><div class=\"c-ellipsis k-ellipsis-wrapper panel\">最大几行忽略最大几行忽略最大几行忽略</div></div></div><div class=\"k-split-line-wrapper\"><div class=\"k-split-line\"><div class=\"k-split-drag-lines\"></div></div></div><div class=\"k-split-last\" style=\"width: auto;\"><div class=\"k-ellipsis css-1vrj62t\"><div class=\"c-ellipsis k-ellipsis-wrapper panel\">不展示tooltip不展示tooltip</div></div></div></div>"
|
|
605
613
|
```
|
|
606
614
|
|
|
607
615
|
#### `Ellipsis custom`
|
|
608
616
|
|
|
609
617
|
```
|
|
610
|
-
"<div style=\"width: 200px;\"><div class=\"k-ellipsis css-
|
|
618
|
+
"<div style=\"width: 200px;\"><div class=\"k-ellipsis css-1vrj62t\"><div class=\"c-ellipsis k-ellipsis-wrapper panel tooltip-class\"><i class=\"k-icon ion-heart css-16qej3\"></i><button class=\"k-btn k-primary css-h31bz\" tabindex=\"0\" type=\"button\">测试</button><i class=\"k-icon ion-heart css-16qej3\"></i><button class=\"k-btn k-primary css-h31bz\" tabindex=\"0\" type=\"button\">测试</button><i class=\"k-icon ion-heart css-16qej3\"></i><button class=\"k-btn k-primary css-h31bz\" tabindex=\"0\" type=\"button\">测试</button><i class=\"k-icon ion-heart css-16qej3\"></i><button class=\"k-btn k-primary css-h31bz\" tabindex=\"0\" type=\"button\">测试</button><i class=\"k-icon ion-heart css-16qej3\"></i><button class=\"k-btn k-primary css-h31bz\" tabindex=\"0\" type=\"button\">测试</button></div></div></div>"
|
|
611
619
|
```
|
|
612
620
|
|
|
613
621
|
#### `Ellipsis hoverable`
|
|
614
622
|
|
|
615
623
|
```
|
|
616
|
-
"<div><div class=\"k-ellipsis css-
|
|
624
|
+
"<div><div class=\"k-ellipsis css-1vrj62t\" style=\"width: 50px;\"><div class=\"c-ellipsis k-ellipsis-wrapper\">hoverable</div></div></div>"
|
|
617
625
|
```
|
|
618
626
|
|
|
619
627
|
#### `Ellipsis position`
|
|
620
628
|
|
|
621
629
|
```
|
|
622
|
-
"<div><div class=\"k-ellipsis css-
|
|
630
|
+
"<div><div class=\"k-ellipsis css-1vrj62t\" style=\"width: 90px;\"><div class=\"c-ellipsis k-ellipsis-wrapper\">tooltip在右侧tooltip在右侧</div></div><div class=\"k-ellipsis css-1vrj62t\" style=\"width: 90px;\"><div class=\"c-ellipsis k-ellipsis-wrapper\">tooltip在下方tooltip在下方</div></div></div>"
|
|
623
631
|
```
|
|
624
632
|
|
|
625
633
|
## `form`
|
|
@@ -627,37 +635,37 @@
|
|
|
627
635
|
#### `Form basic`
|
|
628
636
|
|
|
629
637
|
```
|
|
630
|
-
"<form class=\"k-form k-horizontal css-1mv8rmx\" novalidate=\"true\"><div class=\"k-form-item css-
|
|
638
|
+
"<form class=\"k-form k-horizontal css-1mv8rmx\" novalidate=\"true\"><div class=\"k-form-item css-15gu3l7\"><label class=\"k-form-label\" style=\"width: 200px;\">Input</label><div class=\"k-form-content\"><div class=\"k-input css-1x5beu2\"><div class=\"k-input-wrapper\"><input class=\"k-input-inner\"></div></div></div></div><div class=\"k-form-item css-15gu3l7\"><label class=\"k-form-label\" style=\"width: px;\">Select</label><div class=\"k-form-content\"><div class=\"k-select css-1ti24q0\" tabindex=\"0\"><div class=\"k-select-main\"><input type=\"hidden\"><div class=\"k-select-placeholder c-ellipsis\">请选择</div></div><span class=\"k-select-suffix\"><span class=\"k-select-suffix-icon\"><i class=\"k-icon k-select-arrow k-icon-down css-16qej3\"></i></span></span></div><!--portal--></div></div><div class=\"k-form-item css-15gu3l7\"><label class=\"k-form-label\" style=\"width: px;\">Checkbox</label><div class=\"k-form-content\"><label class=\"k-checkbox css-rfvdpj\" tabindex=\"0\"><span class=\"k-checkbox-wrapper\"><input type=\"checkbox\" tabindex=\"-1\" value=\"Javascript\"></span><span class=\"k-checkbox-text\">Javascript</span></label><label class=\"k-checkbox css-rfvdpj\" tabindex=\"0\"><span class=\"k-checkbox-wrapper\"><input type=\"checkbox\" tabindex=\"-1\" value=\"PHP\"></span><span class=\"k-checkbox-text\">PHP</span></label><label class=\"k-checkbox css-rfvdpj\" tabindex=\"0\"><span class=\"k-checkbox-wrapper\"><input type=\"checkbox\" tabindex=\"-1\" value=\"C++\"></span><span class=\"k-checkbox-text\">C++</span></label></div></div><div class=\"k-form-item css-15gu3l7\"><label class=\"k-form-label\" style=\"width: px;\">Radio</label><div class=\"k-form-content\"><label class=\"k-radio css-zzqsx1\" tabindex=\"0\"><span class=\"k-radio-wrapper\"><input type=\"radio\" tabindex=\"-1\" value=\"Javascript\"></span><span class=\"k-radio-text\">Javascript</span></label><label class=\"k-radio css-zzqsx1\" tabindex=\"0\"><span class=\"k-radio-wrapper\"><input type=\"radio\" tabindex=\"-1\" value=\"PHP\"></span><span class=\"k-radio-text\">PHP</span></label><label class=\"k-radio css-zzqsx1\" tabindex=\"0\"><span class=\"k-radio-wrapper\"><input type=\"radio\" tabindex=\"-1\" value=\"C++\"></span><span class=\"k-radio-text\">C++</span></label></div></div><div class=\"k-form-item css-15gu3l7\"><label class=\"k-form-label\" style=\"width: px;\">Radio ButtonGroup</label><div class=\"k-form-content\"><div class=\"k-btns css-z9s2vw\"><button class=\"k-btn k-default css-h31bz\" tabindex=\"0\" type=\"button\">Javascript<input class=\"k-button-input\" type=\"radio\" tabindex=\"-1\"></button><button class=\"k-btn k-default css-h31bz\" tabindex=\"0\" type=\"button\">PHP<input class=\"k-button-input\" type=\"radio\" tabindex=\"-1\"></button><button class=\"k-btn k-default css-h31bz\" tabindex=\"0\" type=\"button\">C++<input class=\"k-button-input\" type=\"radio\" tabindex=\"-1\"></button></div></div></div><div class=\"k-form-item css-15gu3l7\"><label class=\"k-form-label\" style=\"width: px;\">Switch</label><div class=\"k-form-content\"><div class=\"k-switch k-default css-1kd39ob\" tabindex=\"0\"><input type=\"checkbox\" tabindex=\"-1\"><div class=\"k-switch-bar\"><div class=\"k-switch-wrapper\"><div class=\"k-switch-handle\"><img src=\"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\"></div></div></div></div></div></div><div class=\"k-form-item css-15gu3l7\"><label class=\"k-form-label\" style=\"width: px;\">Slider</label><div class=\"k-form-content\"><div class=\"k-slider css-1a62bpu\"><div class=\"k-slider-main\"><div class=\"k-slider-track-wrapper\"><div class=\"k-slider-track\"><div class=\"k-slider-bar\" style=\"width: 0%;\"></div><div class=\"k-slider-thumb-wrapper\" style=\"left: 0%;\"><div class=\"k-slider-thumb k-slider-tooltip\" tabindex=\"0\"></div><!--portal--><div class=\"k-dropdown-menu k-tooltip-content k-hoverable k-dark k-slider-tooltip css-o1x0o9 css-7sngro\" style=\"display: none;\">0<i class=\"k-tooltip-arrow\"></i></div></div></div></div><div class=\"k-slider-ends\"><span>0</span><span>100</span></div></div></div></div></div><div class=\"k-form-item css-15gu3l7\"><label class=\"k-form-label\" style=\"width: 200px;\">Datepicker</label><div class=\"k-form-content\"><div class=\"k-select k-datepicker css-1bseial\" tabindex=\"0\"><div class=\"k-select-main\"><input type=\"hidden\"><div class=\"k-input k-fluid k-inline css-1x5beu2\"><div class=\"k-input-wrapper\"><input class=\"k-input-inner\" readonly=\"\" placeholder=\"请选择日期\"></div></div></div><span class=\"k-select-suffix\"><span class=\"k-select-suffix-icon\"><i class=\"k-icon k-icon-calendar css-16qej3\"></i></span></span></div><!--portal--></div></div><div class=\"k-form-item css-15gu3l7\"><label class=\"k-form-label\" style=\"width: px;\">Textarea</label><div class=\"k-form-content\"><div class=\"k-input k-type-textarea k-resize-vertical css-1x5beu2\"><div class=\"k-input-wrapper\"><textarea class=\"k-input-inner k-textarea\" rows=\"2\"></textarea></div></div></div></div><div class=\"k-form-item css-15gu3l7\"><label class=\"k-form-label\" style=\"width: 200px;\">Password</label><div class=\"k-form-content\"><div class=\"k-input css-1x5beu2\"><div class=\"k-input-wrapper\"><input class=\"k-input-inner\" type=\"password\"></div></div></div></div><div class=\"k-form-item css-15gu3l7\"><label class=\"k-form-label\" style=\"width: px;\">Confirm Password</label><div class=\"k-form-content\"><div class=\"k-input css-1x5beu2\"><div class=\"k-input-wrapper\"><input class=\"k-input-inner\" type=\"password\"></div></div></div></div><div class=\"k-form-item css-15gu3l7\"><label class=\"k-form-label\" style=\"width: px;\"></label><div class=\"k-form-content\"><button class=\"k-btn k-primary css-h31bz\" tabindex=\"0\" type=\"submit\">提交</button><button class=\"k-btn k-default css-h31bz\" tabindex=\"0\" type=\"button\" style=\"margin-left: 8px;\">重置</button></div></div></form>"
|
|
631
639
|
```
|
|
632
640
|
|
|
633
641
|
#### `Form custom`
|
|
634
642
|
|
|
635
643
|
```
|
|
636
|
-
"<form class=\"k-form k-horizontal css-1mv8rmx\" novalidate=\"true\"><div class=\"k-form-item css-
|
|
644
|
+
"<form class=\"k-form k-horizontal css-1mv8rmx\" novalidate=\"true\"><div class=\"k-form-item css-15gu3l7\"><label class=\"k-form-label\">描述</label><div class=\"k-form-content\"><div class=\"k-form-item css-15gu3l7\" model=\"descriptions[0]\"><div class=\"k-form-content\"><div class=\"k-input css-1x5beu2\"><div class=\"k-input-wrapper\"><input class=\"k-input-inner\"></div></div></div><div class=\"k-form-append\"><button class=\"k-btn k-default css-h31bz\" tabindex=\"0\" type=\"button\">删除</button></div></div><div class=\"k-form-item css-15gu3l7\" model=\"descriptions[1]\"><div class=\"k-form-content\"><div class=\"k-input css-1x5beu2\"><div class=\"k-input-wrapper\"><input class=\"k-input-inner\"></div></div></div><div class=\"k-form-append\"><button class=\"k-btn k-default css-h31bz\" tabindex=\"0\" type=\"button\">删除</button></div></div><button class=\"k-btn k-default css-h31bz\" tabindex=\"0\" type=\"button\">添加</button></div></div></form>"
|
|
637
645
|
```
|
|
638
646
|
|
|
639
647
|
#### `Form label`
|
|
640
648
|
|
|
641
649
|
```
|
|
642
|
-
"<form class=\"k-form k-horizontal css-1mv8rmx\" novalidate=\"true\"><div class=\"k-form-item css-
|
|
650
|
+
"<form class=\"k-form k-horizontal css-1mv8rmx\" novalidate=\"true\"><div class=\"k-form-item css-15gu3l7\"><label class=\"k-form-label\"><span class=\"k-form-star\">*</span>姓名</label><div class=\"k-form-content\"><div class=\"k-input css-1x5beu2\"><div class=\"k-input-wrapper\"><input class=\"k-input-inner\"></div></div></div></div><div class=\"k-form-item css-15gu3l7\"><label class=\"k-form-label\"><i class=\"ion-person\"></i> 姓名</label><div class=\"k-form-content\"><div class=\"k-input css-1x5beu2\"><div class=\"k-input-wrapper\"><input class=\"k-input-inner\"></div></div></div></div></form>"
|
|
643
651
|
```
|
|
644
652
|
|
|
645
653
|
#### `Form layout`
|
|
646
654
|
|
|
647
655
|
```
|
|
648
|
-
"<form class=\"k-form k-horizontal css-1mv8rmx\" novalidate=\"true\"><div class=\"k-form-item css-
|
|
656
|
+
"<form class=\"k-form k-horizontal css-1mv8rmx\" novalidate=\"true\"><div class=\"k-form-item css-15gu3l7\"><label class=\"k-form-label\">Layout</label><div class=\"k-form-content\"><div class=\"k-btns css-z9s2vw\"><button class=\"k-btn k-default k-active css-h31bz\" tabindex=\"0\" type=\"button\">horizontal<input class=\"k-button-input\" type=\"radio\" tabindex=\"-1\"></button><button class=\"k-btn k-default css-h31bz\" tabindex=\"0\" type=\"button\">vertical<input class=\"k-button-input\" type=\"radio\" tabindex=\"-1\"></button><button class=\"k-btn k-default css-h31bz\" tabindex=\"0\" type=\"button\">inline<input class=\"k-button-input\" type=\"radio\" tabindex=\"-1\"></button></div></div></div><div class=\"k-form-item css-15gu3l7\"><label class=\"k-form-label\">Size</label><div class=\"k-form-content\"><div class=\"k-btns css-z9s2vw\"><button class=\"k-btn k-default k-active css-h31bz\" tabindex=\"0\" type=\"button\">default<input class=\"k-button-input\" type=\"radio\" tabindex=\"-1\"></button><button class=\"k-btn k-default css-h31bz\" tabindex=\"0\" type=\"button\">small<input class=\"k-button-input\" type=\"radio\" tabindex=\"-1\"></button><button class=\"k-btn k-default css-h31bz\" tabindex=\"0\" type=\"button\">mini<input class=\"k-button-input\" type=\"radio\" tabindex=\"-1\"></button></div></div></div><div class=\"k-form-item css-15gu3l7\"><label class=\"k-form-label\">Input</label><div class=\"k-form-content\"><div class=\"k-input css-1x5beu2\"><div class=\"k-input-wrapper\"><input class=\"k-input-inner\"></div></div></div></div><div class=\"k-form-item css-15gu3l7\"><label class=\"k-form-label\">Select</label><div class=\"k-form-content\"><div class=\"k-select css-1ti24q0\" tabindex=\"0\"><div class=\"k-select-main\"><input type=\"hidden\"><div class=\"k-select-placeholder c-ellipsis\">请选择</div></div><span class=\"k-select-suffix\"><span class=\"k-select-suffix-icon\"><i class=\"k-icon k-select-arrow k-icon-down css-16qej3\"></i></span></span></div><!--portal--></div></div><div class=\"k-form-item css-15gu3l7\"><label class=\"k-form-label\"></label><div class=\"k-form-content\"><button class=\"k-btn k-primary css-h31bz\" tabindex=\"0\" type=\"submit\">Submit</button></div></div></form>"
|
|
649
657
|
```
|
|
650
658
|
|
|
651
659
|
#### `Form remote`
|
|
652
660
|
|
|
653
661
|
```
|
|
654
|
-
"<form class=\"k-form k-horizontal css-1mv8rmx\" novalidate=\"true\"><div class=\"k-form-item css-
|
|
662
|
+
"<form class=\"k-form k-horizontal css-1mv8rmx\" novalidate=\"true\"><div class=\"k-form-item css-15gu3l7\"><label class=\"k-form-label\">用户名</label><div class=\"k-form-content\"><div class=\"k-input css-1x5beu2\"><div class=\"k-input-wrapper\"><input class=\"k-input-inner\"></div></div></div></div></form>"
|
|
655
663
|
```
|
|
656
664
|
|
|
657
665
|
#### `Form variable`
|
|
658
666
|
|
|
659
667
|
```
|
|
660
|
-
"<form class=\"k-form k-horizontal css-1mv8rmx\" novalidate=\"true\"><div class=\"k-form-item css-
|
|
668
|
+
"<form class=\"k-form k-horizontal css-1mv8rmx\" novalidate=\"true\"><div class=\"k-form-item css-15gu3l7\"><label class=\"k-form-label\">姓名</label><div class=\"k-form-content\"><div class=\"k-row css-1d2b9xj\" style=\"margin-left: -8px; margin-right: -8px;\"><div class=\"k-col k-12 css-1xiwk0e\" style=\"padding-left: 8px; padding-right: 8px;\"><div class=\"k-col-wrapper\"><div class=\"k-form-item css-15gu3l7\"><div class=\"k-form-content\"><div class=\"k-input css-1x5beu2\"><div class=\"k-input-wrapper\"><input class=\"k-input-inner\"></div></div></div></div></div></div><div class=\"k-col k-12 css-1xiwk0e\" style=\"padding-left: 8px; padding-right: 8px;\"><div class=\"k-col-wrapper\"><div class=\"k-form-item css-15gu3l7\"><div class=\"k-form-content\"><div class=\"k-input css-1x5beu2\"><div class=\"k-input-wrapper\"><input class=\"k-input-inner\"></div></div></div></div></div></div></div></div></div></form>"
|
|
661
669
|
```
|
|
662
670
|
|
|
663
671
|
## `grid`
|
|
@@ -821,31 +829,31 @@
|
|
|
821
829
|
#### `Layout aside`
|
|
822
830
|
|
|
823
831
|
```
|
|
824
|
-
"<div class=\"k-layout k-has-aside css-1vdvr25 layout\"><div class=\"k-layout-aside k-dark css-1rytxc7\" style=\"width: 200px;\"><div class=\"logo\">LOGO</div><div class=\"k-layout-wrapper\"><div class=\"k-menu k-dark k-vertical css-g3l0a0\"><div class=\"k-menu-body\"><div class=\"k-menu-item css-12sq2r7\"><div class=\"k-menu-item-title css-14asjef\"><div class=\"k-menu-name\"><div class=\"k-ellipsis css-
|
|
832
|
+
"<div class=\"k-layout k-has-aside css-1vdvr25 layout\"><div class=\"k-layout-aside k-dark css-1rytxc7\" style=\"width: 200px;\"><div class=\"logo\">LOGO</div><div class=\"k-layout-wrapper\"><div class=\"k-menu k-dark k-vertical css-g3l0a0\"><div class=\"k-menu-body\"><div class=\"k-menu-item css-12sq2r7\"><div class=\"k-menu-item-title css-14asjef\"><div class=\"k-menu-name\"><div class=\"k-ellipsis css-1vrj62t\"><div class=\"c-ellipsis k-ellipsis-wrapper\"><i class=\"k-icon ion-flag css-16qej3\"></i><span>menu 1 </span></div></div></div><i class=\"k-icon k-menu-item-arrow ion-arrow-down-b css-16qej3\"></i></div><div class=\"k-menu css-1ve3qyh k-sub-menu css-g3l0a0\" style=\"display: none;\"><div class=\"k-menu-body\"><div class=\"k-menu-item css-12sq2r7\"><div class=\"k-menu-item-title css-14asjef\"><div class=\"k-menu-name\"><div class=\"k-ellipsis css-1vrj62t\"><div class=\"c-ellipsis k-ellipsis-wrapper\"><span>sub menu 1</span></div></div></div></div></div><div class=\"k-menu-item css-12sq2r7\"><div class=\"k-menu-item-title css-14asjef\"><div class=\"k-menu-name\"><div class=\"k-ellipsis css-1vrj62t\"><div class=\"c-ellipsis k-ellipsis-wrapper\"><span>sub menu 2</span></div></div></div></div></div><div class=\"k-menu-item k-disabled css-12sq2r7\"><div class=\"k-menu-item-title css-14asjef\"><div class=\"k-menu-name\"><div class=\"k-ellipsis css-1vrj62t\"><div class=\"c-ellipsis k-ellipsis-wrapper\"><span>sub menu 3</span></div></div></div></div></div><div class=\"k-menu-item css-12sq2r7\"><div class=\"k-menu-item-title css-14asjef\"><div class=\"k-menu-name\"><div class=\"k-ellipsis css-1vrj62t\"><div class=\"c-ellipsis k-ellipsis-wrapper\"><span>sub menu 4</span></div></div></div></div></div></div></div></div><div class=\"k-menu-item k-disabled css-12sq2r7\"><div class=\"k-menu-item-title css-14asjef\"><div class=\"k-menu-name\"><div class=\"k-ellipsis css-1vrj62t\"><div class=\"c-ellipsis k-ellipsis-wrapper\"><i class=\"k-icon ion-star css-16qej3\"></i><span>menu 2</span></div></div></div></div></div><div class=\"k-menu-item k-expanded k-highlighted css-12sq2r7\"><div class=\"k-menu-item-title css-14asjef\"><div class=\"k-menu-name\"><div class=\"k-ellipsis css-1vrj62t\"><div class=\"c-ellipsis k-ellipsis-wrapper\"><i class=\"k-icon ion-heart css-16qej3\"></i><span>menu 3 </span></div></div></div><i class=\"k-icon k-menu-item-arrow ion-arrow-down-b css-16qej3\"></i></div><div class=\"k-menu css-1ve3qyh k-sub-menu css-g3l0a0 k-expand-enter-from k-expand-enter-active\" style=\"height: 0px;\"><div class=\"k-menu-body\"><div class=\"k-menu-item k-active css-12sq2r7\"><div class=\"k-menu-item-title css-14asjef\"><div class=\"k-menu-name\"><div class=\"k-ellipsis css-1vrj62t\"><div class=\"c-ellipsis k-ellipsis-wrapper\"><span>sub menu 1</span></div></div></div></div></div><div class=\"k-menu-item css-12sq2r7\"><div class=\"k-menu-item-title css-14asjef\"><div class=\"k-menu-name\"><div class=\"k-ellipsis css-1vrj62t\"><div class=\"c-ellipsis k-ellipsis-wrapper\"><span>sub menu 2</span></div></div></div></div></div><div class=\"k-menu-item k-disabled css-12sq2r7\"><div class=\"k-menu-item-title css-14asjef\"><div class=\"k-menu-name\"><div class=\"k-ellipsis css-1vrj62t\"><div class=\"c-ellipsis k-ellipsis-wrapper\"><span>sub menu 3</span></div></div></div></div></div><div class=\"k-menu-item css-12sq2r7\"><div class=\"k-menu-item-title css-14asjef\"><div class=\"k-menu-name\"><div class=\"k-ellipsis css-1vrj62t\"><div class=\"c-ellipsis k-ellipsis-wrapper\"><span>sub menu 4</span></div></div></div></div></div></div></div></div><div class=\"k-menu-item css-12sq2r7\"><div class=\"k-menu-item-title css-14asjef\"><div class=\"k-menu-name\"><div class=\"k-ellipsis css-1vrj62t\"><div class=\"c-ellipsis k-ellipsis-wrapper\"><i class=\"k-icon ion-gear-b css-16qej3\"></i><span>menu 4</span></div></div></div></div></div></div></div></div></div><div class=\"k-layout css-1vdvr25\"><div class=\"k-layout-header k-dark css-1b0q9ji\" style=\"height: 64px;\"><button class=\"k-btn k-large k-none k-ghost css-h31bz\" tabindex=\"0\" type=\"button\" style=\"height: 64px;\"><i class=\"k-icon ion-navicon css-16qej3\" style=\"font-size: 30px;\"></i></button></div><div class=\"k-layout-body css-u3mwlr\"><div class=\"k-breadcrumb css-10qdcy4\"><div class=\"k-breadcrumb-item\"><span class=\"k-breadcrumb-link\">Home</span></div><span class=\"k-breadcrumb-separator\"><i class=\"k-icon k-icon-right k-small css-16qej3\"></i></span><div class=\"k-breadcrumb-item\"><span class=\"k-breadcrumb-link\">Detail</span></div></div><div>content</div></div></div></div>"
|
|
825
833
|
```
|
|
826
834
|
|
|
827
835
|
#### `Layout asideFix`
|
|
828
836
|
|
|
829
837
|
```
|
|
830
|
-
"<div class=\"k-layout k-has-aside css-1vdvr25 layout\"><div class=\"k-layout-aside k-fixed k-light css-1rytxc7\" style=\"width: 260px;\"><div class=\"logo\">LOGO</div><div class=\"k-layout-wrapper\"><div class=\"k-menu k-light k-vertical css-g3l0a0\"><div class=\"k-menu-body\"><div class=\"k-menu-item css-12sq2r7\"><div class=\"k-menu-item-title css-14asjef\"><div class=\"k-menu-name\"><div class=\"k-ellipsis css-
|
|
838
|
+
"<div class=\"k-layout k-has-aside css-1vdvr25 layout\"><div class=\"k-layout-aside k-fixed k-light css-1rytxc7\" style=\"width: 260px;\"><div class=\"logo\">LOGO</div><div class=\"k-layout-wrapper\"><div class=\"k-menu k-light k-vertical css-g3l0a0\"><div class=\"k-menu-body\"><div class=\"k-menu-item css-12sq2r7\"><div class=\"k-menu-item-title css-14asjef\"><div class=\"k-menu-name\"><div class=\"k-ellipsis css-1vrj62t\"><div class=\"c-ellipsis k-ellipsis-wrapper\"><i class=\"k-icon ion-flag css-16qej3\"></i><span>menu 1 </span></div></div></div><i class=\"k-icon k-menu-item-arrow ion-arrow-down-b css-16qej3\"></i></div><div class=\"k-menu css-1ve3qyh k-sub-menu css-g3l0a0\" style=\"display: none;\"><div class=\"k-menu-body\"><div class=\"k-menu-item css-12sq2r7\"><div class=\"k-menu-item-title css-14asjef\"><div class=\"k-menu-name\"><div class=\"k-ellipsis css-1vrj62t\"><div class=\"c-ellipsis k-ellipsis-wrapper\"><span>sub menu 1</span></div></div></div></div></div><div class=\"k-menu-item css-12sq2r7\"><div class=\"k-menu-item-title css-14asjef\"><div class=\"k-menu-name\"><div class=\"k-ellipsis css-1vrj62t\"><div class=\"c-ellipsis k-ellipsis-wrapper\"><span>sub menu 2</span></div></div></div></div></div><div class=\"k-menu-item k-disabled css-12sq2r7\"><div class=\"k-menu-item-title css-14asjef\"><div class=\"k-menu-name\"><div class=\"k-ellipsis css-1vrj62t\"><div class=\"c-ellipsis k-ellipsis-wrapper\"><span>sub menu 3</span></div></div></div></div></div><div class=\"k-menu-item css-12sq2r7\"><div class=\"k-menu-item-title css-14asjef\"><div class=\"k-menu-name\"><div class=\"k-ellipsis css-1vrj62t\"><div class=\"c-ellipsis k-ellipsis-wrapper\"><span>sub menu 4</span></div></div></div></div></div></div></div></div><div class=\"k-menu-item k-disabled css-12sq2r7\"><div class=\"k-menu-item-title css-14asjef\"><div class=\"k-menu-name\"><div class=\"k-ellipsis css-1vrj62t\"><div class=\"c-ellipsis k-ellipsis-wrapper\"><i class=\"k-icon ion-star css-16qej3\"></i><span>menu 2</span></div></div></div></div></div><div class=\"k-menu-item k-expanded k-highlighted css-12sq2r7\"><div class=\"k-menu-item-title css-14asjef\"><div class=\"k-menu-name\"><div class=\"k-ellipsis css-1vrj62t\"><div class=\"c-ellipsis k-ellipsis-wrapper\"><i class=\"k-icon k-icon ion-heart css-16qej3\"></i><span>menu 3 </span></div></div></div><i class=\"k-icon k-menu-item-arrow ion-arrow-down-b css-16qej3\"></i></div><div class=\"k-menu css-1ve3qyh k-sub-menu css-g3l0a0 k-expand-enter-from k-expand-enter-active\" style=\"height: 0px;\"><div class=\"k-menu-body\"><div class=\"k-menu-item k-active css-12sq2r7\"><div class=\"k-menu-item-title css-14asjef\"><div class=\"k-menu-name\"><div class=\"k-ellipsis css-1vrj62t\"><div class=\"c-ellipsis k-ellipsis-wrapper\"><span>sub menu 1</span></div></div></div></div></div><div class=\"k-menu-item css-12sq2r7\"><div class=\"k-menu-item-title css-14asjef\"><div class=\"k-menu-name\"><div class=\"k-ellipsis css-1vrj62t\"><div class=\"c-ellipsis k-ellipsis-wrapper\"><span>sub menu 2</span></div></div></div></div></div><div class=\"k-menu-item k-disabled css-12sq2r7\"><div class=\"k-menu-item-title css-14asjef\"><div class=\"k-menu-name\"><div class=\"k-ellipsis css-1vrj62t\"><div class=\"c-ellipsis k-ellipsis-wrapper\"><span>sub menu 3</span></div></div></div></div></div><div class=\"k-menu-item css-12sq2r7\"><div class=\"k-menu-item-title css-14asjef\"><div class=\"k-menu-name\"><div class=\"k-ellipsis css-1vrj62t\"><div class=\"c-ellipsis k-ellipsis-wrapper\"><span>sub menu 4</span></div></div></div></div></div></div></div></div><div class=\"k-menu-item css-12sq2r7\"><div class=\"k-menu-item-title css-14asjef\"><div class=\"k-menu-name\"><div class=\"k-ellipsis css-1vrj62t\"><div class=\"c-ellipsis k-ellipsis-wrapper\"><i class=\"k-icon ion-gear-b css-16qej3\"></i><span>menu 4</span></div></div></div></div></div></div></div></div></div><div class=\"k-layout css-1vdvr25\" style=\"padding-left: 260px;\"><div class=\"k-layout-header k-fixed k-white css-1b0q9ji\" style=\"height: 64px; left: 260px;\"><button class=\"k-btn k-large k-none css-h31bz\" tabindex=\"0\" type=\"button\" style=\"height: 64px;\"><i class=\"k-icon ion-navicon css-16qej3\" style=\"font-size: 30px;\"></i></button></div><div class=\"k-layout-body css-u3mwlr\" style=\"margin-top: 64px;\"><div class=\"k-breadcrumb css-10qdcy4\"><div class=\"k-breadcrumb-item\"><span class=\"k-breadcrumb-link\">Home</span></div><span class=\"k-breadcrumb-separator\"><i class=\"k-icon k-icon-right k-small css-16qej3\"></i></span><div class=\"k-breadcrumb-item\"><span class=\"k-breadcrumb-link\">Detail</span></div></div><div> content </div><div> content </div><div> content </div><div> content </div><div> content </div><div> content </div><div> content </div><div> content </div><div> content </div><div> content </div><div> content </div><div> content </div><div> content </div><div> content </div><div> content </div><div> content </div><div> content </div><div> content </div><div> content </div><div> content </div><div> content </div><div> content </div><div> content </div><div> content </div><div> content </div><div> content </div><div> content </div><div> content </div><div> content </div><div> content </div><div> content </div><div> content </div><div> content </div><div> content </div><div> content </div><div> content </div><div> content </div><div> content </div><div> content </div><div> content </div><div> content </div><div> content </div><div> content </div><div> content </div><div> content </div><div> content </div><div> content </div><div> content </div><div> content </div><div> content </div><div> content </div><div> content </div><div> content </div><div> content </div><div> content </div><div> content </div><div> content </div><div> content </div><div> content </div><div> content </div><div> content </div><div> content </div><div> content </div><div> content </div><div> content </div><div> content </div><div> content </div><div> content </div><div> content </div><div> content </div><div> content </div><div> content </div><div> content </div><div> content </div><div> content </div><div> content </div><div> content </div><div> content </div><div> content </div><div> content </div><div> content </div><div> content </div><div> content </div><div> content </div><div> content </div><div> content </div><div> content </div><div> content </div><div> content </div><div> content </div><div> content </div><div> content </div><div> content </div><div> content </div><div> content </div><div> content </div><div> content </div><div> content </div><div> content </div><div> content </div></div></div></div>"
|
|
831
839
|
```
|
|
832
840
|
|
|
833
841
|
#### `Layout basic`
|
|
834
842
|
|
|
835
843
|
```
|
|
836
|
-
"<div class=\"k-layout css-1vdvr25 layout\"><div class=\"k-layout-header k-fixed k-blur k-box-shadow k-white header css-1b0q9ji\" style=\"height: 54px;\"><div class=\"logo\">LOGO</div><div class=\"k-menu k-light k-horizontal css-g3l0a0\"><div class=\"k-menu-body\"><div class=\"k-menu-item css-12sq2r7\"><div class=\"k-menu-item-title css-14asjef\"><div class=\"k-menu-name\"><div class=\"k-ellipsis css-
|
|
844
|
+
"<div class=\"k-layout css-1vdvr25 layout\"><div class=\"k-layout-header k-fixed k-blur k-box-shadow k-white header css-1b0q9ji\" style=\"height: 54px;\"><div class=\"logo\">LOGO</div><div class=\"k-menu k-light k-horizontal css-g3l0a0\"><div class=\"k-menu-body\"><div class=\"k-menu-item css-12sq2r7\"><div class=\"k-menu-item-title css-14asjef\"><div class=\"k-menu-name\"><div class=\"k-ellipsis css-1vrj62t\"><div class=\"c-ellipsis k-ellipsis-wrapper\"><span>menu 1</span></div></div></div></div></div><div class=\"k-menu-item k-disabled css-12sq2r7\"><div class=\"k-menu-item-title css-14asjef\"><div class=\"k-menu-name\"><div class=\"k-ellipsis css-1vrj62t\"><div class=\"c-ellipsis k-ellipsis-wrapper\"><span>menu 2</span></div></div></div></div></div><div class=\"k-menu-item css-12sq2r7\"><div class=\"k-menu-item-title css-14asjef\"><div class=\"k-menu-name\"><div class=\"k-ellipsis css-1vrj62t\"><div class=\"c-ellipsis k-ellipsis-wrapper\"><span> menu 3 </span></div></div></div><i class=\"k-icon k-menu-item-arrow ion-arrow-down-b css-16qej3\"></i></div><!--portal--></div><div class=\"k-menu-item css-12sq2r7\"><div class=\"k-menu-item-title css-14asjef\"><div class=\"k-menu-name\"><div class=\"k-ellipsis css-1vrj62t\"><div class=\"c-ellipsis k-ellipsis-wrapper\"><span>menu 4</span></div></div></div></div></div></div></div></div><div class=\"k-layout k-has-aside css-1vdvr25\" style=\"margin-top: 54px;\"><div class=\"k-layout-aside k-fixed k-light css-1rytxc7\" style=\"width: 200px; top: 54px;\"><div class=\"k-layout-wrapper\"><div class=\"k-menu k-light k-vertical css-g3l0a0\"><div class=\"k-menu-body\"><div class=\"k-menu-item css-12sq2r7\"><div class=\"k-menu-item-title css-14asjef\"><div class=\"k-menu-name\"><div class=\"k-ellipsis css-1vrj62t\"><div class=\"c-ellipsis k-ellipsis-wrapper\"><i class=\"k-icon ion-flag css-16qej3\"></i><span>menu 1 </span></div></div></div><i class=\"k-icon k-menu-item-arrow ion-arrow-down-b css-16qej3\"></i></div><div class=\"k-menu css-1ve3qyh k-sub-menu css-g3l0a0\" style=\"display: none;\"><div class=\"k-menu-body\"><div class=\"k-menu-item css-12sq2r7\"><div class=\"k-menu-item-title css-14asjef\"><div class=\"k-menu-name\"><div class=\"k-ellipsis css-1vrj62t\"><div class=\"c-ellipsis k-ellipsis-wrapper\"><span>sub menu 1</span></div></div></div></div></div><div class=\"k-menu-item css-12sq2r7\"><div class=\"k-menu-item-title css-14asjef\"><div class=\"k-menu-name\"><div class=\"k-ellipsis css-1vrj62t\"><div class=\"c-ellipsis k-ellipsis-wrapper\"><span>sub menu 2</span></div></div></div></div></div><div class=\"k-menu-item k-disabled css-12sq2r7\"><div class=\"k-menu-item-title css-14asjef\"><div class=\"k-menu-name\"><div class=\"k-ellipsis css-1vrj62t\"><div class=\"c-ellipsis k-ellipsis-wrapper\"><span>sub menu 3</span></div></div></div></div></div><div class=\"k-menu-item css-12sq2r7\"><div class=\"k-menu-item-title css-14asjef\"><div class=\"k-menu-name\"><div class=\"k-ellipsis css-1vrj62t\"><div class=\"c-ellipsis k-ellipsis-wrapper\"><span>sub menu 4</span></div></div></div></div></div></div></div></div><div class=\"k-menu-item k-disabled css-12sq2r7\"><div class=\"k-menu-item-title css-14asjef\"><div class=\"k-menu-name\"><div class=\"k-ellipsis css-1vrj62t\"><div class=\"c-ellipsis k-ellipsis-wrapper\"><i class=\"k-icon ion-star css-16qej3\"></i><span>menu 2</span></div></div></div></div></div><div class=\"k-menu-item k-expanded k-highlighted css-12sq2r7\"><div class=\"k-menu-item-title css-14asjef\"><div class=\"k-menu-name\"><div class=\"k-ellipsis css-1vrj62t\"><div class=\"c-ellipsis k-ellipsis-wrapper\"><i class=\"k-icon ion-heart css-16qej3\"></i><span>menu 3 </span></div></div></div><i class=\"k-icon k-menu-item-arrow ion-arrow-down-b css-16qej3\"></i></div><div class=\"k-menu css-1ve3qyh k-sub-menu css-g3l0a0 k-expand-enter-from k-expand-enter-active\" style=\"height: 0px;\"><div class=\"k-menu-body\"><div class=\"k-menu-item k-active css-12sq2r7\"><div class=\"k-menu-item-title css-14asjef\"><div class=\"k-menu-name\"><div class=\"k-ellipsis css-1vrj62t\"><div class=\"c-ellipsis k-ellipsis-wrapper\"><span>sub menu 1</span></div></div></div></div></div><div class=\"k-menu-item css-12sq2r7\"><div class=\"k-menu-item-title css-14asjef\"><div class=\"k-menu-name\"><div class=\"k-ellipsis css-1vrj62t\"><div class=\"c-ellipsis k-ellipsis-wrapper\"><span>sub menu 2</span></div></div></div></div></div><div class=\"k-menu-item k-disabled css-12sq2r7\"><div class=\"k-menu-item-title css-14asjef\"><div class=\"k-menu-name\"><div class=\"k-ellipsis css-1vrj62t\"><div class=\"c-ellipsis k-ellipsis-wrapper\"><span>sub menu 3</span></div></div></div></div></div><div class=\"k-menu-item css-12sq2r7\"><div class=\"k-menu-item-title css-14asjef\"><div class=\"k-menu-name\"><div class=\"k-ellipsis css-1vrj62t\"><div class=\"c-ellipsis k-ellipsis-wrapper\"><span>sub menu 4</span></div></div></div></div></div></div></div></div><div class=\"k-menu-item css-12sq2r7\"><div class=\"k-menu-item-title css-14asjef\"><div class=\"k-menu-name\"><div class=\"k-ellipsis css-1vrj62t\"><div class=\"c-ellipsis k-ellipsis-wrapper\"><i class=\"k-icon ion-gear-b css-16qej3\"></i><span>menu 4</span></div></div></div></div></div></div></div></div></div><div class=\"k-layout-body css-u3mwlr\" style=\"padding-left: 200px;\"><div class=\"content\"><div class=\"k-breadcrumb css-10qdcy4\"><div class=\"k-breadcrumb-item\"><span class=\"k-breadcrumb-link\">Home</span></div><span class=\"k-breadcrumb-separator\"><i class=\"k-icon k-icon-right k-small css-16qej3\"></i></span><div class=\"k-breadcrumb-item\"><span class=\"k-breadcrumb-link\">Detail</span></div></div><div>content</div><div>content</div><div>content</div><div>content</div><div>content</div><div>content</div><div>content</div><div>content</div><div>content</div><div>content</div><div>content</div><div>content</div><div>content</div><div>content</div><div>content</div><div>content</div><div>content</div></div></div></div></div>"
|
|
837
845
|
```
|
|
838
846
|
|
|
839
847
|
#### `Layout fix`
|
|
840
848
|
|
|
841
849
|
```
|
|
842
|
-
"<div class=\"k-layout css-1vdvr25 layout\"><div class=\"k-layout-header k-fixed k-dark css-1b0q9ji\" style=\"height: 64px;\"><div class=\"logo\">LOGO</div><div class=\"k-menu k-dark k-horizontal css-g3l0a0\"><div class=\"k-menu-body\"><div class=\"k-menu-item css-12sq2r7\"><div class=\"k-menu-item-title css-14asjef\"><div class=\"k-menu-name\"><div class=\"k-ellipsis css-
|
|
850
|
+
"<div class=\"k-layout css-1vdvr25 layout\"><div class=\"k-layout-header k-fixed k-dark css-1b0q9ji\" style=\"height: 64px;\"><div class=\"logo\">LOGO</div><div class=\"k-menu k-dark k-horizontal css-g3l0a0\"><div class=\"k-menu-body\"><div class=\"k-menu-item css-12sq2r7\"><div class=\"k-menu-item-title css-14asjef\"><div class=\"k-menu-name\"><div class=\"k-ellipsis css-1vrj62t\"><div class=\"c-ellipsis k-ellipsis-wrapper\"><span>menu 1</span></div></div></div></div></div><div class=\"k-menu-item k-disabled css-12sq2r7\"><div class=\"k-menu-item-title css-14asjef\"><div class=\"k-menu-name\"><div class=\"k-ellipsis css-1vrj62t\"><div class=\"c-ellipsis k-ellipsis-wrapper\"><span>menu 2</span></div></div></div></div></div><div class=\"k-menu-item css-12sq2r7\"><div class=\"k-menu-item-title css-14asjef\"><div class=\"k-menu-name\"><div class=\"k-ellipsis css-1vrj62t\"><div class=\"c-ellipsis k-ellipsis-wrapper\"><span> menu 3 </span></div></div></div><i class=\"k-icon k-menu-item-arrow ion-arrow-down-b css-16qej3\"></i></div><!--portal--></div><div class=\"k-menu-item css-12sq2r7\"><div class=\"k-menu-item-title css-14asjef\"><div class=\"k-menu-name\"><div class=\"k-ellipsis css-1vrj62t\"><div class=\"c-ellipsis k-ellipsis-wrapper\"><span>menu 4</span></div></div></div></div></div></div></div></div><div class=\"k-layout k-has-aside css-1vdvr25\" style=\"margin-top: 64px;\"><div class=\"k-layout-aside k-fixed k-light css-1rytxc7\" style=\"width: 200px; top: 64px;\"><div class=\"k-layout-wrapper\"><div class=\"k-menu k-light k-vertical css-g3l0a0\"><div class=\"k-menu-body\"><div class=\"k-menu-item css-12sq2r7\"><div class=\"k-menu-item-title css-14asjef\"><div class=\"k-menu-name\"><div class=\"k-ellipsis css-1vrj62t\"><div class=\"c-ellipsis k-ellipsis-wrapper\"><i class=\"k-icon ion-flag css-16qej3\"></i><span>menu 1 </span></div></div></div><i class=\"k-icon k-menu-item-arrow ion-arrow-down-b css-16qej3\"></i></div><div class=\"k-menu css-1ve3qyh k-sub-menu css-g3l0a0\" style=\"display: none;\"><div class=\"k-menu-body\"><div class=\"k-menu-item css-12sq2r7\"><div class=\"k-menu-item-title css-14asjef\"><div class=\"k-menu-name\"><div class=\"k-ellipsis css-1vrj62t\"><div class=\"c-ellipsis k-ellipsis-wrapper\"><span>sub menu 1</span></div></div></div></div></div><div class=\"k-menu-item css-12sq2r7\"><div class=\"k-menu-item-title css-14asjef\"><div class=\"k-menu-name\"><div class=\"k-ellipsis css-1vrj62t\"><div class=\"c-ellipsis k-ellipsis-wrapper\"><span>sub menu 2</span></div></div></div></div></div><div class=\"k-menu-item k-disabled css-12sq2r7\"><div class=\"k-menu-item-title css-14asjef\"><div class=\"k-menu-name\"><div class=\"k-ellipsis css-1vrj62t\"><div class=\"c-ellipsis k-ellipsis-wrapper\"><span>sub menu 3</span></div></div></div></div></div><div class=\"k-menu-item css-12sq2r7\"><div class=\"k-menu-item-title css-14asjef\"><div class=\"k-menu-name\"><div class=\"k-ellipsis css-1vrj62t\"><div class=\"c-ellipsis k-ellipsis-wrapper\"><span>sub menu 4</span></div></div></div></div></div></div></div></div><div class=\"k-menu-item k-disabled css-12sq2r7\"><div class=\"k-menu-item-title css-14asjef\"><div class=\"k-menu-name\"><div class=\"k-ellipsis css-1vrj62t\"><div class=\"c-ellipsis k-ellipsis-wrapper\"><i class=\"k-icon ion-star css-16qej3\"></i><span>menu 2</span></div></div></div></div></div><div class=\"k-menu-item k-expanded k-highlighted css-12sq2r7\"><div class=\"k-menu-item-title css-14asjef\"><div class=\"k-menu-name\"><div class=\"k-ellipsis css-1vrj62t\"><div class=\"c-ellipsis k-ellipsis-wrapper\"><i class=\"k-icon ion-heart css-16qej3\"></i><span>menu 3 </span></div></div></div><i class=\"k-icon k-menu-item-arrow ion-arrow-down-b css-16qej3\"></i></div><div class=\"k-menu css-1ve3qyh k-sub-menu css-g3l0a0 k-expand-enter-from k-expand-enter-active\" style=\"height: 0px;\"><div class=\"k-menu-body\"><div class=\"k-menu-item k-active css-12sq2r7\"><div class=\"k-menu-item-title css-14asjef\"><div class=\"k-menu-name\"><div class=\"k-ellipsis css-1vrj62t\"><div class=\"c-ellipsis k-ellipsis-wrapper\"><span>sub menu 1</span></div></div></div></div></div><div class=\"k-menu-item css-12sq2r7\"><div class=\"k-menu-item-title css-14asjef\"><div class=\"k-menu-name\"><div class=\"k-ellipsis css-1vrj62t\"><div class=\"c-ellipsis k-ellipsis-wrapper\"><span>sub menu 2</span></div></div></div></div></div><div class=\"k-menu-item k-disabled css-12sq2r7\"><div class=\"k-menu-item-title css-14asjef\"><div class=\"k-menu-name\"><div class=\"k-ellipsis css-1vrj62t\"><div class=\"c-ellipsis k-ellipsis-wrapper\"><span>sub menu 3</span></div></div></div></div></div><div class=\"k-menu-item css-12sq2r7\"><div class=\"k-menu-item-title css-14asjef\"><div class=\"k-menu-name\"><div class=\"k-ellipsis css-1vrj62t\"><div class=\"c-ellipsis k-ellipsis-wrapper\"><span>sub menu 4</span></div></div></div></div></div></div></div></div><div class=\"k-menu-item css-12sq2r7\"><div class=\"k-menu-item-title css-14asjef\"><div class=\"k-menu-name\"><div class=\"k-ellipsis css-1vrj62t\"><div class=\"c-ellipsis k-ellipsis-wrapper\"><i class=\"k-icon ion-gear-b css-16qej3\"></i><span>menu 4</span></div></div></div></div></div></div></div></div></div><div class=\"k-layout-body css-u3mwlr\" style=\"padding-left: 200px;\"><div class=\"k-breadcrumb css-10qdcy4\"><div class=\"k-breadcrumb-item\"><span class=\"k-breadcrumb-link\">Home</span></div><span class=\"k-breadcrumb-separator\"><i class=\"k-icon k-icon-right k-small css-16qej3\"></i></span><div class=\"k-breadcrumb-item\"><span class=\"k-breadcrumb-link\">Detail</span></div></div><div> content </div><div> content </div><div> content </div><div> content </div><div> content </div><div> content </div><div> content </div><div> content </div><div> content </div><div> content </div><div> content </div><div> content </div><div> content </div><div> content </div><div> content </div><div> content </div><div> content </div><div> content </div><div> content </div><div> content </div><div> content </div><div> content </div><div> content </div><div> content </div><div> content </div><div> content </div><div> content </div><div> content </div><div> content </div><div> content </div><div> content </div><div> content </div><div> content </div><div> content </div><div> content </div><div> content </div><div> content </div><div> content </div><div> content </div><div> content </div><div> content </div><div> content </div><div> content </div><div> content </div><div> content </div><div> content </div><div> content </div><div> content </div><div> content </div><div> content </div><div> content </div><div> content </div><div> content </div><div> content </div><div> content </div><div> content </div><div> content </div><div> content </div><div> content </div><div> content </div><div> content </div><div> content </div><div> content </div><div> content </div><div> content </div><div> content </div><div> content </div><div> content </div><div> content </div><div> content </div><div> content </div><div> content </div><div> content </div><div> content </div><div> content </div><div> content </div><div> content </div><div> content </div><div> content </div><div> content </div><div> content </div><div> content </div><div> content </div><div> content </div><div> content </div><div> content </div><div> content </div><div> content </div><div> content </div><div> content </div><div> content </div><div> content </div><div> content </div><div> content </div><div> content </div><div> content </div><div> content </div><div> content </div><div> content </div><div> content </div></div></div></div>"
|
|
843
851
|
```
|
|
844
852
|
|
|
845
853
|
#### `Layout theme`
|
|
846
854
|
|
|
847
855
|
```
|
|
848
|
-
"<div class=\"k-layout css-1vdvr25 layout\"><div class=\"k-layout-header k-light header css-1b0q9ji\" style=\"height: 64px;\"><div class=\"logo\">LOGO</div><div class=\"k-menu k-light k-horizontal css-g3l0a0\"><div class=\"k-menu-body\"><div class=\"k-menu-item css-12sq2r7\"><div class=\"k-menu-item-title css-14asjef\"><div class=\"k-menu-name\"><div class=\"k-ellipsis css-
|
|
856
|
+
"<div class=\"k-layout css-1vdvr25 layout\"><div class=\"k-layout-header k-light header css-1b0q9ji\" style=\"height: 64px;\"><div class=\"logo\">LOGO</div><div class=\"k-menu k-light k-horizontal css-g3l0a0\"><div class=\"k-menu-body\"><div class=\"k-menu-item css-12sq2r7\"><div class=\"k-menu-item-title css-14asjef\"><div class=\"k-menu-name\"><div class=\"k-ellipsis css-1vrj62t\"><div class=\"c-ellipsis k-ellipsis-wrapper\"><span>menu 1</span></div></div></div></div></div><div class=\"k-menu-item k-disabled css-12sq2r7\"><div class=\"k-menu-item-title css-14asjef\"><div class=\"k-menu-name\"><div class=\"k-ellipsis css-1vrj62t\"><div class=\"c-ellipsis k-ellipsis-wrapper\"><span>menu 2</span></div></div></div></div></div><div class=\"k-menu-item css-12sq2r7\"><div class=\"k-menu-item-title css-14asjef\"><div class=\"k-menu-name\"><div class=\"k-ellipsis css-1vrj62t\"><div class=\"c-ellipsis k-ellipsis-wrapper\"><span> menu 3 </span></div></div></div><i class=\"k-icon k-menu-item-arrow ion-arrow-down-b css-16qej3\"></i></div><!--portal--></div><div class=\"k-menu-item css-12sq2r7\"><div class=\"k-menu-item-title css-14asjef\"><div class=\"k-menu-name\"><div class=\"k-ellipsis css-1vrj62t\"><div class=\"c-ellipsis k-ellipsis-wrapper\"><span>menu 4</span></div></div></div></div></div></div></div></div><div class=\"k-layout k-has-aside css-1vdvr25\"><div class=\"k-layout-aside k-light css-1rytxc7\" style=\"width: 200px;\"><div class=\"k-layout-wrapper\"><div class=\"k-menu k-light k-vertical css-g3l0a0\"><div class=\"k-menu-body\"><div class=\"k-menu-item css-12sq2r7\"><div class=\"k-menu-item-title css-14asjef\"><div class=\"k-menu-name\"><div class=\"k-ellipsis css-1vrj62t\"><div class=\"c-ellipsis k-ellipsis-wrapper\"><i class=\"k-icon ion-flag css-16qej3\"></i><span>menu 1 </span></div></div></div><i class=\"k-icon k-menu-item-arrow ion-arrow-down-b css-16qej3\"></i></div><div class=\"k-menu css-1ve3qyh k-sub-menu css-g3l0a0\" style=\"display: none;\"><div class=\"k-menu-body\"><div class=\"k-menu-item css-12sq2r7\"><div class=\"k-menu-item-title css-14asjef\"><div class=\"k-menu-name\"><div class=\"k-ellipsis css-1vrj62t\"><div class=\"c-ellipsis k-ellipsis-wrapper\"><span>sub menu 1</span></div></div></div></div></div><div class=\"k-menu-item css-12sq2r7\"><div class=\"k-menu-item-title css-14asjef\"><div class=\"k-menu-name\"><div class=\"k-ellipsis css-1vrj62t\"><div class=\"c-ellipsis k-ellipsis-wrapper\"><span>sub menu 2</span></div></div></div></div></div><div class=\"k-menu-item k-disabled css-12sq2r7\"><div class=\"k-menu-item-title css-14asjef\"><div class=\"k-menu-name\"><div class=\"k-ellipsis css-1vrj62t\"><div class=\"c-ellipsis k-ellipsis-wrapper\"><span>sub menu 3</span></div></div></div></div></div><div class=\"k-menu-item css-12sq2r7\"><div class=\"k-menu-item-title css-14asjef\"><div class=\"k-menu-name\"><div class=\"k-ellipsis css-1vrj62t\"><div class=\"c-ellipsis k-ellipsis-wrapper\"><span>sub menu 4</span></div></div></div></div></div></div></div></div><div class=\"k-menu-item k-disabled css-12sq2r7\"><div class=\"k-menu-item-title css-14asjef\"><div class=\"k-menu-name\"><div class=\"k-ellipsis css-1vrj62t\"><div class=\"c-ellipsis k-ellipsis-wrapper\"><i class=\"k-icon ion-star css-16qej3\"></i><span>menu 2</span></div></div></div></div></div><div class=\"k-menu-item k-expanded k-highlighted css-12sq2r7\"><div class=\"k-menu-item-title css-14asjef\"><div class=\"k-menu-name\"><div class=\"k-ellipsis css-1vrj62t\"><div class=\"c-ellipsis k-ellipsis-wrapper\"><i class=\"k-icon ion-heart css-16qej3\"></i><span>menu 3 </span></div></div></div><i class=\"k-icon k-menu-item-arrow ion-arrow-down-b css-16qej3\"></i></div><div class=\"k-menu css-1ve3qyh k-sub-menu css-g3l0a0 k-expand-enter-from k-expand-enter-active\" style=\"height: 0px;\"><div class=\"k-menu-body\"><div class=\"k-menu-item k-active css-12sq2r7\"><div class=\"k-menu-item-title css-14asjef\"><div class=\"k-menu-name\"><div class=\"k-ellipsis css-1vrj62t\"><div class=\"c-ellipsis k-ellipsis-wrapper\"><span>sub menu 1</span></div></div></div></div></div><div class=\"k-menu-item css-12sq2r7\"><div class=\"k-menu-item-title css-14asjef\"><div class=\"k-menu-name\"><div class=\"k-ellipsis css-1vrj62t\"><div class=\"c-ellipsis k-ellipsis-wrapper\"><span>sub menu 2</span></div></div></div></div></div><div class=\"k-menu-item k-disabled css-12sq2r7\"><div class=\"k-menu-item-title css-14asjef\"><div class=\"k-menu-name\"><div class=\"k-ellipsis css-1vrj62t\"><div class=\"c-ellipsis k-ellipsis-wrapper\"><span>sub menu 3</span></div></div></div></div></div><div class=\"k-menu-item css-12sq2r7\"><div class=\"k-menu-item-title css-14asjef\"><div class=\"k-menu-name\"><div class=\"k-ellipsis css-1vrj62t\"><div class=\"c-ellipsis k-ellipsis-wrapper\"><span>sub menu 4</span></div></div></div></div></div></div></div></div><div class=\"k-menu-item css-12sq2r7\"><div class=\"k-menu-item-title css-14asjef\"><div class=\"k-menu-name\"><div class=\"k-ellipsis css-1vrj62t\"><div class=\"c-ellipsis k-ellipsis-wrapper\"><i class=\"k-icon ion-gear-b css-16qej3\"></i><span>menu 4</span></div></div></div></div></div></div></div></div></div><div class=\"k-layout-body css-u3mwlr\"><div class=\"k-breadcrumb css-10qdcy4\"><div class=\"k-breadcrumb-item\"><span class=\"k-breadcrumb-link\">Home</span></div><span class=\"k-breadcrumb-separator\"><i class=\"k-icon k-icon-right k-small css-16qej3\"></i></span><div class=\"k-breadcrumb-item\"><span class=\"k-breadcrumb-link\">Detail</span></div></div> 切换主题：<div class=\"k-btns css-z9s2vw\"><button class=\"k-btn k-default k-active css-h31bz\" tabindex=\"0\" type=\"button\">light<input class=\"k-button-input\" type=\"radio\" tabindex=\"-1\"></button><button class=\"k-btn k-default css-h31bz\" tabindex=\"0\" type=\"button\">dark<input class=\"k-button-input\" type=\"radio\" tabindex=\"-1\"></button></div></div></div></div>"
|
|
849
857
|
```
|
|
850
858
|
|
|
851
859
|
## `menu`
|
|
@@ -853,55 +861,55 @@
|
|
|
853
861
|
#### `Menu accordion`
|
|
854
862
|
|
|
855
863
|
```
|
|
856
|
-
"<div class=\"k-menu k-dark k-vertical css-g3l0a0\"><div class=\"k-menu-body\"><div class=\"k-menu-item css-12sq2r7\"><div class=\"k-menu-item-title css-14asjef\"><div class=\"k-menu-name\"><div class=\"k-ellipsis css-
|
|
864
|
+
"<div class=\"k-menu k-dark k-vertical css-g3l0a0\"><div class=\"k-menu-body\"><div class=\"k-menu-item css-12sq2r7\"><div class=\"k-menu-item-title css-14asjef\"><div class=\"k-menu-name\"><div class=\"k-ellipsis css-1vrj62t\"><div class=\"c-ellipsis k-ellipsis-wrapper\"><i class=\"k-icon ion-flag css-16qej3\"></i><span>menu 1 </span></div></div></div><i class=\"k-icon k-menu-item-arrow ion-arrow-down-b css-16qej3\"></i></div><div class=\"k-menu css-1ve3qyh k-sub-menu css-g3l0a0\" style=\"display: none;\"><div class=\"k-menu-body\"><div class=\"k-menu-item css-12sq2r7\"><div class=\"k-menu-item-title css-14asjef\"><div class=\"k-menu-name\"><div class=\"k-ellipsis css-1vrj62t\"><div class=\"c-ellipsis k-ellipsis-wrapper\"><span>sub menu 1</span></div></div></div></div></div><div class=\"k-menu-item css-12sq2r7\"><div class=\"k-menu-item-title css-14asjef\"><div class=\"k-menu-name\"><div class=\"k-ellipsis css-1vrj62t\"><div class=\"c-ellipsis k-ellipsis-wrapper\"><span>sub menu 2</span></div></div></div></div></div></div></div></div><div class=\"k-menu-item k-disabled css-12sq2r7\"><div class=\"k-menu-item-title css-14asjef\"><div class=\"k-menu-name\"><div class=\"k-ellipsis css-1vrj62t\"><div class=\"c-ellipsis k-ellipsis-wrapper\"><i class=\"k-icon ion-star css-16qej3\"></i><span>menu 2 </span></div></div></div></div></div><div class=\"k-menu-item k-expanded css-12sq2r7\"><div class=\"k-menu-item-title css-14asjef\"><div class=\"k-menu-name\"><div class=\"k-ellipsis css-1vrj62t\"><div class=\"c-ellipsis k-ellipsis-wrapper\"><i class=\"k-icon ion-heart css-16qej3\"></i><span>menu 3 </span></div></div></div><i class=\"k-icon k-menu-item-arrow ion-arrow-down-b css-16qej3\"></i></div><div class=\"k-menu css-1ve3qyh k-sub-menu css-g3l0a0\"><div class=\"k-menu-body\"><div class=\"k-menu-item css-12sq2r7\"><div class=\"k-menu-item-title css-14asjef\"><div class=\"k-menu-name\"><div class=\"k-ellipsis css-1vrj62t\"><div class=\"c-ellipsis k-ellipsis-wrapper\"><span> sub menu 1 </span></div></div></div><i class=\"k-icon k-menu-item-arrow ion-arrow-down-b css-16qej3\"></i></div><div class=\"k-menu css-1k8qtgp k-sub-menu css-g3l0a0\" style=\"display: none;\"><div class=\"k-menu-body\"><div class=\"k-menu-item css-12sq2r7\"><div class=\"k-menu-item-title css-14asjef\"><div class=\"k-menu-name\"><div class=\"k-ellipsis css-1vrj62t\"><div class=\"c-ellipsis k-ellipsis-wrapper\"><span>Option 1</span></div></div></div></div></div></div></div></div><div class=\"k-menu-item css-12sq2r7\"><div class=\"k-menu-item-title css-14asjef\"><div class=\"k-menu-name\"><div class=\"k-ellipsis css-1vrj62t\"><div class=\"c-ellipsis k-ellipsis-wrapper\"><span>sub menu 2</span></div></div></div></div></div><div class=\"k-menu-item k-disabled css-12sq2r7\"><div class=\"k-menu-item-title css-14asjef\"><div class=\"k-menu-name\"><div class=\"k-ellipsis css-1vrj62t\"><div class=\"c-ellipsis k-ellipsis-wrapper\"><span>sub menu 3</span></div></div></div></div></div><div class=\"k-menu-item css-12sq2r7\"><div class=\"k-menu-item-title css-14asjef\"><div class=\"k-menu-name\"><div class=\"k-ellipsis css-1vrj62t\"><div class=\"c-ellipsis k-ellipsis-wrapper\"><span> sub menu 4 </span></div></div></div><i class=\"k-icon k-menu-item-arrow ion-arrow-down-b css-16qej3\"></i></div><div class=\"k-menu css-1k8qtgp k-sub-menu css-g3l0a0\" style=\"display: none;\"><div class=\"k-menu-body\"><div class=\"k-menu-item css-12sq2r7\"><div class=\"k-menu-item-title css-14asjef\"><div class=\"k-menu-name\"><div class=\"k-ellipsis css-1vrj62t\"><div class=\"c-ellipsis k-ellipsis-wrapper\"><span>Option 1</span></div></div></div></div></div><div class=\"k-menu-item css-12sq2r7\"><div class=\"k-menu-item-title css-14asjef\"><div class=\"k-menu-name\"><div class=\"k-ellipsis css-1vrj62t\"><div class=\"c-ellipsis k-ellipsis-wrapper\"><span>Option 2</span></div></div></div></div></div></div></div></div></div></div></div><div class=\"k-menu-item css-12sq2r7\"><div class=\"k-menu-item-title css-14asjef\"><div class=\"k-menu-name\"><div class=\"k-ellipsis css-1vrj62t\"><div class=\"c-ellipsis k-ellipsis-wrapper\"><i class=\"k-icon ion-gear-b css-16qej3\"></i><span>menu 4 </span></div></div></div><i class=\"k-icon k-menu-item-arrow ion-arrow-down-b css-16qej3\"></i></div><div class=\"k-menu css-1ve3qyh k-sub-menu css-g3l0a0\" style=\"display: none;\"><div class=\"k-menu-body\"><div class=\"k-menu-item css-12sq2r7\"><div class=\"k-menu-item-title css-14asjef\"><div class=\"k-menu-name\"><div class=\"k-ellipsis css-1vrj62t\"><div class=\"c-ellipsis k-ellipsis-wrapper\"><span>sub menu 1</span></div></div></div></div></div><div class=\"k-menu-item css-12sq2r7\"><div class=\"k-menu-item-title css-14asjef\"><div class=\"k-menu-name\"><div class=\"k-ellipsis css-1vrj62t\"><div class=\"c-ellipsis k-ellipsis-wrapper\"><span>sub menu 2</span></div></div></div></div></div></div></div></div></div></div>"
|
|
857
865
|
```
|
|
858
866
|
|
|
859
867
|
#### `Menu basic`
|
|
860
868
|
|
|
861
869
|
```
|
|
862
|
-
"<div class=\"k-menu k-dark k-vertical css-g3l0a0\"><div class=\"k-menu-body\"><div class=\"k-menu-item css-12sq2r7\"><div class=\"k-menu-item-title css-14asjef\"><div class=\"k-menu-name\"><div class=\"k-ellipsis css-
|
|
870
|
+
"<div class=\"k-menu k-dark k-vertical css-g3l0a0\"><div class=\"k-menu-body\"><div class=\"k-menu-item css-12sq2r7\"><div class=\"k-menu-item-title css-14asjef\"><div class=\"k-menu-name\"><div class=\"k-ellipsis css-1vrj62t\"><div class=\"c-ellipsis k-ellipsis-wrapper\"><i class=\"k-icon ion-flag css-16qej3\"></i><span>menu 1 </span></div></div></div><i class=\"k-icon k-menu-item-arrow ion-arrow-down-b css-16qej3\"></i></div><div class=\"k-menu css-1ve3qyh k-sub-menu css-g3l0a0\" style=\"display: none;\"><div class=\"k-menu-body\"><div class=\"k-menu-item css-12sq2r7\"><div class=\"k-menu-item-title css-14asjef\"><div class=\"k-menu-name\"><div class=\"k-ellipsis css-1vrj62t\"><div class=\"c-ellipsis k-ellipsis-wrapper\"><span>sub menu 1</span></div></div></div></div></div><div class=\"k-menu-item css-12sq2r7\"><div class=\"k-menu-item-title css-14asjef\"><div class=\"k-menu-name\"><div class=\"k-ellipsis css-1vrj62t\"><div class=\"c-ellipsis k-ellipsis-wrapper\"><span>sub menu 2</span></div></div></div></div></div><div class=\"k-menu-item k-disabled css-12sq2r7\"><div class=\"k-menu-item-title css-14asjef\"><div class=\"k-menu-name\"><div class=\"k-ellipsis css-1vrj62t\"><div class=\"c-ellipsis k-ellipsis-wrapper\"><span>sub menu 3</span></div></div></div></div></div><div class=\"k-menu-item css-12sq2r7\"><div class=\"k-menu-item-title css-14asjef\"><div class=\"k-menu-name\"><div class=\"k-ellipsis css-1vrj62t\"><div class=\"c-ellipsis k-ellipsis-wrapper\"><span>sub menu 4</span></div></div></div></div></div></div></div></div><div class=\"k-menu-item k-disabled css-12sq2r7\"><div class=\"k-menu-item-title css-14asjef\"><div class=\"k-menu-name\"><div class=\"k-ellipsis css-1vrj62t\"><div class=\"c-ellipsis k-ellipsis-wrapper\"><i class=\"k-icon ion-star css-16qej3\"></i><span>menu 2</span></div></div></div></div></div><div class=\"k-menu-item k-expanded k-highlighted css-12sq2r7\"><div class=\"k-menu-item-title css-14asjef\"><div class=\"k-menu-name\"><div class=\"k-ellipsis css-1vrj62t\"><div class=\"c-ellipsis k-ellipsis-wrapper\"><i class=\"k-icon ion-heart css-16qej3\"></i><span>menu 3 </span></div></div></div><i class=\"k-icon k-menu-item-arrow ion-arrow-down-b css-16qej3\"></i></div><div class=\"k-menu css-1ve3qyh k-sub-menu css-g3l0a0 k-expand-enter-from k-expand-enter-active\" style=\"height: 0px;\"><div class=\"k-menu-body\"><div class=\"k-menu-item k-active css-12sq2r7\"><div class=\"k-menu-item-title css-14asjef\"><div class=\"k-menu-name\"><div class=\"k-ellipsis css-1vrj62t\"><div class=\"c-ellipsis k-ellipsis-wrapper\"><span>sub menu 1</span></div></div></div></div></div><div class=\"k-menu-item css-12sq2r7\"><div class=\"k-menu-item-title css-14asjef\"><div class=\"k-menu-name\"><div class=\"k-ellipsis css-1vrj62t\"><div class=\"c-ellipsis k-ellipsis-wrapper\"><span>sub menu 2</span></div></div></div></div></div><div class=\"k-menu-item k-disabled css-12sq2r7\"><div class=\"k-menu-item-title css-14asjef\"><div class=\"k-menu-name\"><div class=\"k-ellipsis css-1vrj62t\"><div class=\"c-ellipsis k-ellipsis-wrapper\"><span>sub menu 3</span></div></div></div></div></div><div class=\"k-menu-item css-12sq2r7\"><div class=\"k-menu-item-title css-14asjef\"><div class=\"k-menu-name\"><div class=\"k-ellipsis css-1vrj62t\"><div class=\"c-ellipsis k-ellipsis-wrapper\"><span> sub menu 4 </span></div></div></div><i class=\"k-icon k-menu-item-arrow ion-arrow-down-b css-16qej3\"></i></div><div class=\"k-menu css-1k8qtgp k-sub-menu css-g3l0a0\" style=\"display: none;\"><div class=\"k-menu-body\"><div class=\"k-menu-item css-12sq2r7\"><div class=\"k-menu-item-title css-14asjef\"><div class=\"k-menu-name\"><div class=\"k-ellipsis css-1vrj62t\"><div class=\"c-ellipsis k-ellipsis-wrapper\"><span>Option 1</span></div></div></div></div></div><div class=\"k-menu-item css-12sq2r7\"><div class=\"k-menu-item-title css-14asjef\"><div class=\"k-menu-name\"><div class=\"k-ellipsis css-1vrj62t\"><div class=\"c-ellipsis k-ellipsis-wrapper\"><span>Option 2</span></div></div></div></div></div></div></div></div></div></div></div><div class=\"k-menu-item css-12sq2r7\"><div class=\"k-menu-item-title css-14asjef\"><div class=\"k-menu-name\"><div class=\"k-ellipsis css-1vrj62t\"><div class=\"c-ellipsis k-ellipsis-wrapper\"><i class=\"k-icon ion-gear-b css-16qej3\"></i><span>menu 4</span></div></div></div></div></div></div></div>"
|
|
863
871
|
```
|
|
864
872
|
|
|
865
873
|
#### `Menu collapse`
|
|
866
874
|
|
|
867
875
|
```
|
|
868
|
-
"<div><div class=\"k-switch k-checked k-default css-1kd39ob\" tabindex=\"0\" style=\"margin-right: 16px; width: 60px;\"><input type=\"checkbox\" tabindex=\"-1\"><div class=\"k-switch-off\" style=\"width: px;\">展开</div><div class=\"k-switch-bar\"><div class=\"k-switch-on\" style=\"width: 60px;\">收起</div><div class=\"k-switch-wrapper\"><div class=\"k-switch-handle\"><img src=\"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\"></div></div></div></div><div class=\"k-switch k-default css-1kd39ob\" tabindex=\"0\" style=\"width: 60px;\"><input type=\"checkbox\" tabindex=\"-1\"><div class=\"k-switch-off\" style=\"width: px;\">dark</div><div class=\"k-switch-bar\"><div class=\"k-switch-on\" style=\"width: 60px;\">light</div><div class=\"k-switch-wrapper\"><div class=\"k-switch-handle\"><img src=\"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\"></div></div></div></div><br><br><div class=\"k-menu k-dark k-collapsed k-vertical css-g3l0a0\"><div class=\"k-menu-body\"><div class=\"k-menu-item css-12sq2r7\"><div class=\"k-menu-item-title css-14asjef\"><div class=\"k-menu-name\"><div class=\"k-ellipsis css-
|
|
876
|
+
"<div><div class=\"k-switch k-checked k-default css-1kd39ob\" tabindex=\"0\" style=\"margin-right: 16px; width: 60px;\"><input type=\"checkbox\" tabindex=\"-1\"><div class=\"k-switch-off\" style=\"width: px;\">展开</div><div class=\"k-switch-bar\"><div class=\"k-switch-on\" style=\"width: 60px;\">收起</div><div class=\"k-switch-wrapper\"><div class=\"k-switch-handle\"><img src=\"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\"></div></div></div></div><div class=\"k-switch k-default css-1kd39ob\" tabindex=\"0\" style=\"width: 60px;\"><input type=\"checkbox\" tabindex=\"-1\"><div class=\"k-switch-off\" style=\"width: px;\">dark</div><div class=\"k-switch-bar\"><div class=\"k-switch-on\" style=\"width: 60px;\">light</div><div class=\"k-switch-wrapper\"><div class=\"k-switch-handle\"><img src=\"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\"></div></div></div></div><br><br><div class=\"k-menu k-dark k-collapsed k-vertical css-g3l0a0\"><div class=\"k-menu-body\"><div class=\"k-menu-item css-12sq2r7\"><div class=\"k-menu-item-title css-14asjef\"><div class=\"k-menu-name\"><div class=\"k-ellipsis css-1vrj62t\"><div class=\"c-ellipsis k-ellipsis-wrapper\"><i class=\"k-icon ion-flag css-16qej3\"></i></div></div></div></div><!--portal--></div><div class=\"k-menu-item k-disabled css-12sq2r7\"><div class=\"k-menu-item-title css-14asjef\"><div class=\"k-menu-name\"><div class=\"k-ellipsis css-1vrj62t\"><div class=\"c-ellipsis k-ellipsis-wrapper\"><i class=\"k-icon ion-star css-16qej3\"></i></div></div></div></div><!--portal--></div><div class=\"k-menu-item k-highlighted css-12sq2r7\"><div class=\"k-menu-item-title css-14asjef\"><div class=\"k-menu-name\"><div class=\"k-ellipsis css-1vrj62t\"><div class=\"c-ellipsis k-ellipsis-wrapper\"><i class=\"k-icon ion-heart css-16qej3\"></i></div></div></div><i class=\"k-icon k-menu-item-arrow ion-arrow-down-b css-16qej3\"></i></div><!--portal--></div><div class=\"k-menu-item css-12sq2r7\"><div class=\"k-menu-item-title css-14asjef\"><div class=\"k-menu-name\"><div class=\"k-ellipsis css-1vrj62t\"><div class=\"c-ellipsis k-ellipsis-wrapper\"><i class=\"k-icon ion-gear-b css-16qej3\"></i></div></div></div></div><!--portal--></div><div class=\"k-menu-title\"><div class=\"k-menu-name css-14asjef\"><i class=\"k-icon ion-cloud css-16qej3\"></i></div></div><div class=\"k-menu-item css-12sq2r7\"><div class=\"k-menu-item-title css-14asjef\"><div class=\"k-menu-name\"><div class=\"k-ellipsis css-1vrj62t\"><div class=\"c-ellipsis k-ellipsis-wrapper\"><i class=\"k-icon ion-stats-bars css-16qej3\"></i></div></div></div></div><!--portal--></div><div class=\"k-menu-item css-12sq2r7\"><div class=\"k-menu-item-title css-14asjef\"><div class=\"k-menu-name\"><div class=\"k-ellipsis css-1vrj62t\"><div class=\"c-ellipsis k-ellipsis-wrapper\"><i class=\"k-icon ion-upload css-16qej3\"></i></div></div></div></div><!--portal--></div></div></div></div>"
|
|
869
877
|
```
|
|
870
878
|
|
|
871
879
|
#### `Menu dot`
|
|
872
880
|
|
|
873
881
|
```
|
|
874
|
-
"<div class=\"k-menu k-light k-vertical css-g3l0a0\"><div class=\"k-menu-header css-14asjef\"><i class=\"k-icon ion-star css-16qej3\"></i>Header</div><div class=\"k-menu-body\"><div class=\"k-menu-item css-12sq2r7\"><div class=\"k-menu-item-title css-14asjef\"><i class=\"k-icon k-menu-dot ion-record css-16qej3\"></i><div class=\"k-menu-name\"><div class=\"k-ellipsis css-
|
|
882
|
+
"<div class=\"k-menu k-light k-vertical css-g3l0a0\"><div class=\"k-menu-header css-14asjef\"><i class=\"k-icon ion-star css-16qej3\"></i>Header</div><div class=\"k-menu-body\"><div class=\"k-menu-item css-12sq2r7\"><div class=\"k-menu-item-title css-14asjef\"><i class=\"k-icon k-menu-dot ion-record css-16qej3\"></i><div class=\"k-menu-name\"><div class=\"k-ellipsis css-1vrj62t\"><div class=\"c-ellipsis k-ellipsis-wrapper\"><span>menu 1</span></div></div></div></div></div><div class=\"k-menu-item k-disabled css-12sq2r7\"><div class=\"k-menu-item-title css-14asjef\"><i class=\"k-icon k-menu-dot ion-record css-16qej3\"></i><div class=\"k-menu-name\"><div class=\"k-ellipsis css-1vrj62t\"><div class=\"c-ellipsis k-ellipsis-wrapper\"><span>menu 2</span></div></div></div></div></div><div class=\"k-menu-item k-expanded k-highlighted css-12sq2r7\"><div class=\"k-menu-item-title css-14asjef\"><div class=\"k-menu-name\"><div class=\"k-ellipsis css-1vrj62t\"><div class=\"c-ellipsis k-ellipsis-wrapper\"><i class=\"k-icon ion-heart css-16qej3\"></i><span>menu 3 </span></div></div></div><i class=\"k-icon k-menu-item-arrow ion-arrow-down-b css-16qej3\"></i></div><div class=\"k-menu css-1ve3qyh k-sub-menu css-g3l0a0\"><div class=\"k-menu-body\"><div class=\"k-menu-item k-active css-12sq2r7\"><div class=\"k-menu-item-title css-14asjef\"><div class=\"k-menu-name\"><div class=\"k-ellipsis css-1vrj62t\"><div class=\"c-ellipsis k-ellipsis-wrapper\"><span>sub menu 1</span></div></div></div></div></div><div class=\"k-menu-item css-12sq2r7\"><div class=\"k-menu-item-title css-14asjef\"><div class=\"k-menu-name\"><div class=\"k-ellipsis css-1vrj62t\"><div class=\"c-ellipsis k-ellipsis-wrapper\"><span>sub menu 2</span></div></div></div></div></div><div class=\"k-menu-item k-disabled css-12sq2r7\"><div class=\"k-menu-item-title css-14asjef\"><div class=\"k-menu-name\"><div class=\"k-ellipsis css-1vrj62t\"><div class=\"c-ellipsis k-ellipsis-wrapper\"><span>sub menu 3</span></div></div></div></div></div><div class=\"k-menu-item css-12sq2r7\"><div class=\"k-menu-item-title css-14asjef\"><div class=\"k-menu-name\"><div class=\"k-ellipsis css-1vrj62t\"><div class=\"c-ellipsis k-ellipsis-wrapper\"><span>sub menu 4</span></div></div></div></div></div></div></div></div><div class=\"k-menu-item css-12sq2r7\"><div class=\"k-menu-item-title css-14asjef\"><i class=\"k-icon k-menu-dot ion-record css-16qej3\"></i><div class=\"k-menu-name\"><div class=\"k-ellipsis css-1vrj62t\"><div class=\"c-ellipsis k-ellipsis-wrapper\"><span>menu 4</span></div></div></div></div></div></div></div>"
|
|
875
883
|
```
|
|
876
884
|
|
|
877
885
|
#### `Menu horizontal`
|
|
878
886
|
|
|
879
887
|
```
|
|
880
|
-
"<div><div class=\"k-menu k-dark k-horizontal css-g3l0a0\"><div class=\"k-menu-body\"><div class=\"k-menu-item css-12sq2r7\"><div class=\"k-menu-item-title css-14asjef\"><div class=\"k-menu-name\"><div class=\"k-ellipsis css-
|
|
888
|
+
"<div><div class=\"k-menu k-dark k-horizontal css-g3l0a0\"><div class=\"k-menu-body\"><div class=\"k-menu-item css-12sq2r7\"><div class=\"k-menu-item-title css-14asjef\"><div class=\"k-menu-name\"><div class=\"k-ellipsis css-1vrj62t\"><div class=\"c-ellipsis k-ellipsis-wrapper\"><i class=\"k-icon ion-flag css-16qej3\"></i><span>menu 1</span></div></div></div></div></div><div class=\"k-menu-item k-disabled css-12sq2r7\"><div class=\"k-menu-item-title css-14asjef\"><div class=\"k-menu-name\"><div class=\"k-ellipsis css-1vrj62t\"><div class=\"c-ellipsis k-ellipsis-wrapper\"><i class=\"k-icon ion-star css-16qej3\"></i><span>menu 2</span></div></div></div></div></div><div class=\"k-menu-item css-12sq2r7\"><div class=\"k-menu-item-title css-14asjef\"><div class=\"k-menu-name\"><div class=\"k-ellipsis css-1vrj62t\"><div class=\"c-ellipsis k-ellipsis-wrapper\"><i class=\"k-icon ion-heart css-16qej3\"></i><span>menu 3 </span></div></div></div><i class=\"k-icon k-menu-item-arrow ion-arrow-down-b css-16qej3\"></i></div><!--portal--></div><div class=\"k-menu-item css-12sq2r7\"><div class=\"k-menu-item-title css-14asjef\"><div class=\"k-menu-name\"><div class=\"k-ellipsis css-1vrj62t\"><div class=\"c-ellipsis k-ellipsis-wrapper\"><i class=\"k-icon ion-gear-b css-16qej3\"></i><span>menu 4 </span></div></div></div><i class=\"k-icon k-menu-item-arrow ion-arrow-down-b css-16qej3\"></i></div><!--portal--></div></div></div><br><br><div class=\"k-switch k-default css-1kd39ob\" tabindex=\"0\" style=\"width: 60px;\"><input type=\"checkbox\" tabindex=\"-1\"><div class=\"k-switch-off\" style=\"width: px;\">dark</div><div class=\"k-switch-bar\"><div class=\"k-switch-on\" style=\"width: 60px;\">light</div><div class=\"k-switch-wrapper\"><div class=\"k-switch-handle\"><img src=\"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\"></div></div></div></div></div>"
|
|
881
889
|
```
|
|
882
890
|
|
|
883
891
|
#### `Menu recursive`
|
|
884
892
|
|
|
885
893
|
```
|
|
886
|
-
"<div class=\"k-menu k-dark k-vertical css-g3l0a0\"><div class=\"k-menu-header css-14asjef\"><i class=\"k-icon ion-star css-16qej3\"></i>测试</div><div class=\"k-menu-body\"><div class=\"k-menu-item css-12sq2r7\"><div class=\"k-menu-item-title css-14asjef\"><div class=\"k-menu-name\"><div class=\"k-ellipsis css-
|
|
894
|
+
"<div class=\"k-menu k-dark k-vertical css-g3l0a0\"><div class=\"k-menu-header css-14asjef\"><i class=\"k-icon ion-star css-16qej3\"></i>测试</div><div class=\"k-menu-body\"><div class=\"k-menu-item css-12sq2r7\"><div class=\"k-menu-item-title css-14asjef\"><div class=\"k-menu-name\"><div class=\"k-ellipsis css-1vrj62t\"><div class=\"c-ellipsis k-ellipsis-wrapper\"><span>menu 1</span></div></div></div></div></div><div class=\"k-menu-item css-12sq2r7\"><div class=\"k-menu-item-title css-14asjef\"><div class=\"k-menu-name\"><div class=\"k-ellipsis css-1vrj62t\"><div class=\"c-ellipsis k-ellipsis-wrapper\"><span>menu 2</span></div></div></div></div></div><div class=\"k-menu-item k-expanded k-highlighted css-12sq2r7\"><div class=\"k-menu-item-title css-14asjef\"><div class=\"k-menu-name\"><div class=\"k-ellipsis css-1vrj62t\"><div class=\"c-ellipsis k-ellipsis-wrapper\"><span>menu 3</span></div></div></div><i class=\"k-icon k-menu-item-arrow ion-arrow-down-b css-16qej3\"></i></div><div class=\"k-menu css-m8cc5e k-sub-menu css-g3l0a0 k-expand-enter-from k-expand-enter-active\" style=\"height: 0px;\"><div class=\"k-menu-body\"><div class=\"k-menu-item k-active css-12sq2r7\"><div class=\"k-menu-item-title css-14asjef\"><div class=\"k-menu-name\"><div class=\"k-ellipsis css-1vrj62t\"><div class=\"c-ellipsis k-ellipsis-wrapper\"><span>sub menu 1</span></div></div></div></div></div><div class=\"k-menu-item css-12sq2r7\"><div class=\"k-menu-item-title css-14asjef\"><div class=\"k-menu-name\"><div class=\"k-ellipsis css-1vrj62t\"><div class=\"c-ellipsis k-ellipsis-wrapper\"><span>sub menu 2</span></div></div></div></div></div><div class=\"k-menu-item css-12sq2r7\"><div class=\"k-menu-item-title css-14asjef\"><div class=\"k-menu-name\"><div class=\"k-ellipsis css-1vrj62t\"><div class=\"c-ellipsis k-ellipsis-wrapper\"><span>sub menu 3</span></div></div></div></div></div><div class=\"k-menu-item css-12sq2r7\"><div class=\"k-menu-item-title css-14asjef\"><div class=\"k-menu-name\"><div class=\"k-ellipsis css-1vrj62t\"><div class=\"c-ellipsis k-ellipsis-wrapper\"><span>sub menu 4</span></div></div></div><i class=\"k-icon k-menu-item-arrow ion-arrow-down-b css-16qej3\"></i></div><div class=\"k-menu css-xb6zyv k-sub-menu css-g3l0a0\" style=\"display: none;\"><div class=\"k-menu-body\"><div class=\"k-menu-item css-12sq2r7\"><div class=\"k-menu-item-title css-14asjef\"><div class=\"k-menu-name\"><div class=\"k-ellipsis css-1vrj62t\"><div class=\"c-ellipsis k-ellipsis-wrapper\"><span>option 1</span></div></div></div></div></div><div class=\"k-menu-item css-12sq2r7\"><div class=\"k-menu-item-title css-14asjef\"><div class=\"k-menu-name\"><div class=\"k-ellipsis css-1vrj62t\"><div class=\"c-ellipsis k-ellipsis-wrapper\"><span>option 2</span></div></div></div></div></div></div></div></div></div></div></div><div class=\"k-menu-item css-12sq2r7\"><div class=\"k-menu-item-title css-14asjef\"><div class=\"k-menu-name\"><div class=\"k-ellipsis css-1vrj62t\"><div class=\"c-ellipsis k-ellipsis-wrapper\"><span>menu 4</span></div></div></div></div></div></div></div>"
|
|
887
895
|
```
|
|
888
896
|
|
|
889
897
|
#### `Menu showCollapseArrow`
|
|
890
898
|
|
|
891
899
|
```
|
|
892
|
-
"<div><div class=\"k-btns css-z9s2vw\"><button class=\"k-btn k-default k-active css-h31bz\" tabindex=\"0\" type=\"button\">light<input class=\"k-button-input\" type=\"radio\" tabindex=\"-1\"></button><button class=\"k-btn k-default css-h31bz\" tabindex=\"0\" type=\"button\">dark<input class=\"k-button-input\" type=\"radio\" tabindex=\"-1\"></button></div><div class=\"k-switch k-checked k-default css-1kd39ob\" tabindex=\"0\" style=\"width: px;\"><input type=\"checkbox\" tabindex=\"-1\"><div class=\"k-switch-off\" style=\"width: px;\">隐藏折叠按钮</div><div class=\"k-switch-bar\"><div class=\"k-switch-on\" style=\"width: 110px;\">展示折叠按钮</div><div class=\"k-switch-wrapper\"><div class=\"k-switch-handle\"><img src=\"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\"></div></div></div></div><div class=\"k-btns css-z9s2vw\"><button class=\"k-btn k-default css-h31bz\" tabindex=\"0\" type=\"button\">large<input class=\"k-button-input\" type=\"radio\" tabindex=\"-1\"></button><button class=\"k-btn k-default css-h31bz\" tabindex=\"0\" type=\"button\">default<input class=\"k-button-input\" type=\"radio\" tabindex=\"-1\"></button><button class=\"k-btn k-default k-active css-h31bz\" tabindex=\"0\" type=\"button\">small<input class=\"k-button-input\" type=\"radio\" tabindex=\"-1\"></button></div><br><br><div class=\"k-menu k-light k-small k-vertical css-g3l0a0\"><div class=\"k-menu-header css-14asjef\"> 自定义Header </div><div class=\"k-menu-arrow-box\"><i class=\"k-icon k-menu-arrow ion-arrow-left-b css-16qej3\"></i></div><div class=\"k-menu-body\"><div class=\"k-menu-item css-12sq2r7\"><div class=\"k-menu-item-title css-14asjef\"><div class=\"k-menu-name\"><div class=\"k-ellipsis css-
|
|
900
|
+
"<div><div class=\"k-btns css-z9s2vw\"><button class=\"k-btn k-default k-active css-h31bz\" tabindex=\"0\" type=\"button\">light<input class=\"k-button-input\" type=\"radio\" tabindex=\"-1\"></button><button class=\"k-btn k-default css-h31bz\" tabindex=\"0\" type=\"button\">dark<input class=\"k-button-input\" type=\"radio\" tabindex=\"-1\"></button></div><div class=\"k-switch k-checked k-default css-1kd39ob\" tabindex=\"0\" style=\"width: px;\"><input type=\"checkbox\" tabindex=\"-1\"><div class=\"k-switch-off\" style=\"width: px;\">隐藏折叠按钮</div><div class=\"k-switch-bar\"><div class=\"k-switch-on\" style=\"width: 110px;\">展示折叠按钮</div><div class=\"k-switch-wrapper\"><div class=\"k-switch-handle\"><img src=\"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\"></div></div></div></div><div class=\"k-btns css-z9s2vw\"><button class=\"k-btn k-default css-h31bz\" tabindex=\"0\" type=\"button\">large<input class=\"k-button-input\" type=\"radio\" tabindex=\"-1\"></button><button class=\"k-btn k-default css-h31bz\" tabindex=\"0\" type=\"button\">default<input class=\"k-button-input\" type=\"radio\" tabindex=\"-1\"></button><button class=\"k-btn k-default k-active css-h31bz\" tabindex=\"0\" type=\"button\">small<input class=\"k-button-input\" type=\"radio\" tabindex=\"-1\"></button></div><br><br><div class=\"k-menu k-light k-small k-vertical css-g3l0a0\"><div class=\"k-menu-header css-14asjef\"> 自定义Header </div><div class=\"k-menu-arrow-box\"><i class=\"k-icon k-menu-arrow ion-arrow-left-b css-16qej3\"></i></div><div class=\"k-menu-body\"><div class=\"k-menu-item css-12sq2r7\"><div class=\"k-menu-item-title css-14asjef\"><div class=\"k-menu-name\"><div class=\"k-ellipsis css-1vrj62t\"><div class=\"c-ellipsis k-ellipsis-wrapper\"><span>menu 0</span></div></div></div></div></div><div class=\"k-menu-title\"><div class=\"k-menu-name css-14asjef\"><div class=\"k-ellipsis css-1vrj62t\"><div class=\"c-ellipsis k-ellipsis-wrapper\">title 1</div></div></div></div><div class=\"k-menu-item css-12sq2r7\"><div class=\"k-menu-item-title css-14asjef\"><div class=\"k-menu-name\"><div class=\"k-ellipsis css-1vrj62t\"><div class=\"c-ellipsis k-ellipsis-wrapper\"><span>menu 1</span></div></div></div></div></div><div class=\"k-menu-item k-active css-12sq2r7\"><div class=\"k-menu-item-title css-14asjef\"><div class=\"k-menu-name\"><div class=\"k-ellipsis css-1vrj62t\"><div class=\"c-ellipsis k-ellipsis-wrapper\"><span>menu 2</span></div></div></div></div></div><div class=\"k-menu-item css-12sq2r7\"><div class=\"k-menu-item-title css-14asjef\"><div class=\"k-menu-name\"><div class=\"k-ellipsis css-1vrj62t\"><div class=\"c-ellipsis k-ellipsis-wrapper\"><span>menu 3menu 3menu 3menu 3menu 3menu 3</span></div></div></div></div></div><div class=\"k-menu-title\"><div class=\"k-menu-name css-14asjef\"><div class=\"k-ellipsis css-1vrj62t\"><div class=\"c-ellipsis k-ellipsis-wrapper\">title 2</div></div></div></div><div class=\"k-menu-item css-12sq2r7\"><div class=\"k-menu-item-title css-14asjef\"><div class=\"k-menu-name\"><div class=\"k-ellipsis css-1vrj62t\"><div class=\"c-ellipsis k-ellipsis-wrapper\"><span>menu 1</span></div></div></div></div></div><div class=\"k-menu-item k-disabled css-12sq2r7\"><div class=\"k-menu-item-title css-14asjef\"><div class=\"k-menu-name\"><div class=\"k-ellipsis css-1vrj62t\"><div class=\"c-ellipsis k-ellipsis-wrapper\"><span>menu 2</span></div></div></div></div></div><div class=\"k-menu-item css-12sq2r7\"><div class=\"k-menu-item-title css-14asjef\"><div class=\"k-menu-name\"><div class=\"k-ellipsis css-1vrj62t\"><div class=\"c-ellipsis k-ellipsis-wrapper\"><span> sub menu 6 </span></div></div></div><i class=\"k-icon k-menu-item-arrow ion-arrow-down-b css-16qej3\"></i></div><div class=\"k-menu css-boowsa k-sub-menu css-g3l0a0\" style=\"display: none;\"><div class=\"k-menu-body\"><div class=\"k-menu-item css-12sq2r7\"><div class=\"k-menu-item-title css-14asjef\"><div class=\"k-menu-name\"><div class=\"k-ellipsis css-1vrj62t\"><div class=\"c-ellipsis k-ellipsis-wrapper\"><span>sub menu 1</span></div></div></div></div></div><div class=\"k-menu-item css-12sq2r7\"><div class=\"k-menu-item-title css-14asjef\"><div class=\"k-menu-name\"><div class=\"k-ellipsis css-1vrj62t\"><div class=\"c-ellipsis k-ellipsis-wrapper\"><span>sub menu 2</span></div></div></div></div></div><div class=\"k-menu-item k-disabled css-12sq2r7\"><div class=\"k-menu-item-title css-14asjef\"><div class=\"k-menu-name\"><div class=\"k-ellipsis css-1vrj62t\"><div class=\"c-ellipsis k-ellipsis-wrapper\"><span>sub menu 3</span></div></div></div></div></div><div class=\"k-menu-item css-12sq2r7\"><div class=\"k-menu-item-title css-14asjef\"><div class=\"k-menu-name\"><div class=\"k-ellipsis css-1vrj62t\"><div class=\"c-ellipsis k-ellipsis-wrapper\"><span> sub menu 7 </span></div></div></div><i class=\"k-icon k-menu-item-arrow ion-arrow-down-b css-16qej3\"></i></div><div class=\"k-menu css-w16crk k-sub-menu css-g3l0a0\" style=\"display: none;\"><div class=\"k-menu-body\"><div class=\"k-menu-item css-12sq2r7\"><div class=\"k-menu-item-title css-14asjef\"><div class=\"k-menu-name\"><div class=\"k-ellipsis css-1vrj62t\"><div class=\"c-ellipsis k-ellipsis-wrapper\"><span>option 1</span></div></div></div></div></div><div class=\"k-menu-item css-12sq2r7\"><div class=\"k-menu-item-title css-14asjef\"><div class=\"k-menu-name\"><div class=\"k-ellipsis css-1vrj62t\"><div class=\"c-ellipsis k-ellipsis-wrapper\"><span>option 2</span></div></div></div></div></div></div></div></div></div></div></div><div class=\"k-divider k-light k-horizontal k-default css-1ewnbs divider-style\"></div><div class=\"k-menu-item css-12sq2r7\"><div class=\"k-menu-item-title css-14asjef\"><div class=\"k-menu-name\"><div class=\"k-ellipsis css-1vrj62t\"><div class=\"c-ellipsis k-ellipsis-wrapper\"><span>menu 8</span></div></div></div></div></div></div></div></div>"
|
|
893
901
|
```
|
|
894
902
|
|
|
895
903
|
#### `Menu size`
|
|
896
904
|
|
|
897
905
|
```
|
|
898
|
-
"<div><div class=\"k-switch k-default css-1kd39ob\" tabindex=\"0\" style=\"width: 60px;\"><input type=\"checkbox\" tabindex=\"-1\"><div class=\"k-switch-off\" style=\"width: px;\">展开</div><div class=\"k-switch-bar\"><div class=\"k-switch-on\" style=\"width: 60px;\">收起</div><div class=\"k-switch-wrapper\"><div class=\"k-switch-handle\"><img src=\"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\"></div></div></div></div><div class=\"k-btns css-z9s2vw\"><button class=\"k-btn k-default k-active css-h31bz\" tabindex=\"0\" type=\"button\">light<input class=\"k-button-input\" type=\"radio\" tabindex=\"-1\"></button><button class=\"k-btn k-default css-h31bz\" tabindex=\"0\" type=\"button\">dark<input class=\"k-button-input\" type=\"radio\" tabindex=\"-1\"></button></div><div class=\"k-switch k-default css-1kd39ob\" tabindex=\"0\" style=\"width: px;\"><input type=\"checkbox\" tabindex=\"-1\"><div class=\"k-switch-off\" style=\"width: px;\">vertical</div><div class=\"k-switch-bar\"><div class=\"k-switch-on\" style=\"width: 100px;\">horizontal</div><div class=\"k-switch-wrapper\"><div class=\"k-switch-handle\"><img src=\"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\"></div></div></div></div><div class=\"k-btns css-z9s2vw\"><button class=\"k-btn k-default k-active css-h31bz\" tabindex=\"0\" type=\"button\">large<input class=\"k-button-input\" type=\"radio\" tabindex=\"-1\"></button><button class=\"k-btn k-default css-h31bz\" tabindex=\"0\" type=\"button\">default<input class=\"k-button-input\" type=\"radio\" tabindex=\"-1\"></button><button class=\"k-btn k-default css-h31bz\" tabindex=\"0\" type=\"button\">small<input class=\"k-button-input\" type=\"radio\" tabindex=\"-1\"></button></div><br><br><div class=\"k-menu k-light k-large k-vertical css-g3l0a0\"><div class=\"k-menu-header css-14asjef\"><i class=\"k-icon ion-star css-16qej3\"></i>Header</div><div class=\"k-menu-body\"><div class=\"k-menu-item css-12sq2r7\"><div class=\"k-menu-item-title css-14asjef\"><div class=\"k-menu-name\"><div class=\"k-ellipsis css-
|
|
906
|
+
"<div><div class=\"k-switch k-default css-1kd39ob\" tabindex=\"0\" style=\"width: 60px;\"><input type=\"checkbox\" tabindex=\"-1\"><div class=\"k-switch-off\" style=\"width: px;\">展开</div><div class=\"k-switch-bar\"><div class=\"k-switch-on\" style=\"width: 60px;\">收起</div><div class=\"k-switch-wrapper\"><div class=\"k-switch-handle\"><img src=\"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\"></div></div></div></div><div class=\"k-btns css-z9s2vw\"><button class=\"k-btn k-default k-active css-h31bz\" tabindex=\"0\" type=\"button\">light<input class=\"k-button-input\" type=\"radio\" tabindex=\"-1\"></button><button class=\"k-btn k-default css-h31bz\" tabindex=\"0\" type=\"button\">dark<input class=\"k-button-input\" type=\"radio\" tabindex=\"-1\"></button></div><div class=\"k-switch k-default css-1kd39ob\" tabindex=\"0\" style=\"width: px;\"><input type=\"checkbox\" tabindex=\"-1\"><div class=\"k-switch-off\" style=\"width: px;\">vertical</div><div class=\"k-switch-bar\"><div class=\"k-switch-on\" style=\"width: 100px;\">horizontal</div><div class=\"k-switch-wrapper\"><div class=\"k-switch-handle\"><img src=\"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\"></div></div></div></div><div class=\"k-btns css-z9s2vw\"><button class=\"k-btn k-default k-active css-h31bz\" tabindex=\"0\" type=\"button\">large<input class=\"k-button-input\" type=\"radio\" tabindex=\"-1\"></button><button class=\"k-btn k-default css-h31bz\" tabindex=\"0\" type=\"button\">default<input class=\"k-button-input\" type=\"radio\" tabindex=\"-1\"></button><button class=\"k-btn k-default css-h31bz\" tabindex=\"0\" type=\"button\">small<input class=\"k-button-input\" type=\"radio\" tabindex=\"-1\"></button></div><br><br><div class=\"k-menu k-light k-large k-vertical css-g3l0a0\"><div class=\"k-menu-header css-14asjef\"><i class=\"k-icon ion-star css-16qej3\"></i>Header</div><div class=\"k-menu-body\"><div class=\"k-menu-item css-12sq2r7\"><div class=\"k-menu-item-title css-14asjef\"><div class=\"k-menu-name\"><div class=\"k-ellipsis css-1vrj62t\"><div class=\"c-ellipsis k-ellipsis-wrapper\"><i class=\"k-icon ion-flag css-16qej3\"></i><span>menu 1</span></div></div></div></div></div><div class=\"k-menu-item k-disabled css-12sq2r7\"><div class=\"k-menu-item-title css-14asjef\"><i class=\"k-icon k-menu-dot ion-record css-16qej3\"></i><div class=\"k-menu-name\"><div class=\"k-ellipsis css-1vrj62t\"><div class=\"c-ellipsis k-ellipsis-wrapper\"><span>menu 2</span></div></div></div></div></div><div class=\"k-menu-item k-expanded css-12sq2r7\"><div class=\"k-menu-item-title css-14asjef\"><div class=\"k-menu-name\"><div class=\"k-ellipsis css-1vrj62t\"><div class=\"c-ellipsis k-ellipsis-wrapper\"><i class=\"k-icon ion-heart css-16qej3\"></i><span>menu 3 </span></div></div></div><i class=\"k-icon k-menu-item-arrow ion-arrow-down-b css-16qej3\"></i></div><div class=\"k-menu css-1ve3qyh k-sub-menu css-g3l0a0\"><div class=\"k-menu-body\"><div class=\"k-menu-item css-12sq2r7\"><div class=\"k-menu-item-title css-14asjef\"><div class=\"k-menu-name\"><div class=\"k-ellipsis css-1vrj62t\"><div class=\"c-ellipsis k-ellipsis-wrapper\"><span>sub menu 1</span></div></div></div></div></div><div class=\"k-menu-item css-12sq2r7\"><div class=\"k-menu-item-title css-14asjef\"><div class=\"k-menu-name\"><div class=\"k-ellipsis css-1vrj62t\"><div class=\"c-ellipsis k-ellipsis-wrapper\"><span>sub menu 2</span></div></div></div></div></div><div class=\"k-menu-item k-disabled css-12sq2r7\"><div class=\"k-menu-item-title css-14asjef\"><div class=\"k-menu-name\"><div class=\"k-ellipsis css-1vrj62t\"><div class=\"c-ellipsis k-ellipsis-wrapper\"><span>sub menu 3</span></div></div></div></div></div><div class=\"k-menu-item css-12sq2r7\"><div class=\"k-menu-item-title css-14asjef\"><div class=\"k-menu-name\"><div class=\"k-ellipsis css-1vrj62t\"><div class=\"c-ellipsis k-ellipsis-wrapper\"><span> sub menu 4 </span></div></div></div><i class=\"k-icon k-menu-item-arrow ion-arrow-down-b css-16qej3\"></i></div><div class=\"k-menu css-1k8qtgp k-sub-menu css-g3l0a0\" style=\"display: none;\"><div class=\"k-menu-body\"><div class=\"k-menu-item css-12sq2r7\"><div class=\"k-menu-item-title css-14asjef\"><div class=\"k-menu-name\"><div class=\"k-ellipsis css-1vrj62t\"><div class=\"c-ellipsis k-ellipsis-wrapper\"><span>option 1</span></div></div></div></div></div><div class=\"k-menu-item css-12sq2r7\"><div class=\"k-menu-item-title css-14asjef\"><div class=\"k-menu-name\"><div class=\"k-ellipsis css-1vrj62t\"><div class=\"c-ellipsis k-ellipsis-wrapper\"><span>option 2</span></div></div></div></div></div></div></div></div></div></div></div><div class=\"k-menu-item css-12sq2r7\"><div class=\"k-menu-item-title css-14asjef\"><div class=\"k-menu-name\"><div class=\"k-ellipsis css-1vrj62t\"><div class=\"c-ellipsis k-ellipsis-wrapper\"><i class=\"k-icon ion-gear-b css-16qej3\"></i><span>menu 4</span></div></div></div></div></div></div></div></div>"
|
|
899
907
|
```
|
|
900
908
|
|
|
901
909
|
#### `Menu theme`
|
|
902
910
|
|
|
903
911
|
```
|
|
904
|
-
"<div><div class=\"k-btns css-z9s2vw\"><button class=\"k-btn k-default k-active css-h31bz\" tabindex=\"0\" type=\"button\">light<input class=\"k-button-input\" type=\"radio\" tabindex=\"-1\"></button><button class=\"k-btn k-default css-h31bz\" tabindex=\"0\" type=\"button\">dark<input class=\"k-button-input\" type=\"radio\" tabindex=\"-1\"></button></div><br><br><div class=\"k-menu k-light k-vertical css-g3l0a0\"><div class=\"k-menu-header css-14asjef\"><i class=\"k-icon ion-star css-16qej3\"></i>Header</div><div class=\"k-menu-body\"><div class=\"k-menu-item css-12sq2r7\"><div class=\"k-menu-item-title css-14asjef\"><div class=\"k-menu-name\"><div class=\"k-ellipsis css-
|
|
912
|
+
"<div><div class=\"k-btns css-z9s2vw\"><button class=\"k-btn k-default k-active css-h31bz\" tabindex=\"0\" type=\"button\">light<input class=\"k-button-input\" type=\"radio\" tabindex=\"-1\"></button><button class=\"k-btn k-default css-h31bz\" tabindex=\"0\" type=\"button\">dark<input class=\"k-button-input\" type=\"radio\" tabindex=\"-1\"></button></div><br><br><div class=\"k-menu k-light k-vertical css-g3l0a0\"><div class=\"k-menu-header css-14asjef\"><i class=\"k-icon ion-star css-16qej3\"></i>Header</div><div class=\"k-menu-body\"><div class=\"k-menu-item css-12sq2r7\"><div class=\"k-menu-item-title css-14asjef\"><div class=\"k-menu-name\"><div class=\"k-ellipsis css-1vrj62t\"><div class=\"c-ellipsis k-ellipsis-wrapper\"><i class=\"k-icon ion-flag css-16qej3\"></i><span>menu 1</span></div></div></div></div></div><div class=\"k-menu-item k-disabled css-12sq2r7\"><div class=\"k-menu-item-title css-14asjef\"><div class=\"k-menu-name\"><div class=\"k-ellipsis css-1vrj62t\"><div class=\"c-ellipsis k-ellipsis-wrapper\"><i class=\"k-icon ion-star css-16qej3\"></i><span>menu 2</span></div></div></div></div></div><div class=\"k-menu-item k-expanded css-12sq2r7\"><div class=\"k-menu-item-title css-14asjef\"><div class=\"k-menu-name\"><div class=\"k-ellipsis css-1vrj62t\"><div class=\"c-ellipsis k-ellipsis-wrapper\"><i class=\"k-icon ion-heart css-16qej3\"></i><span>menu 3 </span></div></div></div><i class=\"k-icon k-menu-item-arrow ion-arrow-down-b css-16qej3\"></i></div><div class=\"k-menu css-1ve3qyh k-sub-menu css-g3l0a0\"><div class=\"k-menu-body\"><div class=\"k-menu-item css-12sq2r7\"><div class=\"k-menu-item-title css-14asjef\"><div class=\"k-menu-name\"><div class=\"k-ellipsis css-1vrj62t\"><div class=\"c-ellipsis k-ellipsis-wrapper\"><span>sub menu 1</span></div></div></div></div></div><div class=\"k-menu-item css-12sq2r7\"><div class=\"k-menu-item-title css-14asjef\"><div class=\"k-menu-name\"><div class=\"k-ellipsis css-1vrj62t\"><div class=\"c-ellipsis k-ellipsis-wrapper\"><span>sub menu 2</span></div></div></div></div></div><div class=\"k-menu-item k-disabled css-12sq2r7\"><div class=\"k-menu-item-title css-14asjef\"><div class=\"k-menu-name\"><div class=\"k-ellipsis css-1vrj62t\"><div class=\"c-ellipsis k-ellipsis-wrapper\"><span>sub menu 3</span></div></div></div></div></div><div class=\"k-menu-item css-12sq2r7\"><div class=\"k-menu-item-title css-14asjef\"><div class=\"k-menu-name\"><div class=\"k-ellipsis css-1vrj62t\"><div class=\"c-ellipsis k-ellipsis-wrapper\"><span>sub menu 4</span></div></div></div></div></div></div></div></div><div class=\"k-menu-item css-12sq2r7\"><div class=\"k-menu-item-title css-14asjef\"><div class=\"k-menu-name\"><div class=\"k-ellipsis css-1vrj62t\"><div class=\"c-ellipsis k-ellipsis-wrapper\"><i class=\"k-icon ion-gear-b css-16qej3\"></i><span>menu 4</span></div></div></div></div></div></div></div></div>"
|
|
905
913
|
```
|
|
906
914
|
|
|
907
915
|
## `message`
|
|
@@ -1181,7 +1189,7 @@
|
|
|
1181
1189
|
|
|
1182
1190
|
```
|
|
1183
1191
|
"<div><div class=\"k-select css-1ti24q0\" tabindex=\"0\" style=\"margin-right: 10px;\"><div class=\"k-select-main\"><input type=\"hidden\"><div class=\"k-input k-fluid k-inline css-1x5beu2\"><div class=\"k-input-wrapper\"><input class=\"k-input-inner\" readonly=\"\" placeholder=\"请输入或选择\"></div></div></div><span class=\"k-select-suffix\"><span class=\"k-select-suffix-icon\"><i class=\"k-icon k-select-arrow k-icon-down css-16qej3\"></i></span></span></div><!--portal--> Day: <br><br><div class=\"k-select k-nowrap css-1ti24q0\" tabindex=\"0\" style=\"margin-right: 10px;\"><div class=\"k-select-main\"><input type=\"hidden\" value=\"\"><div class=\"k-select-values\"><div class=\"k-tags k-nowrap css-czb0gm\"><div class=\"k-tag k-tags-more c-hidden k-tags-tooltip k-none css-1weg519\">
|
|
1184
|
-
+0</div><!--portal--><div class=\"k-input k-auto-width k-inline k-select-input css-1x5beu2\"><div class=\"k-input-wrapper\"><input class=\"k-input-inner\" readonly=\"\" placeholder=\"请输入或选择\" style=\"width: px;\"><div class=\"k-input-fake\"><pre>请输入或选择</pre></div></div></div></div></div></div><span class=\"k-select-suffix\"><span class=\"k-select-suffix-icon\"><i class=\"k-icon k-select-arrow k-icon-down css-16qej3\"></i></span></span></div><!--portal--> Days: []</div>"
|
|
1192
|
+
+0</div><!--portal--><div class=\"k-input k-auto-width k-inline k-select-input css-1x5beu2\"><div class=\"k-input-wrapper\"><input class=\"k-input-inner\" readonly=\"\" placeholder=\"请输入或选择\" style=\"width: px;\"><div class=\"k-input-fake\"><pre>请输入或选择</pre></div></div></div></div></div></div><span class=\"k-select-suffix\"><span class=\"k-select-suffix-icon\"><i class=\"k-icon k-select-arrow k-icon-down css-16qej3\"></i></span></span></div><!--portal--> Days: [] <br><br><div class=\"k-select css-1ti24q0\" tabindex=\"0\" style=\"margin-right: 10px;\"><div class=\"k-select-main\"><input type=\"hidden\" value=\"\"><div class=\"k-select-values\"><div class=\"k-tags css-czb0gm\"><div class=\"k-input k-auto-width k-inline k-select-input css-1x5beu2\"><div class=\"k-input-wrapper\"><input class=\"k-input-inner\" readonly=\"\" placeholder=\"请输入或选择\" style=\"width: px;\"><div class=\"k-input-fake\"><pre>请输入或选择</pre></div></div></div></div></div></div><span class=\"k-select-suffix\"><span class=\"k-select-suffix-icon\"><i class=\"k-icon k-select-arrow k-icon-down css-16qej3\"></i></span></span></div><!--portal--> Day with keepKeywords=false: []</div>"
|
|
1185
1193
|
```
|
|
1186
1194
|
|
|
1187
1195
|
#### `Select custom`
|
|
@@ -1367,7 +1375,7 @@
|
|
|
1367
1375
|
#### `Slider tooltip`
|
|
1368
1376
|
|
|
1369
1377
|
```
|
|
1370
|
-
"<div><div class=\"k-slider css-1a62bpu\"><div class=\"k-slider-main\"><div class=\"k-slider-track-wrapper\"><div class=\"k-slider-track\"><div class=\"k-slider-bar\" style=\"width: 50.4444%;\"></div><div class=\"k-slider-thumb-wrapper\" style=\"left: 50.4444%;\"><div class=\"k-slider-thumb k-slider-tooltip\" tabindex=\"0\"></div><!--portal--><div class=\"k-dropdown-menu k-tooltip-content k-hoverable k-dark k-slider-tooltip css-o1x0o9 css-7sngro\" style=\"display: none;\">277<i class=\"k-tooltip-arrow\"></i></div></div></div></div><div class=\"k-slider-ends\"><span>50</span><span>500</span></div></div><div class=\"k-slider-spinner\"><div class=\"k-spinner k-vertical css-mi4xql\"><button class=\"k-btn k-none k-btn-icon k-spinner-btn k-left css-h31bz\" tabindex=\"-1\" type=\"button\"><i class=\"k-icon k-spinner-icon k-icon-down css-16qej3\"></i></button><div class=\"k-input k-spinner-input css-1x5beu2\"><div class=\"k-input-wrapper\"><input class=\"k-input-inner\" value=\"277\"></div></div><button class=\"k-btn k-none k-btn-icon k-spinner-btn k-right css-h31bz\" tabindex=\"-1\" type=\"button\"><i class=\"k-icon k-spinner-icon k-icon-up css-16qej3\"></i></button></div></div></div><div class=\"k-slider css-1a62bpu\"><div class=\"k-slider-main\"><div class=\"k-slider-track-wrapper\"><div class=\"k-slider-track\"><div class=\"k-slider-bar\" style=\"width: px;\">6<i class=\"k-tooltip-arrow k-bottom\" style=\"left: 10.
|
|
1378
|
+
"<div><div class=\"k-slider css-1a62bpu\"><div class=\"k-slider-main\"><div class=\"k-slider-track-wrapper\"><div class=\"k-slider-track\"><div class=\"k-slider-bar\" style=\"width: 50.4444%;\"></div><div class=\"k-slider-thumb-wrapper\" style=\"left: 50.4444%;\"><div class=\"k-slider-thumb k-slider-tooltip\" tabindex=\"0\"></div><!--portal--><div class=\"k-dropdown-menu k-tooltip-content k-hoverable k-dark k-slider-tooltip css-o1x0o9 css-7sngro\" style=\"display: none;\">277<i class=\"k-tooltip-arrow\"></i></div></div></div></div><div class=\"k-slider-ends\"><span>50</span><span>500</span></div></div><div class=\"k-slider-spinner\"><div class=\"k-spinner k-vertical css-mi4xql\"><button class=\"k-btn k-none k-btn-icon k-spinner-btn k-left css-h31bz\" tabindex=\"-1\" type=\"button\"><i class=\"k-icon k-spinner-icon k-icon-down css-16qej3\"></i></button><div class=\"k-input k-spinner-input css-1x5beu2\"><div class=\"k-input-wrapper\"><input class=\"k-input-inner\" value=\"277\"></div></div><button class=\"k-btn k-none k-btn-icon k-spinner-btn k-right css-h31bz\" tabindex=\"-1\" type=\"button\"><i class=\"k-icon k-spinner-icon k-icon-up css-16qej3\"></i></button></div></div></div><div class=\"k-slider css-1a62bpu\"><div class=\"k-slider-main\"><div class=\"k-slider-track-wrapper\"><div class=\"k-slider-track\"><div class=\"k-slider-bar\" style=\"width: px;\">6<i class=\"k-tooltip-arrow k-bottom\" style=\"left: 10.34375px\"></i></div></div></div></div><div class=\"k-slider-marks\"><span style=\"left: 0%;\">1</span><span style=\"left: 9.09091%;\">2</span><span style=\"left: 18.1818%;\">3</span><span style=\"left: 27.2727%;\">4</span><span style=\"left: 36.3636%;\">5</span><span class=\"k-active\" style=\"left: 45.4545%;\">6月</span><span style=\"left: 54.5455%;\">7</span><span style=\"left: 63.6364%;\">8</span><span style=\"left: 72.7273%;\">9</span><span style=\"left: 81.8182%;\">1年</span><span style=\"left: 90.9091%;\">2年</span><span style=\"left: 100%;\">3年</span></div></div></div><div class=\"k-slider css-1a62bpu\"><div class=\"k-slider-main\"><div class=\"k-slider-track-wrapper\"><div class=\"k-slider-track\"><div class=\"k-slider-bar\" style=\"width: 55.5556%;\"></div><div class=\"k-slider-thumb-wrapper\" style=\"left: 55.5556%;\"><div class=\"k-slider-thumb k-dropdown-open k-slider-tooltip\" tabindex=\"0\"></div><!--portal--><div class=\"k-dropdown-menu k-tooltip-content k-hoverable k-always k-light k-small k-slider-tooltip css-o1x0o9 css-7sngro k-fade-enter-from k-fade-enter-active\" style=\"left: -5.01562px; top: -34.7969px;\">300<i class=\"k-tooltip-arrow k-bottom\" style=\"left: 9.015625px\"></i></div></div></div></div><div class=\"k-slider-ends\"><span>50</span><span>500</span></div></div><div class=\"k-slider-spinner\"><div class=\"k-spinner k-vertical css-mi4xql\"><button class=\"k-btn k-none k-btn-icon k-spinner-btn k-left css-h31bz\" tabindex=\"-1\" type=\"button\"><i class=\"k-icon k-spinner-icon k-icon-down css-16qej3\"></i></button><div class=\"k-input k-spinner-input css-1x5beu2\"><div class=\"k-input-wrapper\"><input class=\"k-input-inner\" value=\"300\"></div></div><button class=\"k-btn k-none k-btn-icon k-spinner-btn k-right css-h31bz\" tabindex=\"-1\" type=\"button\"><i class=\"k-icon k-spinner-icon k-icon-up css-16qej3\"></i></button></div></div></div></div>"
|
|
1371
1379
|
```
|
|
1372
1380
|
|
|
1373
1381
|
## `spin`
|
|
@@ -1595,7 +1603,7 @@
|
|
|
1595
1603
|
#### `Table ellipsis`
|
|
1596
1604
|
|
|
1597
1605
|
```
|
|
1598
|
-
"<div class=\"k-table css-18ftmyp\"><div class=\"k-table-wrapper\"><table><colgroup><col width=\"40\"><col><col></colgroup><thead><tr><th rowspan=\"1\"><label class=\"k-checkbox css-rfvdpj\" tabindex=\"0\"><span class=\"k-checkbox-wrapper\"><input type=\"checkbox\" tabindex=\"-1\" value=\"true\"></span></label></th><th title=\"Title 1\" colspan=\"1\" rowspan=\"1\"><div class=\"k-table-title\"><div class=\"k-table-title-text c-ellipsis\">Title 1</div></div></th><th title=\"Title 2\" colspan=\"1\" rowspan=\"1\"><div class=\"k-table-resize\"></div><div class=\"k-table-title\"><div class=\"k-table-title-text c-ellipsis\">Title 2</div></div></th></tr></thead><tbody><tr data-key=\"0\"><td class=\"k-table-check\"><label class=\"k-checkbox css-rfvdpj\" tabindex=\"0\"><span class=\"k-checkbox-wrapper\"><input type=\"checkbox\" tabindex=\"-1\" value=\"true\"></span></label></td><td title=\"\"><div class=\"k-ellipsis css-
|
|
1606
|
+
"<div class=\"k-table css-18ftmyp\"><div class=\"k-table-wrapper\"><table><colgroup><col width=\"40\"><col><col></colgroup><thead><tr><th rowspan=\"1\"><label class=\"k-checkbox css-rfvdpj\" tabindex=\"0\"><span class=\"k-checkbox-wrapper\"><input type=\"checkbox\" tabindex=\"-1\" value=\"true\"></span></label></th><th title=\"Title 1\" colspan=\"1\" rowspan=\"1\"><div class=\"k-table-title\"><div class=\"k-table-title-text c-ellipsis\">Title 1</div></div></th><th title=\"Title 2\" colspan=\"1\" rowspan=\"1\"><div class=\"k-table-resize\"></div><div class=\"k-table-title\"><div class=\"k-table-title-text c-ellipsis\">Title 2</div></div></th></tr></thead><tbody><tr data-key=\"0\"><td class=\"k-table-check\"><label class=\"k-checkbox css-rfvdpj\" tabindex=\"0\"><span class=\"k-checkbox-wrapper\"><input type=\"checkbox\" tabindex=\"-1\" value=\"true\"></span></label></td><td title=\"\"><div class=\"k-ellipsis css-1vrj62t\"><div class=\"c-ellipsis k-ellipsis-wrapper\">测试超长测试超长测试超长测试超长测试超长测试超长测试超长测试超长测试超长测试超长测试超长测试超长测试超长测试超长测试超长测试超长测试超长</div></div></td><td title=\"Cell 1-2\">Cell 1-2</td></tr><tr data-key=\"1\"><td class=\"k-table-check\"><label class=\"k-checkbox css-rfvdpj\" tabindex=\"0\"><span class=\"k-checkbox-wrapper\"><input type=\"checkbox\" tabindex=\"-1\" value=\"true\"></span></label></td><td title=\"\"><div class=\"k-ellipsis css-1vrj62t\"><div class=\"c-ellipsis k-ellipsis-wrapper\">Cell 2-1</div></div></td><td title=\"Cell 2-2\">Cell 2-2</td></tr></tbody></table></div></div>"
|
|
1599
1607
|
```
|
|
1600
1608
|
|
|
1601
1609
|
#### `Table empty`
|
|
@@ -1887,19 +1895,19 @@
|
|
|
1887
1895
|
#### `Timepicker basic`
|
|
1888
1896
|
|
|
1889
1897
|
```
|
|
1890
|
-
"<div><div class=\"k-select k-timepicker css-
|
|
1898
|
+
"<div><div class=\"k-select k-timepicker css-1bseial\" tabindex=\"0\"><div class=\"k-select-main\"><input type=\"hidden\"><div class=\"k-input k-fluid k-inline css-1x5beu2\"><div class=\"k-input-wrapper\"><input class=\"k-input-inner\" readonly=\"\" placeholder=\"请选择时间\"></div></div></div><span class=\"k-select-suffix\"><span class=\"k-select-suffix-icon\"><i class=\"k-icon k-icon-time css-16qej3\"></i></span></span></div><!--portal--> You selected: <br><br><div class=\"k-select k-timepicker css-1bseial\" tabindex=\"0\"><div class=\"k-select-main\"><input type=\"hidden\" value=\"\"><div class=\"k-select-values\"><div class=\"k-tags css-czb0gm\"><div class=\"k-input k-auto-width k-inline k-select-input css-1x5beu2\"><div class=\"k-input-wrapper\"><input class=\"k-input-inner\" readonly=\"\" placeholder=\"请选择时间\" style=\"width: px;\"><div class=\"k-input-fake\"><pre>请选择时间</pre></div></div></div></div></div></div><span class=\"k-select-suffix\"><i class=\"k-icon k-hoverable k-select-clear ion-ios-close css-16qej3\"></i><span class=\"k-select-suffix-icon\"><i class=\"k-icon k-icon-time css-16qej3\"></i></span></span></div><!--portal--> You selected: []</div>"
|
|
1891
1899
|
```
|
|
1892
1900
|
|
|
1893
1901
|
#### `Timepicker format`
|
|
1894
1902
|
|
|
1895
1903
|
```
|
|
1896
|
-
"<div><div class=\"k-select k-timepicker css-
|
|
1904
|
+
"<div><div class=\"k-select k-timepicker css-1bseial\" tabindex=\"0\"><div class=\"k-select-main\"><input type=\"hidden\"><div class=\"k-input k-fluid k-inline css-1x5beu2\"><div class=\"k-input-wrapper\"><input class=\"k-input-inner\" readonly=\"\" placeholder=\"请选择时间\"></div></div></div><span class=\"k-select-suffix\"><span class=\"k-select-suffix-icon\"><i class=\"k-icon k-icon-time css-16qej3\"></i></span></span></div><!--portal--><span>You selected: </span><br><br><div class=\"k-select css-1ti24q0\" step=\"00:30:00\" showformat=\"HH:mm\" tabindex=\"0\"><div class=\"k-select-main\"><input type=\"hidden\"><div class=\"k-input k-fluid k-inline css-1x5beu2\"><div class=\"k-input-wrapper\"><input class=\"k-input-inner\" readonly=\"\" placeholder=\"请选择时间\"></div></div></div><span class=\"k-select-suffix\"><span class=\"k-select-suffix-icon\"><i class=\"k-icon k-icon-time css-16qej3\"></i></span></span></div><!--portal--><span>You selected: </span><br><br><div class=\"k-select k-timepicker css-1bseial\" tabindex=\"0\"><div class=\"k-select-main\"><input type=\"hidden\"><div class=\"k-input k-fluid k-inline css-1x5beu2\"><div class=\"k-input-wrapper\"><input class=\"k-input-inner\" readonly=\"\" placeholder=\"开始时间 ~ 结束时间\"></div></div></div><span class=\"k-select-suffix\"><i class=\"k-icon k-hoverable k-select-clear ion-ios-close css-16qej3\"></i><span class=\"k-select-suffix-icon\"><i class=\"k-icon k-icon-time css-16qej3\"></i></span></span></div><!--portal--><span>You selected: null</span></div>"
|
|
1897
1905
|
```
|
|
1898
1906
|
|
|
1899
1907
|
#### `Timepicker range`
|
|
1900
1908
|
|
|
1901
1909
|
```
|
|
1902
|
-
"<div><div class=\"k-select k-timepicker css-
|
|
1910
|
+
"<div><div class=\"k-select k-timepicker css-1bseial\" tabindex=\"0\"><div class=\"k-select-main\"><input type=\"hidden\"><div class=\"k-input k-fluid k-inline css-1x5beu2\"><div class=\"k-input-wrapper\"><input class=\"k-input-inner\" readonly=\"\" placeholder=\"开始时间 ~ 结束时间\"></div></div></div><span class=\"k-select-suffix\"><i class=\"k-icon k-hoverable k-select-clear ion-ios-close css-16qej3\"></i><span class=\"k-select-suffix-icon\"><i class=\"k-icon k-icon-time css-16qej3\"></i></span></span></div><!--portal--> You selected: null <br><br><div class=\"k-select k-timepicker css-1bseial\" tabindex=\"0\"><div class=\"k-select-main\"><input type=\"hidden\" value=\"\"><div class=\"k-select-values\"><div class=\"k-tags css-czb0gm\"><div class=\"k-input k-auto-width k-inline k-select-input css-1x5beu2\"><div class=\"k-input-wrapper\"><input class=\"k-input-inner\" readonly=\"\" placeholder=\"开始时间 ~ 结束时间\" style=\"width: px;\"><div class=\"k-input-fake\"><pre>开始时间 ~ 结束时间</pre></div></div></div></div></div></div><span class=\"k-select-suffix\"><i class=\"k-icon k-hoverable k-select-clear ion-ios-close css-16qej3\"></i><span class=\"k-select-suffix-icon\"><i class=\"k-icon k-icon-time css-16qej3\"></i></span></span></div><!--portal--> You selected: []</div>"
|
|
1903
1911
|
```
|
|
1904
1912
|
|
|
1905
1913
|
#### `Timepicker step`
|
|
@@ -1911,7 +1919,7 @@
|
|
|
1911
1919
|
#### `Timepicker stepRange`
|
|
1912
1920
|
|
|
1913
1921
|
```
|
|
1914
|
-
"<div><div class=\"k-select k-timepicker css-
|
|
1922
|
+
"<div><div class=\"k-select k-timepicker css-1bseial\" tabindex=\"0\"><div class=\"k-select-main\"><input type=\"hidden\"><div class=\"k-input k-fluid k-inline css-1x5beu2\"><div class=\"k-input-wrapper\"><input class=\"k-input-inner\" readonly=\"\" placeholder=\"开始时间 ~ 结束时间\"></div></div></div><span class=\"k-select-suffix\"><i class=\"k-icon k-hoverable k-select-clear ion-ios-close css-16qej3\"></i><span class=\"k-select-suffix-icon\"><i class=\"k-icon k-icon-time css-16qej3\"></i></span></span></div><!--portal--> You selected: null</div>"
|
|
1915
1923
|
```
|
|
1916
1924
|
|
|
1917
1925
|
## `tip`
|
|
@@ -1951,7 +1959,7 @@
|
|
|
1951
1959
|
#### `Tooltip always`
|
|
1952
1960
|
|
|
1953
1961
|
```
|
|
1954
|
-
"<div style=\"position: relative;\"><span class=\"k-dropdown-open\"> always show this tootip </span><!--portal--><br><br><span> always hide this tootip </span><!--portal--><br><br><span class=\"k-dropdown-open\"> don't show if content is empty </span><!--portal--></div><div class=\"k-dropdown-menu k-tooltip-content k-always k-dark css-o1x0o9 css-7sngro k-fade-enter-from k-fade-enter-active\" style=\"left:
|
|
1962
|
+
"<div style=\"position: relative;\"><span class=\"k-dropdown-open\"> always show this tootip </span><!--portal--><br><br><span> always hide this tootip </span><!--portal--><br><br><span class=\"k-dropdown-open\"> don't show if content is empty </span><!--portal--></div><div class=\"k-dropdown-menu k-tooltip-content k-always k-dark css-o1x0o9 css-7sngro k-fade-enter-from k-fade-enter-active\" style=\"left: 36.6875px; top: 177px;\">hello<i class=\"k-tooltip-arrow k-top\" style=\"left: 19.6796875px\"></i></div><div class=\"k-dropdown-menu k-tooltip-content k-always k-dark css-o1x0o9 css-7sngro\" style=\"display: none;\">hide<i class=\"k-tooltip-arrow\"></i></div>"
|
|
1955
1963
|
```
|
|
1956
1964
|
|
|
1957
1965
|
#### `Tooltip basic`
|
|
@@ -1969,7 +1977,7 @@
|
|
|
1969
1977
|
#### `Tooltip position`
|
|
1970
1978
|
|
|
1971
1979
|
```
|
|
1972
|
-
"<form class=\"k-form k-horizontal css-1mv8rmx\" novalidate=\"true\"><div class=\"k-form-item css-
|
|
1980
|
+
"<form class=\"k-form k-horizontal css-1mv8rmx\" novalidate=\"true\"><div class=\"k-form-item css-15gu3l7\"><label class=\"k-form-label\">position:</label><div class=\"k-form-content\"><div class=\"k-btns css-z9s2vw\"><button class=\"k-btn k-default k-active css-h31bz\" tabindex=\"0\" type=\"button\">left<input class=\"k-button-input\" type=\"radio\" tabindex=\"-1\"></button><button class=\"k-btn k-default css-h31bz\" tabindex=\"0\" type=\"button\">right<input class=\"k-button-input\" type=\"radio\" tabindex=\"-1\"></button><button class=\"k-btn k-default css-h31bz\" tabindex=\"0\" type=\"button\">top<input class=\"k-button-input\" type=\"radio\" tabindex=\"-1\"></button><button class=\"k-btn k-default css-h31bz\" tabindex=\"0\" type=\"button\">bottom<input class=\"k-button-input\" type=\"radio\" tabindex=\"-1\"></button><button class=\"k-btn k-default css-h31bz\" tabindex=\"0\" type=\"button\">custom<input class=\"k-button-input\" type=\"radio\" tabindex=\"-1\"></button></div></div></div><div class=\"k-form-item k-fluid css-15gu3l7\"><label class=\"k-form-label\"></label><div class=\"k-form-content\"><div class=\"opera\"><button class=\"k-btn k-default k-dropdown-open css-h31bz\" tabindex=\"0\" type=\"button\">at</button><!--portal--><div class=\"k-dropdown-menu k-tooltip-content k-hoverable k-always k-dark css-o1x0o9 css-7sngro k-fade-enter-from k-fade-enter-active\" style=\"left: -58.5312px; top: -0.398438px;\">\"left\"<i class=\"k-tooltip-arrow k-right\" style=\"top: 11.3984375px\"></i></div></div></div></div></form>"
|
|
1973
1981
|
```
|
|
1974
1982
|
|
|
1975
1983
|
#### `Tooltip trigger`
|
|
@@ -1984,6 +1992,62 @@
|
|
|
1984
1992
|
"<div><button class=\"k-btn css-eerehs\" tabindex=\"0\" type=\"button\">删除</button><!--portal--></div>"
|
|
1985
1993
|
```
|
|
1986
1994
|
|
|
1995
|
+
## `tour`
|
|
1996
|
+
|
|
1997
|
+
#### `Tour basic`
|
|
1998
|
+
|
|
1999
|
+
```
|
|
2000
|
+
"<div><div class=\"example-container\"><button class=\"k-btn k-default css-h31bz\" id=\"btn1\" tabindex=\"0\" type=\"button\">示例元素1</button><button class=\"k-btn k-default css-h31bz\" id=\"btn2\" tabindex=\"0\" type=\"button\" style=\"margin-left: 20px;\">示例元素2</button></div><div style=\"margin-top: 20px;\"><button class=\"k-btn k-default css-h31bz\" tabindex=\"0\" type=\"button\"> 启动引导 </button><span style=\"margin-left: 10px;\"> 当前步骤: {this.get('currentStep') >= 0 ? this.get('currentStep') + 1 : '未启动'} </span></div></div>"
|
|
2001
|
+
```
|
|
2002
|
+
|
|
2003
|
+
#### `Tour beforeChange`
|
|
2004
|
+
|
|
2005
|
+
```
|
|
2006
|
+
"<div><div class=\"example-container\"><button class=\"k-btn k-default css-h31bz\" id=\"step1\" tabindex=\"0\" type=\"button\">步骤1</button><button class=\"k-btn k-default css-h31bz\" id=\"step2\" tabindex=\"0\" type=\"button\" style=\"margin-left: 20px;\">步骤2</button><div style=\"margin-top: 20px;\"><div class=\"k-input step3-input css-1x5beu2\"><div class=\"k-input-wrapper\"><input class=\"k-input-inner\" placeholder=\"通过验证才能进入下一步\"></div></div></div><button class=\"k-btn k-default css-h31bz\" id=\"step4\" tabindex=\"0\" type=\"button\" style=\"margin-top: 20px;\">步骤4</button></div><div style=\"margin-top: 20px;\"><button class=\"k-btn k-default css-h31bz\" tabindex=\"0\" type=\"button\"> 启动引导 </button><span style=\"margin-left: 10px;\"> 当前步骤: {this.get('currentStep') >= 0 ? this.get('currentStep') + 1 : '未启动'} </span><!--v-if--></div></div>"
|
|
2007
|
+
```
|
|
2008
|
+
|
|
2009
|
+
#### `Tour closable`
|
|
2010
|
+
|
|
2011
|
+
```
|
|
2012
|
+
"<div><div class=\"example-container\"><button class=\"k-btn k-default css-h31bz\" id=\"closabelDemo\" tabindex=\"0\" type=\"button\">目标元素1</button></div><div style=\"margin-top: 20px;\"><div style=\"margin-bottom: 10px;\"><div class=\"k-switch k-default css-1kd39ob\" tabindex=\"0\"><input type=\"checkbox\" tabindex=\"-1\"><div class=\"k-switch-bar\"><div class=\"k-switch-wrapper\"><div class=\"k-switch-handle\"><img src=\"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\"></div></div></div></div><span style=\"margin-left: 10px;\">关闭图标: {this.get('closable') ? '启用' : '禁用'}</span></div><button class=\"k-btn k-default css-h31bz\" tabindex=\"0\" type=\"button\"> 启动引导 </button></div></div>"
|
|
2013
|
+
```
|
|
2014
|
+
|
|
2015
|
+
#### `Tour custom`
|
|
2016
|
+
|
|
2017
|
+
```
|
|
2018
|
+
"<div><div class=\"example-container\"><button class=\"k-btn k-default css-h31bz\" id=\"btn5\" tabindex=\"0\" type=\"button\">示例元素</button></div><div style=\"margin-top: 20px;\"><button class=\"k-btn k-default css-h31bz\" tabindex=\"0\" type=\"button\"> 启动自定义引导 </button></div></div>"
|
|
2019
|
+
```
|
|
2020
|
+
|
|
2021
|
+
#### `Tour customText`
|
|
2022
|
+
|
|
2023
|
+
```
|
|
2024
|
+
"<div><div class=\"example-container\"><button class=\"k-btn k-default css-h31bz\" id=\"welcome-btn\" tabindex=\"0\" type=\"button\">欢迎页面</button><button class=\"k-btn k-default css-h31bz\" id=\"feature-btn\" tabindex=\"0\" type=\"button\" style=\"margin-left: 20px;\">功能介绍</button><button class=\"k-btn k-default css-h31bz\" id=\"finish-btn\" tabindex=\"0\" type=\"button\" style=\"margin-left: 20px;\">完成设置</button></div><div style=\"margin-top: 20px;\"><button class=\"k-btn k-primary css-h31bz\" tabindex=\"0\" type=\"button\"> 开始自定义按钮引导 </button><span style=\"margin-left: 10px;\"> 当前步骤: {this.get('currentStep') >= 0 ? this.get('currentStep') + 1 : '未启动'} </span></div></div>"
|
|
2025
|
+
```
|
|
2026
|
+
|
|
2027
|
+
#### `Tour declarative`
|
|
2028
|
+
|
|
2029
|
+
```
|
|
2030
|
+
"<div><div class=\"example-container\"><button class=\"k-btn k-default css-h31bz\" id=\"btn3\" tabindex=\"0\" type=\"button\">示例元素1</button><button class=\"k-btn k-default css-h31bz\" id=\"btn4\" tabindex=\"0\" type=\"button\" style=\"margin-left: 20px;\">示例元素2</button></div><div style=\"margin-top: 20px;\"><button class=\"k-btn k-default css-h31bz\" tabindex=\"0\" type=\"button\"> 启动引导 </button><span style=\"margin-left: 10px;\"> 当前步骤: {this.get('currentStep') >= 0 ? this.get('currentStep') + 1 : '未启动'} </span></div></div>"
|
|
2031
|
+
```
|
|
2032
|
+
|
|
2033
|
+
#### `Tour events`
|
|
2034
|
+
|
|
2035
|
+
```
|
|
2036
|
+
"<div><div class=\"example-container\"><button class=\"k-btn k-default css-h31bz\" id=\"event-btn1\" tabindex=\"0\" type=\"button\">第一步</button><button class=\"k-btn k-default css-h31bz\" id=\"event-btn2\" tabindex=\"0\" type=\"button\" style=\"margin-left: 20px;\">第二步</button><button class=\"k-btn k-default css-h31bz\" id=\"event-btn3\" tabindex=\"0\" type=\"button\" style=\"margin-left: 20px;\">第三步</button></div><div style=\"margin-top: 20px;\"><button class=\"k-btn k-default css-h31bz\" tabindex=\"0\" type=\"button\"> 开始引导 </button><span style=\"margin-left: 10px;\"> 当前步骤: {this.get('currentStep') >= 0 ? this.get('currentStep') + 1 : '未启动'} </span></div></div>"
|
|
2037
|
+
```
|
|
2038
|
+
|
|
2039
|
+
#### `Tour maskClosable`
|
|
2040
|
+
|
|
2041
|
+
```
|
|
2042
|
+
"<div><div class=\"example-container\"><button class=\"k-btn k-default css-h31bz\" id=\"maskDemo1\" tabindex=\"0\" type=\"button\">目标元素1</button><button class=\"k-btn k-default css-h31bz\" id=\"maskDemo2\" tabindex=\"0\" type=\"button\" style=\"margin-left: 20px;\">目标元素2</button></div><div style=\"margin-top: 20px;\"><div style=\"margin-bottom: 10px;\"><div class=\"k-switch k-checked k-default css-1kd39ob\" tabindex=\"0\"><input type=\"checkbox\" tabindex=\"-1\"><div class=\"k-switch-bar\"><div class=\"k-switch-wrapper\"><div class=\"k-switch-handle\"><img src=\"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\"></div></div></div></div><span style=\"margin-left: 10px;\">点击遮罩关闭引导: {this.get('maskClosable') ? '启用' : '禁用'}</span></div><button class=\"k-btn k-default css-h31bz\" tabindex=\"0\" type=\"button\"> 启动引导 </button></div></div>"
|
|
2043
|
+
```
|
|
2044
|
+
|
|
2045
|
+
#### `Tour notarget`
|
|
2046
|
+
|
|
2047
|
+
```
|
|
2048
|
+
"<div><div style=\"margin-top: 20px;\"><button class=\"k-btn k-default css-h31bz\" tabindex=\"0\" type=\"button\"> 启动无目标引导 </button></div></div>"
|
|
2049
|
+
```
|
|
2050
|
+
|
|
1987
2051
|
## `transfer`
|
|
1988
2052
|
|
|
1989
2053
|
#### `Transfer basic`
|
|
@@ -2155,7 +2219,7 @@
|
|
|
2155
2219
|
#### `Upload files`
|
|
2156
2220
|
|
|
2157
2221
|
```
|
|
2158
|
-
"<div class=\"k-upload css-kpooy2\"><input class=\"c-hidden\" type=\"file\" multiple=\"\"><div class=\"k-upload-handle\"><button class=\"k-btn k-default css-spvvi2\" tabindex=\"0\" type=\"button\"><i class=\"k-icon k-icon-upload css-16qej3\"></i>点击上传</button></div><div class=\"k-upload-files\"><div class=\"k-upload-file\"><div class=\"k-upload-file-main\"><div class=\"k-upload-name c-ellipsis\"><i class=\"k-icon k-upload-file-icon ion-document css-16qej3\"></i><span class=\"k-upload-file-name\"><div class=\"k-ellipsis css-
|
|
2222
|
+
"<div class=\"k-upload css-kpooy2\"><input class=\"c-hidden\" type=\"file\" multiple=\"\"><div class=\"k-upload-handle\"><button class=\"k-btn k-default css-spvvi2\" tabindex=\"0\" type=\"button\"><i class=\"k-icon k-icon-upload css-16qej3\"></i>点击上传</button></div><div class=\"k-upload-files\"><div class=\"k-upload-file\"><div class=\"k-upload-file-main\"><div class=\"k-upload-name c-ellipsis\"><i class=\"k-icon k-upload-file-icon ion-document css-16qej3\"></i><span class=\"k-upload-file-name\"><div class=\"k-ellipsis css-1vrj62t\"><div class=\"c-ellipsis k-ellipsis-wrapper\">test1.jpg</div></div></span><i class=\"k-icon k-upload-status-icon k-icon-success-fill css-16qej3\"></i></div></div><i class=\"k-icon k-hoverable k-upload-close k-icon-delete css-16qej3\"></i></div><div class=\"k-upload-file\"><div class=\"k-upload-file-main\"><div class=\"k-upload-name c-ellipsis\"><i class=\"k-icon k-upload-file-icon ion-document css-16qej3\"></i><span class=\"k-upload-file-name\"><div class=\"k-ellipsis css-1vrj62t\"><div class=\"c-ellipsis k-ellipsis-wrapper\">test2.png</div></div></span><i class=\"k-icon k-upload-status-icon k-icon-success-fill css-16qej3\"></i></div></div><i class=\"k-icon k-hoverable k-upload-close k-icon-delete css-16qej3\"></i></div><div class=\"k-upload-file k-error\"><div class=\"k-upload-file-main\"><div class=\"k-upload-name c-ellipsis\"><i class=\"k-icon k-upload-file-icon ion-document css-16qej3\"></i><span class=\"k-upload-file-name\"><div class=\"k-ellipsis css-1vrj62t\"><div class=\"c-ellipsis k-ellipsis-wrapper\">test3.png</div></div></span><i class=\"k-icon k-upload-status-icon k-icon-error-fill css-16qej3\"></i></div></div><i class=\"k-icon k-hoverable k-upload-close k-icon-delete css-16qej3\"></i></div><div class=\"k-upload-file\"><div class=\"k-upload-file-main\"><div class=\"k-upload-name c-ellipsis\"><i class=\"k-icon k-upload-file-icon ion-document css-16qej3\"></i><span class=\"k-upload-file-name\"><div class=\"k-ellipsis css-1vrj62t\"><div class=\"c-ellipsis k-ellipsis-wrapper\">test4-测试超长测试超长测试超长测试超长测试超长测试超长测试超长测试超长测试超长测试超长测试超长测试超长测试超长测试超长测试超长测试超长测试超长测试超长.png</div></div></span><i class=\"k-icon k-upload-status-icon k-icon-success-fill css-16qej3\"></i></div></div><i class=\"k-icon k-hoverable k-upload-close k-icon-delete css-16qej3\"></i></div></div><!--portal--></div>"
|
|
2159
2223
|
```
|
|
2160
2224
|
|
|
2161
2225
|
#### `Upload gallery`
|