MichaelCombs28 / elm-css-bulma / Bulma.Styled.Components

Table of Contents

Aliases


type alias IsActive =
Basics.Bool

Breadcrumb


type alias Breadcrumb msg =
Html.Styled.Html msg

slash : BreadcrumbSeparator

arrow : BreadcrumbSeparator

bullet : BreadcrumbSeparator

dot : BreadcrumbSeparator

succeeds : BreadcrumbSeparator


type alias BreadcrumbModifiers =
{ separator : BreadcrumbSeparator
, alignment : Bulma.Styled.Modifiers.Internal.HorizontalAlignment
, size : Bulma.Styled.Modifiers.Internal.Size 
}


type BreadcrumbSeparator

breadcrumbModifiers : BreadcrumbModifiers

breadcrumb : BreadcrumbModifiers -> List (Html.Styled.Attribute msg) -> List (Html.Styled.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 [] []
        ]

Crumblet


type alias Crumblet msg =
Html.Styled.Html msg

crumblet : IsActive -> List (Html.Styled.Attribute msg) -> List (Html.Styled.Attribute msg) -> List (Html.Styled.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.

Card


type alias Card msg =
Html.Styled.Html msg

card : List (Html.Styled.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 [] []
        ]

Card Partitions


type alias CardPartition msg =
Html.Styled.Html msg

Card Header

cardHeader : List (Html.Styled.Attribute msg) -> List (Html.Styled.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.Styled.Attribute msg) -> { title : List (Html.Styled.Html msg), icon : List (Html.Styled.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.Styled.Attribute msg) -> { title : String, icon : Bulma.Styled.Elements.Icon msg, onClickIcon : msg } -> CardPartition msg

Card Header Item


type alias CardHeaderItem msg =
Html.Styled.Html msg

cardTitle : List (Html.Styled.Attribute msg) -> List (Html.Styled.Html msg) -> CardHeaderItem msg

easyCardTitle : List (Html.Styled.Attribute msg) -> String -> CardHeaderItem msg

cardIcon : List (Html.Styled.Attribute msg) -> List (Bulma.Styled.Elements.Icon msg) -> CardHeaderItem msg

cardIconLink : List (Html.Styled.Attribute msg) -> List (Bulma.Styled.Elements.Icon msg) -> CardHeaderItem msg

easyCardIconLink : List (Html.Styled.Attribute msg) -> msg -> Bulma.Styled.Elements.Icon msg -> CardHeaderItem msg

Card Image

cardImage : List (Html.Styled.Attribute msg) -> List (Bulma.Styled.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 ]

Card Content

cardContent : List (Html.Styled.Attribute msg) -> List (Html.Styled.Html msg) -> CardPartition msg

Card Footer

cardFooter : List (Html.Styled.Attribute msg) -> List (CardFooterItem msg) -> CardPartition msg

myCardFooter : Html msg
myCardFooter =
    cardFooter []
        [ cardFooterItemLink [] [ text "Save" ]
        , cardFooterItemLink [] [ text "Edit" ]
        , cardFooterItemLink [] [ text "Delete" ]
        ]

Card Footer Item


type alias CardFooterItem msg =
Html.Styled.Html msg

cardFooterItem : List (Html.Styled.Attribute msg) -> List (Html.Styled.Html msg) -> CardFooterItem msg

cardFooterItemLink : List (Html.Styled.Attribute msg) -> List (Html.Styled.Html msg) -> CardFooterItem msg

Dropdown


type alias Dropdown msg =
Html.Styled.Html msg


type alias DropdownModifiers =
{ horizontalAlignment : Bulma.Styled.Modifiers.Internal.HorizontalAlignment
, verticalDirection : Bulma.Styled.Modifiers.Internal.VerticalDirection 
}

dropdownModifiers : DropdownModifiers

dropdown : IsActive -> DropdownModifiers -> List (Html.Styled.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.Styled.Attribute msg) -> List (DropdownContent msg) -> Dropdown msg

A hoverable variant of dropdown.

Dropdown Content


type alias DropdownContent msg =
Html.Styled.Html msg

dropdownTrigger : List (Html.Styled.Attribute msg) -> List (Bulma.Styled.Elements.Button msg) -> DropdownContent msg

The container for the button/link that activates the dropdown menu.

dropdownMenu : List (Html.Styled.Attribute msg) -> List (Html.Styled.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.

Dropdown Item


type alias DropdownItem msg =
Html.Styled.Html msg

dropdownItem : IsActive -> List (Html.Styled.Attribute msg) -> List (Html.Styled.Html msg) -> DropdownItem msg

A synonym for div.dropdown-item.is-active.

dropdownItemLink : IsActive -> List (Html.Styled.Attribute msg) -> List (Html.Styled.Html msg) -> DropdownItem msg

A synonym for a.dropdown-item.is-active.

dropdownDivider : List (Html.Styled.Attribute msg) -> List (Html.Styled.Html msg) -> DropdownItem msg

An empty hr.dropdown-divider element.

Menu


type alias Menu msg =
Html.Styled.Html msg

menu : List (Html.Styled.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" ]
                    ]
                ]
            ]
        ]

