@universal-material/web 3.0.9 → 3.0.11

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 (364) hide show
  1. package/button/button-base.d.ts +43 -0
  2. package/button/button-base.d.ts.map +1 -0
  3. package/button/button-base.js +152 -0
  4. package/button/button-base.js.map +1 -0
  5. package/button/button-base.styles.d.ts +2 -0
  6. package/button/button-base.styles.d.ts.map +1 -0
  7. package/button/button-base.styles.js +75 -0
  8. package/button/button-base.styles.js.map +1 -0
  9. package/button/button-set.d.ts +20 -0
  10. package/button/button-set.d.ts.map +1 -0
  11. package/button/button-set.js +38 -0
  12. package/button/button-set.js.map +1 -0
  13. package/button/button-set.styles.d.ts +2 -0
  14. package/button/button-set.styles.d.ts.map +1 -0
  15. package/button/button-set.styles.js +39 -0
  16. package/button/button-set.styles.js.map +1 -0
  17. package/button/button.d.ts +34 -0
  18. package/button/button.d.ts.map +1 -0
  19. package/button/button.js +64 -0
  20. package/button/button.js.map +1 -0
  21. package/button/button.styles.d.ts +2 -0
  22. package/button/button.styles.d.ts.map +1 -0
  23. package/button/button.styles.js +96 -0
  24. package/button/button.styles.js.map +1 -0
  25. package/button/fab.d.ts +31 -0
  26. package/button/fab.d.ts.map +1 -0
  27. package/button/fab.js +63 -0
  28. package/button/fab.js.map +1 -0
  29. package/button/fab.styles.d.ts +2 -0
  30. package/button/fab.styles.d.ts.map +1 -0
  31. package/button/fab.styles.js +89 -0
  32. package/button/fab.styles.js.map +1 -0
  33. package/button/icon-button.d.ts +35 -0
  34. package/button/icon-button.d.ts.map +1 -0
  35. package/button/icon-button.js +79 -0
  36. package/button/icon-button.js.map +1 -0
  37. package/button/icon-button.styles.d.ts +2 -0
  38. package/button/icon-button.styles.d.ts.map +1 -0
  39. package/button/icon-button.styles.js +70 -0
  40. package/button/icon-button.styles.js.map +1 -0
  41. package/card/card-content.d.ts +13 -0
  42. package/card/card-content.d.ts.map +1 -0
  43. package/card/card-content.js +44 -0
  44. package/card/card-content.js.map +1 -0
  45. package/card/card-content.styles.d.ts +2 -0
  46. package/card/card-content.styles.d.ts.map +1 -0
  47. package/card/card-content.styles.js +15 -0
  48. package/card/card-content.styles.js.map +1 -0
  49. package/card/card-media.d.ts +12 -0
  50. package/card/card-media.d.ts.map +1 -0
  51. package/card/card-media.js +29 -0
  52. package/card/card-media.js.map +1 -0
  53. package/card/card-media.styles.d.ts +2 -0
  54. package/card/card-media.styles.d.ts.map +1 -0
  55. package/card/card-media.styles.js +13 -0
  56. package/card/card-media.styles.js.map +1 -0
  57. package/card/card.d.ts +19 -0
  58. package/card/card.d.ts.map +1 -0
  59. package/card/card.js +40 -0
  60. package/card/card.js.map +1 -0
  61. package/card/card.styles.d.ts +2 -0
  62. package/card/card.styles.d.ts.map +1 -0
  63. package/card/card.styles.js +28 -0
  64. package/card/card.styles.js.map +1 -0
  65. package/checkbox/checkbox.d.ts +16 -0
  66. package/checkbox/checkbox.d.ts.map +1 -0
  67. package/checkbox/checkbox.js +75 -0
  68. package/checkbox/checkbox.js.map +1 -0
  69. package/container/container.d.ts +13 -0
  70. package/container/container.d.ts.map +1 -0
  71. package/container/container.js +23 -0
  72. package/container/container.js.map +1 -0
  73. package/container/container.styles.d.ts +2 -0
  74. package/container/container.styles.d.ts.map +1 -0
  75. package/container/container.styles.js +43 -0
  76. package/container/container.styles.js.map +1 -0
  77. package/custom-elements.json +3706 -0
  78. package/divider/divider.d.ts +14 -0
  79. package/divider/divider.d.ts.map +1 -0
  80. package/divider/divider.js +27 -0
  81. package/divider/divider.js.map +1 -0
  82. package/divider/divider.styles.d.ts +2 -0
  83. package/divider/divider.styles.d.ts.map +1 -0
  84. package/divider/divider.styles.js +15 -0
  85. package/divider/divider.styles.js.map +1 -0
  86. package/elevation/elevation.d.ts +11 -0
  87. package/elevation/elevation.d.ts.map +1 -0
  88. package/elevation/elevation.js +21 -0
  89. package/elevation/elevation.js.map +1 -0
  90. package/elevation/elevation.styles.d.ts +2 -0
  91. package/elevation/elevation.styles.d.ts.map +1 -0
  92. package/elevation/elevation.styles.js +28 -0
  93. package/elevation/elevation.styles.js.map +1 -0
  94. package/index.d.ts +27 -0
  95. package/index.d.ts.map +1 -0
  96. package/{src/index.ts → index.js} +1 -1
  97. package/index.js.map +1 -0
  98. package/package.json +1 -1
  99. package/ripple/ripple.d.ts +25 -0
  100. package/ripple/ripple.d.ts.map +1 -0
  101. package/ripple/ripple.js +119 -0
  102. package/ripple/ripple.js.map +1 -0
  103. package/ripple/ripple.styles.d.ts +2 -0
  104. package/ripple/ripple.styles.d.ts.map +1 -0
  105. package/ripple/ripple.styles.js +74 -0
  106. package/ripple/ripple.styles.js.map +1 -0
  107. package/shared/base.styles.d.ts +2 -0
  108. package/shared/base.styles.d.ts.map +1 -0
  109. package/shared/base.styles.js +9 -0
  110. package/shared/base.styles.js.map +1 -0
  111. package/table/table-body.d.ts +11 -0
  112. package/table/table-body.d.ts.map +1 -0
  113. package/table/table-body.js +21 -0
  114. package/table/table-body.js.map +1 -0
  115. package/table/table-body.styles.d.ts +2 -0
  116. package/table/table-body.styles.d.ts.map +1 -0
  117. package/table/table-body.styles.js +11 -0
  118. package/table/table-body.styles.js.map +1 -0
  119. package/table/table-cell.d.ts +11 -0
  120. package/table/table-cell.d.ts.map +1 -0
  121. package/table/table-cell.js +21 -0
  122. package/table/table-cell.js.map +1 -0
  123. package/table/table-cell.styles.d.ts +2 -0
  124. package/table/table-cell.styles.d.ts.map +1 -0
  125. package/table/table-cell.styles.js +11 -0
  126. package/table/table-cell.styles.js.map +1 -0
  127. package/table/table-head.d.ts +11 -0
  128. package/table/table-head.d.ts.map +1 -0
  129. package/table/table-head.js +21 -0
  130. package/table/table-head.js.map +1 -0
  131. package/table/table-head.styles.d.ts +2 -0
  132. package/table/table-head.styles.d.ts.map +1 -0
  133. package/table/table-head.styles.js +11 -0
  134. package/table/table-head.styles.js.map +1 -0
  135. package/table/table-header-cell.d.ts +11 -0
  136. package/table/table-header-cell.d.ts.map +1 -0
  137. package/table/table-header-cell.js +21 -0
  138. package/table/table-header-cell.js.map +1 -0
  139. package/table/table-header-cell.styles.d.ts +2 -0
  140. package/table/table-header-cell.styles.d.ts.map +1 -0
  141. package/table/table-header-cell.styles.js +12 -0
  142. package/table/table-header-cell.styles.js.map +1 -0
  143. package/table/table-row.d.ts +11 -0
  144. package/table/table-row.d.ts.map +1 -0
  145. package/table/table-row.js +21 -0
  146. package/table/table-row.js.map +1 -0
  147. package/table/table-row.styles.d.ts +2 -0
  148. package/table/table-row.styles.d.ts.map +1 -0
  149. package/table/table-row.styles.js +7 -0
  150. package/table/table-row.styles.js.map +1 -0
  151. package/table/table.d.ts +16 -0
  152. package/table/table.d.ts.map +1 -0
  153. package/{src/table/table.ts → table/table.js} +6 -15
  154. package/table/table.js.map +1 -0
  155. package/table/table.styles.d.ts +2 -0
  156. package/table/table.styles.d.ts.map +1 -0
  157. package/table/table.styles.js +16 -0
  158. package/table/table.styles.js.map +1 -0
  159. package/theme/color.d.ts +7 -0
  160. package/theme/color.d.ts.map +1 -0
  161. package/theme/color.js +2 -0
  162. package/theme/color.js.map +1 -0
  163. package/theme/css-var-builder.d.ts +9 -0
  164. package/theme/css-var-builder.d.ts.map +1 -0
  165. package/theme/css-var-builder.js +25 -0
  166. package/theme/css-var-builder.js.map +1 -0
  167. package/theme/index.d.ts +2 -0
  168. package/theme/index.d.ts.map +1 -0
  169. package/{src/theme/index.ts → theme/index.js} +1 -0
  170. package/theme/index.js.map +1 -0
  171. package/theme/neutral-colors.d.ts +4 -0
  172. package/theme/neutral-colors.d.ts.map +1 -0
  173. package/theme/neutral-colors.js +19 -0
  174. package/theme/neutral-colors.js.map +1 -0
  175. package/theme/rgb-color.d.ts +9 -0
  176. package/theme/rgb-color.d.ts.map +1 -0
  177. package/theme/rgb-color.js +13 -0
  178. package/theme/rgb-color.js.map +1 -0
  179. package/theme/theme-builder.d.ts +27 -0
  180. package/theme/theme-builder.d.ts.map +1 -0
  181. package/theme/theme-builder.js +146 -0
  182. package/theme/theme-builder.js.map +1 -0
  183. package/{src/theme/theme-color.ts → theme/theme-color.d.ts} +2 -3
  184. package/theme/theme-color.d.ts.map +1 -0
  185. package/theme/theme-color.js +2 -0
  186. package/theme/theme-color.js.map +1 -0
  187. package/.editorconfig +0 -8
  188. package/.eleventy.cjs +0 -21
  189. package/.eslintignore +0 -6
  190. package/.eslintrc.json +0 -98
  191. package/.prettierrc.json +0 -7
  192. package/.vscode/extensions.json +0 -9
  193. package/CHANGELOG.md +0 -98
  194. package/LICENSE +0 -28
  195. package/docs/.nojekyll +0 -0
  196. package/docs/api/index.html +0 -149
  197. package/docs/docs.css +0 -185
  198. package/docs/examples/index.html +0 -75
  199. package/docs/examples/name-property/index.html +0 -65
  200. package/docs/index.html +0 -75
  201. package/docs/install/index.html +0 -53
  202. package/docs/prism-okaidia.css +0 -123
  203. package/docs/src/_api-section.pug +0 -27
  204. package/docs/src/_layout.pug +0 -182
  205. package/docs/src/components/button-set/alignment.html +0 -29
  206. package/docs/src/components/button-set/stack.html +0 -5
  207. package/docs/src/components/button-set/usage.html +0 -35
  208. package/docs/src/components/button-set.pug +0 -16
  209. package/docs/src/components/cards/card-media.html +0 -39
  210. package/docs/src/components/cards/card-with-actions.html +0 -38
  211. package/docs/src/components/cards/simple-card.html +0 -3
  212. package/docs/src/components/cards.pug +0 -15
  213. package/docs/src/components/checkbox/usage.html +0 -33
  214. package/docs/src/components/checkbox.pug +0 -7
  215. package/docs/src/components/chips/chip-input.html +0 -73
  216. package/docs/src/components/chips/default-chips.html +0 -25
  217. package/docs/src/components/chips/elevated-chips.html +0 -25
  218. package/docs/src/components/chips/selected-chips.html +0 -50
  219. package/docs/src/components/chips.pug +0 -16
  220. package/docs/src/components/common-buttons/anchor-buttons.html +0 -6
  221. package/docs/src/components/common-buttons/buttons-icons.html +0 -24
  222. package/docs/src/components/common-buttons/buttons-trailing-icons.html +0 -25
  223. package/docs/src/components/common-buttons/buttons-variants.html +0 -6
  224. package/docs/src/components/common-buttons/filled-colors.html +0 -4
  225. package/docs/src/components/common-buttons.pug +0 -22
  226. package/docs/src/components/data-tables/simple-table.html +0 -47
  227. package/docs/src/components/data-tables/table-footer.html +0 -59
  228. package/docs/src/components/data-tables/table-header.html +0 -43
  229. package/docs/src/components/data-tables.pug +0 -15
  230. package/docs/src/components/datepicker.pug +0 -133
  231. package/docs/src/components/dialogs/example.html +0 -44
  232. package/docs/src/components/dialogs.pug +0 -19
  233. package/docs/src/components/dividers/no-margin.html +0 -7
  234. package/docs/src/components/dividers/usage.html +0 -7
  235. package/docs/src/components/dividers.pug +0 -13
  236. package/docs/src/components/dropdown-menus/down-end.html +0 -10
  237. package/docs/src/components/dropdown-menus/down-left.html +0 -10
  238. package/docs/src/components/dropdown-menus/down-right.html +0 -10
  239. package/docs/src/components/dropdown-menus/down-start.html +0 -10
  240. package/docs/src/components/dropdown-menus/down.html +0 -10
  241. package/docs/src/components/dropdown-menus/up-end.html +0 -10
  242. package/docs/src/components/dropdown-menus/up-left.html +0 -10
  243. package/docs/src/components/dropdown-menus/up-right.html +0 -10
  244. package/docs/src/components/dropdown-menus/up-start.html +0 -10
  245. package/docs/src/components/dropdown-menus/up.html +0 -10
  246. package/docs/src/components/expansion-panel.pug +0 -33
  247. package/docs/src/components/fab/button-colors.html +0 -18
  248. package/docs/src/components/fab/button-sizes.html +0 -11
  249. package/docs/src/components/fab/extended-buttons.html +0 -18
  250. package/docs/src/components/fab/floating-action-area.html +0 -5
  251. package/docs/src/components/fab/floating-menu.html +0 -10
  252. package/docs/src/components/fab/lowered-buttons.html +0 -6
  253. package/docs/src/components/fab.pug +0 -25
  254. package/docs/src/components/icon-buttons/anchor-buttons.html +0 -15
  255. package/docs/src/components/icon-buttons/buttons-variants.html +0 -15
  256. package/docs/src/components/icon-buttons/toggle-buttons-manual.html +0 -44
  257. package/docs/src/components/icon-buttons/toggle-buttons.html +0 -48
  258. package/docs/src/components/icon-buttons.pug +0 -18
  259. package/docs/src/components/lists/list-avatars.html +0 -14
  260. package/docs/src/components/lists/list-custom-dividers.html +0 -23
  261. package/docs/src/components/lists/list-dividers.html +0 -17
  262. package/docs/src/components/lists/list-dynamic.html +0 -26
  263. package/docs/src/components/lists/list-hover.html +0 -17
  264. package/docs/src/components/lists/list-icons.html +0 -17
  265. package/docs/src/components/lists/list-indexed.html +0 -123
  266. package/docs/src/components/lists/list-sections.html +0 -16
  267. package/docs/src/components/lists/list-three-lines.html +0 -20
  268. package/docs/src/components/lists/list-two-lines.html +0 -20
  269. package/docs/src/components/lists/list-with-action.html +0 -26
  270. package/docs/src/components/lists/list-with-activated-item.html +0 -17
  271. package/docs/src/components/lists/simple-list.html +0 -17
  272. package/docs/src/components/lists.pug +0 -94
  273. package/docs/src/components/menus.pug +0 -55
  274. package/docs/src/components/progress/circular-progress.html +0 -13
  275. package/docs/src/components/progress/determinate-progress.html +0 -3
  276. package/docs/src/components/progress/indeterminate-progress.html +0 -3
  277. package/docs/src/components/progress/progress-color.html +0 -3
  278. package/docs/src/components/progress.pug +0 -18
  279. package/docs/src/components/ripple/usage.html +0 -9
  280. package/docs/src/components/ripple.pug +0 -10
  281. package/docs/src/components/selection-controls/checkbox.html +0 -22
  282. package/docs/src/components/selection-controls/radio-button.html +0 -36
  283. package/docs/src/components/selection-controls/switch.html +0 -12
  284. package/docs/src/components/selection-controls.pug +0 -13
  285. package/docs/src/components/sliders/example.html +0 -42
  286. package/docs/src/components/sliders.pug +0 -7
  287. package/docs/src/components/snackbar/example.html +0 -35
  288. package/docs/src/components/snackbars.pug +0 -21
  289. package/docs/src/components/steppers.pug +0 -57
  290. package/docs/src/components/tabs/example.html +0 -45
  291. package/docs/src/components/tabs.pug +0 -8
  292. package/docs/src/components/text-fields.pug +0 -88
  293. package/docs/src/components/toolbars/simple-toolbar.html +0 -33
  294. package/docs/src/components/toolbars.pug +0 -7
  295. package/docs/src/content/typography/example.html +0 -15
  296. package/docs/src/content/typography.pug +0 -8
  297. package/docs/src/css/docs.scss +0 -189
  298. package/docs/src/index.pug +0 -10
  299. package/docs/src/js/docs.js +0 -161
  300. package/docs/src/js/universal-material.js +0 -757
  301. package/docs/src/js/universal-material.js.map +0 -1
  302. package/docs/src/js/universal-material.min.js +0 -17
  303. package/docs/src/js/universal-material.min.js.map +0 -1
  304. package/docs/src/layout/grid.pug +0 -15
  305. package/docs/src/utilities/background-colors/common-colors.html +0 -7
  306. package/docs/src/utilities/background-colors/theme-colors.html +0 -16
  307. package/docs/src/utilities/background-colors.pug +0 -10
  308. package/docs/src/utilities/text-and-background-colors/common-colors.html +0 -80
  309. package/docs/src/utilities/text-and-background-colors/theme-colors.html +0 -208
  310. package/docs/src/utilities/text-and-background-colors.pug +0 -10
  311. package/docs/src/utilities/text-colors/common-colors.html +0 -12
  312. package/docs/src/utilities/text-colors/emphasis-colors.html +0 -26
  313. package/docs/src/utilities/text-colors/theme-colors.html +0 -37
  314. package/docs/src/utilities/text-colors.pug +0 -13
  315. package/gulpfile.js +0 -225
  316. package/index.html +0 -11
  317. package/rollup.config.js +0 -42
  318. package/src/_utils.scss +0 -20
  319. package/src/_variables.scss +0 -68
  320. package/src/button/button-base.styles.scss +0 -75
  321. package/src/button/button-base.ts +0 -147
  322. package/src/button/button-set.styles.scss +0 -35
  323. package/src/button/button-set.ts +0 -33
  324. package/src/button/button.styles.scss +0 -97
  325. package/src/button/button.ts +0 -64
  326. package/src/button/fab.styles.scss +0 -90
  327. package/src/button/fab.ts +0 -55
  328. package/src/button/icon-button.styles.scss +0 -74
  329. package/src/button/icon-button.ts +0 -72
  330. package/src/card/card-content.styles.scss +0 -11
  331. package/src/card/card-content.ts +0 -45
  332. package/src/card/card-media.styles.scss +0 -9
  333. package/src/card/card-media.ts +0 -24
  334. package/src/card/card.styles.scss +0 -27
  335. package/src/card/card.ts +0 -37
  336. package/src/checkbox/checkbox.ts +0 -77
  337. package/src/container/container.styles.scss +0 -39
  338. package/src/container/container.ts +0 -24
  339. package/src/divider/divider.styles.scss +0 -13
  340. package/src/divider/divider.ts +0 -21
  341. package/src/elevation/elevation.styles.scss +0 -31
  342. package/src/elevation/elevation.ts +0 -17
  343. package/src/ripple/ripple.styles.scss +0 -80
  344. package/src/ripple/ripple.ts +0 -150
  345. package/src/shared/base.styles.scss +0 -5
  346. package/src/table/table-body.styles.scss +0 -9
  347. package/src/table/table-body.ts +0 -21
  348. package/src/table/table-cell.styles.scss +0 -9
  349. package/src/table/table-cell.ts +0 -21
  350. package/src/table/table-head.styles.scss +0 -9
  351. package/src/table/table-head.ts +0 -21
  352. package/src/table/table-header-cell.styles.scss +0 -10
  353. package/src/table/table-header-cell.ts +0 -21
  354. package/src/table/table-row.styles.scss +0 -3
  355. package/src/table/table-row.ts +0 -21
  356. package/src/table/table.styles.scss +0 -12
  357. package/src/theme/color.ts +0 -6
  358. package/src/theme/css-var-builder.ts +0 -36
  359. package/src/theme/neutral-colors.ts +0 -21
  360. package/src/theme/rgb-color.ts +0 -19
  361. package/src/theme/theme-builder.ts +0 -201
  362. package/tsconfig.json +0 -36
  363. package/web-dev-server.config.js +0 -25
  364. package/web-test-runner.config.js +0 -120
