@shortfuse/materialdesignweb 0.4.0 → 0.7.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 (452) hide show
  1. package/README.md +155 -79
  2. package/bin/generate-css.js +12 -0
  3. package/components/Badge.css +30 -0
  4. package/components/Badge.js +15 -0
  5. package/components/Body.css +14 -0
  6. package/components/Body.js +7 -0
  7. package/components/BottomAppBar.css +23 -0
  8. package/components/BottomAppBar.js +25 -0
  9. package/components/Box.css +31 -0
  10. package/components/Box.js +24 -0
  11. package/components/Button.css +146 -0
  12. package/components/Button.js +95 -0
  13. package/components/Button.md +61 -0
  14. package/components/Card.css +109 -0
  15. package/components/Card.js +82 -0
  16. package/components/Checkbox.css +77 -0
  17. package/components/Checkbox.js +59 -0
  18. package/components/CheckboxIcon.css +89 -0
  19. package/components/CheckboxIcon.js +41 -0
  20. package/components/Chip.css +35 -0
  21. package/components/Chip.js +22 -0
  22. package/components/Dialog.css +235 -0
  23. package/components/Dialog.js +327 -0
  24. package/components/DialogActions.js +13 -0
  25. package/components/Divider.css +41 -0
  26. package/components/Divider.js +13 -0
  27. package/components/ExtendedFab.css +24 -0
  28. package/components/ExtendedFab.js +11 -0
  29. package/components/Fab.css +23 -0
  30. package/components/Fab.js +26 -0
  31. package/components/FilterChip.css +80 -0
  32. package/components/FilterChip.js +51 -0
  33. package/components/Headline.css +14 -0
  34. package/components/Headline.js +33 -0
  35. package/components/Icon.css +76 -0
  36. package/components/Icon.js +174 -0
  37. package/components/IconButton.css +151 -0
  38. package/components/IconButton.js +65 -0
  39. package/components/Input.js +16 -0
  40. package/components/Label.css +14 -0
  41. package/components/Label.js +7 -0
  42. package/components/Layout.css +19 -0
  43. package/components/Layout.js +12 -0
  44. package/components/List.css +12 -0
  45. package/components/List.js +17 -0
  46. package/components/ListItem.css +224 -0
  47. package/components/ListItem.js +112 -0
  48. package/components/ListOption.css +34 -0
  49. package/components/ListOption.js +122 -0
  50. package/components/ListSelect.css +9 -0
  51. package/components/ListSelect.js +206 -0
  52. package/components/Menu.css +171 -0
  53. package/components/Menu.js +470 -0
  54. package/components/MenuItem.css +53 -0
  55. package/components/MenuItem.js +215 -0
  56. package/components/Nav.css +17 -0
  57. package/components/Nav.js +23 -0
  58. package/components/NavBar.css +34 -0
  59. package/components/NavBar.js +88 -0
  60. package/components/NavBarItem.css +41 -0
  61. package/components/NavBarItem.js +7 -0
  62. package/components/NavDrawer.css +31 -0
  63. package/components/NavDrawer.js +13 -0
  64. package/components/NavDrawerItem.css +42 -0
  65. package/components/NavDrawerItem.js +12 -0
  66. package/components/NavItem.css +181 -0
  67. package/components/NavItem.js +83 -0
  68. package/components/NavRail.css +47 -0
  69. package/components/NavRail.js +17 -0
  70. package/components/NavRailItem.css +25 -0
  71. package/components/NavRailItem.js +7 -0
  72. package/components/Option.js +91 -0
  73. package/components/Outline.css +138 -0
  74. package/components/Pane.css +261 -0
  75. package/components/Pane.js +21 -0
  76. package/components/Progress.css +74 -0
  77. package/components/Progress.js +67 -0
  78. package/components/ProgressCircle.css +226 -0
  79. package/components/ProgressLine.css +155 -0
  80. package/components/Radio.css +83 -0
  81. package/components/Radio.js +42 -0
  82. package/components/RadioIcon.css +73 -0
  83. package/components/RadioIcon.js +37 -0
  84. package/components/Ripple.css +74 -0
  85. package/components/Ripple.js +114 -0
  86. package/components/SegmentedButton.css +94 -0
  87. package/components/SegmentedButton.js +49 -0
  88. package/components/SegmentedButtonGroup.css +12 -0
  89. package/components/SegmentedButtonGroup.js +44 -0
  90. package/components/Select.css +52 -0
  91. package/components/Select.js +71 -0
  92. package/components/Shape.css +132 -0
  93. package/components/Shape.js +25 -0
  94. package/components/Slider.css +306 -0
  95. package/components/Slider.js +206 -0
  96. package/components/Snackbar.css +80 -0
  97. package/components/Snackbar.js +75 -0
  98. package/components/Surface.css +10 -0
  99. package/components/Surface.js +23 -0
  100. package/components/Switch.css +63 -0
  101. package/components/Switch.js +127 -0
  102. package/components/SwitchIcon.css +177 -0
  103. package/components/SwitchIcon.js +89 -0
  104. package/components/SwitchIconAnimations.css +89 -0
  105. package/components/Tab.css +85 -0
  106. package/components/Tab.js +103 -0
  107. package/components/TabContent.js +151 -0
  108. package/components/TabList.css +129 -0
  109. package/components/TabList.js +309 -0
  110. package/components/TabPanel.js +37 -0
  111. package/components/TextArea.css +93 -0
  112. package/components/TextArea.js +229 -0
  113. package/components/Title.css +14 -0
  114. package/components/Title.js +15 -0
  115. package/components/Tooltip.css +40 -0
  116. package/components/Tooltip.js +22 -0
  117. package/components/TopAppBar.css +209 -0
  118. package/components/TopAppBar.js +201 -0
  119. package/core/Composition.js +988 -0
  120. package/core/CustomElement.js +844 -0
  121. package/core/ICustomElement.d.ts +288 -0
  122. package/core/ICustomElement.js +1 -0
  123. package/core/css.js +51 -0
  124. package/core/customTypes.js +125 -0
  125. package/core/dom.js +56 -245
  126. package/core/identify.js +40 -0
  127. package/core/observe.js +410 -0
  128. package/core/template.js +121 -0
  129. package/core/typings.d.ts +135 -0
  130. package/core/typings.js +1 -0
  131. package/mixins/AriaReflectorMixin.js +42 -0
  132. package/mixins/AriaToolbarMixin.js +13 -0
  133. package/mixins/ControlMixin.css +57 -0
  134. package/mixins/ControlMixin.js +212 -0
  135. package/mixins/DensityMixin.css +40 -0
  136. package/mixins/DensityMixin.js +11 -0
  137. package/mixins/FlexableMixin.css +79 -0
  138. package/mixins/FlexableMixin.js +32 -0
  139. package/mixins/FormAssociatedMixin.js +170 -0
  140. package/mixins/InputMixin.js +335 -0
  141. package/mixins/KeyboardNavMixin.js +244 -0
  142. package/mixins/RTLObserverMixin.js +35 -0
  143. package/mixins/ResizeObserverMixin.js +38 -0
  144. package/mixins/RippleMixin.css +12 -0
  145. package/mixins/RippleMixin.js +115 -0
  146. package/mixins/ScrollListenerMixin.js +100 -0
  147. package/mixins/ShapeMixin.css +135 -0
  148. package/mixins/ShapeMixin.js +31 -0
  149. package/mixins/StateMixin.css +82 -0
  150. package/mixins/StateMixin.js +114 -0
  151. package/mixins/SurfaceMixin.css +150 -0
  152. package/mixins/SurfaceMixin.js +32 -0
  153. package/mixins/TextFieldMixin.css +657 -0
  154. package/mixins/TextFieldMixin.js +121 -0
  155. package/mixins/ThemableMixin.css +204 -0
  156. package/mixins/ThemableMixin.js +16 -0
  157. package/mixins/TooltipTriggerMixin.css +27 -0
  158. package/mixins/TooltipTriggerMixin.js +366 -0
  159. package/mixins/TouchTargetMixin.css +26 -0
  160. package/mixins/TouchTargetMixin.js +9 -0
  161. package/package.json +57 -41
  162. package/theming/index.js +594 -0
  163. package/theming/loader.js +24 -0
  164. package/utils/cli.js +11 -0
  165. package/utils/color_keywords.js +151 -0
  166. package/utils/hct/Cam16.js +298 -0
  167. package/utils/hct/CorePalette.js +84 -0
  168. package/utils/hct/Hct.js +172 -0
  169. package/utils/hct/Scheme.js +587 -0
  170. package/utils/hct/TonalPalette.js +68 -0
  171. package/utils/hct/ViewingConditions.js +136 -0
  172. package/utils/hct/blend.js +93 -0
  173. package/utils/hct/colorUtils.js +302 -0
  174. package/utils/hct/hctSolver.js +559 -0
  175. package/utils/hct/helper.js +182 -0
  176. package/utils/hct/mathUtils.js +153 -0
  177. package/utils/jsonMergePatch.js +100 -0
  178. package/utils/jsx-runtime.js +101 -0
  179. package/utils/popup.js +117 -0
  180. package/utils/svg.js +129 -0
  181. package/.browserslistrc +0 -3
  182. package/.eslintrc.json +0 -153
  183. package/.stylelintrc.json +0 -600
  184. package/.vscode/launch.json +0 -31
  185. package/.vscode/settings.json +0 -3
  186. package/.vscode/tasks.json +0 -32
  187. package/CHANGELOG.md +0 -24
  188. package/CODE_OF_CONDUCT.md +0 -46
  189. package/adapters/datatable/column.js +0 -203
  190. package/adapters/datatable/index.js +0 -972
  191. package/adapters/dom/index.js +0 -601
  192. package/adapters/list/index.js +0 -69
  193. package/adapters/search/index.js +0 -521
  194. package/components/appbar/_spec.scss +0 -225
  195. package/components/appbar/_theme.scss +0 -0
  196. package/components/appbar/index.scss +0 -2
  197. package/components/banner/_spec.scss +0 -118
  198. package/components/banner/_theme.scss +0 -0
  199. package/components/banner/index.scss +0 -2
  200. package/components/bottomnav/README.md +0 -85
  201. package/components/bottomnav/_spec.scss +0 -157
  202. package/components/bottomnav/_theme.scss +0 -0
  203. package/components/bottomnav/index.js +0 -122
  204. package/components/bottomnav/index.scss +0 -2
  205. package/components/bottomnav/item.js +0 -89
  206. package/components/button/README.md +0 -61
  207. package/components/button/_spec.scss +0 -161
  208. package/components/button/_theme.scss +0 -65
  209. package/components/button/index.eta +0 -32
  210. package/components/button/index.js +0 -43
  211. package/components/button/index.pug +0 -18
  212. package/components/button/index.scss +0 -2
  213. package/components/card/_spec.scss +0 -249
  214. package/components/card/_theme.scss +0 -0
  215. package/components/card/index.scss +0 -2
  216. package/components/chip/_spec.scss +0 -134
  217. package/components/chip/_theme.scss +0 -177
  218. package/components/chip/index.js +0 -21
  219. package/components/chip/index.scss +0 -2
  220. package/components/chip/item.js +0 -20
  221. package/components/datatable/_spec.scss +0 -288
  222. package/components/datatable/_theme.scss +0 -154
  223. package/components/datatable/cell.js +0 -45
  224. package/components/datatable/columnheader.js +0 -47
  225. package/components/datatable/index.js +0 -388
  226. package/components/datatable/index.scss +0 -2
  227. package/components/datatable/row.js +0 -49
  228. package/components/datatable/rowheader.js +0 -18
  229. package/components/dialog/_spec.scss +0 -213
  230. package/components/dialog/_theme.scss +0 -0
  231. package/components/dialog/index.js +0 -627
  232. package/components/dialog/index.scss +0 -2
  233. package/components/divider/_spec.scss +0 -13
  234. package/components/divider/_theme.scss +0 -0
  235. package/components/divider/index.scss +0 -2
  236. package/components/elevation/_spec.scss +0 -9
  237. package/components/elevation/_theme.scss +0 -0
  238. package/components/elevation/index.scss +0 -2
  239. package/components/fab/_spec.scss +0 -222
  240. package/components/fab/_theme.scss +0 -0
  241. package/components/fab/index.js +0 -103
  242. package/components/fab/index.scss +0 -2
  243. package/components/grid/_spec.scss +0 -312
  244. package/components/grid/_theme.scss +0 -0
  245. package/components/grid/index.scss +0 -2
  246. package/components/layout/_mixins.scss +0 -33
  247. package/components/layout/_spec.scss +0 -1012
  248. package/components/layout/_theme.scss +0 -44
  249. package/components/layout/index.js +0 -464
  250. package/components/layout/index.scss +0 -2
  251. package/components/list/_spec.scss +0 -397
  252. package/components/list/_theme.scss +0 -111
  253. package/components/list/content.js +0 -110
  254. package/components/list/index.js +0 -260
  255. package/components/list/index.scss +0 -2
  256. package/components/list/item.js +0 -170
  257. package/components/list/secondary.js +0 -46
  258. package/components/menu/_spec.scss +0 -362
  259. package/components/menu/_theme.scss +0 -0
  260. package/components/menu/index.js +0 -721
  261. package/components/menu/index.scss +0 -2
  262. package/components/menu/item.js +0 -239
  263. package/components/progress/_spec.scss +0 -147
  264. package/components/progress/_theme.scss +0 -0
  265. package/components/progress/index.js +0 -36
  266. package/components/progress/index.scss +0 -2
  267. package/components/selection/_spec.scss +0 -386
  268. package/components/selection/_theme.scss +0 -166
  269. package/components/selection/index.eta +0 -60
  270. package/components/selection/index.js +0 -76
  271. package/components/selection/index.pug +0 -30
  272. package/components/selection/index.scss +0 -2
  273. package/components/selection/input.js +0 -56
  274. package/components/selection/radiogroup.js +0 -47
  275. package/components/slider/_spec.scss +0 -64
  276. package/components/slider/_theme.scss +0 -0
  277. package/components/slider/index.scss +0 -2
  278. package/components/snackbar/_spec.scss +0 -195
  279. package/components/snackbar/_theme.scss +0 -0
  280. package/components/snackbar/index.js +0 -344
  281. package/components/snackbar/index.scss +0 -2
  282. package/components/tab/_spec.scss +0 -235
  283. package/components/tab/_theme.scss +0 -0
  284. package/components/tab/content.js +0 -205
  285. package/components/tab/index.js +0 -260
  286. package/components/tab/index.scss +0 -2
  287. package/components/tab/item.js +0 -89
  288. package/components/tab/list.js +0 -210
  289. package/components/tab/panel.js +0 -54
  290. package/components/template/_theme.scss +0 -27
  291. package/components/textfield/README.md +0 -179
  292. package/components/textfield/_mixins.scss +0 -52
  293. package/components/textfield/_spec.scss +0 -809
  294. package/components/textfield/_theme.scss +0 -299
  295. package/components/textfield/index.eta +0 -74
  296. package/components/textfield/index.js +0 -168
  297. package/components/textfield/index.pug +0 -30
  298. package/components/textfield/index.scss +0 -2
  299. package/components/tooltip/_spec.scss +0 -188
  300. package/components/tooltip/_theme.scss +0 -0
  301. package/components/tooltip/index.scss +0 -2
  302. package/components/type/_spec.scss +0 -224
  303. package/components/type/_theme.scss +0 -0
  304. package/components/type/index.scss +0 -2
  305. package/core/_breakpoint.scss +0 -189
  306. package/core/_elevation.scss +0 -38
  307. package/core/_length.scss +0 -9
  308. package/core/_motion.scss +0 -31
  309. package/core/_platform.scss +0 -34
  310. package/core/_type.scss +0 -127
  311. package/core/aria/attributes.js +0 -141
  312. package/core/aria/button.js +0 -50
  313. package/core/aria/keyboard.js +0 -93
  314. package/core/aria/rovingtabindex.js +0 -178
  315. package/core/aria/tab.js +0 -60
  316. package/core/color/_spec.scss +0 -0
  317. package/core/color/_theme.scss +0 -390
  318. package/core/color/index.scss +0 -2
  319. package/core/document/index.js +0 -39
  320. package/core/overlay/_spec.scss +0 -31
  321. package/core/overlay/_theme.scss +0 -171
  322. package/core/overlay/index.js +0 -108
  323. package/core/overlay/index.scss +0 -2
  324. package/core/ripple/_spec.scss +0 -197
  325. package/core/ripple/_theme.scss +0 -40
  326. package/core/ripple/index.js +0 -294
  327. package/core/ripple/index.scss +0 -2
  328. package/core/theme/_config.scss +0 -2
  329. package/core/theme/_mixins.scss +0 -172
  330. package/core/theme/_palettes.scss +0 -406
  331. package/core/theme/_variables.scss +0 -24
  332. package/core/theme/index.js +0 -50
  333. package/core/throttler.js +0 -42
  334. package/core/transition/index.js +0 -468
  335. package/docs/_flex.scss +0 -22
  336. package/docs/_menuoptions.js +0 -183
  337. package/docs/_mixins.pug +0 -155
  338. package/docs/_partials/_androidnavbar.eta +0 -5
  339. package/docs/_partials/_androidstatusbar.eta +0 -13
  340. package/docs/_partials/_appbar.eta +0 -29
  341. package/docs/_partials/_buttontest.eta +0 -31
  342. package/docs/_partials/_header.eta +0 -149
  343. package/docs/_partials/_navlistitem.eta +0 -16
  344. package/docs/_partials/_target.eta +0 -1
  345. package/docs/_sample-utils.js +0 -93
  346. package/docs/_storage.js +0 -33
  347. package/docs/docs.scss +0 -295
  348. package/docs/index.eta +0 -16
  349. package/docs/index.js +0 -0
  350. package/docs/pages/appbar.eta +0 -114
  351. package/docs/pages/appbar.js +0 -0
  352. package/docs/pages/appbar.pug +0 -78
  353. package/docs/pages/bottomnav.eta +0 -188
  354. package/docs/pages/bottomnav.js +0 -115
  355. package/docs/pages/bottomnav.pug +0 -137
  356. package/docs/pages/button.eta +0 -124
  357. package/docs/pages/button.js +0 -224
  358. package/docs/pages/button.pug +0 -121
  359. package/docs/pages/card.eta +0 -90
  360. package/docs/pages/card.js +0 -177
  361. package/docs/pages/card.pug +0 -74
  362. package/docs/pages/chip.eta +0 -122
  363. package/docs/pages/chip.js +0 -82
  364. package/docs/pages/chip.pug +0 -91
  365. package/docs/pages/color.eta +0 -143
  366. package/docs/pages/color.js +0 -262
  367. package/docs/pages/color.pug +0 -121
  368. package/docs/pages/datatable.eta +0 -323
  369. package/docs/pages/datatable.js +0 -164
  370. package/docs/pages/datatable.pug +0 -283
  371. package/docs/pages/dialog.eta +0 -186
  372. package/docs/pages/dialog.js +0 -177
  373. package/docs/pages/dialog.pug +0 -132
  374. package/docs/pages/dom.eta +0 -26
  375. package/docs/pages/dom.js +0 -143
  376. package/docs/pages/dom.pug +0 -22
  377. package/docs/pages/elevation.eta +0 -35
  378. package/docs/pages/elevation.js +0 -0
  379. package/docs/pages/elevation.pug +0 -25
  380. package/docs/pages/fab.eta +0 -99
  381. package/docs/pages/fab.js +0 -44
  382. package/docs/pages/fab.pug +0 -66
  383. package/docs/pages/grid.eta +0 -135
  384. package/docs/pages/grid.js +0 -128
  385. package/docs/pages/grid.pug +0 -95
  386. package/docs/pages/layout.eta +0 -8
  387. package/docs/pages/layout.js +0 -0
  388. package/docs/pages/layout.pug +0 -7
  389. package/docs/pages/list.eta +0 -465
  390. package/docs/pages/list.js +0 -9
  391. package/docs/pages/list.pug +0 -326
  392. package/docs/pages/menu.eta +0 -276
  393. package/docs/pages/menu.js +0 -217
  394. package/docs/pages/menu.pug +0 -205
  395. package/docs/pages/overlay.eta +0 -69
  396. package/docs/pages/overlay.js +0 -4
  397. package/docs/pages/overlay.pug +0 -55
  398. package/docs/pages/progress.eta +0 -23
  399. package/docs/pages/progress.js +0 -12
  400. package/docs/pages/progress.pug +0 -16
  401. package/docs/pages/ripple.eta +0 -27
  402. package/docs/pages/ripple.js +0 -4
  403. package/docs/pages/ripple.pug +0 -21
  404. package/docs/pages/search.eta +0 -246
  405. package/docs/pages/search.js +0 -243
  406. package/docs/pages/search.pug +0 -165
  407. package/docs/pages/selection.eta +0 -111
  408. package/docs/pages/selection.js +0 -13
  409. package/docs/pages/selection.pug +0 -74
  410. package/docs/pages/slider.eta +0 -23
  411. package/docs/pages/slider.js +0 -0
  412. package/docs/pages/slider.pug +0 -17
  413. package/docs/pages/snackbar.eta +0 -83
  414. package/docs/pages/snackbar.js +0 -158
  415. package/docs/pages/snackbar.pug +0 -60
  416. package/docs/pages/tab.eta +0 -421
  417. package/docs/pages/tab.js +0 -151
  418. package/docs/pages/tab.pug +0 -304
  419. package/docs/pages/textfield.eta +0 -486
  420. package/docs/pages/textfield.js +0 -254
  421. package/docs/pages/textfield.pug +0 -360
  422. package/docs/pages/tooltip.eta +0 -94
  423. package/docs/pages/tooltip.js +0 -0
  424. package/docs/pages/tooltip.pug +0 -78
  425. package/docs/pages/transition.eta +0 -117
  426. package/docs/pages/transition.js +0 -54
  427. package/docs/pages/transition.pug +0 -76
  428. package/docs/pages/type.eta +0 -31
  429. package/docs/pages/type.js +0 -0
  430. package/docs/pages/type.pug +0 -29
  431. package/docs/postrender.js +0 -39
  432. package/docs/prerender.js +0 -16
  433. package/docs/pwa/_dialogs.eta +0 -143
  434. package/docs/pwa/_dialogs.pug +0 -96
  435. package/docs/pwa/_menus.eta +0 -16
  436. package/docs/pwa/_menus.pug +0 -11
  437. package/docs/pwa/pwa-prerender.js +0 -3
  438. package/docs/pwa/pwa.eta +0 -480
  439. package/docs/pwa/pwa.js +0 -306
  440. package/docs/pwa/pwa.pug +0 -325
  441. package/docs/pwa/pwa.scss +0 -26
  442. package/docs/spec.scss +0 -26
  443. package/docs/themes/_component-themes.scss +0 -26
  444. package/docs/themes/theme-colored-fallbacks.scss +0 -17
  445. package/docs/themes/theme-colored.scss +0 -17
  446. package/docs/themes/theme-default-fallbacks.scss +0 -17
  447. package/docs/themes/theme-default.scss +0 -17
  448. package/jsconfig.json +0 -12
  449. package/scripts/deploy-docs.sh +0 -9
  450. package/templates/index.eta +0 -2
  451. package/templates/index.pug +0 -3
  452. package/webpack.config.cjs +0 -257
