Widget.Style.Material

Example using the Material Design style

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
    , progressIndicator : ProgressIndicatorStyle 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
    , progressIndicator = Material.progressIndicator palette
    , layout = Material.layout palette
    }

Palette

type alias Palette =

{ primary : Color

, secondary : Color

, background : Color

, surface : Color

, error : Color

, on :

{ primary : Color

, secondary : Color

, background : Color

, surface : Color

, error : Color

}

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 -on colors 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.

defaultPalette : Palette

The default color theme.

The default theme

Image take from material.io

darkPalette : Palette

The offical dark theme of google.

The dark theme

Image take from material.io

Button

Different styles for buttons have different meanings.

Use textButton as your default button
Use containedButton for any important action
Use outlinedButton if you have more then one important action. Use containedButton for the most important action of the group.

containedButton : Palette -> ButtonStyle msg

A contained button representing the most important action of a group.

outlinedButton : Palette -> ButtonStyle msg

A outlined button representing an important action within a group.

textButton : Palette -> ButtonStyle msg

A text button representing a simple action within a group.

iconButton : Palette -> ButtonStyle msg

An single selectable icon.

Technical Remark:

Could not find any specification details

toggleButton : Palette -> ButtonStyle msg

A ToggleButton. Only use as a group in combination with buttonRow.

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.

buttonRow : RowStyle msg

a Row of buttons.

Only use in combination with toggleButton

Switch

switch : Palette -> SwitchStyle msg

A boolean switch

Technical Remark:

The specification states that the disabled switch should have a color dependend on its activness. This is not implemented.

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.

cardColumn : Palette -> ColumnStyle msg

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

chip : Palette -> ButtonStyle msg

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 textInput for this feature.
Choice Chips are used for selcting an option. The material design guidelines recommend using toggleButton for 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.

textInput : Palette -> TextInputStyle msg

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

alertDialog : Palette -> DialogStyle msg

An alert dialog for important decisions. Use a snackbar for less important notification.

Expansion Panel

expansionPanel : Palette -> ExpansionPanelStyle msg

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.

row : RowStyle msg

A simple styling for a row.

column : ColumnStyle msg

A simple styling for a column.

Progress Indicator

progressIndicator : Palette -> ProgressIndicatorStyle msg

A circular progress indicator

Snackbar

snackbar : Palette -> SnackbarStyle msg

A typical snackbar

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

tab : Palette -> TabStyle msg

A Tab bar meant for only the upper most level. Do not use a tab within a tab.

tabButton : Palette -> ButtonStyle msg

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

layout : Palette -> LayoutStyle msg

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)

Advanced

To create your own Material Widgets, here are all internal functions. Note that you might want to checkout the file on GitHub if you want to tweak some internal behaviour.

Orasund/elm-ui-widgets/2.3.0

Widget.Style.Material

Palette

Button

Switch

Card

Chip

Dialog

Expansion Panel

List

Progress Indicator

Snackbar

Tab

Layout

Advanced

Typography

Modules