Software:Comparison of Material Design implementations
From HandWiki
Short description: None
This article contains general information about Google's Material Design implementations.
Notes
As of 15 December 2018, unless indicated, all of the components listed below conform to the new Material Design specifications.
Implemented web components (2018 specifications)
- ↑ "App Bar React component - Material-UI". https://material-ui.com/demos/app-bar/#bottom-app-bar.
- ↑ "PolymerElements/paper-toolbar - webcomponents.org". https://www.webcomponents.org/element/@polymer/paper-toolbar.
- ↑ "AngularJS Material - Demos > Toolbar". https://material.angularjs.org/latest/demo/toolbar.
- ↑ "App Bar React component - Material-UI". https://material-ui.com/demos/app-bar/.
- ↑ Jump up to: 6.0 6.1 6.2 6.3 6.4 6.5 "Material Design Lite (Layout)". https://getmdl.io/components/index.html#layout-section.
- ↑ "Top App Bar - Material Components for the Web". https://material.io/develop/web/components/top-app-bar/.
- ↑ Jump up to: 9.0 9.1 "PolymerElements/paper-button - webcomponents.org". https://www.webcomponents.org/element/@polymer/paper-button.
- ↑ Jump up to: 10.0 10.1 10.2 10.3 "AngularJS Material - Demos > Button". https://material.angularjs.org/latest/demo/button.
- ↑ "Buttons - Materialize". https://materializecss.com/buttons.html#flat.
- ↑ "(Text) Button React component - Material-UI". https://material-ui.com/demos/buttons/#text-buttons.
- ↑ Jump up to: 13.0 13.1 13.2 13.3 "Material Design Lite (Buttons)". https://getmdl.io/components/index.html#buttons-section.
- ↑ "Buttons - Material Components for the Web". https://material.io/develop/web/components/buttons/.
- ↑ "(Outlined) Button React component - Material-UI". https://material-ui.com/demos/buttons/#outlined-buttons.
- ↑ "(Outlined) Buttons - Material Components for the Web". https://material.io/develop/web/components/buttons/#outlined-button.
- ↑ "(Raised) Buttons - Materialize". https://materializecss.com/buttons.html#raised.
- ↑ "(Contained) Button React component - Material-UI". https://material-ui.com/demos/buttons/#contained-buttons.
- ↑ "(Contained) Buttons - Material Components for the Web". https://material.io/develop/web/components/buttons/#contained-button.
- ↑ "Toggle Button React component - Material-UI". https://material-ui.com/lab/toggle-button/.
- ↑ "PolymerElements/paper-icon-button - webcomponents.org". https://www.webcomponents.org/element/@polymer/paper-icon-button.
- ↑ "(Icon) Button React component - Material-UI". https://material-ui.com/demos/buttons/#icon-buttons.
- ↑ "Icon Buttons - Material Components for the Web". https://material.io/develop/web/components/buttons/icon-buttons/.
- ↑ Jump up to: 24.0 24.1 24.2 24.3 "Material Design Lite (Toggles)". https://getmdl.io/components/index.html#toggles-section.
- ↑ "Icon Toggle Buttons - Material Components for the Web". https://material.io/develop/web/components/buttons/icon-toggle-buttons/.
- ↑ "PolymerElements/paper-fab - webcomponents.org". https://www.webcomponents.org/element/@polymer/paper-fab.
- ↑ "(Floating Action) Buttons - Materialize". https://materializecss.com/buttons.html#floated.
- ↑ Jump up to: 28.0 28.1 "(Floating Action) Button React component - Material-UI". https://material-ui.com/demos/buttons/#floating-action-buttons.
- ↑ "Floating Action Button - Material Components for the Web". https://material.io/develop/web/components/buttons/floating-action-buttons/.
- ↑ "(Extended) Floating Action Button - Material Components for the Web". https://material.io/develop/web/components/buttons/floating-action-buttons/#extended-fab.
- ↑ "PolymerElements/paper-card - webcomponents.org". https://www.webcomponents.org/element/@polymer/paper-card.
- ↑ "AngularJS Material - Demos > Card". https://material.angularjs.org/latest/demo/card.
- ↑ "Cards - Materialize". https://materializecss.com/cards.html.
- ↑ "Card React component - Material-UI". https://material-ui.com/demos/cards/.
- ↑ "Material Design Lite (Cards)". https://getmdl.io/components/index.html#cards-section.
- ↑ "Cards - Material Components for the Web". https://material.io/develop/web/components/cards/.
- ↑ "AngularJS Material - Demos > Chips". https://material.angularjs.org/latest/demo/chips.
- ↑ "Chips - Materialize". https://materializecss.com/chips.html.
- ↑ "Chip React component - Material-UI". https://material-ui.com/demos/chips/.
- ↑ "Material Design Lite (Chips)". https://getmdl.io/components/index.html#chips-section.
- ↑ "Chips - Material Components for the Web". https://material.io/develop/web/components/chips/.
- ↑ "Table - Materialize". https://materializecss.com/table.html.
- ↑ "Table React component - Material-UI". https://material-ui.com/demos/tables/.
- ↑ "Material Design Lite (Tables)". https://getmdl.io/components/index.html#tables-section.
- ↑ "PolymerElements/paper-dialog - webcomponents.org". https://www.webcomponents.org/element/@polymer/paper-dialog.
- ↑ "AngularJS Material - Demos > Dialog". https://material.angularjs.org/latest/demo/dialog.
- ↑ "Modals - Materialize". https://materializecss.com/modals.html.
- ↑ "Dialog React component - Material-UI". https://material-ui.com/demos/dialogs/.
- ↑ "Material Design Lite (Dialogs)". https://getmdl.io/components/index.html#dialog-section.
- ↑ "Dialogs - Material Components for the Web". https://material.io/develop/web/components/dialogs.
- ↑ "AngularJS Material - Demos > Divider". https://material.angularjs.org/latest/demo/divider.
- ↑ "Divider React component - Material-UI". https://material-ui.com/demos/dividers.
- ↑ "List (Dividers) - Material Components for the Web". https://material.io/develop/web/components/lists/#list-dividers.
- ↑ "AngularJS Material - Demos > Grid List". https://material.angularjs.org/latest/demo/gridList.
- ↑ "Grid - Materialize". https://materializecss.com/grid.html.
- ↑ "Grid List React component - Material-UI". https://material-ui.com/demos/grid-list.
- ↑ "Grid Lists - Material Components for the Web". https://material.io/develop/web/components/grid-lists/.
- ↑ "PolymerElements/paper-item - webcomponents.org". https://webcomponents.org/element/@polymer/paper-item.
- ↑ "AngularJS Material - Demos > List". https://material.angularjs.org/latest/demo/list.
- ↑ "Collections - Materialize". https://materializecss.com/collections.html.
- ↑ "List React component - Material-UI". https://material-ui.com/demos/lists.
- ↑ "Material Design Lite (Lists)". https://getmdl.io/components/index.html#lists-section.
- ↑ "Lists - Material Components for the Web". https://material.io/develop/web/components/lists/.
- ↑ "PolymerElements/paper-menu-button - webcomponents.org". https://www.webcomponents.org/element/@polymer/paper-menu-button.
- ↑ "AngularJ S Material - Demos > Menu". https://material.angularjs.org/latest/demo/menu.
- ↑ "Dropdown - Materialize". https://materializecss.com/dropdown.html.
- ↑ "Menu React component - Material-UI". https://material-ui.com/demos/menus.
- ↑ "Material Design Lite (Menus)". https://getmdl.io/components/index.html#menus-section.
- ↑ "Menus - Material Components for the Web". https://material.io/develop/web/components/menus/.
- ↑ "PolymerElements/paper-dropdown-button - webcomponents.org". https://www.webcomponents.org/element/@polymer/paper-dropdown-menu.
- ↑ "AngularJS Material - Demos > Select". https://material.angularjs.org/latest/demo/select.
- ↑ "Select - Materialize". https://materializecss.com/select.html.
- ↑ "Select React component - Material-UI". https://material-ui.com/demos/selects.
- ↑ "Select Menus - Material Components for the Web". https://material.io/develop/web/components/input-controls/select-menus/.
- ↑ Jump up to: 75.0 75.1 75.2 "PolymerElements/paper-drawer-panel - webcomponents.org". https://www.webcomponents.org/element/@polymer/paper-drawer-panel.
- ↑ "Drawer React component - Material-UI". https://material-ui.com/demos/drawers/.
- ↑ Jump up to: 79.0 79.1 79.2 "Drawers - Material Components for the Web". https://material.io/develop/web/components/drawers/.
- ↑ "PolymerElements/paper-progress - webcomponents.org". https://www.webcomponents.org/element/@polymer/paper-progress.
- ↑ "AngularJS Material - Demos > Progress Linear". https://material.angularjs.org/latest/demo/progressLinear.
- ↑ "(Linear) Preloader - Materialize". https://materializecss.com/preloader.html#linear.
- ↑ "Linear Progress React component - Material-UI". https://material-ui.com/demos/progress/#linear.
- ↑ Jump up to: 84.0 84.1 "Material Design Lite (Circular/Linear Progress)". https://getmdl.io/components/index.html#loading-section.
- ↑ "Linear Progress - Material Components for the Web". https://material.io/develop/web/components/linear-progress/.
- ↑ "AngularJS Material - Demos > Progress Circular". https://material.angularjs.org/latest/demo/progressCircular.
- ↑ "(Circular) Preloader - Materialize". https://materializecss.com/preloader.html#circular.
- ↑ "Circular Progress React component - Material-UI". https://material-ui.com/demos/progress/#circular.
- ↑ "PolymerElements/paper-checkbox - webcomponents.org". https://www.webcomponents.org/element/@polymer/paper-checkbox.
- ↑ "AngularJS Material - Demos > Checkbox". https://material.angularjs.org/latest/demo/checkbox.
- ↑ "Checkboxes - Materialize". https://materializecss.com/checkboxes.html.
- ↑ "Checkbox React component - Material-UI". https://material-ui.com/demos/selection-controls/#checkboxes.
- ↑ "Checkboxes - Material Components for the Web". https://material.io/develop/web/components/input-controls/checkboxes/.
- ↑ "PolymerElements/paper-radio-group - webcomponents.org". https://www.webcomponents.org/element/@polymer/paper-radio-group.
- ↑ "PolymerElements/paper-radio-button - webcomponents.org". https://www.webcomponents.org/element/@polymer/paper-radio-button.
- ↑ "AngularJS Material - Demos > Radio Button". https://material.angularjs.org/latest/demo/radioButton.
- ↑ "Radio Buttons - Materialize". https://materializecss.com/radio-buttons.html.
- ↑ "Radio React component - Material-UI". https://material-ui.com/demos/selection-controls/#radio-buttons.
- ↑ "Radio Buttons - Material Components for the Web". https://material.io/develop/web/components/input-controls/radio-buttons/.
- ↑ "PolymerElements/paper-toggle-button - webcomponents.org". https://www.webcomponents.org/element/@polymer/paper-toggle-button.
- ↑ "AngularJS Material - Demos > Switch". https://material.angularjs.org/latest/demo/switch.
- ↑ "Switches - Materialize". https://materializecss.com/switches.html.
- ↑ "Switch React component - Material-UI". https://material-ui.com/demos/selection-controls/#switches.
- ↑ "Switches - Material Components for the Web". https://material.io/develop/web/components/input-controls/switches/.
- ↑ Jump up to: 105.0 105.1 "AngularJS Material - Demos > Bottom Sheet". https://material.angularjs.org/latest/demo/bottomSheet.
- ↑ "(Bottom Sheet) Modals - Materialize". https://materializecss.com/modals.html#bottom-sheet.
- ↑ "(Clipped under app bar) Drawer React component - Material-UI". https://material-ui.com/demos/drawers/#clipped-under-the-app-bar.
- ↑ "(Swipeable temporary) Drawer React component - Material-UI". https://material-ui.com/demos/drawers/#swipeable-temporary-drawer.
- ↑ Jump up to: 109.0 109.1 "PolymerElements/paper-slider - webcomponents.org". https://www.webcomponents.org/element/@polymer/paper-slider.
- ↑ Jump up to: 110.0 110.1 "AngularJS Material - Demos > Slider". https://material.angularjs.org/latest/demo/slider.
- ↑ "Range - Materialize". https://materializecss.com/range.html.
- ↑ "Slider React component - Material-UI". https://material-ui.com/lab/slider/.
- ↑ "Material Design Lite (Sliders)". https://getmdl.io/components/index.html#sliders-section.
- ↑ "(Continuous) Sliders - Material Components for the Web". https://material.io/develop/web/components/input-controls/sliders/#continuous-slider.
- ↑ "(Discrete) Sliders - Material Components for the Web". https://material.io/develop/web/components/input-controls/sliders/#discrete-slider.
- ↑ "PolymerElements/paper-toast - webcomponents.org". https://www.webcomponents.org/element/@polymer/paper-toast.
- ↑ "AngularJS Material - Demos > Toast". https://material.angularjs.org/latest/demo/toast.
- ↑ "Toasts - Materialize". https://materializecss.com/toasts.html.
- ↑ "Snackbar React component - Material-UI". https://material-ui.com/demos/snackbars/.
- ↑ "Material Design Lite (Snackbar)". https://getmdl.io/components/index.html#snackbar-section.
- ↑ "Snackbars - Material Components for the Web". https://material.io/develop/web/components/snackbars/.
- ↑ Jump up to: 122.0 122.1 "PolymerElements/paper-tab - webcomponents.org". https://www.webcomponents.org/element/@polymer/paper-tabs.
- ↑ Jump up to: 123.0 123.1 "AngularJS Material - Demos > Tabs". https://material.angularjs.org/latest/demo/tabs.
- ↑ Jump up to: 124.0 124.1 "Tabs - Materialize". https://materializecss.com/tabs.html.
- ↑ "(Fixed) Tabs React component - Material-UI". https://material-ui.com/demos/tabs/#fixed-tabs.
- ↑ Jump up to: 126.0 126.1 "Tab - Material Components for the Web". https://material.io/develop/web/components/tabs/tab/.
- ↑ "(Scrollable) Tabs React component - Material-UI". https://material-ui.com/demos/tabs/#scrollable-tabs.
- ↑ Jump up to: 128.0 128.1 "PolymerElements/paper-input - webcomponents.org". https://www.webcomponents.org/element/@polymer/paper-input.
- ↑ "(Filled) Text Field React component - Material-UI". https://material-ui.com/demos/text-fields/#filled.
- ↑ "Text Field - Material Components for the Web". https://material.io/develop/web/components/input-controls/text-field/.
- ↑ "(Outlined) Text Field React component - Material-UI". https://material-ui.com/demos/text-fields/#outlined.
- ↑ "(Outlined) Text Field - Material Components for the Web". https://material.io/develop/web/components/input-controls/text-field/#outlined.
- ↑ "PolymerElements/paper-tooltip - webcomponents.org". https://www.webcomponents.org/element/@polymer/paper-tooltip.
- ↑ "AngularJS Material - Demos > Tooltip". https://material.angularjs.org/latest/demo/tooltip.
- ↑ "Tooltips - Materialize". https://materializecss.com/tooltips.html.
- ↑ "Tooltip React component - Material-UI". https://material-ui.com/demos/tooltips/.
- ↑ "Material Design Lite (Tooltip)". https://getmdl.io/components/index.html#tooltips-section.