Widget.Style.Material
This module implements a Material design theme for all widgets.
The stylings are following the official Material Design guidelines as close as possible. Please use these widgets in combination with the official guidelines.
The typograpahy is taken from the material design guidelines. Its recommended to use a font size of 16px width and the Roboto Font.
The style are not opaque, so you can change every styling to your needs.
If you have any suggestions or improvements, be sure to leave a PR or a Issue over at the github repos.
You can use the theme by copying the following code:
type alias Style msg =
{ dialog : DialogStyle msg
, expansionPanel : ExpansionPanelStyle msg
, button : ButtonStyle msg
, primaryButton : ButtonStyle msg
, tab : TabStyle msg
, textInput : TextInputStyle msg
, chipButton : ButtonStyle msg
, row : RowStyle msg
, buttonRow : RowStyle msg
, column : ColumnStyle msg
, cardColumn : ColumnStyle msg
, sortTable : SortTableStyle msg
, selectButton : ButtonStyle msg
, layout : LayoutStyle msg
}
sortTable : Palette -> SortTableStyle msg
sortTable palette =
{ containerTable = []
, headerButton = Material.textButton palette
, ascIcon = Icons.chevronUp |> Element.html |> Element.el []
, descIcon = Icons.chevronDown |> Element.html |> Element.el []
, defaultIcon = Element.none
}
style : Palette -> Style msg
style palette =
{ sortTable = sortTable palette
, row = Material.row
, buttonRow = Material.buttonRow
, cardColumn = Material.cardColumn palette
, column = Material.column
, button = Material.outlinedButton palette
, primaryButton = Material.containedButton palette
, selectButton = Material.toggleButton palette
, tab = Material.tab palette
, textInput = Material.textInput palette
, chipButton = Material.chip palette
, expansionPanel = Material.expansionPanel palette
, dialog = Material.alertDialog palette
, layout = Material.layout palette
}Palette
Button
Different styles for buttons have different meanings.
- Use
textButtonas your default button - Use
containedButtonfor any important action - Use
outlinedButtonif you have more then one important action. UsecontainedButtonfor the most important action of the group.
An single selectable icon.
Image taken from material.io
Technical Remark:
- Could not find any specification details
A ToggleButton. Only use as a group in combination with buttonRow.
Image taken from material.io
Toggle buttons should only be used with the iconButton widget, else use chips instead.
Technical Remark:
- Border color was not defined in the specification
- There are two different versions, one where the selected color is gray and another where the color is primary. I noticed the gray version was used more often, so i went with that one.
a Row of buttons.
Only use in combination with toggleButton
Card
In the material design specification the card is not really specified at all. Im practice the List seams more useful then a own card widget. Thus for now we only provide a card containing a list.
A List styled like a card.
Technical Remark:
This is a simplification of the Material Design Card and might get replaced at a later date.
Chip
Chips have the same behaviour as buttons but are visually less important.
In the official documentation chips have different names depending on where they are used:
- Input Chips are used inside a text field. Use
textInputfor this feature. - Choice Chips are used for selcting an option.
The material design guidelines recommend using
toggleButtonfor icons with no text and chips for text with no icons. - Filter Chips are used for selecting multiple options. They typically have a done-icon when selected.
- Action chips are like button. Make sure to include an icon when using action chips.
Technical Remark:
- Desided against the implementation of an outlined chip. Please open a new issue or a PR if you want to have it implemented.
A text input style that is included only to support input chips.
Technical Remark:
- This is just a temporary implementation. It will soon be replaced with the official implementation.
Dialog
An alert dialog for important decisions. Use a snackbar for less important notification.
Image taken from material.io
Expansion Panel
The expansion Panel is an outdated part of the material design specification. In modern implementation it gets replaced with a very sophisticated list widget.
Technical Remarks:
- The expansion panel is part of an older version of the Material Design. The newer version is part of the List component. The styling is taken from the new specification.
- The Icons are taken from danmarcab/material-icons.
List
The List widget is a very complex widget that sadly only particially made it into this package.
A simple styling for a row.
A simple styling for a column.
Snackbar
A typical snackbar
Image take from material.io
Technical Remark:
- The text color of the button was not given in the specification. This implementation adujsts the luminance of the color to fit the w3 accessability standard
Tab
A Tab bar meant for only the upper most level. Do not use a tab within a tab.
A single Tab button.
Technical Remark:
- The official specification states that the background color should be the surface color, but the pictures and actuall implementations all have no background color. So here the background color is also not set.
Layout
The Layout Widget combines the following Material design concepts:
- Top bar
- Navigation drawer
- Side Sheet
- Dialog
- Snackbar
Future updates might try to seperate them into there own widgets. But for now they are only available as an all-in-one solution.
Technical Remark:
- The Icons are taken from danmarcab/material-icons.
- The drawer button as not taken from the specification (This will been to be added later)
The material design comes with customizable color palettes.
Check out the official documentation about the color system to see how these colors are used.
For the
-oncolors you can use white, for transitions into white, or black,for transitions into black. Other colors are also possible, but i've not seen any website acutally using a different color.