package/docs/pages/tab.pug DELETED
@@ -1,304 +0,0 @@
1
- include ../_mixins.pug
2
-
3
- +header("tab")
4
- .mdw-grid(mdw-margin-top mdw-margin-bottom mdw-stretch).docs-tab
5
- .mdw-grid__item(mdw-colspan="100%")
6
- h5.mdw-type(mdw-baseline-next="36") Tabs make it easy to explore and switch between different views.
7
- p.mdw-type Tabs enable content organization at a high level, such as switching between views, data sets, or functional aspects of an app.
8
- .mdw-grid__item(mdw-colspan="8")
9
- .mdw-grid__content
10
- .component-sample
11
- .component-sample__container
12
- .mdw-tab
13
- .mdw-tab__list
14
- .mdw-tab__item.mdw-theme.mdw-overlay(mdw-ink="secondary A200" mdw-overlay-default="medium" aria-selected="true")
15
- .mdw-tab__icon.material-icons looks_one
16
- .mdw-tab__label Tab Item One
17
- .mdw-tab__item.mdw-theme.mdw-overlay(mdw-ink="secondary A200" mdw-overlay-default="medium" aria-selected="false")
18
- .mdw-tab__icon.material-icons looks_two
19
- .mdw-tab__label Tab Item Two
20
- .mdw-tab__item.mdw-theme.mdw-overlay(mdw-ink="secondary A200" mdw-overlay-default="medium" aria-selected="false")
21
- .mdw-tab__icon.material-icons looks_3
22
- .mdw-tab__label Tab Item Three
23
- .mdw-tab__indicator.mdw-theme(mdw-ink="secondary A200")
24
- .mdw-tab__content.mdw-theme(mdw-surface="gray 800" mdw-dark)
25
- .mdw-tab__panel
26
- div(style="min-height:200px;padding:20px")
27
- p Sample Content One
28
- +mdwButton({ borderInk:true }) Unfocusable when inactive
29
- p HTML Ordered List with (#) representing DOM position
30
- ol
31
- li.mdw-tabs__panel__active-hide (1) Layer hidden when active (peek only)
32
- li.mdw-tabs__panel__active-remove (2) Layer removed when active (peek only)
33
- li (3) Always visible
34
- li.mdw-tabs__panel__inactive-hide (4) Layer hidden when inactive (active only)
35
- li.mdw-tabs__panel__inactive-remove (5) Layer removed when inactive (active only)
36
- li (6) Always visible
37
- .mdw-tab__panel
38
- div(style="min-height:200px;padding:20px")
39
- p Sample Content Two
40
- +mdwButton({ borderInk:true }) Unfocusable when inactive
41
- p HTML Ordered List with (#) representing DOM position
42
- ol
43
- li.mdw-tabs__panel__active-hide (1) Layer hidden when active (peek only)
44
- li.mdw-tabs__panel__active-remove (2) Layer removed when active (peek only)
45
- li (3) Always visible
46
- li.mdw-tabs__panel__inactive-hide (4) Layer hidden when inactive (active only)
47
- li.mdw-tabs__panel__inactive-remove (5) Layer removed when inactive (active only)
48
- li (6) Always visible
49
- .mdw-tab__panel
50
- div(style="min-height:200px;padding:20px")
51
- p Sample Content Three
52
- +mdwButton({ borderInk:true }) Unfocusable when inactive
53
- p HTML Ordered List with (#) representing DOM position
54
- ol
55
- li.mdw-tabs__panel__active-hide (1) Layer hidden when active (peek only)
56
- li.mdw-tabs__panel__active-remove (2) Layer removed when active (peek only)
57
- li (3) Always visible
58
- li.mdw-tabs__panel__inactive-hide (4) Layer hidden when inactive (active only)
59
- li.mdw-tabs__panel__inactive-remove (5) Layer removed when inactive (active only)
60
- li (6) Always visible
61
- .mdw-grid__item(mdw-colspan="4")
62
- .mdw-type(mdw-style="subtitle") Javascript
63
- .docs-option-list
64
- +mdwSelection({ink:'secondary', name:'javascript', type:'radio', value:'required', checked:true}) Required
65
- +mdwSelection({ink:'secondary', name:'javascript', type:'radio', value:'optional', disabled:true}) Optional
66
- +mdwSelection({ink:'secondary', name:'javascript', type:'radio', value:'none', disabled:true}) None
67
- .mdw-type(mdw-style="subtitle") Ink
68
- .docs-option-list
69
- +mdwSelection({ink:'secondary', name:'ink', type:'radio', value:'default'}) Default
70
- +mdwSelection({ink:'secondary', name:'ink', type:'radio', value:'primary A400'}) Primary A400
71
- +mdwSelection({ink:'secondary', name:'ink', type:'radio', value:'secondary A200', checked:true}) Secondary A200
72
- +mdwSelection({ink:'secondary', name:'ink', type:'radio', value:'warn'}) Warn
73
- +mdwSelection({ink:'secondary', name:'ink', type:'radio', value:'purple A400'}) Purple A400
74
- .mdw-type(mdw-style="subtitle") Surface
75
- .docs-option-list
76
- +mdwSelection({ink:'secondary', name:'surface', type:'radio', value:'none', checked:true}) None
77
- +mdwSelection({ink:'secondary', name:'surface', type:'radio', value:'primary dark'}) Primary (Dark)
78
- +mdwSelection({ink:'secondary', name:'surface', type:'radio', value:'secondary 100 dark'}) Secondary 100 (Dark)
79
- +mdwSelection({ink:'secondary', name:'surface', type:'radio', value:'warn 200 light'}) Warn 200 (Light)
80
- +mdwSelection({ink:'secondary', name:'surface', type:'radio', value:'dark 700 dark'}) Green 700 (Dark)
81
- .mdw-type(mdw-style="subtitle") Scrollable
82
- .docs-option-list
83
- +mdwSelection({ink:'secondary', name:'content-scrollable', checked:true}) Content
84
- +mdwSelection({ink:'secondary', name:'tabs-scrollable'}) Tabs
85
- .mdw-grid__item(mdw-colspan="100%" style="max-height:0")
86
- .mdw-grid__item(mdw-colspan="8")
87
- h6.mdw-type HTML Code
88
- .mdw-card.mdw-theme.component-code.component-html(mdw-surface="card" mdw-border-ink)
89
- +mdwButton({ icon:true, ink:'secondary' })#usePug(aria-pressed="false" mdw-overlay-off="activated") PUG
90
- .mdw-grid__item(mdw-colspan="4")
91
- h6.mdw-type Javascript Code
92
- .mdw-card.mdw-theme.component-code.component-js(mdw-surface="card" mdw-border-ink)
93
- .mdw-grid__item(mdw-colspan="100%")
94
- h6.mdw-type Samples
95
- .mdw-grid__item.display-flex(mdw-colspan="4").clipped-300
96
- .render-fill
97
- .mdw-tab
98
- .mdw-tab__list.mdw-theme(mdw-surface="cyan 500" mdw-dark)
99
- .mdw-tab__item.mdw-theme(mdw-ink="yellow A400" mdw-overlay-default="medium")
100
- .mdw-tab__label Item One
101
- .mdw-tab__item.mdw-theme(mdw-ink="yellow A400" mdw-overlay-default="medium")
102
- .mdw-tab__label Item Two
103
- .mdw-tab__item.mdw-theme(mdw-ink="yellow A400" mdw-overlay-default="medium")
104
- .mdw-tab__label Item Three
105
- .mdw-tab__indicator.mdw-theme(mdw-ink="yellow A400")
106
- .mdw-tab__content
107
- .mdw-tab__panel Item One
108
- .mdw-tab__panel Item Two
109
- .mdw-tab__panel Item Three
110
-
111
- .mdw-grid__item.display-flex(mdw-colspan="4").clipped-300
112
- .render-fill
113
- +androidstatusbar('cyan 700', 'dark')
114
- .mdw-appbar.mdw-theme(mdw-surface="cyan 500" mdw-dark mdw-prominent)
115
- .mdw-appbar__action
116
- .mdw-appbar__start
117
- +mdwButton({ icon:true }).material-icons menu
118
- .mdw-appbar__title Page title
119
- .mdw-appbar__end
120
- +mdwButton({ icon:true }).material-icons search
121
- +mdwButton({ icon:true }).material-icons(mdw-more-button) more_vert
122
- .mdw-tab
123
- .mdw-tab__list
124
- .mdw-tab__item.mdw-theme(mdw-ink="yellow A400" mdw-overlay-default="medium")
125
- .mdw-tab__label Item One
126
- .mdw-tab__item.mdw-theme(mdw-ink="yellow A400" mdw-overlay-default="medium")
127
- .mdw-tab__label Item Two
128
- .mdw-tab__item.mdw-theme(mdw-ink="yellow A400" mdw-overlay-default="medium")
129
- .mdw-tab__label Item Three
130
- .mdw-tab__indicator.mdw-theme(mdw-ink="yellow A400")
131
- .content
132
-
133
- .mdw-grid__item.display-flex(mdw-colspan="4").clipped-300
134
- .render-fill
135
- +androidstatusbar('cyan 700', 'dark')
136
- .mdw-tab
137
- .mdw-tab__list-wrapper.mdw-appbar.mdw-theme(mdw-surface="cyan 500" mdw-dark)
138
- .mdw-appbar__action
139
- .mdw-appbar__start
140
- +mdwButton({ icon:true }).material-icons menu
141
- .mdw-appbar__title Page title
142
- .mdw-appbar__end
143
- +mdwButton({ icon:true }).material-icons search
144
- +mdwButton({ icon:true }).material-icons(mdw-more-button) more_vert
145
- .mdw-tab__list
146
- .mdw-tab__item.mdw-theme(mdw-ink="yellow A400" mdw-overlay-default="medium")
147
- .mdw-tab__label Item One
148
- .mdw-tab__item.mdw-theme(mdw-ink="yellow A400" mdw-overlay-default="medium")
149
- .mdw-tab__label Item Two
150
- .mdw-tab__item.mdw-theme(mdw-ink="yellow A400" mdw-overlay-default="medium")
151
- .mdw-tab__label Item Three
152
- .mdw-tab__indicator.mdw-theme(mdw-ink="yellow A400")
153
- .mdw-tab__content
154
- .mdw-tab__panel Item One
155
- .mdw-tab__panel Item Two
156
- .mdw-tab__panel Item Three
157
-
158
- .mdw-grid__item.display-flex(mdw-colspan="4").clipped-300
159
- .render-fill
160
- +androidstatusbar('background 600', 'dark')
161
- .mdw-tab
162
- .mdw-tab__list-wrapper.mdw-appbar
163
- .mdw-appbar__action
164
- .mdw-appbar__start
165
- +mdwButton({ icon:true }).material-icons menu
166
- .mdw-appbar__title Page title
167
- .mdw-appbar__end
168
- +mdwButton({ icon:true }).material-icons search
169
- +mdwButton({ icon:true }).material-icons(mdw-more-button) more_vert
170
- .mdw-tab__list
171
- .mdw-tab__item.mdw-theme(mdw-ink="cyan A700" mdw-overlay-default="medium")
172
- .mdw-tab__label Item One
173
- .mdw-tab__item.mdw-theme(mdw-ink="cyan A700" mdw-overlay-default="medium")
174
- .mdw-tab__label Item Two
175
- .mdw-tab__item.mdw-theme(mdw-ink="cyan A700" mdw-overlay-default="medium")
176
- .mdw-tab__label Item Three
177
- .mdw-tab__indicator.mdw-theme(mdw-ink="cyan A700")
178
- .mdw-tab__content
179
- .mdw-tab__panel Item One
180
- .mdw-tab__panel Item Two
181
- .mdw-tab__panel Item Three
182
-
183
- .mdw-grid__item.display-flex(mdw-colspan="4").clipped-300
184
- .render-fill
185
- +androidstatusbar('cyan 700', 'dark')
186
- .mdw-appbar.mdw-theme(mdw-surface="cyan 500" mdw-dark)
187
- .mdw-appbar__action
188
- .mdw-appbar__start
189
- +mdwButton({ icon:true }).material-icons menu
190
- .mdw-appbar__title Page title
191
- .mdw-appbar__end
192
- +mdwButton({ icon:true }).material-icons search
193
- +mdwButton({ icon:true }).material-icons(mdw-more-button) more_vert
194
- .mdw-tab
195
- .mdw-tab__list
196
- .mdw-tab__item.mdw-theme(mdw-ink="yellow A400" mdw-overlay-default="medium")
197
- .mdw-tab__icon.material-icons phone
198
- .mdw-tab__label Recents
199
- .mdw-tab__item.mdw-theme(mdw-ink="yellow A400" mdw-overlay-default="medium")
200
- .mdw-tab__icon.material-icons favorite
201
- .mdw-tab__label Favorites
202
- .mdw-tab__item.mdw-theme(mdw-ink="yellow A400" mdw-overlay-default="medium")
203
- .mdw-tab__icon.material-icons person_pin
204
- .mdw-tab__label Nearby
205
- .mdw-tab__indicator.mdw-theme(mdw-ink="yellow A400")
206
- .content
207
-
208
- .mdw-grid__item.display-flex(mdw-colspan="4").clipped-300
209
- .render-fill
210
- +androidstatusbar('background 600', 'dark')
211
- .mdw-appbar
212
- .mdw-appbar__action
213
- .mdw-appbar__start
214
- +mdwButton({ icon:true }).material-icons menu
215
- .mdw-appbar__title Page title
216
- .mdw-appbar__end
217
- +mdwButton({ icon:true }).material-icons search
218
- +mdwButton({ icon:true }).material-icons(mdw-more-button) more_vert
219
- .mdw-tab
220
- .mdw-tab__list
221
- .mdw-tab__item.mdw-theme(mdw-ink="cyan A700" mdw-overlay-default="medium")
222
- .mdw-tab__icon.material-icons phone
223
- .mdw-tab__item.mdw-theme(mdw-ink="cyan A700" mdw-overlay-default="medium")
224
- .mdw-tab__icon.material-icons favorite
225
- .mdw-tab__item.mdw-theme(mdw-ink="cyan A700" mdw-overlay-default="medium")
226
- .mdw-tab__icon.material-icons person_pin
227
- .mdw-tab__indicator.mdw-theme(mdw-ink="cyan A700")
228
- .content
229
- .mdw-grid__item.display-flex(mdw-colspan="100%")
230
- .display-flex(flex-column style="width:100%;padding:24px;box-sizing:border-box")
231
- +androidstatusbar('cyan 700', 'dark')
232
- .mdw-tab
233
- .mdw-tab__list-wrapper.mdw-appbar.mdw-theme(mdw-surface="cyan 500" mdw-dark)
234
- .mdw-appbar__action
235
- .mdw-appbar__start
236
- +mdwButton({ icon:true }).material-icons menu
237
- .mdw-appbar__title Clustered
238
- .mdw-appbar__end
239
- +mdwButton({ icon:true }).material-icons search
240
- +mdwButton({ icon:true }).material-icons(mdw-more-button) more_vert
241
- .mdw-tab__list(style="align-self:center")
242
- .mdw-tab__item.mdw-theme(mdw-ink="yellow A400" mdw-overlay-default="medium")
243
- .mdw-tab__icon.material-icons phone
244
- .mdw-tab__label Recents
245
- .mdw-tab__item.mdw-theme(mdw-ink="yellow A400" mdw-overlay-default="medium")
246
- .mdw-tab__icon.material-icons favorite
247
- .mdw-tab__label Favorites
248
- .mdw-tab__item.mdw-theme(mdw-ink="yellow A400" mdw-overlay-default="medium")
249
- .mdw-tab__icon.material-icons person_pin
250
- .mdw-tab__label Nearby
251
- .mdw-tab__indicator.mdw-theme(mdw-ink="yellow A400")
252
- .mdw-tab__content
253
- .mdw-tab__panel Recents
254
- .mdw-tab__panel Favorites
255
- .mdw-tab__panel Nearby
256
-
257
- .mdw-grid__item(mdw-colspan="100%")
258
- .mdw-grid__content.js
259
- +androidstatusbar('cyan 700', 'dark')
260
- .mdw-tab
261
- .mdw-appbar.mdw-theme(mdw-surface="cyan 500" mdw-dark)
262
- .mdw-appbar__action
263
- .mdw-appbar__start
264
- +mdwButton({ icon:true }).material-icons menu
265
- .mdw-appbar__title Scrollable
266
- .mdw-appbar__end
267
- +mdwButton({ icon:true }).material-icons search
268
- +mdwButton({ icon:true }).material-icons(mdw-more-button) more_vert
269
- .mdw-tab__list(mdw-scrollable)
270
- .mdw-tab__item.mdw-theme(mdw-ink="yellow A400" mdw-overlay-default="medium")
271
- .mdw-tab__icon.material-icons phone
272
- .mdw-tab__label Recents
273
- .mdw-tab__item.mdw-theme(mdw-ink="yellow A400" mdw-overlay-default="medium")
274
- .mdw-tab__icon.material-icons favorite
275
- .mdw-tab__label My Oversized Favorites Tab
276
- .mdw-tab__item.mdw-theme(mdw-ink="yellow A400" mdw-overlay-default="medium")
277
- .mdw-tab__icon.material-icons person_pin
278
- .mdw-tab__label Nearby
279
- .mdw-tab__item.mdw-theme(mdw-ink="yellow A400" mdw-overlay-default="medium")
280
- .mdw-tab__icon.material-icons edit
281
- .mdw-tab__label Edit
282
- .mdw-tab__item.mdw-theme(mdw-ink="yellow A400" mdw-overlay-default="medium")
283
- .mdw-tab__icon.material-icons clear
284
- .mdw-tab__label Clear
285
- .mdw-tab__item.mdw-theme(mdw-ink="yellow A400" mdw-overlay-default="medium")
286
- .mdw-tab__icon.material-icons search
287
- .mdw-tab__label Search
288
- .mdw-tab__item.mdw-theme(mdw-ink="yellow A400" mdw-overlay-default="medium")
289
- .mdw-tab__icon.material-icons restore
290
- .mdw-tab__label Restore
291
- .mdw-tab__item.mdw-theme(mdw-ink="yellow A400" mdw-overlay-default="medium")
292
- .mdw-tab__icon.material-icons stars
293
- .mdw-tab__label Stars
294
- .mdw-tab__indicator.mdw-theme(mdw-ink="yellow A400")
295
- .mdw-tab__content
296
- .mdw-tab__panel 1
297
- .mdw-tab__panel 2
298
- .mdw-tab__panel 3
299
- .mdw-tab__panel 4
300
- .mdw-tab__panel 5
301
- .mdw-tab__panel 6
302
- .mdw-tab__panel 7
303
- .mdw-tab__panel 8
304
- script(src='tab.min.js')