@@ -1,182 +0,0 @@
1
- include _apis
2
- include _api-section
3
-
4
- mixin renderTitle(title)
5
- h4.u-display-m.chapter-title #{title}
6
-
7
- mixin renderSection(title)
8
- h5.u-headline-m.article-title #{title}
9
- u-card.example-card(variant="outlined")
10
- block
11
-
12
- doctype html
13
- html
14
- head
15
- meta(charset='utf-8')
16
- meta(http-equiv='X-UA-Compatible', content='IE=edge')
17
- meta(name='mobile-web-app-capable', content='yes')
18
- meta(name='viewport', content='width=device-width, initial-scale=1')
19
- meta(name='description', content='')
20
- meta(name='author', content='')
21
- base(href="/")
22
-
23
- title Universal Material
24
-
25
- link(rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/base16/atelier-sulphurpool-light.min.css")
26
-
27
- link(rel="preconnect" href="https://fonts.googleapis.com")
28
- link(rel="preconnect" href="https://fonts.gstatic.com" crossorigin)
29
- link(rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap")
30
-
31
- link(rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@6.9.96/css/materialdesignicons.min.css")
32
- link(rel="stylesheet" href="css/docs.css")
33
-
34
- body.u-android
35
- .u-drawer.u-drawer-lg-dismissible
36
- aside.u-drawer-content.u-navigation-drawer
37
- .u-drawer-scrollable-container
38
- h6.u-navigation-drawer-headline.u-headline-s Material Design
39
-
40
- nav.u-list.u-list-selectable
41
- a.u-list-item(href="")
42
- .u-list-item-content
43
- | Introduction
44
-
45
- //a.u-list-item(href="layout/grid.html")
46
- .u-list-item-content
47
- span Grid
48
-
49
- //a.u-list-item(href="content/typography.html")
50
- .u-list-item-content
51
- span Typography
52
-
53
- //.u-list-item
54
- .u-list-item-content
55
- span Colors
56
- .u-list-item-icon.mdi.mdi-chevron-down
57
-
58
- //.nested-menu-items
59
- a.u-list-item(href="utilities/text-colors.html")
60
- .u-list-item-content
61
- span Text
62
- a.u-list-item(href="utilities/background-colors.html")
63
- .u-list-item-content
64
- span Background
65
- a.u-list-item(href="utilities/text-and-background-colors.html")
66
- .u-list-item-content
67
- span Text and background
68
-
69
- .u-list-item
70
- .u-list-item-content
71
- span Buttons
72
- .u-list-item-icon.mdi.mdi-chevron-down
73
-
74
- .nested-menu-items
75
- a.u-list-item(href="components/common-buttons.html")
76
- .u-list-item-content
77
- span Common buttons
78
- a.u-list-item(href="components/fab.html")
79
- .u-list-item-content
80
- span Floating Action Button (FAB)
81
- a.u-list-item(href="components/icon-buttons.html")
82
- .u-list-item-content
83
- span Icon buttons
84
- a.u-list-item(href="components/button-set.html")
85
- .u-list-item-content
86
- span Button set
87
-
88
- a.u-list-item(href="components/cards.html")
89
- .u-list-item-content
90
- span Cards
91
-
92
- //a.u-list-item(href="components/checkbox.html")
93
- .u-list-item-content
94
- span Checkbox
95
-
96
- //a.u-list-item(href="components/chips.html")
97
- .u-list-item-content
98
- span Chips
99
-
100
- a.u-list-item(href="components/data-tables.html")
101
- .u-list-item-content
102
- span Data tables
103
-
104
- //a.u-list-item(href="components/dialogs.html")
105
- .u-list-item-content
106
- span Dialogs
107
-
108
- a.u-list-item(href="components/dividers.html")
109
- .u-list-item-content
110
- span Dividers
111
-
112
- //a.u-list-item(href="components/lists.html")
113
- .u-list-item-content
114
- span Lists
115
-
116
- //a.u-list-item(href="components/menus.html")
117
- .u-list-item-content
118
- span Menus
119
-
120
- //a.u-list-item(href="components/progress.html")
121
- .u-list-item-content
122
- span Progress
123
-
124
- a.u-list-item(href="components/ripple.html")
125
- .u-list-item-content
126
- span Ripple
127
-
128
- //a.u-list-item(href="components/selection-controls.html")
129
- .u-list-item-content
130
- span Selection controls
131
-
132
- //a.u-list-item(href="components/sliders.html")
133
- .u-list-item-content
134
- span Sliders
135
-
136
- //a.u-list-item(href="components/snackbars.html")
137
- .u-list-item-content
138
- span Snackbars
139
-
140
- //a.u-list-item(href="components/tabs.html")
141
- .u-list-item-content
142
- span Tabs
143
-
144
- //a.u-list-item(href="components/text-fields.html")
145
- .u-list-item-content
146
- span Text fields
147
-
148
- //a.u-list-item(href="components/toolbars.html")
149
- .u-list-item-content
150
- span Toolbars
151
-
152
- .u-drawer-backdrop.d-lg-none
153
- .u-toolbar.u-toolbar-fixed#app-bar
154
- .u-toolbar-row
155
- .u-toolbar-start
156
- .u-toolbar-actions
157
- button.u-toolbar-action.u-icon-btn(type="button")#menu-toggle
158
- i.u-btn-icon.mdi.mdi-menu
159
- .u-toolbar-center
160
- .u-toolbar-title Material
161
- .u-toolbar-end
162
- .u-toolbar-actions
163
- span.u-dropdown.u-toolbar-action
164
- button.u-icon-btn.u-dropdown-toggle
165
- i.u-btn-icon.mdi.mdi-theme-light-dark
166
- .u-dropdown-menu.down-start
167
- .u-dropdown-content
168
- button.u-dropdown-item(href='#', onclick="setThemeMode(ThemeMode.Auto)") System
169
- button.u-dropdown-item(href='#', onclick="setThemeMode(ThemeMode.Light)") Light
170
- button.u-dropdown-item(href='#', onclick="setThemeMode(ThemeMode.Dark)") Dark
171
-
172
- a.u-toolbar-action.u-icon-btn(href="/angular", title="Universal Material Angular")
173
- i.u-btn-icon.mdi.mdi-angular
174
- button.u-toolbar-action.u-icon-btn#rtl-toggle(type="button", title="Rtl")
175
- i.u-btn-icon.mdi.mdi-format-align-right
176
-
177
- u-container.chapter#main-content
178
- block content
179
-
180
- script(src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js')
181
- script(src="js/docs.js" type="module")
182
- block scripts
@@ -1,29 +0,0 @@
1
- <u-button-set>
2
- <u-button variant="outlined">Cancel</u-button>
3
- <u-button>Ok</u-button>
4
- </u-button-set>
5
-
6
- <u-button-set align="center">
7
- <u-button variant="outlined">Cancel</u-button>
8
- <u-button>Ok</u-button>
9
- </u-button-set>
10
-
11
- <u-button-set align="start">
12
- <u-button variant="outlined">Cancel</u-button>
13
- <u-button>Ok</u-button>
14
- </u-button-set>
15
-
16
- <u-button-set stack>
17
- <u-button variant="outlined">Cancel</u-button>
18
- <u-button>Ok</u-button>
19
- </u-button-set>
20
-
21
- <u-button-set align="center" stack>
22
- <u-button variant="outlined">Cancel</u-button>
23
- <u-button>Ok</u-button>
24
- </u-button-set>
25
-
26
- <u-button-set align="start" stack>
27
- <u-button variant="outlined">Cancel</u-button>
28
- <u-button>Ok</u-button>
29
- </u-button-set>
@@ -1,5 +0,0 @@
1
- <u-button-set stack>
2
- <u-button variant="text">Set</u-button>
3
- <u-button variant="text">Cancel</u-button>
4
- <u-button variant="text">Clear</u-button>
5
- </u-button-set>
@@ -1,35 +0,0 @@
1
- <u-button-set>
2
- <u-fab>
3
- <i class="mdi mdi-pencil"></i>
4
- </u-fab>
5
-
6
- <u-button>Filled</u-button>
7
-
8
- <u-icon-button variant="outlined">
9
- <i class="mdi mdi-heart"></i>
10
- </u-icon-button>
11
- </u-button-set>
12
-
13
- <u-button-set align="center">
14
- <u-fab>
15
- <i class="mdi mdi-pencil"></i>
16
- </u-fab>
17
-
18
- <u-button>Filled</u-button>
19
-
20
- <u-icon-button variant="outlined">
21
- <i class="mdi mdi-heart"></i>
22
- </u-icon-button>
23
- </u-button-set>
24
-
25
- <u-button-set align="start">
26
- <u-fab>
27
- <i class="mdi mdi-pencil"></i>
28
- </u-fab>
29
-
30
- <u-button>Filled</u-button>
31
-
32
- <u-icon-button variant="outlined">
33
- <i class="mdi mdi-heart"></i>
34
- </u-icon-button>
35
- </u-button-set>
@@ -1,16 +0,0 @@
1
- extends ../_layout
2
-
3
- block content
4
- .u-container
5
- +renderTitle('Button set')
6
-
7
- +renderSection('Usage')
8
- include:exampleCode button-set/usage.html
9
-
10
- +renderSection('Stack')
11
- include:exampleCode button-set/stack.html
12
-
13
- +renderSection('Alignment')
14
- include:exampleCode button-set/alignment.html
15
-
16
- +renderApiSection(apis.buttonSet)
@@ -1,39 +0,0 @@
1
- <div class="example-card-grid-container">
2
- <u-card variant="filled">
3
- <u-card-media wide class="example-card-media" slot="before-content"></u-card-media>
4
- <div class="u-headline-l">Headline</div>
5
- <div class="u-headline-s mb-3">Subhead</div>
6
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vestibulum tristique risus vitae eleifend. Vivamus augue nulla, malesuada vel efficitur eu, ornare et ex. Duis vel lobortis est. Ut quis imperdiet tellus, in vestibulum justo. Aenean placerat ex at ex ultrices feugiat.</p>
7
- </u-card>
8
-
9
- <u-card variant="filled">
10
- <div class="u-headline-l">Headline</div>
11
- <div class="u-headline-s">Subhead</div>
12
- <u-card-media wide class="example-card-media mb-3 mt-3"></u-card-media>
13
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vestibulum tristique risus vitae eleifend. Vivamus augue nulla, malesuada vel efficitur eu, ornare et ex. Duis vel lobortis est. Ut quis imperdiet tellus, in vestibulum justo. Aenean placerat ex at ex ultrices feugiat.</p>
14
- </u-card>
15
-
16
- <u-card variant="filled">
17
- <u-card-media class="example-card-media u-dark-mode" slot="before-content">
18
- <u-card-content>
19
- <div class="u-headline-s">Headline</div>
20
- <div class="u-title-m u-text-low-emphasis mb-3">Subhead</div>
21
- <u-button-set>
22
- <u-button variant="outlined">Action 1</u-button>
23
- <u-button>Action 2</u-button>
24
- </u-button-set>
25
- </u-card-content>
26
- </u-card-media>
27
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vestibulum tristique risus vitae eleifend. Vivamus augue nulla, malesuada vel efficitur eu, ornare et ex. Duis vel lobortis est. Ut quis imperdiet tellus, in vestibulum justo. Aenean placerat ex at ex ultrices feugiat.</p>
28
- </u-card>
29
-
30
- <u-card variant="filled">
31
- <u-card-media class="example-card-media u-dark-mode" wide slot="before-content">
32
- <u-card-content>
33
- <div class="u-headline-s">Headline</div>
34
- <div class="u-title-m u-text-low-emphasis mb-3">Subhead</div>
35
- </u-card-content>
36
- </u-card-media>
37
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vestibulum tristique risus vitae eleifend. Vivamus augue nulla, malesuada vel efficitur eu, ornare et ex. Duis vel lobortis est. Ut quis imperdiet tellus, in vestibulum justo. Aenean placerat ex at ex ultrices feugiat.</p>
38
- </u-card>
39
- </div>
@@ -1,38 +0,0 @@
1
- <u-card variant="filled">
2
- <div class="u-headline-l">Headline</div>
3
- <div class="u-headline-s mb-3">Subhead</div>
4
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vestibulum tristique risus vitae eleifend. Vivamus augue nulla, malesuada vel efficitur eu, ornare et ex. Duis vel lobortis est. Ut quis imperdiet tellus, in vestibulum justo. Aenean placerat ex at ex ultrices feugiat.</p>
5
- <u-button-set>
6
- <u-button variant="text">Cancel</u-button>
7
- <u-button variant="text">Ok</u-button>
8
- </u-button-set>
9
- </u-card>
10
-
11
- <u-card variant="filled">
12
- <div class="u-headline-l">Headline</div>
13
- <div class="u-headline-s mb-3">Subhead</div>
14
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vestibulum tristique risus vitae eleifend. Vivamus augue nulla, malesuada vel efficitur eu, ornare et ex. Duis vel lobortis est. Ut quis imperdiet tellus, in vestibulum justo. Aenean placerat ex at ex ultrices feugiat.</p>
15
- <u-divider></u-divider>
16
- <u-button-set>
17
- <u-icon-button>
18
- <i class="mdi mdi-share"></i>
19
- </u-icon-button>
20
- <u-icon-button>
21
- <i class="mdi mdi-star"></i>
22
- </u-icon-button>
23
- </u-button-set>
24
- </u-card>
25
-
26
- <u-card variant="filled">
27
- <div class="u-headline-l">Headline</div>
28
- <div class="u-headline-s mb-3">Subhead</div>
29
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vestibulum tristique risus vitae eleifend. Vivamus augue nulla, malesuada vel efficitur eu, ornare et ex. Duis vel lobortis est. Ut quis imperdiet tellus, in vestibulum justo. Aenean placerat ex at ex ultrices feugiat.</p>
30
- <div slot="after-content">
31
- <u-divider no-margin></u-divider>
32
- <u-card-content>
33
- <u-button-set>
34
- <u-button variant="text">Expand</u-button>
35
- </u-button-set>
36
- </u-card-content>
37
- </div>
38
- </u-card>
@@ -1,3 +0,0 @@
1
- <u-card variant="filled">Filled card</u-card>
2
- <u-card variant="elevated">Elevated card</u-card>
3
- <u-card variant="outlined">Outlined card</u-card>
@@ -1,15 +0,0 @@
1
- extends ../_layout
2
-
3
- block content
4
- +renderTitle('Cards')
5
-
6
- +renderSection('Variants')
7
- include:exampleCode cards/simple-card.html
8
-
9
- +renderSection('Card with actions')
10
- include:exampleCode cards/card-with-actions.html
11
-
12
- +renderSection('Card media')
13
- include:exampleCode cards/card-media.html
14
-
15
- +renderApiSection(apis.card)
@@ -1,33 +0,0 @@
1
- <u-checkbox>
2
- <input type="checkbox" id="check-1" disabled>
3
- </u-checkbox>
4
- <label for="check-1">Checkbox</label>
5
- <label>
6
- <u-checkbox>
7
- <input type="checkbox">
8
- </u-checkbox>
9
- Checkbox
10
- </label>
11
-
12
- <label class="u-checkbox">
13
- <input type="checkbox" aria-labelledby="checkboxLabel" />
14
- <span class="u-selection-control">
15
- <span class="u-check-indicator"></span>
16
- </span>
17
- <span id="checkboxLabel" class="u-selection-control-label">Checkbox</span>
18
- </label>
19
- <label class="u-checkbox">
20
- <input type="checkbox" aria-labelledby="checkboxLabel" disabled />
21
- <span class="u-selection-control">
22
- <span class="u-check-indicator"></span>
23
- </span>
24
- <span id="checkboxLabel" class="u-selection-control-label">Checkbox</span>
25
- </label>
26
-
27
- <label class="u-checkbox">
28
- <input type="checkbox" aria-labelledby="checkboxLabel" disabled checked />
29
- <span class="u-selection-control">
30
- <span class="u-check-indicator"></span>
31
- </span>
32
- <span id="checkboxLabel" class="u-selection-control-label">Checkbox</span>
33
- </label>
@@ -1,7 +0,0 @@
1
- extends ../_layout
2
-
3
- block content
4
- +renderTitle('Checkbox')
5
-
6
- +renderSection('Checkbox')
7
- include:exampleCode checkbox/usage.html
@@ -1,73 +0,0 @@
1
- <div class="u-text-field u-text-field-box u-chip-field">
2
- <div class="u-text-input">
3
- <div class="u-chip-set">
4
- <div class="u-chip">
5
- <div class="u-chip-avatar"></div>
6
- <div class="u-chip-label">Juan</div>
7
- <div class="u-chip-icon u-chip-trailing-icon u-chip-icon-action"><i class="mdi mdi-close"></i></div>
8
- </div>
9
- <div class="u-chip">
10
- <div class="u-chip-avatar"></div>
11
- <div class="u-chip-label">John Doe</div>
12
- <div class="u-chip-icon u-chip-trailing-icon u-chip-icon-action"><i class="mdi mdi-close"></i></div>
13
- </div>
14
- <div class="u-chip">
15
- <div class="u-chip-avatar"></div>
16
- <div class="u-chip-label">John Doe</div>
17
- <div class="u-chip-icon u-chip-trailing-icon u-chip-icon-action"><i class="mdi mdi-close"></i></div>
18
- </div>
19
- <div class="u-chip">
20
- <div class="u-chip-avatar"></div>
21
- <div class="u-chip-label">John Doe</div>
22
- <div class="u-chip-icon u-chip-trailing-icon u-chip-icon-action"><i class="mdi mdi-close"></i></div>
23
- </div>
24
- <div class="u-chip">
25
- <div class="u-chip-avatar"></div>
26
- <div class="u-chip-label">John Doe</div>
27
- <div class="u-chip-icon u-chip-trailing-icon u-chip-icon-action"><i class="mdi mdi-close"></i></div>
28
- </div>
29
- <div class="u-chip">
30
- <div class="u-chip-avatar"></div>
31
- <div class="u-chip-label">John Doe</div>
32
- <div class="u-chip-icon u-chip-trailing-icon u-chip-icon-action"><i class="mdi mdi-close"></i></div>
33
- </div>
34
- <div class="u-chip">
35
- <div class="u-chip-avatar"></div>
36
- <div class="u-chip-label">John Doe</div>
37
- <div class="u-chip-icon u-chip-trailing-icon u-chip-icon-action"><i class="mdi mdi-close"></i></div>
38
- </div>
39
- <div class="u-chip">
40
- <div class="u-chip-avatar"></div>
41
- <div class="u-chip-label">John Doe</div>
42
- <div class="u-chip-icon u-chip-trailing-icon u-chip-icon-action"><i class="mdi mdi-close"></i></div>
43
- </div>
44
- <div class="u-chip">
45
- <div class="u-chip-avatar"></div>
46
- <div class="u-chip-label">John Doe</div>
47
- <div class="u-chip-icon u-chip-trailing-icon u-chip-icon-action"><i class="mdi mdi-close"></i></div>
48
- </div>
49
- <div class="u-chip">
50
- <div class="u-chip-avatar"></div>
51
- <div class="u-chip-label">John Doe</div>
52
- <div class="u-chip-icon u-chip-trailing-icon u-chip-icon-action"><i class="mdi mdi-close"></i></div>
53
- </div>
54
- <div class="u-chip">
55
- <div class="u-chip-avatar"></div>
56
- <div class="u-chip-label">John Doe</div>
57
- <div class="u-chip-icon u-chip-trailing-icon u-chip-icon-action"><i class="mdi mdi-close"></i></div>
58
- </div>
59
- <div class="u-chip">
60
- <div class="u-chip-avatar"></div>
61
- <div class="u-chip-label">John Doe</div>
62
- <div class="u-chip-icon u-chip-trailing-icon u-chip-icon-action"><i class="mdi mdi-close"></i></div>
63
- </div>
64
- <div class="u-chip">
65
- <div class="u-chip-avatar"></div>
66
- <div class="u-chip-label">John Doe</div>
67
- <div class="u-chip-icon u-chip-trailing-icon u-chip-icon-action"><i class="mdi mdi-close"></i></div>
68
- </div>
69
- <input class="u-chip-input">
70
- </div>
71
- </div>
72
- <label>To:</label>
73
- </div>
@@ -1,25 +0,0 @@
1
- <div class="d-flex">
2
- <div class="u-chip">
3
- <div class="u-chip-label">John Doe</div>
4
- </div>
5
- <div class="u-chip">
6
- <div class="u-chip-icon u-chip-leading-icon"><i class="mdi mdi-calendar"></i></div>
7
- <div class="u-chip-label">John Doe</div>
8
- </div>
9
- <div class="u-chip">
10
- <div class="u-chip-label">John Doe</div>
11
- <div class="u-chip-icon u-chip-trailing-icon u-chip-icon-action"><i class="mdi mdi-close"></i></div>
12
- </div>
13
- <div class="u-chip">
14
- <div class="u-chip-avatar"></div>
15
- <div class="u-chip-label">John Doe</div>
16
- <div class="u-chip-icon u-chip-trailing-icon u-chip-icon-action"><i class="mdi mdi-close"></i></div>
17
- </div>
18
-
19
- <div class="u-chip">
20
- <div class="u-chip-hover"></div>
21
- <div class="u-chip-avatar"></div>
22
- <div class="u-chip-label">John Doe</div>
23
- <div class="u-chip-icon u-chip-trailing-icon u-chip-icon-action"><i class="mdi mdi-close"></i></div>
24
- </div>
25
- </div>
@@ -1,25 +0,0 @@
1
- <div class="d-flex">
2
- <div class="u-chip u-chip-elevated">
3
- <div class="u-chip-label">John Doe</div>
4
- </div>
5
- <div class="u-chip u-chip-elevated">
6
- <div class="u-chip-icon u-chip-leading-icon"><i class="mdi mdi-calendar"></i></div>
7
- <div class="u-chip-label">John Doe</div>
8
- </div>
9
- <div class="u-chip u-chip-elevated">
10
- <div class="u-chip-label">John Doe</div>
11
- <div class="u-chip-icon u-chip-trailing-icon u-chip-icon-action"><i class="mdi mdi-close"></i></div>
12
- </div>
13
- <div class="u-chip u-chip-elevated">
14
- <div class="u-chip-avatar"></div>
15
- <div class="u-chip-label">John Doe</div>
16
- <div class="u-chip-icon u-chip-trailing-icon u-chip-icon-action"><i class="mdi mdi-close"></i></div>
17
- </div>
18
-
19
- <div class="u-chip u-chip-elevated">
20
- <div class="u-chip-hover"></div>
21
- <div class="u-chip-avatar"></div>
22
- <div class="u-chip-label">John Doe</div>
23
- <div class="u-chip-icon u-chip-trailing-icon u-chip-icon-action"><i class="mdi mdi-close"></i></div>
24
- </div>
25
- </div>
@@ -1,50 +0,0 @@
1
- <div class="d-flex">
2
- <div class="u-chip u-chip-selected">
3
- <div class="u-chip-label">John Doe</div>
4
- </div>
5
- <div class="u-chip u-chip-selected">
6
- <div class="u-chip-icon u-chip-leading-icon"><i class="mdi mdi-check"></i></div>
7
- <div class="u-chip-label">John Doe</div>
8
- </div>
9
- <div class="u-chip u-chip-selected">
10
- <div class="u-chip-label">John Doe</div>
11
- <div class="u-chip-icon u-chip-trailing-icon u-chip-icon-action"><i class="mdi mdi-close"></i></div>
12
- </div>
13
- <div class="u-chip u-chip-selected">
14
- <div class="u-chip-avatar"></div>
15
- <div class="u-chip-label">John Doe</div>
16
- <div class="u-chip-icon u-chip-trailing-icon u-chip-icon-action"><i class="mdi mdi-close"></i></div>
17
- </div>
18
-
19
- <div class="u-chip u-chip-selected">
20
- <div class="u-chip-hover"></div>
21
- <div class="u-chip-avatar"></div>
22
- <div class="u-chip-label">John Doe</div>
23
- <div class="u-chip-icon u-chip-trailing-icon u-chip-icon-action"><i class="mdi mdi-close"></i></div>
24
- </div>
25
- </div>
26
- <div class="d-flex">
27
- <div class="u-chip u-chip-elevated u-chip-selected">
28
- <div class="u-chip-label">John Doe</div>
29
- </div>
30
- <div class="u-chip u-chip-elevated u-chip-selected">
31
- <div class="u-chip-icon u-chip-leading-icon"><i class="mdi mdi-check"></i></div>
32
- <div class="u-chip-label">John Doe</div>
33
- </div>
34
- <div class="u-chip u-chip-elevated u-chip-selected">
35
- <div class="u-chip-label">John Doe</div>
36
- <div class="u-chip-icon u-chip-trailing-icon u-chip-icon-action"><i class="mdi mdi-close"></i></div>
37
- </div>
38
- <div class="u-chip u-chip-elevated u-chip-selected">
39
- <div class="u-chip-avatar"></div>
40
- <div class="u-chip-label">John Doe</div>
41
- <div class="u-chip-icon u-chip-trailing-icon u-chip-icon-action"><i class="mdi mdi-close"></i></div>
42
- </div>
43
-
44
- <div class="u-chip u-chip-elevated u-chip-selected">
45
- <div class="u-chip-hover"></div>
46
- <div class="u-chip-avatar"></div>
47
- <div class="u-chip-label">John Doe</div>
48
- <div class="u-chip-icon u-chip-trailing-icon u-chip-icon-action"><i class="mdi mdi-close"></i></div>
49
- </div>
50
- </div>
@@ -1,16 +0,0 @@
1
- extends ../_layout
2
-
3
- block content
4
- +renderTitle('Chips')
5
-
6
- +renderSection('Default chip')
7
- include:exampleCode chips/default-chips.html
8
-
9
- +renderSection('Elevated chip')
10
- include:exampleCode chips/elevated-chips.html
11
-
12
- +renderSection('Selected chip')
13
- include:exampleCode chips/selected-chips.html
14
-
15
- +renderSection('Chip input')
16
- include:exampleCode chips/chip-input.html
@@ -1,6 +0,0 @@
1
- <u-button variant="elevated" href="https://github.com/universal-material/universal-material-web" target="_blank">Elevated</u-button>
2
- <u-button href="https://github.com/universal-material/universal-material-web" target="_blank">Filled</u-button>
3
- <u-button variant="tonal" href="https://github.com/universal-material/universal-material-web" target="_blank">Tonal</u-button>
4
- <u-button variant="outlined" href="https://github.com/universal-material/universal-material-web" target="_blank">Outlined</u-button>
5
- <u-button variant="text" href="https://github.com/universal-material/universal-material-web" target="_blank">Text</u-button>
6
- <u-button variant="elevated" href="https://github.com/universal-material/universal-material-web" target="_blank" disabled>Disabled</u-button>
@@ -1,24 +0,0 @@
1
- <u-button variant="elevated">
2
- Elevated
3
- <i slot="icon" class="mdi mdi-heart"></i>
4
- </u-button>
5
- <u-button>
6
- Filled
7
- <i slot="icon" class="mdi mdi-heart"></i>
8
- </u-button>
9
- <u-button variant="tonal">
10
- Tonal
11
- <i slot="icon" class="mdi mdi-heart"></i>
12
- </u-button>
13
- <u-button variant="outlined">
14
- Outlined
15
- <i slot="icon" class="mdi mdi-heart"></i>
16
- </u-button>
17
- <u-button variant="text">
18
- Text
19
- <i slot="icon" class="mdi mdi-heart"></i>
20
- </u-button>
21
- <u-button variant="elevated" disabled>
22
- Disabled
23
- <i slot="icon" class="mdi mdi-heart"></i>
24
- </u-button>