This is an alternative site for discovering Elm packages. You may be looking for the official Elm package site instead.

Bulma.Elements

Bulma elements

box : List (Attribute msg) -> List (Html msg) -> Html msg
button : List (Attribute msg) -> List (Html msg) -> Html msg
content : List (Attribute msg) -> List (Html msg) -> Html msg
delete : List (Attribute msg) -> Html msg
deleteButton : List (Attribute msg) -> Html msg
icon : List (Attribute msg) -> String -> Html msg
notification : List (Attribute msg) -> List (Html msg) -> Html msg
subtitle : Int -> String -> Html msg
table : List (Attribute msg) -> List (Html msg) -> Html msg
tag : List (Attribute msg) -> List (Html msg) -> Html msg
title : Int -> String -> Html msg
module Bulma.Elements
    exposing
        ( box
        , button
        , content
        , delete
        , deleteButton
        , icon
        , notification
        , subtitle
        , table
        , tag
        , title
        )

{-| [Bulma elements](http://bulma.io/documentation/elements/box/)

@docs box, button, content, delete, deleteButton, icon, notification, subtitle, table, tag, title

-}

import Bulma.Util exposing (bulmaNode)
import Html exposing (Html, Attribute, div, span, text)
import Html.Attributes exposing (class)


{-| [`<div class="box">`](http://bulma.io/documentation/elements/box/)
-}
box : List (Attribute msg) -> List (Html msg) -> Html msg
box =
    bulmaNode div "box"


{-| [`<a class="button">`](http://bulma.io/documentation/elements/button/)
-}
button : List (Attribute msg) -> List (Html msg) -> Html msg
button =
    bulmaNode Html.a "button"


{-| [`<div class="content">`](http://bulma.io/documentation/elements/content/)
-}
content : List (Attribute msg) -> List (Html msg) -> Html msg
content =
    bulmaNode div "content"


{-| [`<a class="delete">`](http://bulma.io/documentation/elements/delete/)
-}
delete : List (Attribute msg) -> Html msg
delete attributes =
    Html.a (class "delete" :: attributes) []


{-| [`<button class="delete">`](http://bulma.io/documentation/elements/delete/)
-}
deleteButton : List (Attribute msg) -> Html msg
deleteButton attributes =
    Html.button (class "delete" :: attributes) []


{-| [`<span class="icon" attributes...><i class="fa fa-icon"></i></span>`](http://bulma.io/documentation/elements/icon/)
-}
icon : List (Attribute msg) -> String -> Html msg
icon attributes iconName =
    span (class "icon" :: attributes)
        [ Html.i [ class ("fa fa-" ++ iconName) ] [] ]


{-| [`<div class="notification">`](http://bulma.io/documentation/elements/notification/)
-}
notification : List (Attribute msg) -> List (Html msg) -> Html msg
notification =
    bulmaNode div "notification"


{-| [`<h{size} class="subtitle is-{size}>{txt}</h{size}>"`](http://bulma.io/documentation/elements/title/)
-}
subtitle : Int -> String -> Html msg
subtitle size txt =
    let
        sizestr : String
        sizestr =
            size |> toString
    in
        Html.node
            ("h" ++ sizestr)
            [ class ("subtitle is-" ++ sizestr) ]
            [ text txt ]


{-| [`<table class="table">`](http://bulma.io/documentation/elements/table/)
-}
table : List (Attribute msg) -> List (Html msg) -> Html msg
table =
    bulmaNode Html.table "table"


{-| [`<span class="tag">`](http://bulma.io/documentation/elements/tag/)
-}
tag : List (Attribute msg) -> List (Html msg) -> Html msg
tag =
    bulmaNode span "tag"


{-| [`<h{size} class="title is-{size}>{txt}</h{size}>"`](http://bulma.io/documentation/elements/title/)
-}
title : Int -> String -> Html msg
title size str =
    let
        sizestr : String
        sizestr =
            size |> toString
    in
        Html.node ("h" ++ sizestr)
            [ class ("title is-" ++ sizestr) ]
            [ text str ]