Component overview - hpi-swa-teaching/MaterialDesignWidgets GitHub Wiki

Component	Status	Class(es)
App bars: bottom	🔴
App bars: top	🟠	MDAppBar
Backdrop	🔴
Banners	🔴
Bottom navigation	🔴
Buttons	🟡	MDContainedButton, MDOutlinedButton, MDTextButton
Buttons: floating action button	🟠	MDFloatingActionButton
Cards	🔴
Chips	🔴
Data tables	🔴
Dialogs	🟡	MDDialog
Dividers	🟡	MDDivider
Image lists	🔴
Lists	🟠	MDList, MDListItem
Menus	🟠	MDMenu, MDMenuItem
Navigation drawer	🔴
Navigation rail	🔴
Pickers	🔴
Progress indicators	🔴
Selection controls	🟠	MDCheckbox
Sheets: bottom	🔴
Sheets: side	🔴
Sliders	🔴
Snackbars	🔴
Tabs	🔴
Text fields	🟡	MDTextField, MDMultiLineField, MDTextArea
Tooltips	🔴

Icon	Meaning
🟢	Completed
🟡	Almost done
🟠	Lots missing
🔴	Missing

App bars: bottom

Spec

App bars: top

Spec

Feature	Status	Comments
Prominent (expanding)	🔴
Dense	🔴
Prominent dense	🔴
Images	🔴
Navigation icon	🟡	· called addMenuControl: · wrong size
Title	🟡	· called addLabel:? · no enforced position — layout managed by MDSystemWindow
Action items and overflow menu	🔴
Behavior	🔴
Contextual action bar	🔴

• use TableLayout with fixed positions?

Backdrop

Spec

Banners

Spec

Bottom navigation

Spec

Buttons

Spec

Feature	Status	Comments
Contained button	🟢
Contained button with icon	🟢
Outlined button	🟢
Outlined button with icon	🟢
Text button	🟢
Text button with icon	🟢
Toggle buttons	🔴

• MDIconButton is also available
• MDButton:
  • should use primary color by default
  • textDisabledAlpha wrong
  • calculateWidthByText: use hasIcon, hasIconRight
  • defaultPadding: only applies horizontally -> better name?

Buttons: floating action button

Spec

Feature	Status	Comments
Default	🟢
Mini	🔴
Extended	🔴
Extended with icon	🔴
Speed dial	🔴
Menu	🔴

Cards

Spec

Chips

Spec

Data tables

Spec

Dialogs

Spec

Feature	Status	Comments
Alert Dialog	🟢	Customize buttons and content to your liking
Simple Dialog	🟡	Customize buttons and content to your liking
Confirmation Dialog	🟢	Customize buttons and content to your liking
Full-screen dialog	🔴

Dividers

Spec

Feature	Status	Comments
Full-bleed	🟢
Inset	🟢	via padding:
Middle	🟠
Dividers with subheaders	🔴

• Why manually request size from widget i/o hResizing: #spaceFill?

Image lists

Spec

Lists

Spec

Feature	Status	Comments
Default	🟢
Two-line	🔴
Three-line	🔴
Avatar	🔴
Leading icon	🟡	wrong size — actual: 18, expected: 24
Trailing icon	🟡	wrong size — actual: 18, expected: 24
Trailing text	🔴
Expand & collapse	🔴
Subheader	🔴
Subheader inset	🔴
Swipe actions	🔴
Drag to reorder	🔴
Scrim(?)	🔴

• MDListItem:

  • alwaysUppercase should be false

• Divider padding missing

• dense no longer in spec

• cannot disable selectable

• MDDivider:

  • Why use form i/o adding Morph?
  • Why paint backgroundColor?

Menus

Spec

Feature	Status	Comments
Default	🔴	only dense
Dense	🟢
Item: Icon	🟢
Item: Text	🟢
Item: Keyboard command	🔴
Item: Selection state	🔴
Entrance animation	🔴	Optional on desktop
Cascading menu	🟢
Contextual menu	🔴	(At least not used)
Dropdown menu	🔴
Dropdown menu: editable	🔴

• MDMenuItem: typo in class comment
• MDMenu:
  • addLine: should be called addDivider & not working
  • activeSubmenu: calls activeSubMenu:
  • deleteAllRipples call removeRipples (on items)

Navigation drawer

Spec

Navigation rail

Spec

Pickers

Spec

Feature	Status	Comments
Date picker	🔴
Date range picker	🔴

Progress indicators

Spec

Selection controls

Spec

Feature	Status	Comments
Checkboxes	🟡	No indeterminate state
Radio buttons	🔴
Switches	🔴

Sheets: bottom

Spec

Sheets: side

Spec

Sliders

Spec

Snackbars

Spec

Tabs

Spec

Text fields

Spec

Feature	Status	Comments
Filled text field	🟢
Outlined text field	🔴
Input type: Single line text field	🟢	MDTextField
Input type: Multi-line text field	🟢	MDMultiLineField
Input type: Text area	🟢	MDTextArea
Input type: Read-only fields	🔴	state disabled isn't handled

Tooltips

Spec