afidegnum / elm-bulmanizer / Bulma.Elements

Table of Contents

Box


type alias Box msg =
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!" ]
    ]

Button


type alias Button msg =
Html msg


type alias ButtonModifiers 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"    ]
    ]

Content


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

Delete


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

Icon


type alias Icon msg =
Html msg


type alias IconBody 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" ] [] ]
    ]

Image


type alias Image msg =
Html msg


type ImageSize
    = X16
    | X24
    | X32
    | X48
    | X64
    | X96
    | X128
    | Unbounded


type ImageShape
    = Natural
    | OneByOne ImageSize
    | FourByThree
    | ThreeByTwo
    | SixteenByNine
    | TwoByOne

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) []

Notification


type alias Notification msg =
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!"
    ]

Progress


type alias Progress msg =
Html msg


type alias ProgressModifiers =
{ 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

Table


type alias Table msg =
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.Attribute msg) -> List (TablePartition msg) -> Table msg

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

Table Partition


type alias TablePartition msg =
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 [] []
      ]
    ]

Table Row


type alias TableRow msg =
Html msg


type alias IsHighlighted =
Basics.Bool

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

Table Cell


type alias TableCell msg =
Html msg

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

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

Tag


type alias Tag msg =
Html msg


type alias TagModifiers =
{ 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

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

Title


type alias Title msg =
Html msg


type TitleSize
    = H1
    | H2
    | H3
    | H4
    | H5
    | H6

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

Title Pair


type alias TitleSpacing =
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" ]