MichaelCombs28 / elm-css-bulma / Bulma.Styled.Elements

Table of Contents

Box


type alias Box msg =
Html.Styled.Html msg

box : List (Html.Styled.Attribute msg) -> List (Html.Styled.Html msg) -> Box msg

A white box to contain other elements. The box is simply a container with a shadow, a border, a radius, and some padding.

myBox : Html msg
myBox =
    box []
        [ p []
            [ text "I'm the box ghost!" ]
        ]

Button


type alias Button msg =
Html.Styled.Html msg


type alias ButtonModifiers msg =
{ disabled : Basics.Bool
, outlined : Basics.Bool
, inverted : Basics.Bool
, rounded : Basics.Bool
, static : Basics.Bool
, size : Bulma.Styled.Modifiers.Size
, state : Bulma.Styled.Modifiers.State
, color : Bulma.Styled.Modifiers.Color
, iconLeft : Maybe ( Bulma.Styled.Modifiers.Size
, List (Html.Styled.Attribute msg)
, IconBody msg )
, iconRight : Maybe ( Bulma.Styled.Modifiers.Size
, List (Html.Styled.Attribute msg)
, IconBody msg ) 
}

buttonModifiers : ButtonModifiers msg

The basic defaults for buttons.

import Bulma.Modifiers
    exposing
        ( Color(Default)
        , Size(Standard)
        , State(Blur)
        )

myButtonModifiers : ButtonModifiers msg
myButtonModifiers =
    { disabled = False
    , outlined = False
    , inverted = False
    , size = Standard
    , state = Blur
    , color = Default
    }

button : ButtonModifiers msg -> List (Html.Styled.Attribute msg) -> List (Html.Styled.Html msg) -> Button msg

type Msg
    = DoSomething
    | DoSomethingElse

myButton : Html Msg
myButton =
    button myButtonModifiers
        [ onClick DoSomething ]
        [ text "Click me!" ]

myIconButton : Html Msg
myIconButton =
    button myButtonModifiers
        [ onClick DoSomething ]
        [ icon [] [ Bulm.Elements.Icon.star ]
        , span [] [ text "No, click me!" ]
        ]

easyButton : ButtonModifiers msg -> List (Html.Styled.Attribute msg) -> msg -> String -> Button msg

type Msg
    = DoSomething
    | DoSomethingElse

myEasyButton : Html Msg
myEasyButton =
    easyButton myButtonModifiers
        []
        DoSomethingElse
        "Click me!"

buttons : Bulma.Styled.Modifiers.HorizontalAlignment -> List (Html.Styled.Attribute msg) -> List (Button msg) -> Html.Styled.Html msg

myButtons : Html Msg
myButtons =
    buttons Left
        []
        [ button { buttonModifiers | color = Success } [ text "Save changes" ]
        , button { buttonModifiers | color = Primary } [ text "Save and continue" ]
        , button { buttonModifiers | color = Danger } [ text "Cancel" ]
        ]

connectedButtons : Bulma.Styled.Modifiers.HorizontalAlignment -> List (Html.Styled.Attribute msg) -> List (Button msg) -> Html.Styled.Html msg

myConnectedButtons : Html Msg
myConnectedButtons =
    connectedButtons Left
        []
        [ button buttonModifiers [ text "Yes" ]
        , button { buttonModifiers | color = Primary } [ text "Maybe" ]
        , button buttonModifiers [ text "No" ]
        ]

Content


type alias Content msg =
Html.Styled.Html msg

content : Bulma.Styled.Modifiers.Size -> List (Html.Styled.Attribute msg) -> List (Html.Styled.Html msg) -> Content msg

A single class to handle WYSIWYG-generated content, where only HTML tags are available.

import Bulma.Modifiers exposing (Size(Standard))

myContent : Html msg
myContent =
    content Standard
        []
        [ p [] [ text "Lorem ipsum..." ]
        ]

It can handle almost any HTML element, including:

Delete


type alias Delete msg =
Html.Styled.Html msg

delete : List (Html.Styled.Attribute msg) -> List (Html.Styled.Html msg) -> Delete msg

Versatile delete cross.

easyDelete : List (Html.Styled.Attribute msg) -> msg -> Delete msg

type Msg
    = DeleteMsg

myEasyDelete : Html Msg
myEasyDelete =
    easyDelete [] DeleteMsg

Icon


type alias Icon msg =
Html.Styled.Html msg


type alias IconBody msg =
Html.Styled.Html msg

icon : Bulma.Styled.Modifiers.Size -> List (Html.Styled.Attribute msg) -> List (IconBody msg) -> Icon msg

import Icon.FontAwesome exposing ( fontAwesomeCDN, meh_o ) -- see http://package.elm-lang.org/packages/surprisetalk/elm-icon/latest

import Bulma.Modifiers exposing (Size(Large))

view : Model -> Html msg
view model =
    div []
        [ fontAwesomeCDN
        , icon Large [] [ meh_o ]
        , icon Large [] [ i [ class "fas fa-meh-o" ] [] ]
        ]

Image


