Html msg
box : List (Html.Attribute msg) -> List (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!" ]
]
Html msg
{ disabled : Basics.Bool
, outlined : Basics.Bool
, inverted : Basics.Bool
, rounded : Basics.Bool
, static : Basics.Bool
, size : Bulma.Modifiers.Size
, state : Bulma.Modifiers.State
, color : Bulma.Modifiers.Color
, iconLeft : Maybe ( Bulma.Modifiers.Size
, List (Html.Attribute msg)
, IconBody msg )
, iconRight : Maybe ( Bulma.Modifiers.Size
, List (Html.Attribute msg)
, IconBody msg )
}
buttonModifiers : ButtonModifiers msg
The basic defaults for buttons.
import Bulma.Modifiers exposing ( State(Blur)
, Color(Default)
, Size(Standard)
)
myButtonModifiers : ButtonModifiers msg
myButtonModifiers
= { disabled = False
, outlined = False
, inverted = False
, size = Standard
, state = Blur
, color = Default
}
button : ButtonModifiers msg -> List (Html.Attribute msg) -> List (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.Attribute msg) -> msg -> String -> Button msg
type Msg = DoSomething
| DoSomethingElse
myEasyButton : Html Msg
myEasyButton
= easyButton myButtonModifiers []
DoSomethingElse
"Click me!"
buttons : Bulma.Modifiers.HorizontalAlignment -> List (Html.Attribute msg) -> List (Button msg) -> 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.Modifiers.HorizontalAlignment -> List (Html.Attribute msg) -> List (Button msg) -> Html msg
myConnectedButtons : Html Msg
myConnectedButtons
= connectedButtons Left []
[ button buttonModifiers [ text "Yes" ]
, button { buttonModifiers | color = Primary } [ text "Maybe" ]
, button buttonModifiers [ text "No" ]
]
Html msg
content : Bulma.Modifiers.Size -> List (Html.Attribute msg) -> List (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:
- p
- ul
/ ol
/ dl
- h1
through h6
- blockquote
- em
& strong
- table
, tr
, th
, and td
tables
Html msg
delete : List (Html.Attribute msg) -> List (Html msg) -> Delete msg
Versatile delete cross.
easyDelete : List (Html.Attribute msg) -> msg -> Delete msg
type Msg = DeleteMsg
myEasyDelete : Html Msg
myEasyDelete
= easyDelete [] DeleteMsg
Html msg
Html msg
icon : Bulma.Modifiers.Size -> List (Html.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" ] [] ]
]
Html msg
image : ImageShape -> List (Html.Attribute msg) -> List (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.Attribute msg) -> String -> Image msg
myEasyImage : Html msg
myEasyImage
= easyImage Natural []
"http://i.imgur.com/I47PSAO.png"
easyPlaceholderImage : ImageShape -> List (Html.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) []
Html msg
notification : Bulma.Modifiers.Color -> List (Html.Attribute msg) -> List (Html msg) -> Notification msg
import Bulma.Modifiers exposing (Color(Danger))
myNotification : Html msg
myNotification
= notification Danger []
[ text "Something went wrong!"
]
notificationWithDelete : Bulma.Modifiers.Color -> List (Html.Attribute msg) -> msg -> List (Html msg) -> Notification msg
import Bulma.Modifiers exposing (Color(Success))
type Msg = ClearNotificationsMsg
myNotification : Html Msg
myNotification
= notificationWithDelete Danger []
ClearNotificationsMsg
[ text "Something went right!"
]
Html msg
{ size : Bulma.Modifiers.Size
, color : Bulma.Modifiers.Color
}
progressModifiers : ProgressModifiers
progress : ProgressModifiers -> List (Html.Attribute msg) -> List (Html msg) -> Progress msg
myProgressBar : Int -> Int -> Html msg
myProgressBar pVal pMax
= progress myProgressModifiers
[ value <| toString pVal
, max <| toString pMax
]
[]
easyProgress : ProgressModifiers -> List (Html.Attribute msg) -> Basics.Float -> Progress msg
myProgressBar : Float -> Html msg
myProgressBar percentCompleted
= progress myProgressModifiers []
percentCompleted
Html msg
{ bordered : Basics.Bool
, striped : Basics.Bool
, narrow : Basics.Bool
, hoverable : Basics.Bool
, fullWidth : Basics.Bool
}
tableModifiers : TableModifiers
table : TableModifiers -> List (Html.Attribute msg) -> List (TablePartition msg) -> Table msg
myTable : Html msg
myTable
= table myTableModifiers []
[ tableHead [] []
, tableBody [] []
, tableFoot [] []
]
Html msg
tableBody : List (Html.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.Attribute msg) -> List (TableRow msg) -> TablePartition msg
myTableHead : Html msg
myTableHead
= tableHead []
[ tableRow False []
[ tableCellHead [] []
, tableCellHead [] []
, tableCellHead [] []
]
]
tableFoot : List (Html.Attribute msg) -> List (TableRow msg) -> TablePartition msg
myTableFoot : Html msg
myTableFoot
= tableFoot []
[ tableRow False []
[ tableCellHead [] []
, tableCellHead [] []
, tableCellHead [] []
]
]
Html msg
Basics.Bool
tableRow : IsHighlighted -> List (Html.Attribute msg) -> List (TableCell msg) -> TableRow msg
Html msg
tableCell : List (Html.Attribute msg) -> List (Html msg) -> TableCell msg
tableCellHead : List (Html.Attribute msg) -> List (Html msg) -> TableCell msg
Html msg
{ size : Bulma.Modifiers.Size
, color : Bulma.Modifiers.Color
, isLink : Basics.Bool
}
tagModifiers : TagModifiers
tag : TagModifiers -> List (Html.Attribute msg) -> List (Html msg) -> Tag msg
myTag : Html msg
myTag
= tag myTagModifiers []
[ text "Hip to Be Square"
]
easyTag : TagModifiers -> List (Html.Attribute msg) -> String -> Tag msg
myTag : Html msg
myTag
= easyTag myTagModifiers []
"That was easy."
deleteTag : TagModifiers -> List (Html.Attribute msg) -> List (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.Attribute msg) -> List (Html msg) -> Tag msg
myTag : Html msg
myTag
= roundedTag myTagModifiers []
[ text "Behold! I'm circlular!"
]
easyRoundedTag : TagModifiers -> List (Html.Attribute msg) -> String -> Tag msg
tagWithDelete : TagModifiers -> List (Html.Attribute msg) -> msg -> List (Html msg) -> Tag msg
type Msg = DeleteTag Id
myTag : Id -> Html Msg
myTag id
= tagWithDelete myTagModifiers []
(DeleteTag id)
[ text "cool"
]
easyTagWithDelete : TagModifiers -> List (Html.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.Attribute msg) -> msg -> String -> Tag msg
tags : List (Html.Attribute msg) -> List (Tag msg) -> Html msg
myTags : Html msg
myTags
= tags []
[ myFirstTag
, mySecondTag
]
multitag : List (Html.Attribute msg) -> List (Tag msg) -> Html msg
myMultitag : Html msg
myMultitag
= multitag []
[ myFirstTag
, mySecondTag
]
myMultitags : Html msg
myMultitags
= multilineFields []
[ control myControlModifiers []
[ myMultiTag
]
, control myControlModifiers []
[ myMultiTag
]
, control myControlModifiers []
[ myMultiTag
]
]
Html msg
title : TitleSize -> List (Html.Attribute msg) -> List (Html msg) -> Title msg
myTitle : Html msg
myTitle
= title H1 []
[ text "Hullo"
]
subtitle : TitleSize -> List (Html.Attribute msg) -> List (Html msg) -> Title msg
mySubtitle : Html msg
mySubtitle
= subtitle H3 []
[ text "World"
]
Basics.Bool
easyTitleWithSubtitle : TitleSpacing -> TitleSize -> List (Html msg) -> List (Html msg) -> List (Title msg)
myTitle : Html msg
myTitle
= easyTitleWithSubtitle False H1
[ text "EPISODE V" ]
[ text "THE EMPIRE STRIKES BACK" ]