axelerator / picomponents / Pico

Picomponents is a UI componentn library using pico

Setup

includeFromCDN : Theme -> Html msg

Include the CSS for the given theme.

Layout

main_ : Layout -> Theme.ColorScheme -> List (Html.Attribute msg) -> List (Html msg) -> Html msg

The main layout container of the application


type Layout
    = Centered
    | FullWidth

Used to define the layout of the application

grid : String -> Row msg -> Html msg

Creates a simple responseive grid with the given class name.

Content

Typography

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

Buttons

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

Links

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!"]

Tables


type alias Row msg =
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.


type alias Cell msg =
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.

Components

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.


type alias Column msg =
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.

Tooltips

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.

Inputs

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"

Utilities

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.