@progress/kendo-themes-html 6.3.0 → 6.4.0-dev.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (256) hide show
  1. package/dist/action-sheet/tests/action-sheet-calendar-infinite.js +1284 -0
  2. package/dist/action-sheet/tests/action-sheet-calendar-infinite.js.map +7 -0
  3. package/dist/bottom-nav/bottom-nav-item.js +234 -0
  4. package/dist/bottom-nav/bottom-nav-item.js.map +7 -0
  5. package/dist/bottom-nav/bottom-nav.spec.js +122 -0
  6. package/dist/bottom-nav/bottom-nav.spec.js.map +7 -0
  7. package/dist/bottom-nav/tests/bottom-nav-colors.js +269 -358
  8. package/dist/bottom-nav/tests/bottom-nav-colors.js.map +4 -4
  9. package/dist/bottom-nav/tests/bottom-nav-items.js +168 -53
  10. package/dist/bottom-nav/tests/bottom-nav-items.js.map +4 -4
  11. package/dist/bottom-nav/tests/bottom-nav-rtl.js +153 -50
  12. package/dist/bottom-nav/tests/bottom-nav-rtl.js.map +4 -4
  13. package/dist/bottom-nav/tests/bottom-nav.js +167 -76
  14. package/dist/bottom-nav/tests/bottom-nav.js.map +4 -4
  15. package/dist/breadcrumb/breadcrumb-container.js +76 -0
  16. package/dist/breadcrumb/breadcrumb-container.js.map +7 -0
  17. package/dist/breadcrumb/breadcrumb-input-container.js +65 -0
  18. package/dist/breadcrumb/breadcrumb-input-container.js.map +7 -0
  19. package/dist/breadcrumb/breadcrumb-item-text.js +70 -0
  20. package/dist/breadcrumb/breadcrumb-item-text.js.map +7 -0
  21. package/dist/breadcrumb/breadcrumb-item.js +75 -0
  22. package/dist/breadcrumb/breadcrumb-item.js.map +7 -0
  23. package/dist/breadcrumb/breadcrumb-link.js +132 -0
  24. package/dist/breadcrumb/breadcrumb-link.js.map +7 -0
  25. package/dist/breadcrumb/breadcrumb-root-item-container.js +65 -0
  26. package/dist/breadcrumb/breadcrumb-root-item-container.js.map +7 -0
  27. package/dist/breadcrumb/breadcrumb.spec.js +125 -0
  28. package/dist/breadcrumb/breadcrumb.spec.js.map +7 -0
  29. package/dist/breadcrumb/tests/breadcrumb-rtl.js +349 -153
  30. package/dist/breadcrumb/tests/breadcrumb-rtl.js.map +4 -4
  31. package/dist/breadcrumb/tests/breadcrumb.js +349 -153
  32. package/dist/breadcrumb/tests/breadcrumb.js.map +4 -4
  33. package/dist/coloreditor/color-editor.spec.js +1586 -0
  34. package/dist/coloreditor/color-editor.spec.js.map +7 -0
  35. package/dist/coloreditor/tests/coloreditor-focused-colorgradient.js +821 -176
  36. package/dist/coloreditor/tests/coloreditor-focused-colorgradient.js.map +4 -4
  37. package/dist/coloreditor/tests/coloreditor-rtl.js +727 -265
  38. package/dist/coloreditor/tests/coloreditor-rtl.js.map +4 -4
  39. package/dist/coloreditor/tests/coloreditor-states.js +821 -176
  40. package/dist/coloreditor/tests/coloreditor-states.js.map +4 -4
  41. package/dist/coloreditor/tests/coloreditor-views.js +727 -265
  42. package/dist/coloreditor/tests/coloreditor-views.js.map +4 -4
  43. package/dist/coloreditor/tests/coloreditor.js +821 -176
  44. package/dist/coloreditor/tests/coloreditor.js.map +4 -4
  45. package/dist/colorgradient/color-contrast.js +199 -0
  46. package/dist/colorgradient/color-contrast.js.map +7 -0
  47. package/dist/colorgradient/color-gradient.spec.js +1246 -0
  48. package/dist/colorgradient/color-gradient.spec.js.map +7 -0
  49. package/dist/colorgradient/color-input.js +1029 -0
  50. package/dist/colorgradient/color-input.js.map +7 -0
  51. package/dist/colorgradient/tests/colorgradient-contrast.js +532 -155
  52. package/dist/colorgradient/tests/colorgradient-contrast.js.map +4 -4
  53. package/dist/colorgradient/tests/colorgradient-draghandle.js +536 -202
  54. package/dist/colorgradient/tests/colorgradient-draghandle.js.map +4 -4
  55. package/dist/colorgradient/tests/colorgradient-modes.js +433 -260
  56. package/dist/colorgradient/tests/colorgradient-modes.js.map +4 -4
  57. package/dist/colorgradient/tests/colorgradient-rtl.js +532 -155
  58. package/dist/colorgradient/tests/colorgradient-rtl.js.map +4 -4
  59. package/dist/colorgradient/tests/colorgradient-states.js +536 -132
  60. package/dist/colorgradient/tests/colorgradient-states.js.map +4 -4
  61. package/dist/colorgradient/tests/colorgradient.js +532 -132
  62. package/dist/colorgradient/tests/colorgradient.js.map +4 -4
  63. package/dist/colorpalette/colorpalette.spec.js +1 -1
  64. package/dist/colorpalette/colorpalette.spec.js.map +2 -2
  65. package/dist/colorpalette/tests/colorpalette-states.js +1 -1
  66. package/dist/colorpalette/tests/colorpalette-states.js.map +2 -2
  67. package/dist/colorpalette/tests/colorpalette-variants.js +1 -1
  68. package/dist/colorpalette/tests/colorpalette-variants.js.map +2 -2
  69. package/dist/colorpalette/tests/colorpalette.js +1 -1
  70. package/dist/colorpalette/tests/colorpalette.js.map +2 -2
  71. package/dist/colorpicker/tests/colorpicker-dropdown.js +757 -185
  72. package/dist/colorpicker/tests/colorpicker-dropdown.js.map +4 -4
  73. package/dist/editor/tests/editor-table-wizard.js +1984 -0
  74. package/dist/editor/tests/editor-table-wizard.js.map +7 -0
  75. package/dist/expansion-panel/expansion-panel.spec.js +253 -0
  76. package/dist/expansion-panel/expansion-panel.spec.js.map +7 -0
  77. package/dist/expansion-panel/tests/expansion-panel-rtl.js +100 -83
  78. package/dist/expansion-panel/tests/expansion-panel-rtl.js.map +4 -4
  79. package/dist/expansion-panel/tests/expansion-panel.js +100 -83
  80. package/dist/expansion-panel/tests/expansion-panel.js.map +4 -4
  81. package/dist/filemanager/tests/filemanager-contextmenu.js +492 -340
  82. package/dist/filemanager/tests/filemanager-contextmenu.js.map +4 -4
  83. package/dist/filemanager/tests/filemanager-drag-hint.js +468 -316
  84. package/dist/filemanager/tests/filemanager-drag-hint.js.map +4 -4
  85. package/dist/filemanager/tests/filemanager-gridview.js +533 -381
  86. package/dist/filemanager/tests/filemanager-gridview.js.map +4 -4
  87. package/dist/filemanager/tests/filemanager-listview.js +487 -335
  88. package/dist/filemanager/tests/filemanager-listview.js.map +4 -4
  89. package/dist/filemanager/tests/filemanager-preview.js +586 -434
  90. package/dist/filemanager/tests/filemanager-preview.js.map +4 -4
  91. package/dist/grid/tests/grid-column-menu-rtl.js +15 -15
  92. package/dist/grid/tests/grid-column-menu-rtl.js.map +2 -2
  93. package/dist/grid/tests/grid-column-menu.js +15 -15
  94. package/dist/grid/tests/grid-column-menu.js.map +2 -2
  95. package/dist/index.js +2131 -1244
  96. package/dist/index.js.map +4 -4
  97. package/dist/multiselecttree/multiselecttree.spec.js +1003 -0
  98. package/dist/multiselecttree/multiselecttree.spec.js.map +7 -0
  99. package/dist/multiselecttree/tests/multiselecttree-flat.js +1208 -0
  100. package/dist/multiselecttree/tests/multiselecttree-flat.js.map +7 -0
  101. package/dist/{editor/tests/editor-table-wizard-accessibility.js → multiselecttree/tests/multiselecttree-opened.js} +646 -645
  102. package/dist/multiselecttree/tests/multiselecttree-opened.js.map +7 -0
  103. package/dist/multiselecttree/tests/multiselecttree-outline.js +1208 -0
  104. package/dist/multiselecttree/tests/multiselecttree-outline.js.map +7 -0
  105. package/dist/multiselecttree/tests/multiselecttree-size.js +1107 -0
  106. package/dist/multiselecttree/tests/multiselecttree-size.js.map +7 -0
  107. package/dist/multiselecttree/tests/multiselecttree.js +1194 -0
  108. package/dist/multiselecttree/tests/multiselecttree.js.map +7 -0
  109. package/dist/pivotgrid/tests/pivotgrid-column-menus.js +8 -8
  110. package/dist/pivotgrid/tests/pivotgrid-column-menus.js.map +2 -2
  111. package/dist/scheduler/tests/scheduler-adaptive-agenda.js +6 -4
  112. package/dist/scheduler/tests/scheduler-adaptive-agenda.js.map +2 -2
  113. package/dist/scheduler/tests/scheduler-adaptive-day-resource-group.js +6 -4
  114. package/dist/scheduler/tests/scheduler-adaptive-day-resource-group.js.map +2 -2
  115. package/dist/scheduler/tests/scheduler-adaptive-day.js +6 -4
  116. package/dist/scheduler/tests/scheduler-adaptive-day.js.map +2 -2
  117. package/dist/scheduler/tests/scheduler-adaptive-month.js +6 -4
  118. package/dist/scheduler/tests/scheduler-adaptive-month.js.map +2 -2
  119. package/dist/scheduler/tests/scheduler-angular-agenda-rtl.js +8 -11
  120. package/dist/scheduler/tests/scheduler-angular-agenda-rtl.js.map +2 -2
  121. package/dist/scheduler/tests/scheduler-angular-agenda.js +8 -11
  122. package/dist/scheduler/tests/scheduler-angular-agenda.js.map +2 -2
  123. package/dist/scheduler/tests/scheduler-angular-day-rtl.js +8 -11
  124. package/dist/scheduler/tests/scheduler-angular-day-rtl.js.map +2 -2
  125. package/dist/scheduler/tests/scheduler-angular-month-rtl.js +8 -11
  126. package/dist/scheduler/tests/scheduler-angular-month-rtl.js.map +2 -2
  127. package/dist/scheduler/tests/scheduler-angular-month.js +8 -11
  128. package/dist/scheduler/tests/scheduler-angular-month.js.map +2 -2
  129. package/dist/scheduler/tests/scheduler-angular-rtl.js +8 -11
  130. package/dist/scheduler/tests/scheduler-angular-rtl.js.map +2 -2
  131. package/dist/scheduler/tests/scheduler-angular.js +8 -11
  132. package/dist/scheduler/tests/scheduler-angular.js.map +2 -2
  133. package/dist/scheduler/tests/scheduler-flex-layout.js +7 -10
  134. package/dist/scheduler/tests/scheduler-flex-layout.js.map +2 -2
  135. package/dist/scheduler/tests/scheduler-jquery-agenda.js +7 -10
  136. package/dist/scheduler/tests/scheduler-jquery-agenda.js.map +2 -2
  137. package/dist/scheduler/tests/scheduler-jquery-month.js +7 -10
  138. package/dist/scheduler/tests/scheduler-jquery-month.js.map +2 -2
  139. package/dist/scheduler/tests/scheduler-react-agenda.js +7 -10
  140. package/dist/scheduler/tests/scheduler-react-agenda.js.map +2 -2
  141. package/dist/scheduler/tests/scheduler-react-day.js +7 -10
  142. package/dist/scheduler/tests/scheduler-react-day.js.map +2 -2
  143. package/dist/scheduler/tests/scheduler-react-month.js +7 -10
  144. package/dist/scheduler/tests/scheduler-react-month.js.map +2 -2
  145. package/dist/scheduler/tests/scheduler-react-timeline-multi.js +7 -10
  146. package/dist/scheduler/tests/scheduler-react-timeline-multi.js.map +2 -2
  147. package/dist/scheduler/tests/scheduler-react-timeline.js +14 -20
  148. package/dist/scheduler/tests/scheduler-react-timeline.js.map +2 -2
  149. package/dist/scheduler/tests/scheduler-react-week.js +7 -10
  150. package/dist/scheduler/tests/scheduler-react-week.js.map +2 -2
  151. package/dist/scheduler/tests/scheduler-year.js +6 -9
  152. package/dist/scheduler/tests/scheduler-year.js.map +2 -2
  153. package/dist/scheduler/tests/scheduler.js +13 -19
  154. package/dist/scheduler/tests/scheduler.js.map +2 -2
  155. package/dist/slider/slider-tick.js +48 -0
  156. package/dist/slider/slider-tick.js.map +7 -0
  157. package/dist/slider/slider.spec.js +411 -0
  158. package/dist/slider/slider.spec.js.map +7 -0
  159. package/dist/slider/tests/slider-css-vars.js +300 -268
  160. package/dist/slider/tests/slider-css-vars.js.map +4 -4
  161. package/dist/slider/tests/slider-tick-absolute-position.js +155 -36
  162. package/dist/slider/tests/slider-tick-absolute-position.js.map +4 -4
  163. package/dist/slider/tests/slider.js +235 -209
  164. package/dist/slider/tests/slider.js.map +4 -4
  165. package/dist/spreadsheet/tests/spreadsheet-filter-menu.js +2 -2
  166. package/dist/spreadsheet/tests/spreadsheet-filter-menu.js.map +2 -2
  167. package/package.json +2 -2
  168. package/src/action-sheet/tests/action-sheet-calendar-infinite.tsx +605 -0
  169. package/src/bottom-nav/bottom-nav-item.tsx +62 -0
  170. package/src/bottom-nav/bottom-nav.spec.tsx +76 -0
  171. package/src/bottom-nav/index.ts +2 -0
  172. package/src/bottom-nav/tests/bottom-nav-colors.tsx +109 -325
  173. package/src/bottom-nav/tests/bottom-nav-items.tsx +12 -22
  174. package/src/bottom-nav/tests/bottom-nav-rtl.tsx +13 -37
  175. package/src/bottom-nav/tests/bottom-nav.tsx +29 -77
  176. package/src/breadcrumb/breadcrumb-container.tsx +36 -0
  177. package/src/breadcrumb/breadcrumb-input-container.tsx +22 -0
  178. package/src/breadcrumb/breadcrumb-item-text.tsx +32 -0
  179. package/src/breadcrumb/breadcrumb-item.tsx +34 -0
  180. package/src/breadcrumb/breadcrumb-link.tsx +55 -0
  181. package/src/breadcrumb/breadcrumb-root-item-container.tsx +22 -0
  182. package/src/breadcrumb/breadcrumb.spec.tsx +55 -0
  183. package/src/breadcrumb/index.ts +7 -0
  184. package/src/breadcrumb/tests/breadcrumb-rtl.tsx +275 -231
  185. package/src/breadcrumb/tests/breadcrumb.tsx +274 -231
  186. package/src/coloreditor/color-editor.spec.tsx +93 -0
  187. package/src/coloreditor/index.ts +1 -0
  188. package/src/coloreditor/tests/coloreditor-focused-colorgradient.tsx +2 -76
  189. package/src/coloreditor/tests/coloreditor-rtl.tsx +3 -107
  190. package/src/coloreditor/tests/coloreditor-states.tsx +2 -77
  191. package/src/coloreditor/tests/coloreditor-views.tsx +3 -107
  192. package/src/coloreditor/tests/coloreditor.tsx +2 -77
  193. package/src/colorgradient/color-contrast.tsx +44 -0
  194. package/src/colorgradient/color-gradient.spec.tsx +102 -0
  195. package/src/colorgradient/color-input.tsx +123 -0
  196. package/src/colorgradient/index.ts +4 -0
  197. package/src/colorgradient/tests/colorgradient-contrast.tsx +2 -83
  198. package/src/colorgradient/tests/colorgradient-draghandle.tsx +4 -146
  199. package/src/colorgradient/tests/colorgradient-modes.tsx +6 -214
  200. package/src/colorgradient/tests/colorgradient-rtl.tsx +2 -74
  201. package/src/colorgradient/tests/colorgradient-states.tsx +14 -51
  202. package/src/colorgradient/tests/colorgradient.tsx +2 -55
  203. package/src/colorpalette/colorpalette.spec.tsx +5 -5
  204. package/src/colorpicker/tests/colorpicker-dropdown.tsx +7 -184
  205. package/src/editor/tests/editor-table-wizard.tsx +280 -0
  206. package/src/expansion-panel/expansion-panel.spec.tsx +86 -0
  207. package/src/expansion-panel/index.ts +1 -0
  208. package/src/expansion-panel/tests/expansion-panel-rtl.tsx +48 -111
  209. package/src/expansion-panel/tests/expansion-panel.tsx +49 -111
  210. package/src/filemanager/tests/filemanager-contextmenu.tsx +9 -8
  211. package/src/filemanager/tests/filemanager-drag-hint.tsx +9 -8
  212. package/src/filemanager/tests/filemanager-gridview.tsx +17 -16
  213. package/src/filemanager/tests/filemanager-listview.tsx +17 -16
  214. package/src/filemanager/tests/filemanager-preview.tsx +25 -24
  215. package/src/grid/tests/grid-column-menu-rtl.tsx +45 -15
  216. package/src/grid/tests/grid-column-menu.tsx +45 -15
  217. package/src/index.ts +7 -4
  218. package/src/multiselecttree/index.ts +1 -0
  219. package/src/multiselecttree/multiselecttree.spec.tsx +150 -0
  220. package/src/multiselecttree/tests/multiselecttree-flat.tsx +179 -0
  221. package/src/multiselecttree/tests/multiselecttree-opened.tsx +119 -0
  222. package/src/multiselecttree/tests/multiselecttree-outline.tsx +179 -0
  223. package/src/multiselecttree/tests/multiselecttree-size.tsx +54 -0
  224. package/src/multiselecttree/tests/multiselecttree.tsx +179 -0
  225. package/src/pivotgrid/tests/pivotgrid-column-menus.tsx +24 -8
  226. package/src/scheduler/tests/scheduler-adaptive-agenda.tsx +13 -14
  227. package/src/scheduler/tests/scheduler-adaptive-day-resource-group.tsx +13 -14
  228. package/src/scheduler/tests/scheduler-adaptive-day.tsx +13 -14
  229. package/src/scheduler/tests/scheduler-adaptive-month.tsx +13 -14
  230. package/src/scheduler/tests/scheduler-angular-agenda-rtl.tsx +13 -17
  231. package/src/scheduler/tests/scheduler-angular-agenda.tsx +13 -17
  232. package/src/scheduler/tests/scheduler-angular-day-rtl.tsx +13 -17
  233. package/src/scheduler/tests/scheduler-angular-month-rtl.tsx +13 -17
  234. package/src/scheduler/tests/scheduler-angular-month.tsx +13 -17
  235. package/src/scheduler/tests/scheduler-angular-rtl.tsx +13 -17
  236. package/src/scheduler/tests/scheduler-angular.tsx +13 -17
  237. package/src/scheduler/tests/scheduler-flex-layout.tsx +10 -14
  238. package/src/scheduler/tests/scheduler-jquery-agenda.tsx +10 -14
  239. package/src/scheduler/tests/scheduler-jquery-month.tsx +10 -14
  240. package/src/scheduler/tests/scheduler-react-agenda.tsx +10 -14
  241. package/src/scheduler/tests/scheduler-react-day.tsx +10 -14
  242. package/src/scheduler/tests/scheduler-react-month.tsx +10 -14
  243. package/src/scheduler/tests/scheduler-react-timeline-multi.tsx +10 -14
  244. package/src/scheduler/tests/scheduler-react-timeline.tsx +19 -28
  245. package/src/scheduler/tests/scheduler-react-week.tsx +10 -14
  246. package/src/scheduler/tests/scheduler-year.tsx +9 -13
  247. package/src/scheduler/tests/scheduler.tsx +20 -27
  248. package/src/slider/index.ts +2 -0
  249. package/src/slider/slider-tick.tsx +52 -0
  250. package/src/slider/slider.spec.tsx +120 -0
  251. package/src/slider/tests/slider-css-vars.tsx +185 -349
  252. package/src/slider/tests/slider-tick-absolute-position.tsx +40 -64
  253. package/src/slider/tests/slider.tsx +118 -262
  254. package/src/spreadsheet/tests/spreadsheet-filter-menu.tsx +6 -2
  255. package/dist/editor/tests/editor-table-wizard-accessibility.js.map +0 -7
  256. package/src/editor/tests/editor-table-wizard-accessibility.tsx +0 -69