Menu Part


type alias MenuPart msg =
Html.Styled.Html msg

Menu Label

menuLabel : List (Html.Styled.Attribute msg) -> List (Html.Styled.Html msg) -> MenuPart msg

Menu List

menuList : List (Html.Styled.Attribute msg) -> List (MenuListItem msg) -> MenuPart msg

Menu List Item


type alias MenuListItem msg =
Html.Styled.Html msg

menuListItem : List (Html.Styled.Attribute msg) -> List (Html.Styled.Html msg) -> MenuListItem msg

menuListItemLink : IsActive -> List (Html.Styled.Attribute msg) -> List (Html.Styled.Html msg) -> MenuListItem msg

easyMenuListItemLink : IsActive -> List (Html.Styled.Attribute msg) -> msg -> Bulma.Styled.Elements.Icon msg -> String -> MenuListItem msg

Message


type alias Message msg =
Html.Styled.Html msg


type alias MessageModifiers =
{ color : Bulma.Styled.Modifiers.Internal.Color
, size : Bulma.Styled.Modifiers.Internal.Size 
}

messageModifiers : MessageModifiers

message : MessageModifiers -> List (Html.Styled.Attribute msg) -> List (MessagePartition msg) -> Message msg

myMessage : Html msg
myMessage =
    message myMessageModifiers
        []
        [ messageHeader []
            [ p [] [ text "hello" ]
            ]
        , messageBody []
            [ text "lorem ipsum"
            ]
        ]

Message Partition


type alias MessagePartition msg =
Html.Styled.Html msg

messageBody : List (Html.Styled.Attribute msg) -> List (Html.Styled.Html msg) -> MessagePartition msg

messageHeader : List (Html.Styled.Attribute msg) -> List (Html.Styled.Html msg) -> MessagePartition msg

messageHeaderWithDelete : List (Html.Styled.Attribute msg) -> msg -> List (Html.Styled.Html msg) -> MessagePartition msg

Modal


type alias Modal msg =
Html.Styled.Html msg


type alias IsModalOpen =
Basics.Bool

modal : IsModalOpen -> List (Html.Styled.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.Styled.Attribute msg) -> msg -> List (Html.Styled.Html msg) -> Modal msg

type Msg
    = CloseModal

myModal : Html Msg
myModal =
    easyModal True
        []
        CloseModal
        [ text "Your content goes here."
        ]

Modal Partition


type alias ModalPartition msg =
Html.Styled.Html msg

modalContent : List (Html.Styled.Attribute msg) -> List (Html.Styled.Html msg) -> ModalPartition msg

