Picomponents is a UI componentn library using pico
includeFromCDN : Theme -> Html msg
Include the CSS for the given theme.
main_ : Layout -> Theme.ColorScheme -> List (Html.Attribute msg) -> List (Html msg) -> Html msg
The main layout container of the application
Used to define the layout of the application
grid : String -> Row msg -> Html msg
Creates a simple responseive grid with the given class name.
abbr : String -> String -> Html msg
Abbreviation element The first argument is the abbreviation and the second is the meaning.
abbr "tldr" "too long didn't read"
bold : String -> Html msg
Bold element
italic : String -> Html msg
Italic element
emphasis : String -> Html msg
Emphasis element
deleted : String -> Html msg
Deleted element
inserted : String -> Html msg
Inserted element
kbd : String -> Html msg
Keyboard shortcut element
mark : String -> Html msg
Mark element
strikethrough : String -> Html msg
Strikethrough element
superscript : String -> Html msg
Superscript element
subscript : String -> Html msg
Subscript element
underline : String -> Html msg
Underline element
primaryButton : List (Html.Attribute msg) -> List (Html msg) -> Html msg
Renders a primary button
secondaryButton : List (Html.Attribute msg) -> List (Html msg) -> Html msg
Renders a secondary button
contrastButton : List (Html.Attribute msg) -> List (Html msg) -> Html msg
Renders a contrast button
busy : Html.Attribute msg
Add a loading indicator to an element
outline : Html.Attribute msg
Render this button in the "outline" style
primaryLink : List (Html.Attribute msg) -> List (Html msg) -> Html msg
Renders a primary link
secondaryLink : List (Html.Attribute msg) -> List (Html msg) -> Html msg
Renders a secondary link
contrastLink : List (Html.Attribute msg) -> List (Html msg) -> Html msg
Renders a contrast link
asButton : Html.Attribute msg
Give an element (for example a link) the look of a button a [asButton][text "Click me!"]
List (Cell msg)
A (table) row can contain multiple cells that can contain multiple Html elements. This is just an alias to make the type signature of functions that can receive it more readable.
List (Html msg)
A (table) cell can contain multiple Html elements. This is just an alias to make the type signature of functions that can receive it more readable.
table : List (Html.Attribute msg) -> Row msg -> List (Row msg) -> Html msg
A helper to construct a table in a more concise way. It takes the attributes for the table, the header row and the list of rows.
accordion : List (Html.Attribute msg) -> List (Html msg) -> List (Html msg) -> Html msg
Renders an accordion.
accordion [ asButton ] [ text "open me" ] [ text "the glorious details" ]
dropdown : Cell msg -> Column msg -> Html msg
Pico uses the details element as markdown for a dropdown. This function lets you create a dropdown from the "collapsed" content and a multiple items to display in the expanded state.
nav : List (Column msg) -> Html msg
A helper to construct a nav
element in a more concise way.
In Pico.css the nav
element
is laid out as a list of columns.
List (Cell msg)
A grid column can contain multiple cells that
can contain multiple Html elements.
This is just an alias to make the type signature of
functions that can receive Columns
more readable.
tooltip : String -> Html.Attribute msg
Adds a tooltip displaying on top of the element.
tooltipRight : String -> List (Html.Attribute msg)
Adds a tooltip displaying to the right of the element.
tooltipLeft : String -> List (Html.Attribute msg)
Adds a tooltip displaying to the left of the element.
tooltipBottom : String -> List (Html.Attribute msg)
Adds a tooltip displaying at the bottom of the element.
switch : List (Html.Attribute msg) -> List (Html msg) -> Html msg
A checkbox rendered as a switch
invalid : Html.Attribute msg
A shortcut for attribute "aria-invalid" "true"
role : String -> Html.Attribute msg
"role" attribute
br : Html msg
A shortcut for br [] []
hr : Html msg
A shortcut for hr [] []
aria : String -> String -> Html.Attribute msg
A shortcut for attribute "aria-" ++ name
value
errorView : (FancyForms.FormState.Error error -> String) -> List (FancyForms.FormState.Error error) -> List (Html msg) -> List (Html msg)
Displays errors next to an input field.
rtl : Html.Attribute msg
A shortcut for dir="rtl" to set the text direction to right-to-left.
ltr : Html.Attribute msg
A shortcut for dir="ltr" to set the text direction to left-to-right.