type alias Image msg =
Html.Styled.Html msg


type ImageSize

x16 : ImageSize

x24 : ImageSize

x32 : ImageSize

x48 : ImageSize

x64 : ImageSize

x96 : ImageSize

x128 : ImageSize

unbounded : ImageSize


type ImageShape

natural : ImageShape

oneByOne : ImageSize -> ImageShape

fourByThree : ImageShape

threeByTwo : ImageShape

sixteenByNine : ImageShape

twoByOne : ImageShape

image : ImageShape -> List (Html.Styled.Attribute msg) -> List (Html.Styled.Html msg) -> Image msg

Use the image container to specify a precisely-sized container so that your layout isn't broken because of loading or broken images.

myImage : Html msg
myImage =
    image FourByThree
        []
        [ img [ src "https://i.imgur.com/pPjvmVS.jpg" ] []
        ]

easyImage : ImageShape -> List (Html.Styled.Attribute msg) -> String -> Image msg

myEasyImage : Html msg
myEasyImage =
    easyImage Natural
        []
        "http://i.imgur.com/I47PSAO.png"

easyPlaceholderImage : ImageShape -> List (Html.Styled.Attribute msg) -> Image msg

This is a quick and dirty way to make placeholder images, using sources like http://bulma.io/images/placeholders/16x16.png .

-- OneByOne X16       ->  16 X  16
-- OneByOne X24       ->  24 X  24
-- OneByOne X32       ->  32 X  32
-- OneByOne X48       ->  48 X  48
-- OneByOne X64       ->  64 X  64
-- OneByOne X96       ->  96 X  96
-- OneByOne X128      -> 128 X 128
-- OneByOne Unbounded -> 256 X 256
-- FourByThree        -> 640 X 480
-- ThreeByTwo         -> 480 X 320
-- SixteenByNine      -> 640 X 360
-- TwoByOne           -> 640 X 320
-- _                  -> 256 X 256
myEasyPlaceholderImage : Html msg
myEasyPlaceholderImage =
    easyPlaceholderImage (OneByOne Unbounded) []

Notification


type alias Notification msg =
Html.Styled.Html msg

notification : Bulma.Styled.Modifiers.Color -> List (Html.Styled.Attribute msg) -> List (Html.Styled.Html msg) -> Notification msg

import Bulma.Modifiers exposing (Color(Danger))

myNotification : Html msg
myNotification =
    notification Danger
        []
        [ text "Something went wrong!"
        ]

notificationWithDelete : Bulma.Styled.Modifiers.Color -> List (Html.Styled.Attribute msg) -> msg -> List (Html.Styled.Html msg) -> Notification msg

import Bulma.Modifiers exposing (Color(Success))

type Msg
    = ClearNotificationsMsg

myNotification : Html Msg
myNotification =
    notificationWithDelete Danger
        []
        ClearNotificationsMsg
        [ text "Something went right!"
        ]

Progress


type alias Progress msg =
Html.Styled.Html msg


type alias ProgressModifiers =
{ size : Bulma.Styled.Modifiers.Size
, color : Bulma.Styled.Modifiers.Color 
}

progressModifiers : ProgressModifiers

progress : ProgressModifiers -> List (Html.Styled.Attribute msg) -> List (Html.Styled.Html msg) -> Progress msg

myProgressBar : Int -> Int -> Html msg
myProgressBar pVal pMax =
    progress myProgressModifiers
        [ value <| toString pVal
        , max <| toString pMax
        ]
        []

easyProgress : ProgressModifiers -> List (Html.Styled.Attribute msg) -> Basics.Float -> Progress msg

myProgressBar : Float -> Html msg
myProgressBar percentCompleted =
    progress myProgressModifiers
        []
        percentCompleted

Table


type alias Table msg =
Html.Styled.Html msg


type alias TableModifiers =
{ bordered : Basics.Bool
, striped : Basics.Bool
, narrow : Basics.Bool
, hoverable : Basics.Bool
, fullWidth : Basics.Bool 
}

tableModifiers : TableModifiers

table : TableModifiers -> List (Html.Styled.Attribute msg) -> List (TablePartition msg) -> Table msg

myTable : Html msg
myTable =
    table myTableModifiers
        []
        [ tableHead [] []
        , tableBody [] []
        , tableFoot [] []
        ]

Table Partition


type alias TablePartition msg =
Html.Styled.Html msg

tableBody : List (Html.Styled.Attribute msg) -> List (TableRow msg) -> TablePartition msg

myTableBody : Html msg
myTableBody =
    tableBody []
        [ tableRow False
            []
            [ tableCell [] []
            , tableCell [] []
            , tableCell [] []
            ]
        , tableRow True
            []
            [ tableCell [] []
            , tableCell [] []
            , tableCell [] []
            ]
        ]

tableHead : List (Html.Styled.Attribute msg) -> List (TableRow msg) -> TablePartition msg

myTableHead : Html msg
myTableHead =
    tableHead []
        [ tableRow False
            []
            [ tableCellHead [] []
            , tableCellHead [] []
            , tableCellHead [] []
            ]
        ]