modalBackground : List (Html.Styled.Attribute msg) -> List (Html.Styled.Html msg) -> ModalPartition msg

easyModalBackground : List (Html.Styled.Attribute msg) -> msg -> ModalPartition msg

modalClose : Bulma.Styled.Modifiers.Internal.Size -> List (Html.Styled.Attribute msg) -> List (Html.Styled.Html msg) -> ModalPartition msg

easyModalClose : Bulma.Styled.Modifiers.Internal.Size -> List (Html.Styled.Attribute msg) -> msg -> ModalPartition msg

modalCard : List (Html.Styled.Attribute msg) -> List (ModalCardPartition msg) -> ModalPartition msg

Modal Card Partition


type alias ModalCardPartition msg =
Html.Styled.Html msg

modalCardBody : List (Html.Styled.Attribute msg) -> List (Html.Styled.Html msg) -> ModalCardPartition msg

modalCardHead : List (Html.Styled.Attribute msg) -> List (Html.Styled.Html msg) -> ModalCardPartition msg

modalCardTitle : List (Html.Styled.Attribute msg) -> List (Html.Styled.Html msg) -> Html.Styled.Html msg

modalCardFoot : List (Html.Styled.Attribute msg) -> List (Html.Styled.Html msg) -> ModalCardPartition msg

Navbar


type alias Navbar msg =
Html.Styled.Html msg


type alias NavbarModifiers =
{ color : Bulma.Styled.Modifiers.Internal.Color
, transparent : Basics.Bool 
}

navbarModifiers : NavbarModifiers

