Basics.Bool
Html msg
{ separator : BreadcrumbSeparator
, alignment : Bulma.Modifiers.HorizontalAlignment
, size : Bulma.Modifiers.Size
}
breadcrumbModifiers : BreadcrumbModifiers
breadcrumb : BreadcrumbModifiers -> List (Html.Attribute msg) -> List (Html.Attribute msg) -> List (Crumblet msg) -> Breadcrumb msg
A navigation thingy.
The first list of attributes is for a nav.breadcrumb
tag. The second is for an inner ul
tag.
type Msg = GoHome
| GoAway
| GoTeam
myBreadCrumb : Html Msg
myBreadCrumb
= breadcrumb breadcrumbModifiers [] []
[ crumblet False [] [ onClick GoHome ]
, crumblet False [] [ onClick GoAway ]
, crumblet False [] [ onClick GoTeam ]
, crumblet True [] [ ]
]
Html msg
crumblet : IsActive -> List (Html.Attribute msg) -> List (Html.Attribute msg) -> List (Html msg) -> Crumblet msg
A convenience element for breadcrumb
.
The first attribute list applies to the outer li
tag. The second attribute list applies to the inner a
tag.
Html msg
card : List (Html.Attribute msg) -> List (CardPartition msg) -> Card msg
The card component comprises several elements that you can mix and match.
card
is the main container for the card-partitions.
myCard : Html msg
myCard
= card []
[ cardImage [] []
, cardContent [] []
]
Html msg
cardHeader : List (Html.Attribute msg) -> List (Html msg) -> CardPartition msg
A horizontal bar with a shadow.
myCardHeader : Html msg
myCardHeader
= cardHeader []
[ cardTitle []
[ text "Queen of Hearts"
]
, cardIcon []
[ icon Standard []
[ heart_o
]
]
]
easyCardHeader : List (Html.Attribute msg) -> { title : List (Html msg), icon : List (Html msg), onClickIcon : msg } -> CardPartition msg
type Msg = ShowCard
myIcon : Html msg
myIcon = icon Standard [] [ diamond ]
myCardHeader : Html Msg
myCardHeader
= easyCardHeader []
{ title = [ text "4 of Diamonds" ]
, icon = [ myIcon ]
, onClickIcon = ShowCard
}
easierCardHeader : List (Html.Attribute msg) -> { title : String, icon : Bulma.Elements.Icon msg, onClickIcon : msg } -> CardPartition msg
Html msg
cardTitle : List (Html.Attribute msg) -> List (Html msg) -> CardHeaderItem msg
easyCardTitle : List (Html.Attribute msg) -> String -> CardHeaderItem msg
cardIcon : List (Html.Attribute msg) -> List (Bulma.Elements.Icon msg) -> CardHeaderItem msg
cardIconLink : List (Html.Attribute msg) -> List (Bulma.Elements.Icon msg) -> CardHeaderItem msg
easyCardIconLink : List (Html.Attribute msg) -> msg -> Bulma.Elements.Icon msg -> CardHeaderItem msg
cardImage : List (Html.Attribute msg) -> List (Bulma.Elements.Image msg) -> CardPartition msg
import B.Elements exposing (image,imageModifiers)
myImage : Html msg
myImage
= image imageModifiers []
[ img [ src "http://i.imgur.com/LcvP04R.gif" ] []
]
myCardImage : Html msg
myCardImage
= cardImage [] [ myImage ]
cardContent : List (Html.Attribute msg) -> List (Html msg) -> CardPartition msg
cardFooter : List (Html.Attribute msg) -> List (CardFooterItem msg) -> CardPartition msg
myCardFooter : Html msg
myCardFooter
= cardFooter []
[ cardFooterItemLink [] [ text "Save" ]
, cardFooterItemLink [] [ text "Edit" ]
, cardFooterItemLink [] [ text "Delete" ]
]
Html msg
cardFooterItem : List (Html.Attribute msg) -> List (Html msg) -> CardFooterItem msg
cardFooterItemLink : List (Html.Attribute msg) -> List (Html msg) -> CardFooterItem msg
Html msg
{ horizontalAlignment : Bulma.Modifiers.HorizontalAlignment
, verticalDirection : Bulma.Modifiers.VerticalDirection
}
dropdownModifiers : DropdownModifiers
dropdown : IsActive -> DropdownModifiers -> List (Html.Attribute msg) -> List (DropdownContent msg) -> Dropdown msg
type Msg = ToggleMenu
myDropdownTrigger : Html Msg
myDropdownTrigger
= dropdownTrigger []
[ button buttonModifiers
[ onClick ToggleMenu
, attribute "aria-haspopup" "true"
, attribute "aria-controls" "dropdown-menu"
]
[ text "Toggle Me"
]
]
myDropdownMenu : Html Msg
myDropdownMenu
= dropdownMenu [] []
[ dropdownItem False [ ] [ text "Cool Birds" ]
, dropdownDivider [ ] [ ]
, dropdownItemLink False [ href "#duck" ] [ text "Duck" ]
, dropdownItemLink False [ href "#duck" ] [ text "Duck" ]
, dropdownItemLink True [ href "#goose" ] [ text "Goose" ]
]
myDropdown : Bool -> Html Msg
myDropdown isMenuOpen
= dropdown isMenuOpen dropdownModifiers []
[ myDropdownTrigger
, myDropdownMenu
]
hoverableDropdown : DropdownModifiers -> List (Html.Attribute msg) -> List (DropdownContent msg) -> Dropdown msg
A hoverable variant of dropdown
.
Html msg
dropdownTrigger : List (Html.Attribute msg) -> List (Bulma.Elements.Button msg) -> DropdownContent msg
The container for the button/link that activates the dropdown menu.
dropdownMenu : List (Html.Attribute msg) -> List (Html.Attribute msg) -> List (DropdownItem msg) -> DropdownContent msg
The container for the dropdown's items.
The first attributes list is for the outer div.dropdown-menu
. The inner list is for the dropdown-content
.
Html msg
dropdownItem : IsActive -> List (Html.Attribute msg) -> List (Html msg) -> DropdownItem msg
A synonym for div.dropdown-item.is-active
.
dropdownItemLink : IsActive -> List (Html.Attribute msg) -> List (Html msg) -> DropdownItem msg
A synonym for a.dropdown-item.is-active
.
dropdownDivider : List (Html.Attribute msg) -> List (Html msg) -> DropdownItem msg
An empty hr.dropdown-divider
element.
Html msg
menu : List (Html.Attribute msg) -> List (MenuPart msg) -> Menu msg
Simple menus for vertical navigation.
myMenu : Html msg
myMenu
= menu []
[ menuLabel [] [ text "General" ]
, menuList []
[ menuListItemLink False [] [ text "Dashboard" ]
, menuListItemLink False [] [ text "Customers" ]
]
, menuLabel [] [ text "Administration" ]
, menuList []
[ menuListItem []
[ menuListItemLink False [] [ text "Team Settings" ]
]
, menuListItem []
[ menuListItemLink True [] [ text "Manage Your Team" ]
, menuList []
[ menuListItemLink False [] [ text "Members" ]
]
]
]
]
Html msg
menuLabel : List (Html.Attribute msg) -> List (Html msg) -> MenuPart msg
menuList : List (Html.Attribute msg) -> List (MenuListItem msg) -> MenuPart msg
Html msg
menuListItem : List (Html.Attribute msg) -> List (Html msg) -> MenuListItem msg
menuListItemLink : IsActive -> List (Html.Attribute msg) -> List (Html msg) -> MenuListItem msg
easyMenuListItemLink : IsActive -> List (Html.Attribute msg) -> msg -> Bulma.Elements.Icon msg -> String -> MenuListItem msg
Html msg
{ color : Bulma.Modifiers.Color
, size : Bulma.Modifiers.Size
}
messageModifiers : MessageModifiers
message : MessageModifiers -> List (Html.Attribute msg) -> List (MessagePartition msg) -> Message msg
myMessage : Html msg
myMessage
= message myMessageModifiers []
[ messageHeader []
[ p [] [ text "hello" ]
]
, messageBody []
[ text "lorem ipsum"
]
]
Html msg
messageBody : List (Html.Attribute msg) -> List (Html msg) -> MessagePartition msg
messageHeader : List (Html.Attribute msg) -> List (Html msg) -> MessagePartition msg
messageHeaderWithDelete : List (Html.Attribute msg) -> msg -> List (Html msg) -> MessagePartition msg
Html msg
Basics.Bool
modal : IsModalOpen -> List (Html.Attribute msg) -> List (ModalPartition msg) -> Modal msg
myModal : Html msg
myModal
= modal True []
[ modalBackground [] []
, modalContent []
[ text "Anything can go here!"
]
, modalClose Large [] []
]
easyModal : IsModalOpen -> List (Html.Attribute msg) -> msg -> List (Html msg) -> Modal msg
type Msg = CloseModal
myModal : Html Msg
myModal
= easyModal True [] CloseModal
[ text "Your content goes here."
]
Html msg
modalContent : List (Html.Attribute msg) -> List (Html msg) -> ModalPartition msg
modalBackground : List (Html.Attribute msg) -> List (Html msg) -> ModalPartition msg
easyModalBackground : List (Html.Attribute msg) -> msg -> ModalPartition msg
modalClose : Bulma.Modifiers.Size -> List (Html.Attribute msg) -> List (Html msg) -> ModalPartition msg
easyModalClose : Bulma.Modifiers.Size -> List (Html.Attribute msg) -> msg -> ModalPartition msg
modalCard : List (Html.Attribute msg) -> List (ModalCardPartition msg) -> ModalPartition msg
Html msg
modalCardBody : List (Html.Attribute msg) -> List (Html msg) -> ModalCardPartition msg
modalCardHead : List (Html.Attribute msg) -> List (Html msg) -> ModalCardPartition msg
modalCardTitle : List (Html.Attribute msg) -> List (Html msg) -> Html msg
modalCardFoot : List (Html.Attribute msg) -> List (Html msg) -> ModalCardPartition msg
Html msg
{ color : Bulma.Modifiers.Color
, transparent : Basics.Bool
}
navbarModifiers : NavbarModifiers
navbar : NavbarModifiers -> List (Html.Attribute msg) -> List (NavbarSection msg) -> Navbar msg
myNavbarBurger : Html Msg
myNavbarBurger
= navbarBurger isMenuOpen []
[ span [] []
, span [] []
, span [] []
]
myNavbarLink : Html Msg
myNavbarLink
= navbarLink []
[ text "More Junk"
]
myNavbar : Bool -> Bool -> Html Msg
myNavbar isMenuOpen isMenuDropdownOpen
= navbar navbarModifiers []
[ navbarBrand [] myNavbarBurger
[ navbarItem False []
[ img [ src "https://B.io/images/bulma-logo.png" ] []
]
]
, navbarMenu isMenuOpen []
[ navbarStart []
[ navbarItemLink False [] [ text "Home" ]
, navbarItemLink False [] [ text "Blog" ]
, navbarItemLink True [] [ text "Carrots" ]
, navbarItemLink False [] [ text "About" ]
]
, navbarEnd []
[ navbarItemDropdown isMenuDropdownOpen Down [] myNavbarLink
[ navbarDropdown False Left []
[ navbarItemLink False [] [ text "Crud" ]
, navbarItemLink False [] [ text "Detritus" ]
, navbarItemLink True [] [ text "Refuse" ]
, navbarItemLink False [] [ text "Trash" ]
]
]
]
]
]
fixedNavbar : Bulma.Modifiers.VerticalAlignment -> NavbarModifiers -> List (Html.Attribute msg) -> List (NavbarSection msg) -> Navbar msg
A sticky variant of navbar
.
Remember to change your root <html>
tag to <html class="has-navbar-fixed-top">
or <html class="has-navbar-fixed-bottom">
.
Html msg
navbarBrand : List (Html.Attribute msg) -> NavbarBurger msg -> List (NavbarItem msg) -> NavbarSection msg
This is a child of navbar
, and a sibling to navbarBrand
.
This element stays to the left side of the navbar
.
This section is always visible, so try not to place too many links in here -- they'll overflow past the right side of the screen on mobile devices.
navbarMenu : IsActive -> List (Html.Attribute msg) -> List (NavbarSide msg) -> NavbarSection msg
This is a child of navbar
, and a sibling to navbarBrand
.
On small screens, passing True
to navbarMenu
will show the mobile-device menu.
Its third argument should be [ navbarStart [] [], navbarEnd [] [] ]
.
Html msg
navbarStart : List (Html.Attribute msg) -> List (NavbarItem msg) -> NavbarSide msg
This element is a child of navbarMenu
.
On normal screens, this section will appear on the left of the navbar
.
navbarEnd : List (Html.Attribute msg) -> List (NavbarItem msg) -> NavbarSide msg
This element is a child of navbarMenu
.
On normal screens, this section will appear on the left of the navbar
.
Html msg
navbarBurger : IsActive -> List (Html.Attribute msg) -> List (Html msg) -> NavbarBurger msg
This is a little hamburger menu icon that only appears on mobile devices, when placed in a navbarBrand
.
Place empty span
elements inside to add/subtract numbers of lines.
When its first argument is True
, it transforms into a navbarCross
.
myNavbarBurger : Bool -> Html Msg
myNavbarBurger isMenuOpen
= navbarBurger isMenuOpen []
[ span [] []
, span [] []
, span [] []
]
navbarCross : List (Html.Attribute msg) -> NavbarBurger msg
A simple "X" character; the active version of navbarBurger
.
Html msg
navbarItem : IsActive -> List (Html.Attribute msg) -> List (Html msg) -> NavbarItem msg
This is a synonym for div.navbar-item
.
You can use this element in navbarStart
, navbarEnd
, navbarBrand
, and navbarDropdown
.
navbarItemLink : IsActive -> List (Html.Attribute msg) -> List (Html msg) -> NavbarItem msg
This is a synonym for a.navbar-item
.
You can use this element in navbarStart
, navbarEnd
, navbarBrand
, and navbarDropdown
.
When the first argument is True
, the link will be highlighted.
navbarDivider : List (Html.Attribute msg) -> List (Html msg) -> NavbarItem msg
A tiny 'lil hr.navbar-divider
.
navbarItemDropdown : IsActive -> Bulma.Modifiers.VerticalDirection -> List (Html.Attribute msg) -> NavbarLink msg -> List (NavbarDropdown msg) -> NavbarItem msg
This is a dropdown item that expects navbarLink
and navbarDropdown
tags.
When the first argument is True
the menu contents will be visible.
The second argument determines which way its child dropdown opens vertically.
You can use this element in navbarStart
, navbarEnd
, navbarBrand
, and navbarDropdown
.
hoverableNavbarItemDropdown : Bulma.Modifiers.VerticalDirection -> List (Html.Attribute msg) -> NavbarLink msg -> List (NavbarDropdown msg) -> NavbarItem msg
A hoverable variant of navbarItemDropdown
.
Html msg
Basics.Bool
navbarDropdown : IsBoxed -> Bulma.Modifiers.HorizontalAlignment -> List (Html.Attribute msg) -> List (NavbarItem msg) -> NavbarDropdown msg
This is a div.navbar-dropdown
element.
It is intended to be a child of navbarItemDropdown
.
When its first argument is True
, it will add a border on the top of the menu. This is most useful when you're using a transparent menu.
Its second argument determines which side of the button the menu aligns with.
Html msg
navbarLink : List (Html.Attribute msg) -> List (Html msg) -> NavbarLink msg
This element represents a.navbar-link
. It is only useful as a child of navbarDropdown
.
Html msg
pagination : Bulma.Modifiers.HorizontalAlignment -> List (Html.Attribute msg) -> List (PaginationPartition msg) -> Pagination msg
myPagination : Html msg
myPagination
= pagination Left []
[ paginationPrev [] [ text "Previous" ]
, paginationNext [] [ text "Next" ]
, paginationList []
[ paginationLink False [] [ text "1" ]
, paginationEllipsis [] [ ]
, paginationLink False [] [ text "45" ]
, paginationLink True [] [ text "46" ]
, paginationLink False [] [ text "47" ]
, paginationEllipsis [] [ ]
, paginationLink False [] [ text "83" ]
]
roundedPagination : Bulma.Modifiers.HorizontalAlignment -> List (Html.Attribute msg) -> List (PaginationPartition msg) -> Pagination msg
A rounded variant of pagination
.
Html msg
paginationPrev : List (Html.Attribute msg) -> List (Html msg) -> PaginationPartition msg
easyPaginationPrev : List (Html.Attribute msg) -> msg -> String -> PaginationPartition msg
paginationNext : List (Html.Attribute msg) -> List (Html msg) -> PaginationPartition msg
easyPaginationNext : List (Html.Attribute msg) -> msg -> String -> PaginationPartition msg
paginationList : List (Html.Attribute msg) -> List (PaginationListItem msg) -> PaginationPartition msg
Html msg
Basics.Bool
paginationLink : IsCurrent -> List (Html.Attribute msg) -> List (Html msg) -> PaginationListItem msg
easyPaginationLink : IsCurrent -> List (Html.Attribute msg) -> msg -> Basics.Int -> PaginationListItem msg
paginationEllipsis : List (Html.Attribute msg) -> List (Html msg) -> PaginationListItem msg
easyPaginationEllipsis : List (Html.Attribute msg) -> PaginationListItem msg
Html msg
panel : List (Html.Attribute msg) -> List (PanelPartition msg) -> Panel msg
myPanel : Html msg
myPanel
= panel []
[ panelHeading [] [ text "Repositories" ]
, panelBlock False []
[ controlInput controlInputModifiers [] [] []
]
, panelTabs []
[ panelTab False [] [ text "all" ]
, panelTab True [] [ text "public" ]
, panelTab True [] [ text "private" ]
]
, panelLink False [] [ text "bulma" ]
, panelLink False [] [ text "marksheet" ]
, panelLink True [] [ text "test" ]
, panelLink False [] [ text "horsin" ]
]
Html msg
panelHeading : List (Html.Attribute msg) -> List (Html msg) -> PanelPartition msg
panelBlock : IsActive -> List (Html.Attribute msg) -> List (Html msg) -> PanelPartition msg
panelLabel : IsActive -> List (Html.Attribute msg) -> List (Html msg) -> PanelPartition msg
panelLink : IsActive -> List (Html.Attribute msg) -> List (Html msg) -> PanelPartition msg
panelLinkWithIcon : IsActive -> List (Html.Attribute msg) -> List (Html.Attribute msg) -> List (Bulma.Elements.IconBody msg) -> List (Html msg) -> PanelPartition msg
myPanelBlockAttrs : List (Attribute msg)
myPanelBlockAttrs = []
myPanelIconAttrs : List (Attribute msg)
myPanelIconAttrs = []
myPanelLink : Html msg
myPanelLink
= panelLinkWithIcon False
myPanelBlockAttrs
myPanelIconAttrs
[ B.Elements.Icon.book ]
[ text "github.com/evancz" ]
panelCheckbox : IsActive -> List (Html.Attribute msg) -> List (Html.Attribute msg) -> List (Html msg) -> PanelPartition msg
myPanelBlockAttrs : List (Attribute msg)
myPanelBlockAttrs = []
myPanelCheckboxInputAttrs : List (Attribute msg)
myPanelCheckboxInputAttrs = [ onClick ToggleThing ]
myPanelLink : Html msg
myPanelLink
= panelLinkWithIcon False
myPanelBlockAttrs
myPanelCheckboxInputAttrs
[ text "Remember Me" ]
panelTabs : List (Html.Attribute msg) -> List (PanelTab msg) -> PanelPartition msg
Html msg
panelTab : IsActive -> List (Html.Attribute msg) -> List (Html msg) -> PanelTab msg
Html msg
{ style : TabsStyle
, alignment : Bulma.Modifiers.HorizontalAlignment
, size : Bulma.Modifiers.Size
}
tabsModifiers : TabsModifiers
tabs : TabsModifiers -> List (Html.Attribute msg) -> List (Html.Attribute msg) -> List (Tab msg) -> Tabs msg
myTabs : Html msg
myTabs
= tabs myTabsModifiers [] []
[ tab False [] [] [ text "Pictures" ]
, tab False [] [] [ text "Music" ]
, tab True [] [] [ text "Videos" ]
, tab False [] [] [ text "Docs" ]
]
Html msg
tab : IsActive -> List (Html.Attribute msg) -> List (Html.Attribute msg) -> List (Html msg) -> Tab msg