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.
{ 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.
Image take from material.io
darkPalette : Palette
The official dark theme of google.
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
Different styles for buttons have different meanings.
textButton
as your default buttoncontainedButton
for any important actionoutlinedButton
if you have more then one important action.
Use containedButton
for the most important action of the group.containedButton : Palette -> Internal.Button.ButtonStyle msg
A contained button representing the most important action of a group.
outlinedButton : Palette -> Internal.Button.ButtonStyle msg
A outlined button representing an important action within a group.
textButton : Palette -> Internal.Button.ButtonStyle msg
A text button representing a simple action within a group.
iconButton : Palette -> Internal.Button.ButtonStyle msg
An single selectable icon.
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.
Technical Remark:
toggleRow : Internal.List.RowStyle msg
a Row of buttons.
Only use in combination with toggleButton
checkbox : Palette -> Internal.Checkbox.CheckboxStyle msg
A checkbox button
switch : Palette -> Internal.Switch.SwitchStyle msg
A boolean switch
Technical Remark:
radio : Palette -> Widget.RadioStyle msg
A radio button
cardColumn : Palette -> Internal.List.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.
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 : 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:
textInput
for this feature.toggleButton
for icons with no text and chips for text with no icons.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.
Technical Remark:
passwordInput : Palette -> Internal.PasswordInput.PasswordInputStyle msg
A text input style for the password Input.
alertDialog : Palette -> Internal.Dialog.DialogStyle msg
An alert dialog for important decisions. Use a snackbar for less important notification.
row : Internal.List.RowStyle msg
A simple styling for a row.
column : Internal.List.ColumnStyle msg
A simple styling for a column.
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
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
sideSheet : Palette -> Internal.List.ColumnStyle msg
A side sheet. Has a maximal width of 360.
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.
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.
insetItem : Palette -> Internal.Item.ItemStyle (Internal.Item.InsetItemStyle msg) msg
A basic item containing some text, a button and some additional information.
multiLineItem : Palette -> Internal.Item.ItemStyle (Internal.Item.MultiLineItemStyle msg) msg
A text item allowing for more text.
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.
expansionItem : Palette -> Internal.Item.ExpansionItemStyle msg
An expandable item.
Technical Remarks:
selectItem : Palette -> Internal.Item.ItemStyle (Internal.Button.ButtonStyle msg) msg
Displays a selection. This should be combined with Widget.selectItem
fullBleedDivider : Palette -> Internal.Item.ItemStyle (Internal.Item.DividerStyle msg) msg
A divider covering the full length
insetDivider : Palette -> Internal.Item.ItemStyle (Internal.Item.DividerStyle msg) msg
A divider covering only parts of the width
middleDivider : Palette -> Internal.Item.ItemStyle (Internal.Item.DividerStyle msg) msg
A divider in the center
fullBleedHeader : Palette -> Internal.Item.ItemStyle (Internal.Item.HeaderStyle msg) msg
A header of a section of a list. Comes with a full bleed divider.
insetHeader : Palette -> Internal.Item.ItemStyle (Internal.Item.HeaderStyle msg) msg
A header of a section of a list. Comes with a inset divider.
progressIndicator : Palette -> Internal.ProgressIndicator.ProgressIndicatorStyle msg
A circular progress indicator
sortTable : Palette -> Internal.SortTable.SortTableStyle msg
A sortable table
snackbar : Palette -> Widget.Snackbar.SnackbarStyle msg
A typical snackbar
Technical Remark:
tab : Palette -> Internal.Tab.TabStyle msg
A Tab bar meant for only the upper most level. Do not use a tab within a tab.
tabButton : Palette -> Internal.Button.ButtonStyle msg
A single Tab button.
Technical Remark:
buttonRow : Internal.List.RowStyle msg
DEPRECATED
Use Material.toggleRow instead