Materialize: Supported material design components

[tomscholz]

A list with all the currently into materialize implemented components.

I guess this can be seen as somekind of a Roadmap

• [x] [Bottom sheets](https://www.google.com/design/spec/components/bottom-sheets.html)
• [ ] [Buttons](http://www.material-ui.com/#/components/buttons)
  
  
  
  • [x] [Flat & raised buttons](https://www.google.com/design/spec/components/buttons.html#buttons-flat-raised-buttons)
  
  
  • [ ] [Toggle buttons](https://www.google.com/design/spec/components/buttons.html#buttons-toggle-buttons)
  
  
  • [ ] [Icon toggles (Custom Checkbox)](https://www.google.com/design/spec/components/buttons.html#buttons-toggle-buttons)
  
  
  • [ ] [Dropdown: Mobile: Dropdown buttons (DropDownMenu)](https://www.google.com/design/spec/components/buttons.html#buttons-dropdown-buttons)
  
  
  • [ ] [Dropdown: Mobile: Generic overflow](https://www.google.com/design/spec/components/buttons.html#buttons-dropdown-buttons)
  
  
  • [ ] [Dropdown: Mobile: Segmented](https://www.google.com/design/spec/components/buttons.html#buttons-dropdown-buttons)
  
  
  • [ ] [Dropdown: Mobile: Editable segmented](https://www.google.com/design/spec/components/buttons.html#buttons-dropdown-buttons)
  
  
  • [x] [Dropdown: Desktop: Dropdown buttons](https://www.google.com/design/spec/components/buttons.html#buttons-dropdown-buttons)
  
  
• [x] [Buttons: Floating Action Button](https://www.google.com/design/spec/components/buttons-floating-action-button.html)
  
  
  
  • [ ] [Trigger](https://www.google.com/design/spec/components/buttons-floating-action-button.html#buttons-floating-action-button-transitions)
  
  
  • [x] [Toolbar](https://www.google.com/design/spec/components/buttons-floating-action-button.html#buttons-floating-action-button-transitions)
  
  
  • [x] [Speed dial](https://www.google.com/design/spec/components/buttons-floating-action-button.html#buttons-floating-action-button-transitions)
  
  
  • [ ] [Morph](http://www.google.com/design/spec/components/buttons-floating-action-button.html#buttons-floating-action-button-transitions)
  
  
  • [ ] [Full screen](http://www.google.com/design/spec/components/buttons-floating-action-button.html#buttons-floating-action-button-transitions)
  
  
• [ ] [Bottom navigation](https://www.google.com/design/spec/components/bottom-navigation.html)
• [x] [Cards](https://www.google.com/design/spec/components/cards.html)
• [x] [Chips](https://www.google.com/design/spec/components/chips.html)
  
  
  
  • [x] [Standard](https://www.google.com/design/spec/components/chips.html)
  
  
  • [x] [Contact](https://www.google.com/design/spec/components/chips.html#chips-contact-chips)
  
  
• [ ] [Data tables](https://www.google.com/design/spec/components/data-tables.html)
• [ ] [Dialogs](https://www.google.com/design/spec/components/dialogs.html)
  
  
  
  • [ ] [Alerts](https://www.google.com/design/spec/components/dialogs.html#dialogs-alerts)
  
  
  • [ ] [Simple menus (Menu)](https://www.google.com/design/spec/components/dialogs.html#dialogs-simple-menus)
  
  
  • [ ] [Simple dialogs (Can be constructed with Dialog and List.)](https://www.google.com/design/spec/components/dialogs.html#dialogs-simple-dialogs)
  
  
  • [ ] [Confirmation dialogs](https://www.google.com/design/spec/components/dialogs.html#dialogs-confirmation-dialogs)
  
  
  • [ ] [Full screen dialogs](https://www.google.com/design/spec/components/dialogs.html#dialogs-full-screen-dialogs)
  
  
• [x] [Dividers](https://www.google.com/design/spec/components/dividers.html)
  
  
  
  • [x] [Full bleed](https://www.google.com/design/spec/components/dividers.html#dividers-types-of-dividers)
  
  
  • [ ] [Inset](https://www.google.com/design/spec/components/dividers.html#dividers-types-of-dividers)
  
  
• [ ] [Expansion Panels](https://www.google.com/design/spec/components/expansion-panels.html)
• [ ] [Grid lists](https://www.google.com/design/spec/components/grid-lists.html)
• [ ] [Lists](https://www.google.com/design/spec/components/lists.html) (See: https://github.com/Dogfalo/materialize/issues/4727)
  
  
  
  • [ ] [Single line](https://www.google.com/design/spec/components/lists.html#lists-specs)
  
  
  • [ ] [Two line](https://www.google.com/design/spec/components/lists.html#lists-specs)
  
  
  • [ ] [Three line](https://www.google.com/design/spec/components/lists.html#lists-specs)
  
  
  • [ ] [Avatar](https://www.google.com/design/spec/components/lists.html#lists-specs)
  
  
  • [ ] [Icon](https://www.google.com/design/spec/components/lists.html#lists-specs)
  
  
• [ ] [Lists: Controls](https://www.google.com/design/spec/components/lists-controls.html)
  
  
  
  • [ ] [Checkbox (Primary only)](https://www.google.com/design/spec/components/lists-controls.html#lists-controls-types-of-list-controls)
  
  
  • [ ] [Switch (Toggle)](https://www.google.com/design/spec/components/lists-controls.html#lists-controls-types-of-list-controls)
  
  
  • [ ] [Reorder](https://www.google.com/design/spec/components/lists-controls.html#lists-controls-types-of-list-controls)
  
  
  • [ ] [Expand/collapse](https://www.google.com/design/spec/components/lists-controls.html#lists-controls-types-of-list-controls)
  
  
  • [ ] [Leave-behinds](https://www.google.com/design/spec/components/lists-controls.html#lists-controls-types-of-list-controls)
  
  
• [ ] [Menus](https://www.google.com/design/spec/components/menus.html)
  
  
  
  • [x] [Button menu (Can be constructed)](https://www.google.com/design/spec/components/menus.html#menus-usage)
  
  
  • [ ] [Scrollable](https://www.google.com/design/spec/components/menus.html#menus-usage)
  
  
  • [ ] [Cascade](https://www.google.com/design/spec/components/menus.html#menus-usage)
  
  
  • [ ] [Textfield dropdown (DropDownMenu)](https://www.google.com/design/spec/components/menus.html#menus-behavior)
  
  
  • [ ] [Trigger](https://www.google.com/design/spec/components/menus.html#menus-usage)
  
  
  • [ ] [Simple menus (Menu)](https://www.google.com/design/spec/components/menus.html#menus-simple-menus)
  
  
• [x] [Pickers](https://www.google.com/design/spec/components/pickers.html)
  
  
  
  • [x] [Date picker](https://www.google.com/design/spec/components/pickers.html#pickers-date-pickers)
  
  
  • [x] [Time picker](https://www.google.com/design/spec/components/pickers.html#pickers-time-pickers)
  
  
• [ ] [Progress & activity](https://www.google.com/design/spec/components/progress-activity.html)
  
  
  
  • [x] [Linear](https://www.google.com/design/spec/components/progress-activity.html#progress-activity-types-of-indicators)
  
  
  • [x] [Circular](https://www.google.com/design/spec/components/progress-activity.html#progress-activity-types-of-indicators)
  
  
  • [ ] [Circular with integration](https://www.google.com/design/spec/components/progress-activity.html#progress-activity-types-of-indicators)
  
  
  • [x] [Loading](https://www.google.com/design/spec/components/progress-activity.html#progress-activity-types-of-indicators)
  
  
• [x] [Selection controls](https://www.google.com/design/spec/components/selection-controls.html)
  
  
  
  • [x] [Checkbox](https://www.google.com/design/spec/components/selection-controls.html#selection-controls-checkbox)
  
  
  • [x] [Radio button](https://www.google.com/design/spec/components/selection-controls.html#selection-controls-radio-button)
  
  
  • [x] [Switch](https://www.google.com/design/spec/components/selection-controls.html#selection-controls-switch)
  
  
• [ ] [Sliders](https://www.google.com/design/spec/components/sliders.html)
  
  
  
  • [ ] [Continuous](https://www.google.com/design/spec/components/sliders.html#sliders-continuous-slider)
  
  
  • [x] [Discrete](https://www.google.com/design/spec/components/sliders.html#sliders-discrete-slider)
  
  
• [x] [Snackbars & toasts](https://www.google.com/design/spec/components/snackbars-toasts.html)
• [ ] [Subheaders](https://www.google.com/design/spec/components/subheaders.html)
  
  
  
  • [ ] [List](https://www.google.com/design/spec/components/subheaders.html#subheaders-list-subheaders)
  
  
  • [ ] [Grid](https://www.google.com/design/spec/components/subheaders.html#subheaders-list-subheaders)
  
  
  • [ ] [Menu](https://www.google.com/design/spec/components/subheaders.html#subheaders-list-subheaders)
  
  
• [ ] [Steppers](https://www.google.com/design/spec/components/steppers.html)
  
  
  
  • [ ] [Horizontal](https://www.google.com/design/spec/components/steppers.html#steppers-types-of-steppers)
  
  
  • [ ] [Vertical](https://www.google.com/design/spec/components/steppers.html#steppers-types-of-steppers)
  
  
• [ ] [Tabs](https://www.google.com/design/spec/components/tabs.html)
  
  
  
  • [x] [Text](https://www.google.com/design/spec/components/tabs.html#tabs-usage)
  
  
  • [x] [Icon](https://www.google.com/design/spec/components/tabs.html#tabs-usage)
  
  
  • [ ] [Icon and text](https://www.google.com/design/spec/components/tabs.html#tabs-usage)
  
  
  • [ ] [Dropdown](https://www.google.com/design/spec/components/tabs.html#tabs-usage)
  
  
  • [x] [Overflow pagination](https://www.google.com/design/spec/components/tabs.html#tabs-usage)
  
  
• [ ] [Text fields](https://www.google.com/design/spec/components/text-fields.html)
  
  
  
  • [x] [Single-line](https://www.google.com/design/spec/components/text-fields.html#text-fields-single-line-text-field)
  
  
  • [x] [Multi-line](https://www.google.com/design/spec/components/text-fields.html#text-fields-multi-line-text-field)
  
  
  • [ ] [Full-width](https://www.google.com/design/spec/components/text-fields.html#text-fields-multi-line-text-field)
  
  
  • [x] [Character counter](https://www.google.com/design/spec/components/text-fields.html#text-fields-character-counter)
  
  
  • [x] [Auto-complete](https://www.google.com/design/spec/components/text-fields.html#text-fields-auto-complete-text-field)
  
  
  • [ ] [Search filter](https://www.google.com/design/spec/components/text-fields.html#text-fields-search-filter)
  
  
  • [ ] [Password](https://www.google.com/design/spec/components/text-fields.html#text-fields-password-input)
  
  
• [ ] [Toolbars (AppBar/Toolbar)](https://www.google.com/design/spec/components/toolbars.html)
• [x] [Tooltips](https://www.google.com/design/spec/components/tooltips.html)
  
  
  
  • [ ] [Desktop](https://www.google.com/design/spec/components/tooltips.html#tooltips-tooltips-desktop)
  
  
  • [ ] [Mobile](https://www.google.com/design/spec/components/tooltips.html#tooltips-tooltips-mobile)
  
  

[fega]

@tomscholz please add something like "single line text suffix", or maybe it is the same password field?

also on inputs:
- clearbutton
- disabled (need an update)
- the ugly new text area
- text suffix, text pregfix
Solo fields
- search nested in navbar
- search raised
- solo with button
Text field box
- single
- multiline
- dense
- area

[DanielRuf]

Don't we already have the discrete slider? Didn't someone create a stepper and mention it in the Gitter chats?

[tomscholz]

It isn't complete yet. Somehow I can't check all of the boxes. Here's a gist with the markdown...
https://gist.github.com/tomscholz/d8e933c827ef50214fc8c27f37ee1f29

[ncovercash]

i think we have full bleed dividers, with div.divider (http://materializecss.com/grid.html)

[ncovercash]

@tomscholz Timepicker PR: 4445
Maybe we should comment specific issues and PRs relevant next to each one?

[tomscholz]

@smileytechguy Added. Great idea.

[ezienecker]

@tomscholz isn't the list already implemented? See the collections in materialize.

[fega]

@ManuZiD But are different of the official MD spec, though

[alexisdiel]

@tomscholz how can I help on this items that are not implemented yet?

[Dogfalo]

We aren't looking to add new components at the moment. We're focusing on 1.0.0 release.

Please see: https://github.com/Dogfalo/materialize/issues?q=is%3Aissue+is%3Aopen+label%3Ahelp-wanted for places where help is needed.

[storm1er]

About buttons, we can see on many google sites (here an exemple https://cloud.google.com/solutions/iot/ ) where hovering button doesn't change only shadow but also move element 1px up or similar (make button elevating himself)

We should consider this to

[alexisdiel]

About Steppers, i found this one, https://kinark.github.io/Materialize-stepper/

[fega]

why this was closed?, I think was useful