Widget.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.

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.

containedButton

outlinedButton : Palette -> ButtonStyle msg

A outlined button representing an important action within a group.

outlinedButton

textButton : Palette -> ButtonStyle msg

A text button representing a simple action within a group.

textButton

iconButton : Palette -> ButtonStyle msg

An single selectable icon.

iconButton

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.

toggleButton

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

buttonRow

Switch

switch : Palette -> SwitchStyle msg

A boolean switch

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.

cardColumn

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.

chip

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.

textInput

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.

alertDialog

List

row : RowStyle msg

A simple styling for a row.

column : ColumnStyle msg

A simple styling for a column.

App Bar

menuBar :

Palette

-> AppBarStyle

{ menuIcon : Icon msg

, title : List (Attribute msg)

}

msg

An app bar with a menu on the left side

menuBar

tabBar :

Palette

-> AppBarStyle

{ menuTabButton : ButtonStyle msg

, title : List (Attribute msg)

}

msg

An app bar with tabs instead of a menu

tabBar

Sheet

sideSheet : Palette -> ColumnStyle msg

A side sheet. Has a maximal width of 360.

sideSheet

bottomSheet : Palette -> ColumnStyle msg

A bottom sheet. Has a maximal width of 360. Should be align to the bottom right corner of the screen.

Item

A List is build from items. You way want to use special items to visually organize the content of your list.

fullBleedItem : Palette -> ItemStyle (FullBleedItemStyle msg) msg

A basic item containg some text, a button. Spans the full width.

fullBleedItem

insetItem : Palette -> ItemStyle (InsetItemStyle msg) msg

A basic item containg some text, a button and some additional information.

insetItem

multiLineItem : Palette -> ItemStyle (MultiLineItemStyle msg) msg

A text item allowing for more text.

multiLineItem

imageItem : Palette -> ItemStyle (ImageItemStyle msg) msg

Similar to a textItem but with an image instead of the icon.

If the image is bigger then 40x40, the size of the item will change.

imageItem

expansionItem : Palette -> ExpansionItemStyle msg

An expandable item.

expansionItem

Technical Remarks:

The Icons are taken from danmarcab/material-icons.

selectItem : Palette -> ItemStyle (ButtonStyle msg) msg

Displays a selection. This should be combined with Widget.selectItem

selectItem

fullBleedDivider : Palette -> ItemStyle (DividerStyle msg) msg

A divider covering the full length

fullBleedDivider

insetDivider : Palette -> ItemStyle (DividerStyle msg) msg

A divider covering only parts of the width

insetDivider

middleDivider : Palette -> ItemStyle (DividerStyle msg) msg

A divider in the center

middleDivider

fullBleedHeader : Palette -> ItemStyle (HeaderStyle msg) msg

A header of a section of a list. Comes with a full bleed divider.

fullBleedHeader

insetHeader : Palette -> ItemStyle (HeaderStyle msg) msg

A header of a section of a list. Comes with a inset divider.

insetHeader

Progress Indicator

progressIndicator : Palette -> ProgressIndicatorStyle msg

A circular progress indicator

progressIndicator

Sort Table

sortTable : Palette -> SortTableStyle msg

A sortable table

sortTable

Snackbar

snackbar : Palette -> SnackbarStyle msg

A typical snackbar

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.

tab

tabButton : Palette -> ButtonStyle msg

A single Tab button.

tabButton

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.

Orasund/elm-ui-widgets/3.0.0

Widget.Material

Palette

Button

Switch

Card

Chip

Dialog

List

App Bar

Sheet

Item

Progress Indicator

Sort Table

Snackbar

Tab

Modules