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!" ]
]
Html.Styled.Html 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" ]
]
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:
p
ul
/ ol
/ dl
h1
through h6
blockquote
em
& strong
table
, tr
, th
, and td
tablesHtml.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
Html.Styled.Html 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" ] [] ]
]
Html.Styled.Html msg
x16 : ImageSize
x24 : ImageSize
x32 : ImageSize
x48 : ImageSize
x64 : ImageSize
x96 : ImageSize
x128 : ImageSize
unbounded : ImageSize
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) []
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!"
]
Html.Styled.Html msg
{ 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
Html.Styled.Html msg
{ 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 [] []
]
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 [] []
]
]
Html.Styled.Html msg
Basics.Bool
tableRow : IsHighlighted -> List (Html.Styled.Attribute msg) -> List (TableCell msg) -> TableRow 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
Html.Styled.Html msg
{ 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 : 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
]
]
Html.Styled.Html msg
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"
]
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" ]