Orasund / elm-ui-widgets / 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 typography 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 actually using a different color.

defaultPalette : Palette

The default color theme.

The default theme

Image take from material.io

darkPalette : Palette

The official dark theme of google.

The dark theme

Image take from material.io

swapColor : Palette -> Palette

Swaps the primary and secondary color.

Why is this needed? See the material design specification for details.

gray : Palette -> Color

generates a "grayish 50%" color that matches the on-surface color.

lightGray : Palette -> Color

generates a "grayish 14%" color that matches the on-surface color.

textGray : Palette -> Color

generates a grayer text color

Button

Different styles for buttons have different meanings.

containedButton : Palette -> Internal.Button.ButtonStyle msg

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

containedButton

outlinedButton : Palette -> Internal.Button.ButtonStyle msg

A outlined button representing an important action within a group.

outlinedButton

textButton : Palette -> Internal.Button.ButtonStyle msg

A text button representing a simple action within a group.

textButton

iconButton : Palette -> Internal.Button.ButtonStyle msg

An single selectable icon.

iconButton

Technical Remark:

toggleButton : Palette -> Internal.Button.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:

toggleRow : Internal.List.RowStyle msg

a Row of buttons.

Only use in combination with toggleButton

buttonRow

Checkbox

checkbox : Palette -> Internal.Checkbox.CheckboxStyle msg

A checkbox button

checkbox

Switch

switch : Palette -> Internal.Switch.SwitchStyle msg

A boolean switch

switch

Technical Remark:

Radio

radio : Palette -> Widget.RadioStyle msg

A radio button

radio

Card

cardColumn : Palette -> Internal.List.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.

cardAttributes : Palette -> List (Element.Attribute msg)

A variant of cardColumn designed for a single item.

Use this with a normal Element.column, Element.row or even a Element.el.

Chip

chip : Palette -> Internal.Button.ButtonStyle msg

Chips have the same behavior as buttons but are visually less important.

In the official documentation chips have different names depending on where they are used:

chip

Technical Remark:

textInputAttributes : Palette -> List (Element.Attribute msg)

A variant of textInput designed for Input.text.

textInput : Palette -> Internal.TextInput.TextInputStyle msg

A text input style that is included only to support input chips.

textInput

Technical Remark:

passwordInput : Palette -> Internal.PasswordInput.PasswordInputStyle msg

A text input style for the password Input.

Dialog

alertDialog : Palette -> Internal.Dialog.DialogStyle msg

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

alertDialog

List

row : Internal.List.RowStyle msg

A simple styling for a row.

column : Internal.List.ColumnStyle msg

A simple styling for a column.

App Bar

menuBar : Palette -> Internal.AppBar.AppBarStyle { menuIcon : Widget.Icon.Icon msg, title : List (Element.Attribute msg) } msg

An app bar with a menu on the left side

menuBar

tabBar : Palette -> Internal.AppBar.AppBarStyle { menuTabButton : Internal.Button.ButtonStyle msg, title : List (Element.Attribute msg) } msg

An app bar with tabs instead of a menu

tabBar

Sheet

sideSheet : Palette -> Internal.List.ColumnStyle msg

A side sheet. Has a maximal width of 360.

sideSheet

bottomSheet : Palette -> Internal.List.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 -> Internal.Item.ItemStyle (Internal.Item.FullBleedItemStyle msg) msg

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

fullBleedItem

insetItem : Palette -> Internal.Item.ItemStyle (Internal.Item.InsetItemStyle msg) msg

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

insetItem

multiLineItem : Palette -> Internal.Item.ItemStyle (Internal.Item.MultiLineItemStyle msg) msg

A text item allowing for more text.

multiLineItem

imageItem : Palette -> Internal.Item.ItemStyle (Internal.Item.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 -> Internal.Item.ExpansionItemStyle msg

An expandable item.

expansionItem

Technical Remarks:

selectItem : Palette -> Internal.Item.ItemStyle (Internal.Button.ButtonStyle msg) msg

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

selectItem

fullBleedDivider : Palette -> Internal.Item.ItemStyle (Internal.Item.DividerStyle msg) msg

A divider covering the full length

fullBleedDivider

insetDivider : Palette -> Internal.Item.ItemStyle (Internal.Item.DividerStyle msg) msg

A divider covering only parts of the width

insetDivider

middleDivider : Palette -> Internal.Item.ItemStyle (Internal.Item.DividerStyle msg) msg

A divider in the center

middleDivider

fullBleedHeader : Palette -> Internal.Item.ItemStyle (Internal.Item.HeaderStyle msg) msg

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

fullBleedHeader

insetHeader : Palette -> Internal.Item.ItemStyle (Internal.Item.HeaderStyle msg) msg

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

insetHeader

Progress Indicator

progressIndicator : Palette -> Internal.ProgressIndicator.ProgressIndicatorStyle msg

A circular progress indicator

progressIndicator

Sort Table

sortTable : Palette -> Internal.SortTable.SortTableStyle msg

A sortable table

sortTable

Snackbar

snackbar : Palette -> Widget.Snackbar.SnackbarStyle msg

A typical snackbar

snackbar

Technical Remark:

Tab

tab : Palette -> Internal.Tab.TabStyle msg

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

tab

tabButton : Palette -> Internal.Button.ButtonStyle msg

A single Tab button.

tabButton

Technical Remark:

DEPRECATED

buttonRow : Internal.List.RowStyle msg

DEPRECATED

Use Material.toggleRow instead