navbar : NavbarModifiers -> List (Html.Styled.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.Styled.Modifiers.Internal.VerticalAlignment -> NavbarModifiers -> List (Html.Styled.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">.

Navbar Sections


type alias NavbarSection msg =
Html.Styled.Html msg

navbarBrand : List (Html.Styled.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.Styled.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 [] [] ].


type alias NavbarSide msg =
Html.Styled.Html msg

navbarStart : List (Html.Styled.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.Styled.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.

Navbar Burger


type alias NavbarBurger msg =
Html.Styled.Html msg

navbarBurger : IsActive -> List (Html.Styled.Attribute msg) -> List (Html.Styled.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.Styled.Attribute msg) -> NavbarBurger msg

A simple "X" character; the active version of navbarBurger.

Navbar Item


type alias NavbarItem msg =
Html.Styled.Html msg

navbarItem : IsActive -> List (Html.Styled.Attribute msg) -> List (Html.Styled.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.Styled.Attribute msg) -> List (Html.Styled.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.

arrowlessNavbarLink : List (Html.Styled.Attribute msg) -> List (Html.Styled.Html msg) -> NavbarLink msg

This element represents a.navbar-link.is-arrowless. It is only useful as a child of navbarDropdown.

navbarDivider : List (Html.Styled.Attribute msg) -> List (Html.Styled.Html msg) -> NavbarItem msg

A tiny 'lil hr.navbar-divider.

Navbar Item Dropdown

navbarItemDropdown : IsActive -> Bulma.Styled.Modifiers.Internal.VerticalDirection -> List (Html.Styled.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.Styled.Modifiers.Internal.VerticalDirection -> List (Html.Styled.Attribute msg) -> NavbarLink msg -> List (NavbarDropdown msg) -> NavbarItem msg

A hoverable variant of navbarItemDropdown.


type alias NavbarDropdown msg =
Html.Styled.Html msg


type alias IsBoxed =
Basics.Bool

navbarDropdown : IsBoxed -> Bulma.Styled.Modifiers.Internal.HorizontalAlignment -> List (Html.Styled.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.


type alias NavbarLink msg =
Html.Styled.Html msg

navbarLink : List (Html.Styled.Attribute msg) -> List (Html.Styled.Html msg) -> NavbarLink msg

This element represents a.navbar-link. It is only useful as a child of navbarDropdown.

Pagination


type alias Pagination msg =
Html.Styled.Html msg

pagination : Bulma.Styled.Modifiers.Internal.HorizontalAlignment -> List (Html.Styled.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.Styled.Modifiers.Internal.HorizontalAlignment -> List (Html.Styled.Attribute msg) -> List (PaginationPartition msg) -> Pagination msg

A rounded variant of pagination.

Pagination Partition


type alias PaginationPartition msg =
Html.Styled.Html msg

paginationPrev : List (Html.Styled.Attribute msg) -> List (Html.Styled.Html msg) -> PaginationPartition msg

easyPaginationPrev : List (Html.Styled.Attribute msg) -> msg -> String -> PaginationPartition msg

paginationNext : List (Html.Styled.Attribute msg) -> List (Html.Styled.Html msg) -> PaginationPartition msg

easyPaginationNext : List (Html.Styled.Attribute msg) -> msg -> String -> PaginationPartition msg

paginationList : List (Html.Styled.Attribute msg) -> List (PaginationListItem msg) -> PaginationPartition msg

Pagination List Item


type alias PaginationListItem msg =
Html.Styled.Html msg


type alias IsCurrent =
Basics.Bool

paginationLink : IsCurrent -> List (Html.Styled.Attribute msg) -> List (Html.Styled.Html msg) -> PaginationListItem msg

easyPaginationLink : IsCurrent -> List (Html.Styled.Attribute msg) -> msg -> Basics.Int -> PaginationListItem msg

paginationEllipsis : List (Html.Styled.Attribute msg) -> List (Html.Styled.Html msg) -> PaginationListItem msg

easyPaginationEllipsis : List (Html.Styled.Attribute msg) -> PaginationListItem msg

Panel


type alias Panel msg =
Html.Styled.Html msg

panel : List (Html.Styled.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" ]
        ]

Panel Partition


type alias PanelPartition msg =
Html.Styled.Html msg

panelHeading : List (Html.Styled.Attribute msg) -> List (Html.Styled.Html msg) -> PanelPartition msg

panelBlock : IsActive -> List (Html.Styled.Attribute msg) -> List (Html.Styled.Html msg) -> PanelPartition msg

panelLabel : IsActive -> List (Html.Styled.Attribute msg) -> List (Html.Styled.Html msg) -> PanelPartition msg

panelLink : IsActive -> List (Html.Styled.Attribute msg) -> List (Html.Styled.Html msg) -> PanelPartition msg

panelLinkWithIcon : IsActive -> List (Html.Styled.Attribute msg) -> List (Html.Styled.Attribute msg) -> List (Bulma.Styled.Elements.IconBody msg) -> List (Html.Styled.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.Styled.Attribute msg) -> List (Html.Styled.Attribute msg) -> List (Html.Styled.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.Styled.Attribute msg) -> List (PanelTab msg) -> PanelPartition msg

Panel Tab


type alias PanelTab msg =
Html.Styled.Html msg

panelTab : IsActive -> List (Html.Styled.Attribute msg) -> List (Html.Styled.Html msg) -> PanelTab msg

Tabs


type alias Tabs msg =
Html.Styled.Html msg


type alias TabsModifiers =
{ style : TabsStyle
, alignment : Bulma.Styled.Modifiers.Internal.HorizontalAlignment
, size : Bulma.Styled.Modifiers.Internal.Size 
}

tabsModifiers : TabsModifiers


type TabsStyle

minimal : TabsStyle

boxed : TabsStyle

toggle : TabsStyle

round : TabsStyle

tabs : TabsModifiers -> List (Html.Styled.Attribute msg) -> List (Html.Styled.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" ]
        ]

Tab


type alias Tab msg =
Html.Styled.Html msg

tab : IsActive -> List (Html.Styled.Attribute msg) -> List (Html.Styled.Attribute msg) -> List (Html.Styled.Html msg) -> Tab msg