materialdesignweb icon indicating copy to clipboard operation
materialdesignweb copied to clipboard

Published 20 hours ago • verified publisher icon clshortfuse
→

Metadata

Material Design for Web

materialdesignweb

Material Design for Web

Demo

https://clshortfuse.github.io/materialdesignweb/

Getting started

npm: npm install @shortfuse/materialdesignweb

Core modules

Module CSS-Only Support Description status
aria :x: Handles ARIA attributes, ARIA roles, tabindexes, and keyboard interaction preRC
document :white_check_mark: Applies color-scheme, standalone-window, and user agents detection RC
overlay :white_check_mark: Applies overlay states to components RC
ripple :white_check_mark: Applies press ripple on interactions preRC
theme :white_check_mark: Applies ink and surface colors based on light/dark context preRC
transition :x: Transitions shape and content between elements preRC

Component Modules

Component Integrations CSS-Only Support Keyboard Support ARIA Role ARIA Attributes Status
appbar button :white_check_mark: N/A :x: :x: beta
backdrop planned
banner button :white_check_mark: N/A :x: :x: beta
bottomnav bottomnavitem† overlay :x: :white_check_mark: tablist aria-multiselectable aria-orientation RC
bottomnavitem overlay ripple :x: :white_check_mark: tab aria-selected RC
button overlay ripple :white_check_mark: :white_check_mark: button aria-disabled‡ aria-pressed‡ stable
card button divider :white_check_mark: N/A :x: :x: preRC
chip chipitem :white_check_mark: :x: :x: :x: alpha
chipitem :x: :x: :x: :x: :x: alpha
datatable button :white_check_mark: :white_check_mark: grid aria-selected preRC
dialog button :white_check_mark: :white_check_mark: dialog aria-modal preRC
divider :white_check_mark: separator‡ preRC
elevation :white_check_mark: RC
fab button† :white_check_mark: :x: :x: :x: beta
grid :white_check_mark: :x: :x: preRC
imagelist use grid
layout :white_check_mark: :x: :x: :x: beta
list listitem† listexpander :white_check_mark: :white_check_mark: group list listbox radiogroup tree aria-orientation preRC
listcontent overlay ripple :white_check_mark: :white_check_mark: listitem link option radio treeitem aria-checked aria-selected preRC
listitem :white_check_mark: :white_check_mark: treeitem none aria-expanded aria-hidden preRC
listsecondary :white_check_mark: :white_check_mark: none‡ preRC
menu divider menuitem† :white_check_mark: :white_check_mark: menu aria-hidden preRC
menuitem overlay ripple :white_check_mark: :white_check_mark: menuitem menuitemradio menuitemcheckbox aria-disabled aria-checked stable
navdrawer use layout
progress :white_check_mark: :x: :x: beta
selection :white_check_mark: :white_check_mark: checkbox‡ radio‡ aria-checked aria-disabled preRC
sidesheet use layout
slider :white_check_mark: :x: :x: :x: alpha
snackbar button :white_check_mark: :white_check_mark: alert aria-hidden RC
tab tablist tabcontent :x: RC
tabcontent tabpanel† :x: :white_check_mark: RC
tabitem overlay ripple :x: :white_check_mark: tab aria-selected RC
tablist tabitem† overlay :x: :white_check_mark: tablist aria-multiselectable aria-orientation RC
tabpanel :x: :white_check_mark: tabpanel aria-expanded aria-hidden RC
textfield list :white_check_mark: :white_check_mark: :x: :x: preRC
tooltip :white_check_mark: :x: :x: beta
type :white_check_mark: RC

Adapter classes

Adapter Components Status
datatable button datatable† preRC
dom preRC
list domadapter† listitem† preRC
search list† textfield† preRC

Legend

  • planned - Planned for later

  • draft - Not yet functional

  • alpha - Partially working

  • beta - Working but incomplete

  • preRC - Needs minor changes

  • RC - Needs testing as-is

  • stable - Production-ready

  • † - Required

  • ‡ - Apply manually

← Metadata

37
Stars
4
Forks
Watchers

Owner

verified publisher icon clshortfuse

Metadata

Material Design for Web

Back