Widget.Style.Template

Example using the Template style

This package contains mockups designed for writing your own style.

Start by copying the following code and then replace the fields one by one.

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
    }

style : Style msg
style =
    { sortTable = Template.sortTable <| "sortTable"
    , row = Template.row <| "row"
    , buttonRow = Template.row <| "buttonRow"
    , cardColumn = Template.column <| "cardRow"
    , column = Template.column <| "column"
    , button = Template.button <| "button"
    , primaryButton = Template.button <| "primaryButton"
    , tab = Template.tab <| "tab"
    , textInput = Template.textInput <| "textInput"
    , chipButton = Template.button <| "chipButton"
    , expansionPanel = Template.expansionPanel "expansionPanel"
    , selectButton = Template.button "selectButton"
    , dialog = Template.dialog "dialog"
    , layout = Template.layout "layout"
    }

Base Elements

box : String -> List (Attribute msg)

A box representing an element

decoration : String -> List (Attribute msg)

An additional attribute representing a state change.

icon : String -> Element msg

A circle representing an icon

Mockups

button : String -> ButtonStyle msg

button : String -> ButtonStyle msg
button string =
    { container = box <| string ++ ":container"
    , labelRow = box <| string ++ ":labelRow"
    , text = box <| string ++ ":text"
    , ifDisabled = decoration <| string ++ ":ifDisabled"
    , ifActive = decoration <| string ++ ":ifActive"
    , otherwise = decoration <| string ++ ":otherwise"
    }

column : String -> ColumnStyle msg

column : String -> ColumnStyle msg
column string =
    { containerColumn = box <| string ++ ":containerColumn"
    , element = box <| string ++ ":element"
    , ifFirst = decoration <| string ++ ":ifFirst"
    , ifLast = decoration <| string ++ ":ifLast"
    , otherwise = decoration <| string ++ ":otherwise"
    }

dialog : String -> DialogStyle msg

dialog : String -> DialogStyle msg
dialog string =
    { containerColumn = box <| string ++ ":containerColumn"
    , title = box <| string ++ ":title"
    , text = box <| string ++ ":text"
    , buttonRow = box <| string ++ ":buttonRow"
    , acceptButton = button <| string ++ ":acceptButton"
    , dismissButton = button <| string ++ ":dismissButton"
    }

expansionPanel : String -> ExpansionPanelStyle msg

expansionPanel : String -> ExpansionPanelStyle msg
expansionPanel string =
    { containerColumn = box <| string ++ ":containerColumn"
    , panelRow = box <| string ++ ":panelRow"
    , labelRow = box <| string ++ ":labelRow"
    , content = box <| string ++ ":content"
    , expandIcon = icon <| string ++ ":expandIcon"
    , collapseIcon = icon <| string ++ ":collapseIcon"
    }

layout : String -> LayoutStyle msg

layout : String -> LayoutStyle msg
layout string =
    { container = box <| string ++ ":container"
    , snackbar = snackbar <| string ++ ":snackbar"
    , layout = Element.layout
    , header = box <| string ++ ":header"
    , menuButton = button <| string ++ ":menuButton"
    , sheetButton = button <| string ++ ":sheetButton"
    , menuTabButton = button <| string ++ ":menuTabButton"
    , sheet = box <| string ++ ":sheet"
    , menuIcon = icon <| string ++ ":menuIcon"
    , moreVerticalIcon = icon <| string ++ ":moreVerticalIcon"
    , spacing = 8
    , title = box <| string ++ ":title"
    , searchIcon = icon <| string ++ ":searchIcon"
    , search = box <| string ++ ":search"
    , searchFill = box <| string ++ ":searchFill"
    }

row : String -> RowStyle msg

row : String -> RowStyle msg
row string =
    { containerRow = box <| string ++ ":containerRow"
    , element = box <| string ++ ":element"
    , ifFirst = decoration <| string ++ ":ifFirst"
    , ifLast = decoration <| string ++ ":ifLast"
    , otherwise = decoration <| string ++ ":otherwise"
    }

snackbar : String -> SnackbarStyle msg

snackbar : String -> SnackbarStyle msg
snackbar string =
    { containerRow = box <| string ++ ":containerRow"
    , button = button <| string ++ ":button"
    , text = box <| string ++ ":text"
    }

sortTable : String -> SortTableStyle msg

sortTable : String -> SortTableStyle msg
sortTable string =
    { containerTable = box <| string ++ ":containerTable"
    , headerButton = button <| string ++ ":headerButton"
    , ascIcon = icon <| string ++ ":ascIcon"
    , descIcon = icon <| string ++ ":descIcon"
    , defaultIcon = icon <| string ++ ":defaultIcon"
    }

tab : String -> TabStyle msg

tab : String -> TabStyle msg
tab string =
    { button = button <| string ++ ":button"
    , optionRow = box <| string ++ ":optionRow"
    , containerColumn = box <| string ++ ":containerColumn"
    , content = box <| string ++ ":content"
    }

textInput : String -> TextInputStyle msg

textInput : String -> TextInputStyle msg
textInput string =
    { chipButton = button <| string ++ ":chipButton"
    , chipsRow = box <| string ++ ":chipsRow"
    , containerRow = box <| string ++ ":containerRow"
    , input = box <| string ++ ":input"
    }

Orasund/elm-ui-widgets/2.0.0

Widget.Style.Template

Base Elements

Mockups

Modules