tableFoot : List (Html.Styled.Attribute msg) -> List (TableRow msg) -> TablePartition msg

myTableFoot : Html msg
myTableFoot =
    tableFoot []
        [ tableRow False
            []
            [ tableCellHead [] []
            , tableCellHead [] []
            , tableCellHead [] []
            ]
        ]

Table Row


type alias TableRow msg =
Html.Styled.Html msg


type alias IsHighlighted =
Basics.Bool

tableRow : IsHighlighted -> List (Html.Styled.Attribute msg) -> List (TableCell msg) -> TableRow msg

Table Cell


type alias TableCell msg =
Html.Styled.Html msg

tableCell : List (Html.Styled.Attribute msg) -> List (Html.Styled.Html msg) -> TableCell msg

tableCellHead : List (Html.Styled.Attribute msg) -> List (Html.Styled.Html msg) -> TableCell msg

Tag


type alias Tag msg =
Html.Styled.Html msg


type alias TagModifiers =
{ size : Bulma.Styled.Modifiers.Size
, color : Bulma.Styled.Modifiers.Color
, isLink : Basics.Bool 
}

tagModifiers : TagModifiers

tag : TagModifiers -> List (Html.Styled.Attribute msg) -> List (Html.Styled.Html msg) -> Tag msg

myTag : Html msg
myTag =
    tag myTagModifiers
        []
        [ text "Hip to Be Square"
        ]

easyTag : TagModifiers -> List (Html.Styled.Attribute msg) -> String -> Tag msg

myTag : Html msg
myTag =
    easyTag myTagModifiers
        []
        "That was easy."

deleteTag : TagModifiers -> List (Html.Styled.Attribute msg) -> List (Html.Styled.Html msg) -> Tag msg

myMultitag : Html msg
myMultitag =
    multitag []
        [ myMainTag
        , myDeleteTag
        ]

myDeleteTag : Html msg
myDeleteTag =
    deleteTag myTagModifiers
        [ onClick DeleteTag ]
        "Delete me!"

roundedTag : TagModifiers -> List (Html.Styled.Attribute msg) -> List (Html.Styled.Html msg) -> Tag msg

myTag : Html msg
myTag =
    roundedTag myTagModifiers
        []
        [ text "Behold! I'm circlular!"
        ]

easyRoundedTag : TagModifiers -> List (Html.Styled.Attribute msg) -> String -> Tag msg

tagWithDelete : TagModifiers -> List (Html.Styled.Attribute msg) -> msg -> List (Html.Styled.Html msg) -> Tag msg

type Msg
    = DeleteTag Id

myTag : Id -> Html Msg
myTag id =
    tagWithDelete myTagModifiers
        []
        (DeleteTag id)
        [ text "cool"
        ]

easyTagWithDelete : TagModifiers -> List (Html.Styled.Attribute msg) -> msg -> String -> Tag msg

type Msg
    = DeleteTag Id

myTag : Id -> Html Msg
myTag id =
    tagWithDelete myTagModifiers
        []
        (DeleteTag id)
        "cooler"

easyRoundedTagWithDelete : TagModifiers -> List (Html.Styled.Attribute msg) -> msg -> String -> Tag msg

Tags

tags : List (Html.Styled.Attribute msg) -> List (Tag msg) -> Html.Styled.Html msg

myTags : Html msg
myTags =
    tags []
        [ myFirstTag
        , mySecondTag
        ]

multitag : List (Html.Styled.Attribute msg) -> List (Tag msg) -> Html.Styled.Html msg

myMultitag : Html msg
myMultitag =
    multitag []
        [ myFirstTag
        , mySecondTag
        ]

myMultitags : Html msg
myMultitags =
    multilineFields []
        [ control myControlModifiers
            []
            [ myMultiTag
            ]
        , control myControlModifiers
            []
            [ myMultiTag
            ]
        , control myControlModifiers
            []
            [ myMultiTag
            ]
        ]

Title


type alias Title msg =
Html.Styled.Html msg


type TitleSize

h1 : TitleSize

h2 : TitleSize

h3 : TitleSize

h4 : TitleSize

h5 : TitleSize

h6 : TitleSize

title : TitleSize -> List (Html.Styled.Attribute msg) -> List (Html.Styled.Html msg) -> Title msg

myTitle : Html msg
myTitle =
    title H1
        []
        [ text "Hullo"
        ]

subtitle : TitleSize -> List (Html.Styled.Attribute msg) -> List (Html.Styled.Html msg) -> Title msg

mySubtitle : Html msg
mySubtitle =
    subtitle H3
        []
        [ text "World"
        ]

Title Pair


type alias TitleSpacing =
Basics.Bool

easyTitleWithSubtitle : TitleSpacing -> TitleSize -> List (Html.Styled.Html msg) -> List (Html.Styled.Html msg) -> List (Title msg)

myTitle : Html msg
myTitle =
    easyTitleWithSubtitle False
        H1
        [ text "EPISODE V" ]
        [ text "THE EMPIRE STRIKES BACK" ]