package/src/bottom-nav/tests/bottom-nav-colors.tsx CHANGED
@@ -1,5 +1,5 @@
1
1
  import ReactDOM from 'react-dom/client';
2
- import { Icon } from '../../icon';
2
+ import { BottomNav, BottomNavItem } from '../../bottom-nav';
3
3
 
4
4
  const root = ReactDOM.createRoot(
5
5
  document.getElementById('app') as HTMLElement
@@ -23,200 +23,92 @@ root.render(
23
23
  <div className="colors k-d-grid k-grid-cols-2">
24
24
  <section>
25
25
  <span className="k-col-start-1">Primary ThemeColor</span>
26
- <nav className="k-bottom-nav k-bottom-nav-primary k-bottom-nav-solid k-bottom-nav-item-flow-vertical">
27
- <span className="k-bottom-nav-item">
28
- <Icon className="k-bottom-nav-item-icon" name="email" />
29
- <span className="k-bottom-nav-item-text">Normal</span>
30
- </span>
31
- <span className="k-bottom-nav-item k-focus">
32
- <Icon className="k-bottom-nav-item-icon" name="email" />
33
- <span className="k-bottom-nav-item-text">Focused</span>
34
- </span>
35
- <span className="k-bottom-nav-item k-selected">
36
- <Icon className="k-bottom-nav-item-icon" name="email" />
37
- <span className="k-bottom-nav-item-text">Selected</span>
38
- </span>
39
- <span className="k-bottom-nav-item k-disabled">
40
- <Icon className="k-bottom-nav-item-icon" name="email" />
41
- <span className="k-bottom-nav-item-text">Disabled</span>
42
- </span>
43
- </nav>
26
+ <BottomNav themeColor="primary" flow="vertical">
27
+ <BottomNavItem icon="email" text="Normal" />
28
+ <BottomNavItem icon="email" text="Focused" focus />
29
+ <BottomNavItem icon="email" text="Selected" selected />
30
+ <BottomNavItem icon="email" text="Disabled" disabled />
31
+ </BottomNav>
44
32
  </section>
45
33
 
46
34
  <section>
47
35
  <span>Secondary ThemeColor</span>
48
- <nav className="k-bottom-nav k-bottom-nav-secondary k-bottom-nav-solid k-bottom-nav-item-flow-vertical">
49
- <span className="k-bottom-nav-item">
50
- <Icon className="k-bottom-nav-item-icon" name="email" />
51
- <span className="k-bottom-nav-item-text">Normal</span>
52
- </span>
53
- <span className="k-bottom-nav-item k-focus">
54
- <Icon className="k-bottom-nav-item-icon" name="email" />
55
- <span className="k-bottom-nav-item-text">Focused</span>
56
- </span>
57
- <span className="k-bottom-nav-item k-selected">
58
- <Icon className="k-bottom-nav-item-icon" name="email" />
59
- <span className="k-bottom-nav-item-text">Selected</span>
60
- </span>
61
- <span className="k-bottom-nav-item k-disabled">
62
- <Icon className="k-bottom-nav-item-icon" name="email" />
63
- <span className="k-bottom-nav-item-text">Disabled</span>
64
- </span>
65
- </nav>
36
+ <BottomNav themeColor="secondary" flow="vertical">
37
+ <BottomNavItem icon="email" text="Normal" />
38
+ <BottomNavItem icon="email" text="Focused" focus />
39
+ <BottomNavItem icon="email" text="Selected" selected />
40
+ <BottomNavItem icon="email" text="Disabled" disabled />
41
+ </BottomNav>
66
42
  </section>
67
43
 
68
44
  <section>
69
45
  <span>Tertiary ThemeColor</span>
70
- <nav className="k-bottom-nav k-bottom-nav-tertiary k-bottom-nav-solid k-bottom-nav-item-flow-vertical">
71
- <span className="k-bottom-nav-item">
72
- <Icon className="k-bottom-nav-item-icon" name="email" />
73
- <span className="k-bottom-nav-item-text">Normal</span>
74
- </span>
75
- <span className="k-bottom-nav-item k-focus">
76
- <Icon className="k-bottom-nav-item-icon" name="email" />
77
- <span className="k-bottom-nav-item-text">Focused</span>
78
- </span>
79
- <span className="k-bottom-nav-item k-selected">
80
- <Icon className="k-bottom-nav-item-icon" name="email" />
81
- <span className="k-bottom-nav-item-text">Selected</span>
82
- </span>
83
- <span className="k-bottom-nav-item k-disabled">
84
- <Icon className="k-bottom-nav-item-icon" name="email" />
85
- <span className="k-bottom-nav-item-text">Disabled</span>
86
- </span>
87
- </nav>
46
+ <BottomNav themeColor="tertiary" flow="vertical">
47
+ <BottomNavItem icon="email" text="Normal" />
48
+ <BottomNavItem icon="email" text="Focused" focus />
49
+ <BottomNavItem icon="email" text="Selected" selected />
50
+ <BottomNavItem icon="email" text="Disabled" disabled />
51
+ </BottomNav>
88
52
  </section>
89
53
 
90
54
  <section>
91
55
  <span>Info ThemeColor</span>
92
- <nav className="k-bottom-nav k-bottom-nav-info k-bottom-nav-solid k-bottom-nav-item-flow-vertical">
93
- <span className="k-bottom-nav-item">
94
- <Icon className="k-bottom-nav-item-icon" name="email" />
95
- <span className="k-bottom-nav-item-text">Normal</span>
96
- </span>
97
- <span className="k-bottom-nav-item k-focus">
98
- <Icon className="k-bottom-nav-item-icon" name="email" />
99
- <span className="k-bottom-nav-item-text">Focused</span>
100
- </span>
101
- <span className="k-bottom-nav-item k-selected">
102
- <Icon className="k-bottom-nav-item-icon" name="email" />
103
- <span className="k-bottom-nav-item-text">Selected</span>
104
- </span>
105
- <span className="k-bottom-nav-item k-disabled">
106
- <Icon className="k-bottom-nav-item-icon" name="email" />
107
- <span className="k-bottom-nav-item-text">Disabled</span>
108
- </span>
109
- </nav>
56
+ <BottomNav themeColor="info" flow="vertical">
57
+ <BottomNavItem icon="email" text="Normal" />
58
+ <BottomNavItem icon="email" text="Focused" focus />
59
+ <BottomNavItem icon="email" text="Selected" selected />
60
+ <BottomNavItem icon="email" text="Disabled" disabled />
61
+ </BottomNav>
110
62
  </section>
111
63
 
112
64
  <section>
113
65
  <span>Success ThemeColor</span>
114
- <nav className="k-bottom-nav k-bottom-nav-success k-bottom-nav-solid k-bottom-nav-item-flow-vertical">
115
- <span className="k-bottom-nav-item">
116
- <Icon className="k-bottom-nav-item-icon" name="email" />
117
- <span className="k-bottom-nav-item-text">Normal</span>
118
- </span>
119
- <span className="k-bottom-nav-item k-focus">
120
- <Icon className="k-bottom-nav-item-icon" name="email" />
121
- <span className="k-bottom-nav-item-text">Focused</span>
122
- </span>
123
- <span className="k-bottom-nav-item k-selected">
124
- <Icon className="k-bottom-nav-item-icon" name="email" />
125
- <span className="k-bottom-nav-item-text">Selected</span>
126
- </span>
127
- <span className="k-bottom-nav-item k-disabled">
128
- <Icon className="k-bottom-nav-item-icon" name="email" />
129
- <span className="k-bottom-nav-item-text">Disabled</span>
130
- </span>
131
- </nav>
66
+ <BottomNav themeColor="success" flow="vertical">
67
+ <BottomNavItem icon="email" text="Normal" />
68
+ <BottomNavItem icon="email" text="Focused" focus />
69
+ <BottomNavItem icon="email" text="Selected" selected />
70
+ <BottomNavItem icon="email" text="Disabled" disabled />
71
+ </BottomNav>
132
72
  </section>
133
73
 
134
74
  <section>
135
75
  <span>Warning ThemeColor</span>
136
- <nav className="k-bottom-nav k-bottom-nav-warning k-bottom-nav-solid k-bottom-nav-item-flow-vertical">
137
- <span className="k-bottom-nav-item">
138
- <Icon className="k-bottom-nav-item-icon" name="email" />
139
- <span className="k-bottom-nav-item-text">Normal</span>
140
- </span>
141
- <span className="k-bottom-nav-item k-focus">
142
- <Icon className="k-bottom-nav-item-icon" name="email" />
143
- <span className="k-bottom-nav-item-text">Focused</span>
144
- </span>
145
- <span className="k-bottom-nav-item k-selected">
146
- <Icon className="k-bottom-nav-item-icon" name="email" />
147
- <span className="k-bottom-nav-item-text">Selected</span>
148
- </span>
149
- <span className="k-bottom-nav-item k-disabled">
150
- <Icon className="k-bottom-nav-item-icon" name="email" />
151
- <span className="k-bottom-nav-item-text">Disabled</span>
152
- </span>
153
- </nav>
76
+ <BottomNav themeColor="warning" flow="vertical">
77
+ <BottomNavItem icon="email" text="Normal" />
78
+ <BottomNavItem icon="email" text="Focused" focus />
79
+ <BottomNavItem icon="email" text="Selected" selected />
80
+ <BottomNavItem icon="email" text="Disabled" disabled />
81
+ </BottomNav>
154
82
  </section>
155
83
 
156
84
  <section>
157
85
  <span>Error ThemeColor</span>
158
- <nav className="k-bottom-nav k-bottom-nav-error k-bottom-nav-solid k-bottom-nav-item-flow-vertical">
159
- <span className="k-bottom-nav-item">
160
- <Icon className="k-bottom-nav-item-icon" name="email" />
161
- <span className="k-bottom-nav-item-text">Normal</span>
162
- </span>
163
- <span className="k-bottom-nav-item k-focus">
164
- <Icon className="k-bottom-nav-item-icon" name="email" />
165
- <span className="k-bottom-nav-item-text">Focused</span>
166
- </span>
167
- <span className="k-bottom-nav-item k-selected">
168
- <Icon className="k-bottom-nav-item-icon" name="email" />
169
- <span className="k-bottom-nav-item-text">Selected</span>
170
- </span>
171
- <span className="k-bottom-nav-item k-disabled">
172
- <Icon className="k-bottom-nav-item-icon" name="email" />
173
- <span className="k-bottom-nav-item-text">Disabled</span>
174
- </span>
175
- </nav>
86
+ <BottomNav themeColor="error" flow="vertical">
87
+ <BottomNavItem icon="email" text="Normal" />
88
+ <BottomNavItem icon="email" text="Focused" focus />
89
+ <BottomNavItem icon="email" text="Selected" selected />
90
+ <BottomNavItem icon="email" text="Disabled" disabled />
91
+ </BottomNav>
176
92
  </section>
177
93
 
178
94
  <section>
179
95
  <span>Dark ThemeColor</span>
180
- <nav className="k-bottom-nav k-bottom-nav-dark k-bottom-nav-solid k-bottom-nav-item-flow-vertical">
181
- <span className="k-bottom-nav-item">
182
- <Icon className="k-bottom-nav-item-icon" name="email" />
183
- <span className="k-bottom-nav-item-text">Normal</span>
184
- </span>
185
- <span className="k-bottom-nav-item k-focus">
186
- <Icon className="k-bottom-nav-item-icon" name="email" />
187
- <span className="k-bottom-nav-item-text">Focused</span>
188
- </span>
189
- <span className="k-bottom-nav-item k-selected">
190
- <Icon className="k-bottom-nav-item-icon" name="email" />
191
- <span className="k-bottom-nav-item-text">Selected</span>
192
- </span>
193
- <span className="k-bottom-nav-item k-disabled">
194
- <Icon className="k-bottom-nav-item-icon" name="email" />
195
- <span className="k-bottom-nav-item-text">Disabled</span>
196
- </span>
197
- </nav>
96
+ <BottomNav themeColor="dark" flow="vertical">
97
+ <BottomNavItem icon="email" text="Normal" />
98
+ <BottomNavItem icon="email" text="Focused" focus />
99
+ <BottomNavItem icon="email" text="Selected" selected />
100
+ <BottomNavItem icon="email" text="Disabled" disabled />
101
+ </BottomNav>
198
102
  </section>
199
103
 
200
104
  <section>
201
105
  <span>Light ThemeColor</span>
202
- <nav className="k-bottom-nav k-bottom-nav-light k-bottom-nav-solid k-bottom-nav-item-flow-vertical">
203
- <span className="k-bottom-nav-item">
204
- <Icon className="k-bottom-nav-item-icon" name="email" />
205
- <span className="k-bottom-nav-item-text">Normal</span>
206
- </span>
207
- <span className="k-bottom-nav-item k-focus">
208
- <Icon className="k-bottom-nav-item-icon" name="email" />
209
- <span className="k-bottom-nav-item-text">Focused</span>
210
- </span>
211
- <span className="k-bottom-nav-item k-selected">
212
- <Icon className="k-bottom-nav-item-icon" name="email" />
213
- <span className="k-bottom-nav-item-text">Selected</span>
214
- </span>
215
- <span className="k-bottom-nav-item k-disabled">
216
- <Icon className="k-bottom-nav-item-icon" name="email" />
217
- <span className="k-bottom-nav-item-text">Disabled</span>
218
- </span>
219
- </nav>
106
+ <BottomNav themeColor="light" flow="vertical">
107
+ <BottomNavItem icon="email" text="Normal" />
108
+ <BottomNavItem icon="email" text="Focused" focus />
109
+ <BottomNavItem icon="email" text="Selected" selected />
110
+ <BottomNavItem icon="email" text="Disabled" disabled />
111
+ </BottomNav>
220
112
  </section>
221
113
  </div>
222
114
 
@@ -224,200 +116,92 @@ root.render(
224
116
  <div className="colors colors-flat k-d-grid k-grid-cols-2">
225
117
  <section>
226
118
  <span>Primary ThemeColor</span>
227
- <nav className="k-bottom-nav k-bottom-nav-primary k-bottom-nav-flat k-bottom-nav-border k-bottom-nav-item-flow-vertical">
228
- <span className="k-bottom-nav-item">
229
- <Icon className="k-bottom-nav-item-icon" name="email" />
230
- <span className="k-bottom-nav-item-text">Normal</span>
231
- </span>
232
- <span className="k-bottom-nav-item k-focus">
233
- <Icon className="k-bottom-nav-item-icon" name="email" />
234
- <span className="k-bottom-nav-item-text">Focused</span>
235
- </span>
236
- <span className="k-bottom-nav-item k-selected">
237
- <Icon className="k-bottom-nav-item-icon" name="email" />
238
- <span className="k-bottom-nav-item-text">Selected</span>
239
- </span>
240
- <span className="k-bottom-nav-item k-disabled">
241
- <Icon className="k-bottom-nav-item-icon" name="email" />
242
- <span className="k-bottom-nav-item-text">Disabled</span>
243
- </span>
244
- </nav>
119
+ <BottomNav fillMode="flat" themeColor="primary" border flow="vertical">
120
+ <BottomNavItem icon="email" text="Normal" />
121
+ <BottomNavItem icon="email" text="Focused" focus />
122
+ <BottomNavItem icon="email" text="Selected" selected />
123
+ <BottomNavItem icon="email" text="Disabled" disabled />
124
+ </BottomNav>
245
125
  </section>
246
126
 
247
127
  <section>
248
128
  <span>Secondary ThemeColor</span>
249
- <nav className="k-bottom-nav k-bottom-nav-secondary k-bottom-nav-flat k-bottom-nav-border k-bottom-nav-item-flow-vertical">
250
- <span className="k-bottom-nav-item">
251
- <Icon className="k-bottom-nav-item-icon" name="email" />
252
- <span className="k-bottom-nav-item-text">Normal</span>
253
- </span>
254
- <span className="k-bottom-nav-item k-focus">
255
- <Icon className="k-bottom-nav-item-icon" name="email" />
256
- <span className="k-bottom-nav-item-text">Focused</span>
257
- </span>
258
- <span className="k-bottom-nav-item k-selected">
259
- <Icon className="k-bottom-nav-item-icon" name="email" />
260
- <span className="k-bottom-nav-item-text">Selected</span>
261
- </span>
262
- <span className="k-bottom-nav-item k-disabled">
263
- <Icon className="k-bottom-nav-item-icon" name="email" />
264
- <span className="k-bottom-nav-item-text">Disabled</span>
265
- </span>
266
- </nav>
129
+ <BottomNav fillMode="flat" themeColor="secondary" border flow="vertical">
130
+ <BottomNavItem icon="email" text="Normal" />
131
+ <BottomNavItem icon="email" text="Focused" focus />
132
+ <BottomNavItem icon="email" text="Selected" selected />
133
+ <BottomNavItem icon="email" text="Disabled" disabled />
134
+ </BottomNav>
267
135
  </section>
268
136
 
269
137
  <section>
270
138
  <span>Tertiary ThemeColor</span>
271
- <nav className="k-bottom-nav k-bottom-nav-tertiary k-bottom-nav-flat k-bottom-nav-border k-bottom-nav-item-flow-vertical">
272
- <span className="k-bottom-nav-item">
273
- <Icon className="k-bottom-nav-item-icon" name="email" />
274
- <span className="k-bottom-nav-item-text">Normal</span>
275
- </span>
276
- <span className="k-bottom-nav-item k-focus">
277
- <Icon className="k-bottom-nav-item-icon" name="email" />
278
- <span className="k-bottom-nav-item-text">Focused</span>
279
- </span>
280
- <span className="k-bottom-nav-item k-selected">
281
- <Icon className="k-bottom-nav-item-icon" name="email" />
282
- <span className="k-bottom-nav-item-text">Selected</span>
283
- </span>
284
- <span className="k-bottom-nav-item k-disabled">
285
- <Icon className="k-bottom-nav-item-icon" name="email" />
286
- <span className="k-bottom-nav-item-text">Disabled</span>
287
- </span>
288
- </nav>
139
+ <BottomNav fillMode="flat" themeColor="tertiary" border flow="vertical">
140
+ <BottomNavItem icon="email" text="Normal" />
141
+ <BottomNavItem icon="email" text="Focused" focus />
142
+ <BottomNavItem icon="email" text="Selected" selected />
143
+ <BottomNavItem icon="email" text="Disabled" disabled />
144
+ </BottomNav>
289
145
  </section>
290
146
 
291
147
  <section>
292
148
  <span>Info ThemeColor</span>
293
- <nav className="k-bottom-nav k-bottom-nav-info k-bottom-nav-flat k-bottom-nav-border k-bottom-nav-item-flow-vertical">
294
- <span className="k-bottom-nav-item">
295
- <Icon className="k-bottom-nav-item-icon" name="email" />
296
- <span className="k-bottom-nav-item-text">Normal</span>
297
- </span>
298
- <span className="k-bottom-nav-item k-focus">
299
- <Icon className="k-bottom-nav-item-icon" name="email" />
300
- <span className="k-bottom-nav-item-text">Focused</span>
301
- </span>
302
- <span className="k-bottom-nav-item k-selected">
303
- <Icon className="k-bottom-nav-item-icon" name="email" />
304
- <span className="k-bottom-nav-item-text">Selected</span>
305
- </span>
306
- <span className="k-bottom-nav-item k-disabled">
307
- <Icon className="k-bottom-nav-item-icon" name="email" />
308
- <span className="k-bottom-nav-item-text">Disabled</span>
309
- </span>
310
- </nav>
149
+ <BottomNav fillMode="flat" themeColor="info" border flow="vertical">
150
+ <BottomNavItem icon="email" text="Normal" />
151
+ <BottomNavItem icon="email" text="Focused" focus />
152
+ <BottomNavItem icon="email" text="Selected" selected />
153
+ <BottomNavItem icon="email" text="Disabled" disabled />
154
+ </BottomNav>
311
155
  </section>
312
156
 
313
157
  <section>
314
158
  <span>Success ThemeColor</span>
315
- <nav className="k-bottom-nav k-bottom-nav-success k-bottom-nav-flat k-bottom-nav-border k-bottom-nav-item-flow-vertical">
316
- <span className="k-bottom-nav-item">
317
- <Icon className="k-bottom-nav-item-icon" name="email" />
318
- <span className="k-bottom-nav-item-text">Normal</span>
319
- </span>
320
- <span className="k-bottom-nav-item k-focus">
321
- <Icon className="k-bottom-nav-item-icon" name="email" />
322
- <span className="k-bottom-nav-item-text">Focused</span>
323
- </span>
324
- <span className="k-bottom-nav-item k-selected">
325
- <Icon className="k-bottom-nav-item-icon" name="email" />
326
- <span className="k-bottom-nav-item-text">Selected</span>
327
- </span>
328
- <span className="k-bottom-nav-item k-disabled">
329
- <Icon className="k-bottom-nav-item-icon" name="email" />
330
- <span className="k-bottom-nav-item-text">Disabled</span>
331
- </span>
332
- </nav>
159
+ <BottomNav fillMode="flat" themeColor="success" border flow="vertical">
160
+ <BottomNavItem icon="email" text="Normal" />
161
+ <BottomNavItem icon="email" text="Focused" focus />
162
+ <BottomNavItem icon="email" text="Selected" selected />
163
+ <BottomNavItem icon="email" text="Disabled" disabled />
164
+ </BottomNav>
333
165
  </section>
334
166
 
335
167
  <section>
336
168
  <span>Warning ThemeColor</span>
337
- <nav className="k-bottom-nav k-bottom-nav-warning k-bottom-nav-flat k-bottom-nav-border k-bottom-nav-item-flow-vertical">
338
- <span className="k-bottom-nav-item">
339
- <Icon className="k-bottom-nav-item-icon" name="email" />
340
- <span className="k-bottom-nav-item-text">Normal</span>
341
- </span>
342
- <span className="k-bottom-nav-item k-focus">
343
- <Icon className="k-bottom-nav-item-icon" name="email" />
344
- <span className="k-bottom-nav-item-text">Focused</span>
345
- </span>
346
- <span className="k-bottom-nav-item k-selected">
347
- <Icon className="k-bottom-nav-item-icon" name="email" />
348
- <span className="k-bottom-nav-item-text">Selected</span>
349
- </span>
350
- <span className="k-bottom-nav-item k-disabled">
351
- <Icon className="k-bottom-nav-item-icon" name="email" />
352
- <span className="k-bottom-nav-item-text">Disabled</span>
353
- </span>
354
- </nav>
169
+ <BottomNav fillMode="flat" themeColor="warning" border flow="vertical">
170
+ <BottomNavItem icon="email" text="Normal" />
171
+ <BottomNavItem icon="email" text="Focused" focus />
172
+ <BottomNavItem icon="email" text="Selected" selected />
173
+ <BottomNavItem icon="email" text="Disabled" disabled />
174
+ </BottomNav>
355
175
  </section>
356
176
 
357
177
  <section>
358
178
  <span>Error ThemeColor</span>
359
- <nav className="k-bottom-nav k-bottom-nav-error k-bottom-nav-flat k-bottom-nav-border k-bottom-nav-item-flow-vertical">
360
- <span className="k-bottom-nav-item">
361
- <Icon className="k-bottom-nav-item-icon" name="email" />
362
- <span className="k-bottom-nav-item-text">Normal</span>
363
- </span>
364
- <span className="k-bottom-nav-item k-focus">
365
- <Icon className="k-bottom-nav-item-icon" name="email" />
366
- <span className="k-bottom-nav-item-text">Focused</span>
367
- </span>
368
- <span className="k-bottom-nav-item k-selected">
369
- <Icon className="k-bottom-nav-item-icon" name="email" />
370
- <span className="k-bottom-nav-item-text">Selected</span>
371
- </span>
372
- <span className="k-bottom-nav-item k-disabled">
373
- <Icon className="k-bottom-nav-item-icon" name="email" />
374
- <span className="k-bottom-nav-item-text">Disabled</span>
375
- </span>
376
- </nav>
179
+ <BottomNav fillMode="flat" themeColor="error" border flow="vertical">
180
+ <BottomNavItem icon="email" text="Normal" />
181
+ <BottomNavItem icon="email" text="Focused" focus />
182
+ <BottomNavItem icon="email" text="Selected" selected />
183
+ <BottomNavItem icon="email" text="Disabled" disabled />
184
+ </BottomNav>
377
185
  </section>
378
186
 
379
187
  <section>
380
188
  <span>Dark ThemeColor</span>
381
- <nav className="k-bottom-nav k-bottom-nav-dark k-bottom-nav-flat k-bottom-nav-border k-bottom-nav-item-flow-vertical">
382
- <span className="k-bottom-nav-item">
383
- <Icon className="k-bottom-nav-item-icon" name="email" />
384
- <span className="k-bottom-nav-item-text">Normal</span>
385
- </span>
386
- <span className="k-bottom-nav-item k-focus">
387
- <Icon className="k-bottom-nav-item-icon" name="email" />
388
- <span className="k-bottom-nav-item-text">Focused</span>
389
- </span>
390
- <span className="k-bottom-nav-item k-selected">
391
- <Icon className="k-bottom-nav-item-icon" name="email" />
392
- <span className="k-bottom-nav-item-text">Selected</span>
393
- </span>
394
- <span className="k-bottom-nav-item k-disabled">
395
- <Icon className="k-bottom-nav-item-icon" name="email" />
396
- <span className="k-bottom-nav-item-text">Disabled</span>
397
- </span>
398
- </nav>
189
+ <BottomNav fillMode="flat" themeColor="dark" border flow="vertical">
190
+ <BottomNavItem icon="email" text="Normal" />
191
+ <BottomNavItem icon="email" text="Focused" focus />
192
+ <BottomNavItem icon="email" text="Selected" selected />
193
+ <BottomNavItem icon="email" text="Disabled" disabled />
194
+ </BottomNav>
399
195
  </section>
400
196
 
401
197
  <section>
402
198
  <span>Light ThemeColor</span>
403
- <nav className="k-bottom-nav k-bottom-nav-light k-bottom-nav-flat k-bottom-nav-border k-bottom-nav-item-flow-vertical">
404
- <span className="k-bottom-nav-item">
405
- <Icon className="k-bottom-nav-item-icon" name="email" />
406
- <span className="k-bottom-nav-item-text">Normal</span>
407
- </span>
408
- <span className="k-bottom-nav-item k-focus">
409
- <Icon className="k-bottom-nav-item-icon" name="email" />
410
- <span className="k-bottom-nav-item-text">Focused</span>
411
- </span>
412
- <span className="k-bottom-nav-item k-selected">
413
- <Icon className="k-bottom-nav-item-icon" name="email" />
414
- <span className="k-bottom-nav-item-text">Selected</span>
415
- </span>
416
- <span className="k-bottom-nav-item k-disabled">
417
- <Icon className="k-bottom-nav-item-icon" name="email" />
418
- <span className="k-bottom-nav-item-text">Disabled</span>
419
- </span>
420
- </nav>
199
+ <BottomNav fillMode="flat" themeColor="light" border flow="vertical">
200
+ <BottomNavItem icon="email" text="Normal" />
201
+ <BottomNavItem icon="email" text="Focused" focus />
202
+ <BottomNavItem icon="email" text="Selected" selected />
203
+ <BottomNavItem icon="email" text="Disabled" disabled />
204
+ </BottomNav>
421
205
  </section>
422
206
  </div>
423
207
  </div>
package/src/bottom-nav/tests/bottom-nav-items.tsx CHANGED
@@ -1,5 +1,7 @@
1
1
  import ReactDOM from 'react-dom/client';
2
2
  import { Icon } from '../../icon';
3
+ import { BottomNav, BottomNavItem } from '../../bottom-nav';
4
+
3
5
 
4
6
  const root = ReactDOM.createRoot(
5
7
  document.getElementById('app') as HTMLElement
@@ -18,29 +20,17 @@ root.render(
18
20
 
19
21
  <section>
20
22
  <h4>Bottom Navigation with SPAN</h4>
21
- <nav className="k-bottom-nav k-bottom-nav-primary k-bottom-nav-flat k-bottom-nav-border k-bottom-nav-item-flow-vertical">
22
- <span className="k-bottom-nav-item">
23
- <Icon className="k-bottom-nav-item-icon" name="email" />
24
- <span className="k-bottom-nav-item-text">Normal</span>
25
- </span>
26
- <span className="k-bottom-nav-item k-focus">
27
- <Icon className="k-bottom-nav-item-icon" name="email" />
28
- <span className="k-bottom-nav-item-text">Focused</span>
29
- </span>
30
- <span className="k-bottom-nav-item k-selected">
31
- <Icon className="k-bottom-nav-item-icon" name="email" />
32
- <span className="k-bottom-nav-item-text">Selected</span>
33
- </span>
34
- <span className="k-bottom-nav-item k-disabled">
35
- <Icon className="k-bottom-nav-item-icon" name="email" />
36
- <span className="k-bottom-nav-item-text">Disabled</span>
37
- </span>
38
- </nav>
23
+ <BottomNav fillMode="flat" themeColor="primary" border flow="vertical">
24
+ <BottomNavItem icon="email" text="Normal" />
25
+ <BottomNavItem icon="email" text="Focused" focus />
26
+ <BottomNavItem icon="email" text="Selected" selected />
27
+ <BottomNavItem icon="email" text="Disabled" disabled />
28
+ </BottomNav>
39
29
  </section>
40
30
 
41
31
  <section>
42
32
  <h4>Bottom Navigation with BUTTON</h4>
43
- <nav className="k-bottom-nav k-bottom-nav-primary k-bottom-nav-flat k-bottom-nav-border k-bottom-nav-item-flow-vertical">
33
+ <BottomNav fillMode="flat" themeColor="primary" border flow="vertical">
44
34
  <button className="k-bottom-nav-item">
45
35
  <Icon className="k-bottom-nav-item-icon" name="email" />
46
36
  <span className="k-bottom-nav-item-text">Normal</span>
@@ -57,12 +47,12 @@ root.render(
57
47
  <Icon className="k-bottom-nav-item-icon" name="email" />
58
48
  <span className="k-bottom-nav-item-text">Disabled</span>
59
49
  </button>
60
- </nav>
50
+ </BottomNav>
61
51
  </section>
62
52
 
63
53
  <section>
64
54
  <h4>Bottom Navigation with A</h4>
65
- <nav className="k-bottom-nav k-bottom-nav-primary k-bottom-nav-flat k-bottom-nav-border k-bottom-nav-item-flow-vertical">
55
+ <BottomNav fillMode="flat" themeColor="primary" border flow="vertical">
66
56
  <a className="k-bottom-nav-item">
67
57
  <Icon className="k-bottom-nav-item-icon" name="email" />
68
58
  <span className="k-bottom-nav-item-text">Normal</span>
@@ -79,7 +69,7 @@ root.render(
79
69
  <Icon className="k-bottom-nav-item-icon" name="email" />
80
70
  <span className="k-bottom-nav-item-text">Disabled</span>
81
71
  </a>
82
- </nav>
72
+ </BottomNav>
83
73
  </section>
84
74
  </div>
85
75
  </>