[ { "name": "Bootstrap.Accordion", "comment": " An accordion is a group of stacked cards where you can toggle the visibility (slide up/down) of each card\n\n\n type alias Model =\n { accordionState = Accordion.state }\n\n\n init: (Model, Cmd Msg)\n ( { accordionState = Accordion.initialState }, Cmd.none )\n\n\n type Msg\n = AccordionMsg Accordion.State\n\n\n\n update : Msg -> Model -> ( Model, Cmd Msg )\n update msg model =\n case msg of\n AccordionMsg state ->\n ( { model | accordionState = state }\n , Cmd.none\n )\n\n\n view : Model -> Html Msg\n view model =\n Accordion.config\n |> Accordion.withAnimation\n |> Accordion.cards\n [ Accordion.card\n { id = \"card1\"\n , options = []\n , header =\n Accordion.header [] <| Accordion.toggle [] [ text \"Card 1\" ]\n , blocks =\n [ Accordion.block []\n [ Card.text [] [ text \"Lorem ipsum etc\" ] ]\n ]\n }\n , Accordion.card\n { id = \"card2\"\n , options = []\n , header =\n Accordion.header [] <| Accordion.toggle [] [ text \"Card 2\" ]\n , blocks =\n [ Accordion.block []\n [ Card.text [] [ text \"Lorem ipsum etc\" ] ]\n ]\n }\n ]\n |> Accordion.view model.accordionState\n\n\n -- You need to do this wiring when you use animations !\n\n subscriptions : Model -> Sub Msg\n subscriptions model =\n Accordion.subscriptions model.accordionState AccordionMsg\n\n\n\n## Accordion\n@docs view, config, cards, withAnimation, Config, initialState, State\n\n## Contents\n@docs card, block, listGroup, header, toggle, headerH1, headerH2, headerH3, headerH4, headerH5, headerH6, appendHeader, prependHeader, Card, CardBlock, Header, Toggle\n\n\n## Animation\n@docs subscriptions\n\n\n", "unions": [ { "name": "Card", "comment": " Opaque representation of a card item\n", "args": [ "msg" ], "cases": [] }, { "name": "Config", "comment": " Opaque type that defines the view configuration information of your accordion\n\n* You create an initial configuration by calling the [`config`](#config) function\n* The [`withAnimtion`](#withAnimation) function allows you to define that the contents of cards should animate up/down\n* The [`cards`](#cards) function defines the List of cards to be displayed\n", "args": [ "msg" ], "cases": [] }, { "name": "Header", "comment": " Opaque type representing the header for an accordion card\n", "args": [ "msg" ], "cases": [] }, { "name": "State", "comment": " Opaque representation of the view state for the accordion\n", "args": [], "cases": [] }, { "name": "Toggle", "comment": " Opaque representation of toggle element for initiating slide up/down for a card\n", "args": [ "msg" ], "cases": [] } ], "aliases": [ { "name": "CardBlock", "comment": " Opaque representation of a card block element\n", "args": [ "msg" ], "type": "CardBlock msg" } ], "values": [ { "name": "appendHeader", "comment": " Add elements after the toggle element in a accordion card header\n", "type": "List (Html msg) -> Header msg -> Header msg" }, { "name": "block", "comment": " Create a block element for use in an accordion card.\n\n\n Accordion.block []\n [ Card.text [] [ text \"Just some text\"] ]\n\n* `blockOptions` List of block options\n* `blockItems` List of block items\n\n", "type": "List (BlockOption msg) -> List (BlockItem msg) -> CardBlock msg" }, { "name": "card", "comment": " Creates a card item for use in an accordion\n\n* card config record\n * `id` Unique id for your card\n * `options` List of card styling options\n * `header` Card header containing a toggle to hide/show the details of a card\n * `blocks` The main content elements of the card\n", "type": "{ id : String, options : List (CardOption msg), blocks : List (CardBlock msg), header : Header msg } -> Card msg" }, { "name": "cards", "comment": " Define the cards that your accordion should consist of\n", "type": "List (Card msg) -> Config msg -> Config msg" }, { "name": "config", "comment": " Creates an initial/default view configuration for an accordion.\n\n", "type": "(State -> msg) -> Config msg" }, { "name": "header", "comment": " Create a header (div) for an accordion card. It must contain a [`toggle`](#toggle)\nelement which will be responsible for display/hide the details of an individual card.\n\nYou may optionally [`prepend`](#prependHeader) or [`append`](#appendHeader) children to the header for further customization.\n\n* attributes - List of attributes\n* toggle - A toggle element\n\n", "type": "List (Attribute msg) -> Toggle msg -> Header msg" }, { "name": "headerH1", "comment": " Create an accordion card header but rather than a div, using a h1 element\n", "type": "List (Attribute msg) -> Toggle msg -> Header msg" }, { "name": "headerH2", "comment": " Create an accordion card header but rather than a div, using a h2 element\n", "type": "List (Attribute msg) -> Toggle msg -> Header msg" }, { "name": "headerH3", "comment": " Create an accordion card header but rather than a div, using a h3 element\n", "type": "List (Attribute msg) -> Toggle msg -> Header msg" }, { "name": "headerH4", "comment": " Create an accordion card header but rather than a div, using a h4 element\n", "type": "List (Attribute msg) -> Toggle msg -> Header msg" }, { "name": "headerH5", "comment": " Create an accordion card header but rather than a div, using a h5 element\n", "type": "List (Attribute msg) -> Toggle msg -> Header msg" }, { "name": "headerH6", "comment": " Create an accordion card header but rather than a div, using a h6 element\n", "type": "List (Attribute msg) -> Toggle msg -> Header msg" }, { "name": "initialState", "comment": " Initial state for the accordion. Typically used from your main `init` function\n", "type": "State" }, { "name": "listGroup", "comment": " Create a List Group element for use in an accordion.\nList groups are block elements just like [`block`](#block)\n\n Accordion.listGroup []\n [ ListGroup.li [] [ text \"Item 1\" ]\n , ListGroup.li [] [ text \"Item 2\" ]\n ]\n\n* `items` List of List group items\n", "type": "List (Item msg) -> CardBlock msg" }, { "name": "prependHeader", "comment": " Add elements before the toggle element in a accordion card header\n", "type": "List (Html msg) -> Header msg -> Header msg" }, { "name": "subscriptions", "comment": " When using animations you must remember to call this function for your main subscriptions function\n\n subscriptions : Model -> Sub Msg\n subscriptions model =\n Accordion.subscriptions model.accordionState AccordionMsg\n\n* `state` The current view state of the accordion\n* `toMsg` Message constructor function that is used to step the view state forward\n", "type": "State -> (State -> msg) -> Sub msg" }, { "name": "toggle", "comment": " Creates a card toggle element used for toggling the display of the main content of your cards\n\n* `attributes` List of attributes\n* `children` List of child elements\n", "type": "List (Attribute msg) -> List (Html msg) -> Toggle msg" }, { "name": "view", "comment": " Create an interactive accordion element\n\n Accordion.config AccordionMsg\n |> Accordion.withAnimation\n |> Accordion.cards\n [ cardOne model -- view function to create a card\n , cardTwo model\n ]\n |> Accordion.view model.accordionState\n\n\n\n* `state` The current view state\n* `config` The configuration for the display of the accordion\n", "type": "State -> Config msg -> Html msg" }, { "name": "withAnimation", "comment": " Set option for using animations for sliding card contents up/down.\n\n*Note*: You must remember to hook up the [`subscriptions`](#subscriptions) function\nwhen using this option.\n", "type": "Config msg -> Config msg" } ], "binops": [] }, { "name": "Bootstrap.Card", "comment": " A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options.\n\n\n# Cards\n@docs view, Config\n\n\n## Header\n@docs header, headerH1, headerH2, headerH3, headerH4, headerH5, headerH6, CardHeader\n\n## Footer\n@docs CardFooter, footer\n\n\n## Images\n@docs imgTop, imgBottom, CardImageTop, CardImageBottom\n\n\n## Options\nYou can customize the look and feel of your cards using the following options\n\n@docs config, align, primary, success, info, warning, danger, outlinePrimary, outlineSuccess, outlineInfo, outlineWarning, outlineDanger, inverted, attrs, CardOption\n\n\n# Blocks\n@docs block, listGroup, BlockItem\n\n\n## Block title\n@docs titleH1, titleH2, titleH3, titleH4, titleH5, titleH6\n\n\n## Misc\n@docs link, text, blockQuote, custom\n\n## Block options\n@docs blockAlign, blockAttrs, BlockOption\n\n\n# Composing cards\nCards can be composed into\n* [`groups`](#group)\n* [`decks`](#deck)\n* [`columns`](#columns)\n\n@docs group, deck, columns, keyedGroup, keyedDeck, keyedColumns\n\n", "unions": [ { "name": "CardFooter", "comment": " Opaque type representing a card footer element\n", "args": [ "msg" ], "cases": [] }, { "name": "CardHeader", "comment": " Opaque type representing a card header element\n", "args": [ "msg" ], "cases": [] }, { "name": "CardImageBottom", "comment": " Opaque type representing a card image placed at the bottom\n", "args": [ "msg" ], "cases": [] }, { "name": "CardImageTop", "comment": " Opaque type representing a card image placed at the top\n", "args": [ "msg" ], "cases": [] }, { "name": "Config", "comment": " Opaque type representing the view configuration of a card\n\nYou may use the following functions to expand/change a configuration:\n* [`header`](#header) or [`headerH1`](#headerH1), [`headerH2`](#headerH2) etc\n* [`footer`](#footer)\n* [`block`](#block)\n* [`imgTop`](#imgTop)\n* [`imgBottom`](#imgBottom)\n\n", "args": [ "msg" ], "cases": [] } ], "aliases": [ { "name": "BlockItem", "comment": " Opaque type representing a legal card block child element\n", "args": [ "msg" ], "type": "BlockItem msg" }, { "name": "BlockOption", "comment": " Opaque type representing options for styling a card block\n", "args": [ "msg" ], "type": "BlockOption msg" }, { "name": "CardOption", "comment": " Opaque type representing options for customizing the styling of a card\n", "args": [ "msg" ], "type": "CardOption msg" } ], "values": [ { "name": "align", "comment": " Option to specify horizonal alignment of card contents\n", "type": "HAlign -> CardOption msg" }, { "name": "attrs", "comment": " When you need to customize a card item with standard Html.Attribute attributes use this function\n", "type": "List (Attribute msg) -> CardOption msg" }, { "name": "block", "comment": " The building block of a card is the card block. Use it whenever you need a padded section within a card.\nYou may have multiple blocks in a card, this function will add blocks to your Cards.\n\n* blockOptions - List of [`block options`](#BlockOption) to configure block level styling\n* item - List of [`block items`](#BlockItem)\n* `config` A card [`Config`](#Config) that you wish to add a block element to\n", "type": "List (BlockOption msg) -> List (BlockItem msg) -> Config msg -> Config msg" }, { "name": "blockAlign", "comment": " Option to specify horizontal alignment of a card block item\n\n Card.blockAlign Text.xs\n\n", "type": "HAlign -> BlockOption msg" }, { "name": "blockAttrs", "comment": " When you need to customize a block item with standard Html.Attribute attributes use this function\n", "type": "List (Attribute msg) -> BlockOption msg" }, { "name": "blockQuote", "comment": " Create a block quote element\n\n* `attributes` List of attributes\n* `children` List of child elements\n", "type": "List (Attribute msg) -> List (Html msg) -> BlockItem msg" }, { "name": "columns", "comment": " Cards can be organized into Masonry-like columns with just CSS by wrapping them in .card-columns. Cards are built with CSS column properties instead of flexbox for easier alignment. Cards are ordered from top to bottom and left to right.\n\n\n* `cards` List of [`card configs`](#Config)\n", "type": "List (Config msg) -> Html msg" }, { "name": "config", "comment": " Template/default config which you use as a starting point to compose your cards.\n\n* options - List of card wide styling options\n", "type": "List (CardOption msg) -> Config msg" }, { "name": "custom", "comment": " Add a custom HTML element to be displayed in a Card block\n", "type": "Html msg -> BlockItem msg" }, { "name": "danger", "comment": " Give cards a danger background color and appropriate foreground color\n", "type": "CardOption msg" }, { "name": "deck", "comment": " Need a set of equal width and height cards that aren’t attached to one another? Use card decks\n\n* `cards` List of [`card configs`](#Config)\n", "type": "List (Config msg) -> Html msg" }, { "name": "footer", "comment": " Create a card footer element\n\n* `attributes` List of attributes\n* `children` List of child elements\n* `config` A card [`Config`](#Config) that you wish to extend/override\n", "type": "List (Attribute msg) -> List (Html msg) -> Config msg -> Config msg" }, { "name": "group", "comment": " Use card groups to render cards as a single, attached element with equal width and height columns. Card groups use display: flex; to achieve their uniform sizing.\n\n* `cards` List of [`card configs`](#Config)\n", "type": "List (Config msg) -> Html msg" }, { "name": "header", "comment": " Create a card header element\n\n* `attributes` List of attributes\n* `children` List of child elements\n* `config` A card [`Config`](#Config) that you wish to extend/override\n", "type": "List (Attribute msg) -> List (Html msg) -> Config msg -> Config msg" }, { "name": "headerH1", "comment": " Create a card h1 header\n\n* `attributes` List of attributes\n* `children` List of child elements\n* `config` A card [`Config`](#Config) that you wish to extend/override\n", "type": "List (Attribute msg) -> List (Html msg) -> Config msg -> Config msg" }, { "name": "headerH2", "comment": " Create a card h2 header\n\n* `attributes` List of attributes\n* `children` List of child elements\n* `config` A card [`Config`](#Config) that you wish to extend/override\n", "type": "List (Attribute msg) -> List (Html msg) -> Config msg -> Config msg" }, { "name": "headerH3", "comment": " Create a card h3 header\n\n* `attributes` List of attributes\n* `children` List of child elements\n* `config` A card [`Config`](#Config) that you wish to extend/override\n", "type": "List (Attribute msg) -> List (Html msg) -> Config msg -> Config msg" }, { "name": "headerH4", "comment": " Create a card h4 header\n\n* `attributes` List of attributes\n* `children` List of child elements\n* `config` A card [`Config`](#Config) that you wish to extend/override\n", "type": "List (Attribute msg) -> List (Html msg) -> Config msg -> Config msg" }, { "name": "headerH5", "comment": " Create a card h5 header\n\n* `attributes` List of attributes\n* `children` List of child elements\n* `config` A card [`Config`](#Config) that you wish to extend/override\n", "type": "List (Attribute msg) -> List (Html msg) -> Config msg -> Config msg" }, { "name": "headerH6", "comment": " Create a card h6 header\n\n* `attributes` List of attributes\n* `children` List of child elements\n* `config` A card [`Config`](#Config) that you wish to extend/override\n", "type": "List (Attribute msg) -> List (Html msg) -> Config msg -> Config msg" }, { "name": "imgBottom", "comment": " Create a element to be shown at the bottom of a card\n\n* `attributes` List of attributes\n* `children` List of child elements\n", "type": "List (Attribute msg) -> List (Html msg) -> Config msg -> Config msg" }, { "name": "imgTop", "comment": " Create a element to be shown at the top of a card\n\n* `attributes` List of attributes\n* `children` List of child elements\n", "type": "List (Attribute msg) -> List (Html msg) -> Config msg -> Config msg" }, { "name": "info", "comment": " Give cards a info background color and appropriate foreground color\n", "type": "CardOption msg" }, { "name": "inverted", "comment": " Give cards a custom dark background color with light text\n", "type": "Color -> CardOption msg" }, { "name": "keyedColumns", "comment": " Create card columns with keyed cards.\n", "type": "List ( String, Config msg ) -> Html msg" }, { "name": "keyedDeck", "comment": " Create a card deck with keyed cards.\n", "type": "List ( String, Config msg ) -> Html msg" }, { "name": "keyedGroup", "comment": " Create a card group with keyed cards.\n", "type": "List ( String, Config msg ) -> Html msg" }, { "name": "link", "comment": " Create link elements that are placed next to each other in a block using this function\n\n* `attributes` List of attributes\n* `children` List of child elements\n", "type": "List (Attribute msg) -> List (Html msg) -> BlockItem msg" }, { "name": "listGroup", "comment": " You may add list groups, just like you can add card blocks to a Card.\nUse the li function in the ListGroup module to add and configure the list items.\n", "type": "List (Item msg) -> Config msg -> Config msg" }, { "name": "outlineDanger", "comment": " Give cards a danger colored outline\n", "type": "CardOption msg" }, { "name": "outlineInfo", "comment": " Give cards a info colored outline\n", "type": "CardOption msg" }, { "name": "outlinePrimary", "comment": " Give cards a primary colored outline\n", "type": "CardOption msg" }, { "name": "outlineSuccess", "comment": " Give cards a success colored outline\n", "type": "CardOption msg" }, { "name": "outlineWarning", "comment": " Give cards a warning colored outline\n", "type": "CardOption msg" }, { "name": "primary", "comment": " Give cards a primary background color and appropriate foreground color\n", "type": "CardOption msg" }, { "name": "success", "comment": " Give cards a success background color and appropriate foreground color\n", "type": "CardOption msg" }, { "name": "text", "comment": " Create a card text element\n\n* `attributes` List of attributes\n* `children` List of child elements\n", "type": "List (Attribute msg) -> List (Html msg) -> BlockItem msg" }, { "name": "titleH1", "comment": " Create a block h1 title\n\n* `attributes` List of attributes\n* `children` List of child elements\n", "type": "List (Attribute msg) -> List (Html msg) -> BlockItem msg" }, { "name": "titleH2", "comment": " Create a block h2 title\n\n* `attributes` List of attributes\n* `children` List of child elements\n", "type": "List (Attribute msg) -> List (Html msg) -> BlockItem msg" }, { "name": "titleH3", "comment": " Create a block h3 title\n\n* `attributes` List of attributes\n* `children` List of child elements\n", "type": "List (Attribute msg) -> List (Html msg) -> BlockItem msg" }, { "name": "titleH4", "comment": " Create a block h4 title\n\n* `attributes` List of attributes\n* `children` List of child elements\n", "type": "List (Attribute msg) -> List (Html msg) -> BlockItem msg" }, { "name": "titleH5", "comment": " Create a block h5 title\n\n* `attributes` List of attributes\n* `children` List of child elements\n", "type": "List (Attribute msg) -> List (Html msg) -> BlockItem msg" }, { "name": "titleH6", "comment": " Create a block h6 title\n\n* `attributes` List of attributes\n* `children` List of child elements\n", "type": "List (Attribute msg) -> List (Html msg) -> BlockItem msg" }, { "name": "view", "comment": " View a card standalone. To create a card you start off with a basic configuration which you can compose\nof several optional elements.\n\n Card.config [ Card.outlineInfo ]\n |> Card.headerH1 [] [ text \"My Card Info\" ]\n |> Card.footer [] [ text \"Some footer\" ]\n |> Card.block []\n [ Card.titleH1 [] [ text \"Block title\" ]\n , Card.text [] [ text \"Some block content\" ]\n , Card.link [ href \"#\" ] [ text \"MyLink\"]\n ]\n |> Card.view\n\n* config - See [`Config`](#Config) for what items you may compose your cards with\n", "type": "Config msg -> Html msg" }, { "name": "warning", "comment": " Give cards a warning background color and appropriate foreground color\n", "type": "CardOption msg" } ], "binops": [] }, { "name": "Bootstrap.Dropdown", "comment": " Dropdowns are toggleable, contextual overlays for displaying lists of links and more. They’re toggled by clicking, not by hovering; this is an intentional design decision.\n\n\n\n**Wiring needed**\n\n import Bootstrap.Dropdown as Dropdown\n import Bootstrap.Button as Button\n -- .. etc\n\n\n -- Model\n type alias Model =\n { myDrop1State : Dropdown.State\n , myDrop1State : Dropdown.State\n }\n\n -- Msg\n type Msg\n = MyDrop1Msg Dropdown.State\n | MyDrop2Msg Dropdown.State\n\n -- init\n init : (Model, Cmd Msg )\n init =\n ( { myDrop1State = Dropdown.initialState\n , myDrop2State = Dropdown.initialState\n }\n , Cmd.none\n )\n\n -- update\n update : Msg -> Model -> ( Model, Cmd msg )\n update msg model =\n case msg of\n MyDrop1Msg state ->\n ( { model | myDrop1State = state }\n , Cmd.none\n )\n\n MyDrop2Msg state ->\n ( { model | myDrop2State = state }\n , Cmd.none\n )\n\n -- ... and cases for the drop down actions\n\n\n subscriptions : Model -> Sub Msg\n subscriptions model =\n Sub.batch\n [ Dropdown.subscriptions model.myDrop1State MyDrop1Msg\n , Dropdown.subscriptions model.myDrop2State MyDrop2Msg\n ]\n\n\n view : Model -> Html Msg\n view model =\n div []\n [ Dropdown.dropdown\n model.myDrop1State\n { options = [ Dropdown.alignMenuRight ]\n , toggleMsg = MyDrop1Msg\n , toggleButton =\n Dropdown.toggle [ Button.roleWarning ] [ text \"MyDropdown1\" ]\n , items =\n [ Dropdown.buttonItem [ onClick Item1Msg ] [ text \"Item 1\" ]\n , Dropdown.buttonItem [ onClick Item2Msg ] [ text \"Item 2\" ]\n , Dropdown.divider\n , Dropdown.header [ text \"Silly items\" ]\n , Dropdown.buttonItem [ class \"disabled\" ] [ text \"DoNothing1\" ]\n , Dropdown.buttonItem [] [ text \"DoNothing2\" ]\n ]\n }\n\n -- etc\n ]\n\n\nBootstrap dropdowns are made interactive in Elm by using state and subscription, so there is a little\nbit of wiring involved when using them in your Elm Application.\n\n\n\n# Dropdown\n@docs dropdown, toggle, DropdownToggle\n\n\n## Options\n@docs dropUp, alignMenuRight, attrs, menuAttrs, DropdownOption\n\n# Dropdown items\n@docs anchorItem, buttonItem, divider, header, DropdownItem\n\n\n# Split dropdown\n@docs splitDropdown, splitToggle, SplitToggleConfig, SplitDropdownToggle\n\n\n\n# Required wiring\n@docs subscriptions, initialState, State\n\n\n", "unions": [ { "name": "DropdownItem", "comment": " Opaque type representing an item in the menu of a Dropdown\n", "args": [ "msg" ], "cases": [] }, { "name": "DropdownOption", "comment": " Opaque type representing configuration options for a Dropdown\n", "args": [ "msg" ], "cases": [] }, { "name": "DropdownToggle", "comment": " Opaque type representing a toggle button item for a Dropdown\n", "args": [ "msg" ], "cases": [] }, { "name": "SplitDropdownToggle", "comment": " Opaque type representing a split toggle button item for a Split Dropdown\n", "args": [ "msg" ], "cases": [] }, { "name": "State", "comment": " Opaque type representing the view state of a Dropdown. You need to store this state\nin your model and it's initialized by [`initialState`](#initialState)\n", "args": [], "cases": [] } ], "aliases": [ { "name": "SplitToggleConfig", "comment": " The configuration options available for the toggle in a Split Dropdown.\n\n\n* `options` List of Button options for the main button\n* `togglerOptions` List of Button options for the menu toogle\n* `children` List of child elements for the main button\n\n**Important**\nYou mustn't define an onClick handler as an option in `options`. That will mess up the toggle feature !\n\n", "args": [ "msg" ], "type": "{ options : List (Option msg), togglerOptions : List (Option msg), children : List (Html msg) }" } ], "values": [ { "name": "alignMenuRight", "comment": " Option to align the dropdown menu to the right of the dropdown button.\n\n**NOTE!** Dropdowns are positioned only with CSS and may need some additional styles for exact alignment.\n", "type": "DropdownOption msg" }, { "name": "anchorItem", "comment": " Creates an `a` element appropriate for use in dropdowns\n\n* `attributes` List of attributes\n* `children` List of child elements\n", "type": "List (Attribute msg) -> List (Html msg) -> DropdownItem msg" }, { "name": "attrs", "comment": " Use this function when you need the customize the Dropdown root div with additional Html.Attribute (s).\n", "type": "List (Attribute msg) -> DropdownOption msg" }, { "name": "buttonItem", "comment": " Creates a `button` element appropriate for use in dropdowns\n\n* `attributes` List of attributes\n* `children` List of child elements\n", "type": "List (Attribute msg) -> List (Html msg) -> DropdownItem msg" }, { "name": "divider", "comment": " Creates divider element appropriate for use in dropdowns.\nHandy when you want to visually separate groups of menu items in a dropdown menu\n\n* `attributes` List of attributes\n* `children` List of child elements\n", "type": "DropdownItem msg" }, { "name": "dropUp", "comment": " Option to show the dropdown menu above the dropdown rather than the default which is below\n", "type": "DropdownOption msg" }, { "name": "dropdown", "comment": " Creates a Dropdown button. You can think of this as the view function.\nIt takes the current (view) state and a configuration record as parameters.\n\n Dropdown.dropdown\n model.myDropdownState\n { toggleMsg = MyDropdownMsg\n , toggleButton = Dropdown.toggle [ Button.primary ] [ text \"MyDropdown\" ]\n , options = [ Dropdown.alignMenuRight ]\n , items =\n [ Dropdown.buttonItem [ onClick Item1Msg ] [ text \"Item1\" ]\n , Dropdown.buttonItem [ onClick Item2Msg ] [ text \"Item1\" ]\n ]\n }\n\n* `state` The current view state of the dropdown\n* Configuration\n * `toggleMsg` A `msg` function that takes a state and returns a msg\n * `toggleButton` The actual button for the dropdown\n * `options` General display [`options`](#options) for Dropdown widget\n * `items` List of menu items for the dropdown\n\n", "type": "State -> { toggleMsg : State -> msg, toggleButton : DropdownToggle msg, options : List (DropdownOption msg), items : List (DropdownItem msg) } -> Html msg" }, { "name": "header", "comment": " Creates an header element appropriate for use in dropdowns.\nHandy when you want to provide a heading for a group of menu items in a dropdown menu\n\n* `attributes` List of attributes\n* `children` List of child elements\n", "type": "List (Html msg) -> DropdownItem msg" }, { "name": "initialState", "comment": " Initializes the view state for a dropdown. Typically you would call this from\nyour main init function\n", "type": "State" }, { "name": "menuAttrs", "comment": " Use this function when you need the customize the Dropdown menu with additional Html.Attribute (s).\n", "type": "List (Attribute msg) -> DropdownOption msg" }, { "name": "splitDropdown", "comment": " Creates a split dropdown. Contains a normal button and a toggle button that are placed next to each other.\n\n* `state` The current view state of the split dropdown\n* Configuration\n * `toggleMsg` A `msg` function that takes a state and returns a msg\n * `toggleButton` The actual split button for the dropdown\n * `options` General display [`options`](#options) for Split dropdown widget\n * `items` List of menu items for the dropdown\n", "type": "State -> { toggleMsg : State -> msg, toggleButton : SplitDropdownToggle msg, options : List (DropdownOption msg), items : List (DropdownItem msg) } -> Html msg" }, { "name": "splitToggle", "comment": " Function to construct a split button toggle for a [`splitDropdown`](#splitDropdown)\n\n Dropdown.splitToggle\n { options =\n [ Button.primary\n , Button.small\n , Button.attr <| onClick SplitMainMsg\n ]\n -- It makes sense to keep the styling related options in sync for the two buttons !\n , togglerOptions =\n [ Button.primary\n , Button.small\n ]\n , [ text \"My Dropdown\"]\n }\n\n\n* `config` Configuration for the split toggle as described in [`SplitToggleConfig`](#SplitToggleConfig)\n\n", "type": "SplitToggleConfig msg -> SplitDropdownToggle msg" }, { "name": "subscriptions", "comment": " The dropdowns makes use of subscriptions to ensure that opened dropdowns are\nautomatically closed when you click outside them.\n\n -- In your Main.elm or something similar\n\n subscriptions : Model -> Sub Msg\n subscriptions model =\n Sub.batch\n [ Dropdown.subscriptions model.myDrop1State MyDrop1Msg\n , Dropdown.subscriptions model.myDrop2State MyDrop2Msg\n -- etc one for each dropdown (dropdown, navDropdown or splitDropdown)\n ]\n\n", "type": "State -> (State -> msg) -> Sub msg" }, { "name": "toggle", "comment": " Function to construct a toggle for a [`dropdown`](#dropdown)\n\n* buttonOptions List of button options for styling the button\n* children List of child elements\n", "type": "List (Option msg) -> List (Html msg) -> DropdownToggle msg" } ], "binops": [] }, { "name": "Bootstrap.ButtonGroup", "comment": " Group a series of buttons together on a single line with the button group.\n\n# Button group\n\n@docs button, linkButton, radioButton, checkboxButton\n@docs buttonGroup, linkButtonGroup, radioButtonGroup, checkboxButtonGroup\n@docs ButtonItem, LinkButtonItem, RadioButtonItem, CheckboxButtonItem\n\n\n## Group options\n@docs small, large, vertical, attrs, Option\n\n\n# Button toolbar\n@docs toolbar, buttonGroupItem, linkButtonGroupItem, radioButtonGroupItem\n@docs checkboxButtonGroupItem, GroupItem\n\n\n", "unions": [ { "name": "ButtonItem", "comment": " Opaque type representing a button, for composing button groups\n", "args": [ "msg" ], "cases": [] }, { "name": "CheckboxButtonItem", "comment": " Opaque type representing a checkbox button, for composing button groups\n", "args": [ "msg" ], "cases": [] }, { "name": "GroupItem", "comment": " Opaque type representing a button group. Used when composing a button toolbar\n", "args": [ "msg" ], "cases": [] }, { "name": "LinkButtonItem", "comment": " Opaque type representing a link button, for composing button groups\n", "args": [ "msg" ], "cases": [] }, { "name": "Option", "comment": " Opaque type representing the possible styling options for a button group\n", "args": [ "msg" ], "cases": [] }, { "name": "RadioButtonItem", "comment": " Opaque type representing a radio button, for composing button groups\n", "args": [ "msg" ], "cases": [] } ], "aliases": [], "values": [ { "name": "attrs", "comment": " When you need to customize the group element with standard Html.Attribute use this function to create it as a group option\n", "type": "List (Attribute msg) -> Option msg" }, { "name": "button", "comment": " Create a button than can be composed in a button group\n", "type": "List (Option msg) -> List (Html msg) -> ButtonItem msg" }, { "name": "buttonGroup", "comment": " Create a group of related buttons\n\n ButtonGroup.group\n [ ButtonGroup.small ]\n [ ButtonGroup.button [ Button.primary ] [ text \"Primary\" ]\n , ButtonGroup.button [ Button.secondary ] [ text \"Secondary\" ]\n ]\n\n * `options` List of styling options\n * `items` List of button items (ref [`buttonItem`](#buttonItem) and [`linkButtonItem`](#linkButtonItem))\n\n", "type": "List (Option msg) -> List (ButtonItem msg) -> Html msg" }, { "name": "buttonGroupItem", "comment": " Create a button group that can be composed in a [`toolbar`](#toolbar)\n\nThe parameters are identical as for [`buttonGroup`](#buttonGroup)\n", "type": "List (Option msg) -> List (ButtonItem msg) -> GroupItem msg" }, { "name": "checkboxButton", "comment": " Create a checkboxButton that can be composed in a button group\n", "type": "Bool -> List (Option msg) -> List (Html msg) -> CheckboxButtonItem msg" }, { "name": "checkboxButtonGroup", "comment": " Create a group of related checkbox buttons. Parameters are identical to [`buttonGroup`](#buttonGroup)\n\n ButtonGroup.checkboxButtonGroup\n [ ButtonGroup.small ]\n [ ButtonGroup.checkboxButton True [ Button.primary ] [ text \"Bold\" ]\n , ButtonGroup.checkboxButton True [ Button.primary ] [ text \"Italic\" ]\n ]\n", "type": "List (Option msg) -> List (CheckboxButtonItem msg) -> Html msg" }, { "name": "checkboxButtonGroupItem", "comment": " The same as [`buttonGroupItem`](#buttonGroupItem), but for checkbox buttons\n", "type": "List (Option msg) -> List (CheckboxButtonItem msg) -> GroupItem msg" }, { "name": "large", "comment": " Option to make all buttons in the given group large\n", "type": "Option msg" }, { "name": "linkButton", "comment": " Create a linkButton that can be composed in a button group\n", "type": "List (Option msg) -> List (Html msg) -> LinkButtonItem msg" }, { "name": "linkButtonGroup", "comment": " Create a group of related link buttons. Parameters are identical to [`buttonGroup`](#buttonGroup)\n", "type": "List (Option msg) -> List (LinkButtonItem msg) -> Html msg" }, { "name": "linkButtonGroupItem", "comment": " The same as [`buttonGroupItem`](#buttonGroupItem), but for link buttons\n", "type": "List (Option msg) -> List (LinkButtonItem msg) -> GroupItem msg" }, { "name": "radioButton", "comment": " Create a radioButton that can be composed in a button group\n", "type": "Bool -> List (Option msg) -> List (Html msg) -> RadioButtonItem msg" }, { "name": "radioButtonGroup", "comment": " Create a group of mutually-exclusive radio buttons. Parameters are identical to [`buttonGroup`](#buttonGroup)\n\n ButtonGroup.radioButtonGroup\n [ ButtonGroup.small ]\n [ ButtonGroup.radioButton True [ Button.primary ] [ text \"On\" ]\n , ButtonGroup.radioButton False [ Button.primary ] [ text \"Off\" ]\n ]\n", "type": "List (Option msg) -> List (RadioButtonItem msg) -> Html msg" }, { "name": "radioButtonGroupItem", "comment": " The same as [`buttonGroupItem`](#buttonGroupItem), but for radio buttons\n", "type": "List (Option msg) -> List (RadioButtonItem msg) -> GroupItem msg" }, { "name": "small", "comment": " Option to make all buttons in the given group small\n", "type": "Option msg" }, { "name": "toolbar", "comment": " Create a toolbar of buttons by composing button groups. Separate groups by margins on the button groups.\n\n ButtonGroup.toolbar []\n [ ButtonGroup.groupItem []\n [] -- should contain a list of button items\n\n , ButtonGroup.groupItem\n [ Button.attrs [ class \"ml-2\" ] ]\n [] -- should contain a list of button items\n\n ]\n\n\n* `attributes` List of attributes to customize the toolbar element\n* `items` List of button group (items)\n", "type": "List (Attribute msg) -> List (GroupItem msg) -> Html msg" }, { "name": "vertical", "comment": " Option to make all buttons stack vertically for a button group\n", "type": "Option msg" } ], "binops": [] }, { "name": "Bootstrap.Form.InputGroup", "comment": " Easily extend form input controls by adding text and buttons.\n\n import Bootstrap.Form.InputGroup as InputGroup\n import Bootstrap.Form.Input as Input\n import Bootstrap.Button as Button\n\n\n InputGroup.config\n ( InputGroup.text [] )\n |> InputGroup.large\n |> InputGroup.predecessors\n [ InputGroup.span [] [ text \"Stuff\" ] ]\n |> InputGroup.successors\n [ InputGroup.button [] [ text \"DoIt!\"] ]\n |> InputGroup.view\n\n\n# General\n@docs view, config, predecessors, successors, text, button, span, Config, Input, Addon\n\n# Additional input flavors\n@docs password, datetimeLocal, date, month, time, week, number, email, url, search, tel\n\n\n# Sizing\n@docs large, small\n\n# Further customization\n@docs attrs\n\n", "unions": [ { "name": "Addon", "comment": " Opaque representation of an input-group add-on element.\n", "args": [ "msg" ], "cases": [] }, { "name": "Config", "comment": " Opaque representation of the view configuration for an input group.\n", "args": [ "msg" ], "cases": [] }, { "name": "Input", "comment": " Opaque representation of an input element.\n", "args": [ "msg" ], "cases": [] } ], "aliases": [], "values": [ { "name": "attrs", "comment": " When you need to customize the input group container, use this function to provide customization attributes.\n", "type": "List (Attribute msg) -> Config msg -> Config msg" }, { "name": "button", "comment": " Create a button add-on.\n\n* `options` List of button options\n* `children` LIst of child elements\n", "type": "List (Option msg) -> List (Html msg) -> Addon msg" }, { "name": "config", "comment": " Create initial view configuration for an input group.\n\n* `input` - The input for the input group\n", "type": "Input msg -> Config msg" }, { "name": "date", "comment": " Create an input add-on with type=\"date\"\n", "type": "List (Option msg) -> Input msg" }, { "name": "datetimeLocal", "comment": " Create an input add-on with type=\"datetime-local\"\n", "type": "List (Option msg) -> Input msg" }, { "name": "email", "comment": " Create an input add-on with type=\"email\"\n", "type": "List (Option msg) -> Input msg" }, { "name": "large", "comment": " Make all controls in an input group large\n", "type": "Config msg -> Config msg" }, { "name": "month", "comment": " Create an input add-on with type=\"month\"\n", "type": "List (Option msg) -> Input msg" }, { "name": "number", "comment": " Create an input add-on with type=\"number\"\n", "type": "List (Option msg) -> Input msg" }, { "name": "password", "comment": " Create an input add-on with type=\"password\"\n", "type": "List (Option msg) -> Input msg" }, { "name": "predecessors", "comment": " Specify a list of add-ons to display before the input.\n\n* `addons` List of add-ons\n* `config` View configuration for Input group (so far)\n", "type": "List (Addon msg) -> Config msg -> Config msg" }, { "name": "search", "comment": " Create an input add-on with type=\"search\"\n", "type": "List (Option msg) -> Input msg" }, { "name": "small", "comment": " Make all controls in an input group small\n", "type": "Config msg -> Config msg" }, { "name": "span", "comment": " Create a simple span add-on. Great for simple texts or font icons\n\n* `attributes` - List of attributes\n* `children` - List of child elements\n", "type": "List (Attribute msg) -> List (Html msg) -> Addon msg" }, { "name": "successors", "comment": " Specify a list of add-ons to display after the input.\n\n* `addons` List of add-ons\n* `config` View configuration for Input group (so far)\n", "type": "List (Addon msg) -> Config msg -> Config msg" }, { "name": "tel", "comment": " Create an input add-on with type=\"tel\"\n", "type": "List (Option msg) -> Input msg" }, { "name": "text", "comment": " Create an input add-on with type=\"text\"\n", "type": "List (Option msg) -> Input msg" }, { "name": "time", "comment": " Create an input add-on with type=\"time\"\n", "type": "List (Option msg) -> Input msg" }, { "name": "url", "comment": " Create an input add-on with type=\"url\"\n", "type": "List (Option msg) -> Input msg" }, { "name": "view", "comment": " Create the view representation for an Input group based on\na [´configuration`](#Config)\n", "type": "Config msg -> Html msg" }, { "name": "week", "comment": " Create an input add-on with type=\"week\"\n", "type": "List (Option msg) -> Input msg" } ], "binops": [] }, { "name": "Bootstrap.Text", "comment": " Utilities for text options. Currently only exposing helpers used by Bootstrap.Card for horizontal alignment\n\n\n@docs alignXsLeft, alignXsCenter, alignXsRight, alignSmLeft, alignSmCenter, alignSmRight, alignMdLeft, alignMdCenter, alignMdRight, alignLgLeft, alignLgCenter, alignLgRight, alignXlLeft, alignXlCenter, alignXlRight, HAlign\n\n", "unions": [], "aliases": [ { "name": "HAlign", "comment": " Opaque type representing a horizontal alignment option\n", "args": [], "type": "HAlign" } ], "values": [ { "name": "alignLgCenter", "comment": " Align center at large responsive breakpoint\n", "type": "HAlign" }, { "name": "alignLgLeft", "comment": " Align left at large responsive breakpoint\n", "type": "HAlign" }, { "name": "alignLgRight", "comment": " Align right at large responsive breakpoint\n", "type": "HAlign" }, { "name": "alignMdCenter", "comment": " Align center at medium responsive breakpoint\n", "type": "HAlign" }, { "name": "alignMdLeft", "comment": " Align left at medium responsive breakpoint\n", "type": "HAlign" }, { "name": "alignMdRight", "comment": " Align right at medium responsive breakpoint\n", "type": "HAlign" }, { "name": "alignSmCenter", "comment": " Align center at small responsive breakpoint\n", "type": "HAlign" }, { "name": "alignSmLeft", "comment": " Align left at small responsive breakpoint\n", "type": "HAlign" }, { "name": "alignSmRight", "comment": " Align right at small responsive breakpoint\n", "type": "HAlign" }, { "name": "alignXlCenter", "comment": " Align center at extra large responsive breakpoint\n", "type": "HAlign" }, { "name": "alignXlLeft", "comment": " Align left at extra large responsive breakpoint\n", "type": "HAlign" }, { "name": "alignXlRight", "comment": " Align right at extra large responsive breakpoint\n", "type": "HAlign" }, { "name": "alignXsCenter", "comment": " Align center at smallest responsive breakpoint\n", "type": "HAlign" }, { "name": "alignXsLeft", "comment": " Align left at smallest responsive breakpoint\n", "type": "HAlign" }, { "name": "alignXsRight", "comment": " Align right at smallest responsive breakpoint\n", "type": "HAlign" } ], "binops": [] }, { "name": "Bootstrap.Grid", "comment": " Bootstrap includes a powerful mobile-first flexbox grid system for building layouts of all shapes and sizes. It’s based on a 12 column layout and has multiple tiers, one for each media query range.\n\n Grid.container\n [ Grid.row\n [ Row.topXs ]\n [ Grid.col\n [ Col.xs4 ]\n [ text \"col1-row1\"]\n\n , Grid.col\n [ Col.xs8 ]\n [ text \"col2-row1\"]\n ]\n , Grid.simpleRow\n [ Grid.col\n [ Col.xs4 ]\n [ text \"col1-row2\"]\n\n , Grid.col\n [ Col.xs6 ]\n [ text \"col2-row2\"]\n\n ]\n\n ]\n\n# Containers\n@docs container, containerFluid\n\n# Rows\n@docs row, simpleRow, keyedRow\n\n\n# Columns\n@docs col, colBreak, keyedCol, Column\n\n\n", "unions": [ { "name": "Column", "comment": " Opaque type representing a column element\n", "args": [ "msg" ], "cases": [] } ], "aliases": [], "values": [ { "name": "col", "comment": " Create a column\n\n* `options` List of column options\n* `children` List of child elments\n", "type": "List (Option msg) -> List (Html msg) -> Column msg" }, { "name": "colBreak", "comment": " Creates a full width column with no content. Handy for creating equal width multi-row columns.\n", "type": "List (Attribute msg) -> Column msg" }, { "name": "container", "comment": " Responsive fixed width container, which changes its max-width at breakpoint\n", "type": "List (Attribute msg) -> List (Html msg) -> Html msg" }, { "name": "containerFluid", "comment": " Full width container spanning the entire viewport\n", "type": "List (Attribute msg) -> List (Html msg) -> Html msg" }, { "name": "keyedCol", "comment": " Create a column with keyed children\n\n* `options` List of column options\n* `keyedChildren` List of key,element child element tuples\n", "type": "List (Option msg) -> List ( String, Html msg ) -> Column msg" }, { "name": "keyedRow", "comment": " Create a row with keyed columns. Handy when you need to move columns around without getting massive rerenders.\n\n* `options` List of row options\n* `keydCols` List of key, column tuples\n", "type": "List (Option msg) -> List ( String, Column msg ) -> Html msg" }, { "name": "row", "comment": " Create a row\n\n* `options` List of row options\n* `cols` List of columns\n", "type": "List (Option msg) -> List (Column msg) -> Html msg" }, { "name": "simpleRow", "comment": " Create a row with no configuration options\n", "type": "List (Column msg) -> Html msg" } ], "binops": [] }, { "name": "Bootstrap.Form", "comment": " Bootstrap provides several form control styles, layout options, and custom components for creating a wide variety of forms.\n\n# Forms\n@docs form, formInline\n\n\n# Groups\nUse form groups to group items together (label + input is a typical simple example)\n\n@docs group, label\n\n## Group validation\n@docs groupSuccess, groupWarning, groupDanger\n\n\n# Grid layouts\n@docs row, col, colLabel, colLabelSm, colLabelLg, Col\n\n\n## Row validation\n@docs rowSuccess, rowWarning, rowDanger\n\n\n# Validation\n@docs validationText\n\n# Handy helpers\n@docs help, helpInline\n\n", "unions": [ { "name": "Col", "comment": " Opaque type representing a column in a form row\n", "args": [ "msg" ], "cases": [] } ], "aliases": [], "values": [ { "name": "col", "comment": " Create a Grid column for use in [`form rows`](#row). It reuses the options from Bootstrap.Grid.Col which gives\nyou a ton of customization options for layout.\n\n* `options` List of Bootstrap.Grid.Col options\n* `children` List of child elements\n", "type": "List (Option msg) -> List (Html msg) -> Col msg" }, { "name": "colLabel", "comment": " Create a label element as a grid column to be used in a [`form row`](#row).\nHandy for use in horizontal form in various shapes.\n\n* `options` List of Bootstrap.Grid.Col options for layout customization\n* `children` List of child elements\n", "type": "List (Option msg) -> List (Html msg) -> Col msg" }, { "name": "colLabelLg", "comment": " Create a taller [`colLabel`](#colLabel)\n", "type": "List (ColOption msg) -> List (Html msg) -> Col msg" }, { "name": "colLabelSm", "comment": " Create a shorter (height) [`colLabel`](#colLabel)\n", "type": "List (ColOption msg) -> List (Html msg) -> Col msg" }, { "name": "form", "comment": " Create an Html form element\n", "type": "List (Attribute msg) -> List (Html msg) -> Html msg" }, { "name": "formInline", "comment": " Create an inline form for placing elements horizontally.\n\n**Note**: You should stick to inline elements to get the effect you are probably expecting!\n", "type": "List (Attribute msg) -> List (Html msg) -> Html msg" }, { "name": "group", "comment": " Use the group function to create a grouping of related form elements.\nIt just creates a div container with a `form-group` Bootstrap class.\nTypically you use this for vertically laid out forms.\n\n* `options` List of [`options`](#Option) for customizing the group\n* `children` List of children\n", "type": "List (Option msg) -> List (Html msg) -> Html msg" }, { "name": "groupDanger", "comment": " Option to give a danger/error feedback for a form group. Typically used for validation.\n", "type": "Option msg" }, { "name": "groupSuccess", "comment": " Option to signal success for a form group. Typically used for validation.\n", "type": "Option msg" }, { "name": "groupWarning", "comment": " Option to give a warning feedback for a form group. Typically used for validation.\n", "type": "Option msg" }, { "name": "help", "comment": " Creates a block level text element, suitable for providing context related help text in form groups.\n", "type": "List (Attribute msg) -> List (Html msg) -> Html msg" }, { "name": "helpInline", "comment": " Creates an inline text element, suitable for providing context related help text for inputs.\n", "type": "List (Attribute msg) -> List (Html msg) -> Html msg" }, { "name": "label", "comment": " Create a form control label. Suitable for use in form groups.\n\n* `attributes` List of attributes\n* `children` List of child elements\n", "type": "List (Attribute msg) -> List (Html msg) -> Html msg" }, { "name": "row", "comment": " Create a form group row element. Use this function when creating horizontal forms (in various shapes)\nIt reuses the options from Bootstrap.Grid.Row which gives you\na ton of customization options for how to layout columns within this row.\n\n* `options` List of Bootstrap.Grid.Row options\n* `cols` List of column elements (see [`col`](#col) or [`colLabel`](#colLabel))\n", "type": "List (Option msg) -> List (Col msg) -> Html msg" }, { "name": "rowDanger", "comment": " Option to give a danger/error feedback for a form row. Typically used for validation.\n", "type": "Option msg" }, { "name": "rowSuccess", "comment": " Option to give a success feedback for a form row. Typically used for validation.\n", "type": "Option msg" }, { "name": "rowWarning", "comment": " Option to give a warning feedback for a form row. Typically used for validation.\n", "type": "Option msg" }, { "name": "validationText", "comment": " Function to create validation related feedback. When placed inside a form group\nor form row with validation options set, this element will receive the appropriate color.\n", "type": "List (Attribute msg) -> List (Html msg) -> Html msg" } ], "binops": [] }, { "name": "Bootstrap.Button", "comment": " Use Bootstrap’s custom button styles for actions in forms, dialogs, and more. Includes support for a handful of contextual variations and sizes.\nYou can also group a series of buttons together on a single line with the button group.\n\n\n# Buttons\n@docs button, linkButton, radioButton, checkboxButton\n\n# Button options\n\n@docs attrs, onClick, disabled, Option\n\n## Roled\n@docs primary, secondary, success, info, warning, danger, roleLink\n\n## Outlined\n@docs outlinePrimary, outlineSecondary, outlineSuccess, outlineInfo, outlineWarning, outlineDanger\n\n## Size\n@docs small, large\n\n## Block\n@docs block\n\n\n", "unions": [], "aliases": [ { "name": "Option", "comment": " Opaque type reresenting available options for styling a button\n", "args": [ "msg" ], "type": "Option msg" } ], "values": [ { "name": "attrs", "comment": " When you need to customize a button element with standard Html.Attribute use this function to create it as a button option\n", "type": "List (Attribute msg) -> Option msg" }, { "name": "block", "comment": " Option to create block level buttons—those that span the full width of a parent\n", "type": "Option msg" }, { "name": "button", "comment": " Create a button\n\n Button.button [ Button.primary ] [ text \"Primary\" ]\n\n\n* `options` List of styling options\n* `children` List of child elements\n\n", "type": "List (Option msg) -> List (Html msg) -> Html msg" }, { "name": "checkboxButton", "comment": " Create a checkbox input that appears as a button\n\n Button.checkboxButton True [ Button.primary ] [ text \"Primary\" ]\n\n\n* `checked` Default value\n* `options` List of styling options\n* `children` List of child elements\n\n", "type": "Bool -> List (Option msg) -> List (Html msg) -> Html msg" }, { "name": "danger", "comment": " Option to indicate an action that is potentially negative or dangerous\n", "type": "Option msg" }, { "name": "disabled", "comment": " Option to disable a button.\n", "type": "Bool -> Option msg" }, { "name": "info", "comment": " Option to indicate a info action. Typically used for alerts.\n", "type": "Option msg" }, { "name": "large", "comment": " Option to make a button large\n", "type": "Option msg" }, { "name": "linkButton", "comment": " Create a link that appears as a button\n\n Button.linkButton [ Button.primary ] [ text \"Primary\" ]\n\n\n\n* `options` List of styling options\n* `children` List of child elements\n\n", "type": "List (Option msg) -> List (Html msg) -> Html msg" }, { "name": "onClick", "comment": " Option to fire a message when a button is clicked\n", "type": "msg -> Option msg" }, { "name": "outlineDanger", "comment": " Option to outline an action that is potentially negative or dangerous\n", "type": "Option msg" }, { "name": "outlineInfo", "comment": " Option to outline an info action. Typically used for alerts.\n", "type": "Option msg" }, { "name": "outlinePrimary", "comment": " Option to outline a button to signal a primary action\n", "type": "Option msg" }, { "name": "outlineSecondary", "comment": " Option to outline a button to signal a secondary action\n", "type": "Option msg" }, { "name": "outlineSuccess", "comment": " Option to outline an indicatation of a successful or positive action\n", "type": "Option msg" }, { "name": "outlineWarning", "comment": " Option to outline an action that should be taken with caution\n", "type": "Option msg" }, { "name": "primary", "comment": " Option to color a button to signal a primary action\n", "type": "Option msg" }, { "name": "radioButton", "comment": " Create a radio input that appears as a button\n\n Button.radioButton True [ Button.primary ] [ text \"Primary\" ]\n\n\n* `checked` Default value\n* `options` List of styling options\n* `children` List of child elements\n\n", "type": "Bool -> List (Option msg) -> List (Html msg) -> Html msg" }, { "name": "roleLink", "comment": " Option to make a button look like a link element\n", "type": "Option msg" }, { "name": "secondary", "comment": " Option to color a button to signal a secondary action\n", "type": "Option msg" }, { "name": "small", "comment": " Option to make a button small\n", "type": "Option msg" }, { "name": "success", "comment": " Option to indicate a successful or positive action\n", "type": "Option msg" }, { "name": "warning", "comment": " Option to indicate an action that should be taken with caution\n", "type": "Option msg" } ], "binops": [] }, { "name": "Bootstrap.Carousel", "comment": " A carousel is a slideshow for cycling through a series of content.\n\n# Model\n@docs State, StateOptions, initialState, initialStateWithOptions, defaultStateOptions, Cycling\n\n# Update\n@docs update, Msg, next, prev, toSlide, pause, cycle\n\n# View\n@docs Config, config, view, slides, withControls, withIndicators\n\n# Subscriptions\n@docs subscriptions\n", "unions": [ { "name": "Config", "comment": " Opaque type that defines the view configuration of a carousel\n", "args": [ "msg" ], "cases": [] }, { "name": "Cycling", "comment": " when to start automatically cycling the slides\n\n* `Paused`: frozen on the current slide\n* `Active`: immediately start cycling\n* `WaitForUser`: Wait for the user to perform one transition, then cycle automatically\n", "args": [], "cases": [] }, { "name": "Msg", "comment": " Internal Msg type\n", "args": [], "cases": [] }, { "name": "State", "comment": " State is indexed by the `TransitionStage Transition` type,\nto easily pattern match on the states the model can be in.\n", "args": [], "cases": [] } ], "aliases": [ { "name": "StateOptions", "comment": " Configuration for the State\n", "args": [], "type": "{ interval : Maybe Int, keyboard : Bool, pauseOnHover : Bool, cycling : Cycling, wrap : Bool, startIndex : Int }" } ], "values": [ { "name": "config", "comment": " Creates an initial/default view configuration for a carousel\n", "type": "(Msg -> msg) -> List (Attribute msg) -> Config msg" }, { "name": "cycle", "comment": " (Re)start automatically cycling.\n", "type": "State -> State" }, { "name": "defaultStateOptions", "comment": " ", "type": "StateOptions" }, { "name": "initialState", "comment": " An initial State with the [`defaultStateOptions`](#defaultStateOptions)\n", "type": "State" }, { "name": "initialStateWithOptions", "comment": " An initial state with customized options\n\n myOptions =\n { defaultStateOptions\n | interval = Just 2000\n , pauseOnHover = False\n }\n\n init = initialStateWithOptions myOptions\n\n", "type": "StateOptions -> State" }, { "name": "next", "comment": " Move the carousel to the next slide.\n\n\nUseful for implementing custom behavior, like transitioning when some key is pressed\n\n update : Msg -> Model -> (Model, Cmd Msg)\n update message model =\n case message of\n KeyPress keycode ->\n if keycode == 39 then -- right arrow\n ({ model | carouselState = Carousel.next model.carouselState }\n , Cmd.none\n }\n\n else\n ( model\n , Cmd.none\n )\n\nWhen the transition is invalid, nothing will happen.\n", "type": "State -> State" }, { "name": "pause", "comment": " Stop a carousel from automatically cycling.\n", "type": "State -> State" }, { "name": "prev", "comment": " Move the carousel to the previous slide.\n\nWhen the transition is invalid, nothing will happen.\n", "type": "State -> State" }, { "name": "slides", "comment": " Add slides\n", "type": "List (Config msg) -> Config msg -> Config msg" }, { "name": "subscriptions", "comment": " When using automatic cycling you must remember to call this function in your main subscriptions function\n\n subscriptions : Model -> Sub Msg\n subscriptions model =\n Carousel.subscriptions model.carouselState CarouselMsg\n\n* `state` The current view state of the carousel\n* `toMsg` Message constructor function that is used to step the view state forward\n", "type": "State -> (Msg -> msg) -> Sub msg" }, { "name": "toSlide", "comment": " Move the carousel to the nth slide\n\nWhen the transition is invalid, nothing will happen.\n", "type": "Int -> State -> State" }, { "name": "update", "comment": " Update the carousel\n\nTypically called from your main update function\n\n update : Msg -> Model -> (Model, Cmd Msg)\n update message model =\n case message of\n CarouselMsg submsg ->\n ( { model | carouselState = Carousel.update submsg model.carouselState }\n , Cmd.none\n )\n\n", "type": "Msg -> State -> State" }, { "name": "view", "comment": " Create a carousel element\n\n Carousel.config CarouselMsg []\n |> Carousel.withIndicators\n |> Carousel.slides\n [ slideOne model -- view function to create a Slide\n , slideTwo model\n ]\n |> Carousel.view model.carouselState\n\n* `state` The current view state\n* `config` The configuration for the display of the carousel\n", "type": "State -> Config msg -> Html msg" }, { "name": "withControls", "comment": " Adds previous and next controls\n", "type": "Config msg -> Config msg" }, { "name": "withIndicators", "comment": " Add indicators\n", "type": "Config msg -> Config msg" } ], "binops": [] }, { "name": "Bootstrap.ListGroup", "comment": " List groups are a flexible and powerful component for displaying a series of content. List group items can be modified and extended to support just about any content within. They can also be used as navigation with the right modifier class\n\n# Simple lists\n@docs ul, li, keyedUl, Item\n\n\n# Custom lists\n@docs custom, keyedCustom, anchor, button, CustomItem\n\n\n# Options\n@docs success, info, warning, danger, active, disabled, attrs, ItemOption\n\n\n", "unions": [], "aliases": [ { "name": "CustomItem", "comment": " Opaque type representing an item in a custom list group\n", "args": [ "msg" ], "type": "CustomItem msg" }, { "name": "Item", "comment": " Opaque type representing a list item in a ul based list group\n", "args": [ "msg" ], "type": "Item msg" }, { "name": "ItemOption", "comment": " Opaque type representing configuration options for a list item\n", "args": [ "msg" ], "type": "ItemOption msg" } ], "values": [ { "name": "active", "comment": " Option to mark a list item as active\n", "type": "ItemOption msg" }, { "name": "anchor", "comment": " Create a composable anchor list item for use in a custom list\n\n* `options` List of options to configure the list item\n* `children` List of child elements\n", "type": "List (ItemOption msg) -> List (Html msg) -> CustomItem msg" }, { "name": "attrs", "comment": " Use this function to supply any additional Hmtl.Attribute you need for your list items\n", "type": "List (Attribute msg) -> ItemOption msg" }, { "name": "button", "comment": " Create a composable button list item for use in a custom list\n\n* `options` List of options to configure the list item\n* `children` List of child elements\n", "type": "List (ItemOption msg) -> List (Html msg) -> CustomItem msg" }, { "name": "custom", "comment": " Create a custom List group\n\n ListGroup.custom\n [ ListGroup.button\n [ ListGroup.attr <| onClick \"MyItem1Msg\"\n , ListGroup.info\n ]\n [ text \"List item 1\" ]\n , ListGroup.button\n [ ListGroup.attr <| onClick \"MyItem2Msg\"\n , ListGroup.warning\n ]\n [ text \"List item 2\" ]\n ]\n\n", "type": "List (CustomItem msg) -> Html msg" }, { "name": "danger", "comment": " Option to style a list item with danger colors\n", "type": "ItemOption msg" }, { "name": "disabled", "comment": " Option to disable a list item\n", "type": "ItemOption msg" }, { "name": "info", "comment": " Option to style a list item with info colors\n", "type": "ItemOption msg" }, { "name": "keyedCustom", "comment": " Create a custom list group with keyed children.\n", "type": "List ( String, CustomItem msg ) -> Html msg" }, { "name": "keyedUl", "comment": " Create a ul list group with keyed children.\n", "type": "List ( String, Item msg ) -> Html msg" }, { "name": "li", "comment": " Composable li element for a ul based list group\n", "type": "List (ItemOption msg) -> List (Html msg) -> Item msg" }, { "name": "success", "comment": " Option to style a list item with success colors\n", "type": "ItemOption msg" }, { "name": "ul", "comment": " A simple list group based on a ul element\n\n ListGroup.ul\n [ ListGroup.li [ ListGroup.active ] [ text \"Item 1\"]\n , ListGroup.li [ ] [ text \"Item 2\" ]\n ]\n", "type": "List (Item msg) -> Html msg" }, { "name": "warning", "comment": " Option to style a list item with warning colors\n", "type": "ItemOption msg" } ], "binops": [] }, { "name": "Bootstrap.Form.Select", "comment": " This module allows you to create Bootstrap styled `select` elements.\n\n\n# Creating\n@docs select, custom, item, Item\n\n# Options\n@docs id, small, large, id, disabled, onChange, attrs, Option\n\n", "unions": [ { "name": "Item", "comment": " Opaque type representing a select option element\n", "args": [ "msg" ], "cases": [] }, { "name": "Option", "comment": " Opaque type representing legal select options\n", "args": [ "msg" ], "cases": [] } ], "aliases": [], "values": [ { "name": "attrs", "comment": " Use this function to handle any Html.Attribute option you wish for your select\n", "type": "List (Attribute msg) -> Option msg" }, { "name": "custom", "comment": " Create a select with custom Bootstrap styling to make it look a little bit nicer than the default browser select element\n", "type": "List (Option msg) -> List (Item msg) -> Html msg" }, { "name": "disabled", "comment": " Shorthand for setting the disabled attribute of a select\n", "type": "Bool -> Option msg" }, { "name": "id", "comment": " Options/shorthand for setting the id of a select\n", "type": "String -> Option msg" }, { "name": "item", "comment": " Create a select option element to be passed to a [`select`](#select)\n", "type": "List (Attribute msg) -> List (Html msg) -> Item msg" }, { "name": "large", "comment": " Option to make a select taller (height)\n", "type": "Option msg" }, { "name": "onChange", "comment": " Shorthand for assigning an onChange handler for a select\n", "type": "(String -> msg) -> Option msg" }, { "name": "select", "comment": " Create a select\n\n Select.select\n [ Select.id \"myselect\"\n , Select.onChange MySelectMsg\n ]\n [ Select.item [ value \"1\"] [ text \"Item 1\" ]\n , Select.item [ value \"2\"] [ text \"Item 2\" ]\n ]\n\n", "type": "List (Option msg) -> List (Item msg) -> Html msg" }, { "name": "small", "comment": " Option to make a select shorter (height)\n", "type": "Option msg" } ], "binops": [] }, { "name": "Bootstrap.Navbar", "comment": " The navbar is a wrapper that positions branding, navigation, and other elements in a concise header.\nThe navbar is designed to be responsive by default and made interactive with a tiny sprinkle of Elm.\n\n\n\n\n\n import Bootstrap.Navbar as Navbar\n\n -- You need to keep track of the view state for the navbar in your model\n\n type alias Model =\n { navbarState : Navbar.State }\n\n\n -- The navbar needs to know the initial window size, so the inital state for a navbar requires a command to be run by the Elm runtime\n\n initialState : ( Model, Cmd Msg )\n initialState =\n let\n ( navbarState, navbarCmd ) =\n Navbar.initialState NavbarMsg\n in\n ( { navbarState = navbarState }, navbarCmd )\n\n\n -- Define a message for the navbar\n\n type Msg\n = NavbarMsg Navbar.State\n\n\n -- You need to handle navbar messages in your update function to step the navbar state forward\n\n update : Msg -> Model -> (Model, Cmd Msg)\n update msg model =\n case msg of\n NavbarMsg state ->\n ( { model | navbarState = state }, Cmd.none )\n\n\n view : Model -> Html Msg\n view model =\n Navbar.config NavbarMsg\n |> Navbar.withAnimation\n |> Navbar.brand [ href \"#\"] [ text \"Brand\"]\n |> Navbar.items\n [ Navbar.itemLink [href \"#\"] [ text \"Item 1\"]\n , Navbar.itemLink [href \"#\"] [ text \"Item 2\"]\n ]\n |> Navbar.view model.navbarState\n\n -- If you use animations as above or you use dropdowns in your navbar you need to configure subscriptions too\n\n subscriptions : Model -> Sub Msg\n subscriptions model =\n Navbar.subscriptions model.navbarState NavbarMsg\n\n\n\n# Navbar\n@docs view, config, Config\n\n\n## Options\n@docs withAnimation, primary, success, info, warning, danger, inverse, faded, fixTop, fixBottom, lightCustom, darkCustom, lightCustomClass, darkCustomClass, collapseSmall, collapseMedium, collapseLarge, collapseExtraLarge, container, attrs\n\n\n## Brand\n@docs brand, Brand\n\n## Menu items\n@docs items, itemLink, itemLinkActive, Item\n\n## Dropdown menu\n@docs dropdown, dropdownToggle, dropdownItem, dropdownDivider, dropdownHeader, DropdownToggle, DropdownItem\n\n\n## Custom items\n@docs customItems, textItem, formItem, customItem, CustomItem\n\n\n\n# State\n@docs initialState, State\n\n\n# Interactive elements and subscriptions\n@docs subscriptions\n\n\n", "unions": [ { "name": "Brand", "comment": " Opaque type representing a brand element\n", "args": [ "msg" ], "cases": [] }, { "name": "Config", "comment": " Configuration information for describing the view of the Navbar\n\n* `options` List of [`configuration options`](#options)\n* `toMsg` Message function used for stepping the viewstate of the navbar forward\n* `withAnimation` Set to True if you wish the menu to slide up/down with an animation effect\n* `brand` Optional [`brand`](#brand) element (typically a logo)\n* `items` List of menu items that the user can select from\n* `customItems` List of custom (inline) items that you may place to the right of the std. navigation items\n", "args": [ "msg" ], "cases": [] }, { "name": "CustomItem", "comment": " Opaque type representing a custom (inline) navbar item\n", "args": [ "msg" ], "cases": [] }, { "name": "DropdownItem", "comment": " Opaque type representing an item in a dropdown menu\n", "args": [ "msg" ], "cases": [] }, { "name": "DropdownToggle", "comment": " Opaque type representing the toggle element for a dropdown menu\n", "args": [ "msg" ], "cases": [] }, { "name": "Item", "comment": " Opaque type representing a selectable menu item\n", "args": [ "msg" ], "cases": [] }, { "name": "State", "comment": " Opaque type representing the view state of the navbar and any navbar dropdown menus\n", "args": [], "cases": [] } ], "aliases": [], "values": [ { "name": "attrs", "comment": " Add a custom Html.Attribute to the navbar element using this function\n", "type": "List (Attribute msg) -> Config msg -> Config msg" }, { "name": "brand", "comment": " Create a brand element for your navbar\n\n Navbar.brand\n [ href \"#\" ] -- (and perhaps use onWithOptions for custom handling of clicks !)\n [ img [src \"assets/logo.svg\" ] [ text \"MyCompany\" ] ]\n config\n\n* `attributes` List of attributes\n* `children` List of children\n* `config` Navbar config record to add/modify brand for\n", "type": "List (Attribute msg) -> List (Html msg) -> Config msg -> Config msg" }, { "name": "collapseExtraLarge", "comment": " Collapse the menu at the extra large media breakpoint\n", "type": "Config msg -> Config msg" }, { "name": "collapseLarge", "comment": " Collapse the menu at the large media breakpoint\n", "type": "Config msg -> Config msg" }, { "name": "collapseMedium", "comment": " Collapse the menu at the medium media breakpoint\n", "type": "Config msg -> Config msg" }, { "name": "collapseSmall", "comment": " Collapse the menu at the small media breakpoint\n", "type": "Config msg -> Config msg" }, { "name": "config", "comment": " Creates a default navbar view configuration. Providing a starting point\nto set up your navbar how you'd like.\n", "type": "(State -> msg) -> Config msg" }, { "name": "container", "comment": " Use this option when you want a fixed width menu (typically because you're main content is also confgirued to be fixed width)\n", "type": "Config msg -> Config msg" }, { "name": "customItem", "comment": " Create a completely custom item, which will float to the right when the menu isn't collapsed. You should ensure that you create inline elements or else your menu will break in unfortunate ways !\n\n* `attributes` List of attributes\n* `children` List of children\n\n\n**Note: If you have multiple custom items you will need to provide spacing between them yourself **\n", "type": "Html msg -> CustomItem msg" }, { "name": "customItems", "comment": " You can add custom items to a navbar too. These are placed after any navigation items.\n\n**NOTE** If you call this function several times, the last time \"wins\".\n", "type": "List (CustomItem msg) -> Config msg -> Config msg" }, { "name": "danger", "comment": " Option to color menu using the danger color\n", "type": "Config msg -> Config msg" }, { "name": "darkCustom", "comment": " Option to color menu using a dark custom background color\n", "type": "Color -> Config msg -> Config msg" }, { "name": "darkCustomClass", "comment": " Option to color menu using a dark custom background color defined by css class(es)\n", "type": "String -> Config msg -> Config msg" }, { "name": "dropdown", "comment": " Create a dropdown menu for use in a navbar\n\n* `config` A record with the following properties\n * `id` A unique id for your dropdown. It's important, because it's used to keep track of the state of the dropdown !\n * `toggle` The main item ([`toggle`](#dropdownToggle)) that toggles the dropdown menu up or down\n", "type": "{ id : String, toggle : DropdownToggle msg, items : List (DropdownItem msg) } -> Item msg" }, { "name": "dropdownDivider", "comment": " Creates a divider element appropriate for use in dropdowns.\nHandy when you want to visually separate groups of menu items in a dropdown menu\n\n* `attributes` List of attributes\n* `children` List of child elements\n", "type": "DropdownItem msg" }, { "name": "dropdownHeader", "comment": " Creates an header element appropriate for use in dropdowns.\nHandy when you want to provide a heading for a group of menu items in a dropdown menu\n\n* `attributes` List of attributes\n* `children` List of child elements\n", "type": "List (Html msg) -> DropdownItem msg" }, { "name": "dropdownItem", "comment": " Creates an `a` element appropriate for use in a nav dropdown\n\n* `attributes` List of attributes\n* `children` List of child elements\n", "type": "List (Attribute msg) -> List (Html msg) -> DropdownItem msg" }, { "name": "dropdownToggle", "comment": " Function to construct a toggle for a [`dropdown`](#dropdown)\n\n* attributes List of attributes\n* children List of child elements\n", "type": "List (Attribute msg) -> List (Html msg) -> DropdownToggle msg" }, { "name": "faded", "comment": " Give your menu a light faded gray look\n", "type": "Config msg -> Config msg" }, { "name": "fixBottom", "comment": " Option to fix the menu to the bottom of the viewport\n", "type": "Config msg -> Config msg" }, { "name": "fixTop", "comment": " Option to fix the menu to the top of the viewport\n\n**Note: You probably need to add some margin-top to the content element following the navbar when using this option **\n", "type": "Config msg -> Config msg" }, { "name": "formItem", "comment": " Create a custom inline form element, which will float to the right when the menu isn't collapsed\n\n Navbar.formItem []\n [ TextInput.text\n [ TextInput.small ]\n , Button.button\n [ Button.roleSuccess, Button.small]\n [ text \"Submit\"]]\n ]\n\n* `attributes` List of attributes\n* `children` List of children\n\n\n**Note: If you have multiple custom items you will need to provide spacing between them yourself **\n", "type": "List (Attribute msg) -> List (Html msg) -> CustomItem msg" }, { "name": "info", "comment": " Option to color menu using the info color\n", "type": "Config msg -> Config msg" }, { "name": "initialState", "comment": " You need to call this function to initialize the view state for the navbar\nand store the state in your main model.\n\n init : ( Model, Cmd Msg )\n init =\n let\n (navbarState, navCmd) =\n Navbar.initialState NavbarMsg\n in\n ( { navbarState = navbarState }\n , navCmd\n )\n\nThe Cmd part is needed, because the navbar as implemented currently needs the window size.\nHopefully a smoother solution can be devised in the future.\n\n\n", "type": "(State -> msg) -> ( State, Cmd msg )" }, { "name": "inverse", "comment": " Inverse the colors of your menu. Dark background and light text\n", "type": "Config msg -> Config msg" }, { "name": "itemLink", "comment": " Create a menu item (as an `a` element)\n\n* `attributes` List of attributes\n* `children` List of children\n\n", "type": "List (Attribute msg) -> List (Html msg) -> Item msg" }, { "name": "itemLinkActive", "comment": " Create a menu item that is styled as active (as an `a` element)\n\n* `attributes` List of attributes\n* `children` List of children\n\n", "type": "List (Attribute msg) -> List (Html msg) -> Item msg" }, { "name": "items", "comment": " Configure your navbar with a list of navigation links and/or dropdowns.\n\n**NOTE** If you call this function several times, the last time \"wins\".\n", "type": "List (Item msg) -> Config msg -> Config msg" }, { "name": "lightCustom", "comment": " Option to color menu using a light custom background color\n", "type": "Color -> Config msg -> Config msg" }, { "name": "lightCustomClass", "comment": " Option to color menu using a light custom background color defined by css class(es)\n", "type": "String -> Config msg -> Config msg" }, { "name": "primary", "comment": " Option to color menu using the primary color\n", "type": "Config msg -> Config msg" }, { "name": "subscriptions", "comment": " To support animations and managing the state of dropdown you need to wire up this\nfunction in your main subscriptions function.\n\n subscriptions : Model -> Sub Msg\n subscriptions model =\n Navbar.subscriptions model.navbarState NavbarMsg\n\n\n**Note: ** If you are NOT using dropdowns in your navbar AND you are using a navbar without animation\nyou can skip this. But it's not that much work, so maybe you are better off doing it anyway.\n", "type": "State -> (State -> msg) -> Sub msg" }, { "name": "success", "comment": " Option to color menu using the success color\n", "type": "Config msg -> Config msg" }, { "name": "textItem", "comment": " Create a custom inline text element, which will float to the right when the menu isn't collapsed\n\n* `attributes` List of attributes\n* `children` List of children\n\n\n**Note: If you have multiple custom items you will need to provide spacing between them yourself **\n", "type": "List (Attribute msg) -> List (Html msg) -> CustomItem msg" }, { "name": "view", "comment": " The main view function for displaying a navbar.\n\n Navbar.config NavbarMsg\n |> Navbar.withAnimation\n |> Navbar.brand [ href \"#\"] [ text \"Brand\"]\n |> Navbar.items\n [ Navbar.itemLink [href \"#\"] [ text \"Item 1\"]\n , Navbar.itemLink [href \"#\"] [ text \"Item 2\"]\n ]\n |> Navbar.customItems\n [ Navbar.textItem [] [ text \"Some text\" ] ]\n |> Navbar.view model.navbarState\n\n* `state` Required view state the navbar uses to support interactive behavior\n* `config` The view [`configuration`](#Configuration) that determines to look and feel of the navbar\n\n", "type": "State -> Config msg -> Html msg" }, { "name": "warning", "comment": " Option to color menu using the warning color\n", "type": "Config msg -> Config msg" }, { "name": "withAnimation", "comment": " Use a slide up/down animation for toggling the navbar menu when collapsed.\n\n**NOTE: ** Do remember to set up the subscriptions function when using this option.\n", "type": "Config msg -> Config msg" } ], "binops": [] }, { "name": "Bootstrap.Modal", "comment": " Modals are streamlined, but flexible dialog prompts. They support a number of use cases from user notifications to completely custom content and feature a handful of helpful subcomponents, sizes, and more.\n\n\n\n type alias Model =\n { modalState : Modal.State }\n\n\n init : ( Model, Cmd Msg )\n init =\n ( { modalState : Modal.hiddenState }, Cmd.none )\n\n\n type Msg\n = ModalMsg Modal.State\n\n\n update : Msg -> Model -> ( Model, Cmd msg )\n update msg model =\n case msg of\n ModelMsg state ->\n ( { model | modalState = state }\n , Cmd.none\n )\n\n view : Model -> Html msg\n view model =\n Grid.container []\n [ Button.button\n [ Button.attrs [ onClick ModalMsg Modal.visibleState ] ]\n [ text \"Show modal\" ]\n\n , Modal.config ModalMsg\n |> Modal.small\n |> Modal.h5 [] [ text \"Modal header\" ]\n |> Modal.body []\n [ Grid.containerFluid []\n [ Grid.row\n [ Grid.col\n [ Col.xs6 ]\n [ text \"Col 1\" ]\n , Grid.col\n [ Col.xs6 ]\n [ text \"Col 2\" ]\n ]\n ]\n ]\n |> Modal.footer []\n [ Button.button\n [ Button.outlinePrimary\n , Button.attrs [ onClick <| ModalMsg Modal.hiddenState ]\n ]\n [ text \"Close\" ]\n ]\n |> Modal.view\n ]\n\n\n**NOTE:** Don't try to open several modals at the same time. It probably won't end well.\n\n\n\n# Modal\n@docs view, config, Config\n\n\n## State\n@docs hiddenState, visibleState, State\n\n\n## Modal options\n@docs small, large, Option\n\n\n## Header\n@docs header, h1, h2, h3, h4, h5, h6, Header\n\n\n## Body\n@docs body, Body\n\n## Footer\n@docs footer, Footer\n\n\n", "unions": [ { "name": "Body", "comment": " Opaque type representing a modal body\n", "args": [ "msg" ], "cases": [] }, { "name": "Config", "comment": " Opaque type representing the view config for a model. Use the [`config`](#config) function to create an initial config.\n", "args": [ "msg" ], "cases": [] }, { "name": "Footer", "comment": " Opaque type representing a modal body\n", "args": [ "msg" ], "cases": [] }, { "name": "Header", "comment": " Opaque type representing a modal header\n", "args": [ "msg" ], "cases": [] }, { "name": "Option", "comment": " Opaque type representing configuration options\n", "args": [], "cases": [] }, { "name": "State", "comment": " Opaque representation of the view state of a modal\n", "args": [], "cases": [] } ], "aliases": [], "values": [ { "name": "body", "comment": " Create a body for a modal, you would typically always create a body for a modal\n\n* `attributes` List of attributes\n* `children` List of child elements\n* `config` configuration settings to configure body for\n", "type": "List (Attribute msg) -> List (Html msg) -> Config msg -> Config msg" }, { "name": "config", "comment": " Create an initial modal config. You can enrich the config by using the header, body, footer and option related functions.\n", "type": "(State -> msg) -> Config msg" }, { "name": "footer", "comment": " Create a footer for a modal. Normally used for action buttons, but you might be creative\n\n* `attributes` List of attributes\n* `children` List of child elements\n* `config` configuration settings to configure header for\n", "type": "List (Attribute msg) -> List (Html msg) -> Config msg -> Config msg" }, { "name": "h1", "comment": " Creates a modal header with a h1 title child element\n\n* `attributes` List of attributes\n* `children` List of child elements\n* `config` configuration settings to configure header for\n", "type": "List (Attribute msg) -> List (Html msg) -> Config msg -> Config msg" }, { "name": "h2", "comment": " Creates a modal header with a h2 title child element\n\n* `attributes` List of attributes\n* `children` List of child elements\n* `config` configuration settings to configure header for\n", "type": "List (Attribute msg) -> List (Html msg) -> Config msg -> Config msg" }, { "name": "h3", "comment": " Creates a modal header with a h3 title child element\n\n* `attributes` List of attributes\n* `children` List of child elements\n* `config` configuration settings to configure header for\n", "type": "List (Attribute msg) -> List (Html msg) -> Config msg -> Config msg" }, { "name": "h4", "comment": " Creates a modal header with a h4 title child element\n\n* `attributes` List of attributes\n* `children` List of child elements\n* `config` configuration settings to configure header for\n", "type": "List (Attribute msg) -> List (Html msg) -> Config msg -> Config msg" }, { "name": "h5", "comment": " Creates a modal header with a h5 title child element\n\n* `attributes` List of attributes\n* `children` List of child elements\n* `config` configuration settings to configure header for\n", "type": "List (Attribute msg) -> List (Html msg) -> Config msg -> Config msg" }, { "name": "h6", "comment": " Creates a modal header with a h6 title child element\n\n* `attributes` List of attributes\n* `children` List of child elements\n* `config` configuration settings to configure header for\n", "type": "List (Attribute msg) -> List (Html msg) -> Config msg -> Config msg" }, { "name": "header", "comment": " Create a header for a modal, typically for titles, but you can be imaginative\n\n* `attributes` List of attributes\n* `children` List of child elements\n* `config` configuration settings to configure header for\n", "type": "List (Attribute msg) -> List (Html msg) -> Config msg -> Config msg" }, { "name": "hiddenState", "comment": " Ensures the modal is not displayed (it's still in the DOM though !)\n", "type": "State" }, { "name": "large", "comment": " Option to make a modal larger than the default\n", "type": "Config msg -> Config msg" }, { "name": "small", "comment": " Option to make a modal smaller than the default\n", "type": "Config msg -> Config msg" }, { "name": "view", "comment": " Create a modal for your application\n\n* `state` The current view state of the modal. You need to keep track of this state in your model\n* `config` View configuration\n\n", "type": "State -> Config msg -> Html msg" }, { "name": "visibleState", "comment": " In this state the modal will be displayed\n", "type": "State" } ], "binops": [] }, { "name": "Bootstrap.Grid.Col", "comment": " Functions for creating grid column options.\n\n# Vertical alignment\n@docs topXs, topSm, topMd, topLg, topXl, middleXs, middleSm, middleMd, middleLg, middleXl, bottomXs, bottomSm, bottomMd, bottomLg, bottomXl\n\n# Sizing\n\n## Extra Small\n@docs xs, xs1, xs2, xs3, xs4, xs5, xs6, xs7, xs8, xs9, xs10, xs11, xs12, xsAuto\n\n\n## Small\n@docs sm, sm1, sm2, sm3, sm4, sm5, sm6, sm7, sm8, sm9, sm10, sm11, sm12, smAuto\n\n\n## Medium\n@docs md, md1, md2, md3, md4, md5, md6, md7, md8, md9, md10, md11, md12, mdAuto\n\n\n## Large\n@docs lg, lg1, lg2, lg3, lg4, lg5, lg6, lg7, lg8, lg9, lg10, lg11, lg12, lgAuto\n\n\n## Extra Large\n@docs xl, xl1, xl2, xl3, xl4, xl5, xl6, xl7, xl8, xl9, xl10, xl11, xl12, xlAuto\n\n\n# Offsets\n\n## Extra Small\n@docs offsetXs1, offsetXs2, offsetXs3, offsetXs4, offsetXs5, offsetXs6, offsetXs7, offsetXs8, offsetXs9, offsetXs10, offsetXs11\n\n## Small\n@docs offsetSm0, offsetSm1, offsetSm2, offsetSm3, offsetSm4, offsetSm5, offsetSm6, offsetSm7, offsetSm8, offsetSm9, offsetSm10, offsetSm11\n\n\n## Medium\n@docs offsetMd0, offsetMd1, offsetMd2, offsetMd3, offsetMd4, offsetMd5, offsetMd6, offsetMd7, offsetMd8, offsetMd9, offsetMd10, offsetMd11\n\n\n## Large\n@docs offsetLg0, offsetLg1, offsetLg2, offsetLg3, offsetLg4, offsetLg5, offsetLg6, offsetLg7, offsetLg8, offsetLg9, offsetLg10, offsetLg11\n\n\n## Extra Large\n@docs offsetXl0, offsetXl1, offsetXl2, offsetXl3, offsetXl4, offsetXl5, offsetXl6, offsetXl7, offsetXl8, offsetXl9, offsetXl10, offsetXl11\n\n\n# Pulls\n\n## Extra Small\n@docs pullXs0, pullXs1, pullXs2, pullXs3, pullXs4, pullXs5, pullXs6, pullXs7, pullXs8, pullXs9, pullXs10, pullXs11, pullXs12\n\n\n## Small\n@docs pullSm0, pullSm1, pullSm2, pullSm3, pullSm4, pullSm5, pullSm6, pullSm7, pullSm8, pullSm9, pullSm10, pullSm11, pullSm12\n\n## Medium\n@docs pullMd0, pullMd1, pullMd2, pullMd3, pullMd4, pullMd5, pullMd6, pullMd7, pullMd8, pullMd9, pullMd10, pullMd11, pullMd12\n\n## Large\n@docs pullLg0, pullLg1, pullLg2, pullLg3, pullLg4, pullLg5, pullLg6, pullLg7, pullLg8, pullLg9, pullLg10, pullLg11, pullLg12\n\n\n## Extra Large\n@docs pullXl0, pullXl1, pullXl2, pullXl3, pullXl4, pullXl5, pullXl6, pullXl7, pullXl8, pullXl9, pullXl10, pullXl11, pullXl12\n\n\n# Pushes\n\n## Extra Small\n@docs pushXs0, pushXs1, pushXs2, pushXs3, pushXs4, pushXs5, pushXs6, pushXs7, pushXs8, pushXs9, pushXs10, pushXs11, pushXs12\n\n\n## Small\n@docs pushSm0, pushSm1, pushSm2, pushSm3, pushSm4, pushSm5, pushSm6, pushSm7, pushSm8, pushSm9, pushSm10, pushSm11, pushSm12\n\n## Medium\n@docs pushMd0, pushMd1, pushMd2, pushMd3, pushMd4, pushMd5, pushMd6, pushMd7, pushMd8, pushMd9, pushMd10, pushMd11, pushMd12\n\n## Large\n@docs pushLg0, pushLg1, pushLg2, pushLg3, pushLg4, pushLg5, pushLg6, pushLg7, pushLg8, pushLg9, pushLg10, pushLg11, pushLg12\n\n\n## Extra Large\n@docs pushXl0, pushXl1, pushXl2, pushXl3, pushXl4, pushXl5, pushXl6, pushXl7, pushXl8, pushXl9, pushXl10, pushXl11, pushXl12\n\n\n\n\n\n# Misc\n@docs attrs, Option\n\n", "unions": [], "aliases": [ { "name": "Option", "comment": " Opaque type representing valid Column options\n", "args": [ "msg" ], "type": "ColOption msg" } ], "values": [ { "name": "attrs", "comment": " Use this function when you need to provide custom Html attributes to the column container element.\n", "type": "List (Attribute msg) -> ColOption msg" }, { "name": "bottomLg", "comment": " ", "type": "Option msg" }, { "name": "bottomMd", "comment": " ", "type": "Option msg" }, { "name": "bottomSm", "comment": " ", "type": "Option msg" }, { "name": "bottomXl", "comment": " ", "type": "Option msg" }, { "name": "bottomXs", "comment": " ", "type": "Option msg" }, { "name": "lg", "comment": " ", "type": "Option msg" }, { "name": "lg1", "comment": " ", "type": "Option msg" }, { "name": "lg10", "comment": " ", "type": "Option msg" }, { "name": "lg11", "comment": " ", "type": "Option msg" }, { "name": "lg12", "comment": " ", "type": "Option msg" }, { "name": "lg2", "comment": " ", "type": "Option msg" }, { "name": "lg3", "comment": " ", "type": "Option msg" }, { "name": "lg4", "comment": " ", "type": "Option msg" }, { "name": "lg5", "comment": " ", "type": "Option msg" }, { "name": "lg6", "comment": " ", "type": "Option msg" }, { "name": "lg7", "comment": " ", "type": "Option msg" }, { "name": "lg8", "comment": " ", "type": "Option msg" }, { "name": "lg9", "comment": " ", "type": "Option msg" }, { "name": "lgAuto", "comment": " ", "type": "Option msg" }, { "name": "md", "comment": " ", "type": "Option msg" }, { "name": "md1", "comment": " ", "type": "Option msg" }, { "name": "md10", "comment": " ", "type": "Option msg" }, { "name": "md11", "comment": " ", "type": "Option msg" }, { "name": "md12", "comment": " ", "type": "Option msg" }, { "name": "md2", "comment": " ", "type": "Option msg" }, { "name": "md3", "comment": " ", "type": "Option msg" }, { "name": "md4", "comment": " ", "type": "Option msg" }, { "name": "md5", "comment": " ", "type": "Option msg" }, { "name": "md6", "comment": " ", "type": "Option msg" }, { "name": "md7", "comment": " ", "type": "Option msg" }, { "name": "md8", "comment": " ", "type": "Option msg" }, { "name": "md9", "comment": " ", "type": "Option msg" }, { "name": "mdAuto", "comment": " ", "type": "Option msg" }, { "name": "middleLg", "comment": " ", "type": "Option msg" }, { "name": "middleMd", "comment": " ", "type": "Option msg" }, { "name": "middleSm", "comment": " ", "type": "Option msg" }, { "name": "middleXl", "comment": " ", "type": "Option msg" }, { "name": "middleXs", "comment": " ", "type": "Option msg" }, { "name": "offsetLg0", "comment": " ", "type": "Option msg" }, { "name": "offsetLg1", "comment": " ", "type": "Option msg" }, { "name": "offsetLg10", "comment": " ", "type": "Option msg" }, { "name": "offsetLg11", "comment": " ", "type": "Option msg" }, { "name": "offsetLg2", "comment": " ", "type": "Option msg" }, { "name": "offsetLg3", "comment": " ", "type": "Option msg" }, { "name": "offsetLg4", "comment": " ", "type": "Option msg" }, { "name": "offsetLg5", "comment": " ", "type": "Option msg" }, { "name": "offsetLg6", "comment": " ", "type": "Option msg" }, { "name": "offsetLg7", "comment": " ", "type": "Option msg" }, { "name": "offsetLg8", "comment": " ", "type": "Option msg" }, { "name": "offsetLg9", "comment": " ", "type": "Option msg" }, { "name": "offsetMd0", "comment": " ", "type": "Option msg" }, { "name": "offsetMd1", "comment": " ", "type": "Option msg" }, { "name": "offsetMd10", "comment": " ", "type": "Option msg" }, { "name": "offsetMd11", "comment": " ", "type": "Option msg" }, { "name": "offsetMd2", "comment": " ", "type": "Option msg" }, { "name": "offsetMd3", "comment": " ", "type": "Option msg" }, { "name": "offsetMd4", "comment": " ", "type": "Option msg" }, { "name": "offsetMd5", "comment": " ", "type": "Option msg" }, { "name": "offsetMd6", "comment": " ", "type": "Option msg" }, { "name": "offsetMd7", "comment": " ", "type": "Option msg" }, { "name": "offsetMd8", "comment": " ", "type": "Option msg" }, { "name": "offsetMd9", "comment": " ", "type": "Option msg" }, { "name": "offsetSm0", "comment": " ", "type": "Option msg" }, { "name": "offsetSm1", "comment": " ", "type": "Option msg" }, { "name": "offsetSm10", "comment": " ", "type": "Option msg" }, { "name": "offsetSm11", "comment": " ", "type": "Option msg" }, { "name": "offsetSm2", "comment": " ", "type": "Option msg" }, { "name": "offsetSm3", "comment": " ", "type": "Option msg" }, { "name": "offsetSm4", "comment": " ", "type": "Option msg" }, { "name": "offsetSm5", "comment": " ", "type": "Option msg" }, { "name": "offsetSm6", "comment": " ", "type": "Option msg" }, { "name": "offsetSm7", "comment": " ", "type": "Option msg" }, { "name": "offsetSm8", "comment": " ", "type": "Option msg" }, { "name": "offsetSm9", "comment": " ", "type": "Option msg" }, { "name": "offsetXl0", "comment": " ", "type": "Option msg" }, { "name": "offsetXl1", "comment": " ", "type": "Option msg" }, { "name": "offsetXl10", "comment": " ", "type": "Option msg" }, { "name": "offsetXl11", "comment": " ", "type": "Option msg" }, { "name": "offsetXl2", "comment": " ", "type": "Option msg" }, { "name": "offsetXl3", "comment": " ", "type": "Option msg" }, { "name": "offsetXl4", "comment": " ", "type": "Option msg" }, { "name": "offsetXl5", "comment": " ", "type": "Option msg" }, { "name": "offsetXl6", "comment": " ", "type": "Option msg" }, { "name": "offsetXl7", "comment": " ", "type": "Option msg" }, { "name": "offsetXl8", "comment": " ", "type": "Option msg" }, { "name": "offsetXl9", "comment": " ", "type": "Option msg" }, { "name": "offsetXs1", "comment": " ", "type": "Option msg" }, { "name": "offsetXs10", "comment": " ", "type": "Option msg" }, { "name": "offsetXs11", "comment": " ", "type": "Option msg" }, { "name": "offsetXs2", "comment": " ", "type": "Option msg" }, { "name": "offsetXs3", "comment": " ", "type": "Option msg" }, { "name": "offsetXs4", "comment": " ", "type": "Option msg" }, { "name": "offsetXs5", "comment": " ", "type": "Option msg" }, { "name": "offsetXs6", "comment": " ", "type": "Option msg" }, { "name": "offsetXs7", "comment": " ", "type": "Option msg" }, { "name": "offsetXs8", "comment": " ", "type": "Option msg" }, { "name": "offsetXs9", "comment": " ", "type": "Option msg" }, { "name": "pullLg0", "comment": " ", "type": "Option msg" }, { "name": "pullLg1", "comment": " ", "type": "Option msg" }, { "name": "pullLg10", "comment": " ", "type": "Option msg" }, { "name": "pullLg11", "comment": " ", "type": "Option msg" }, { "name": "pullLg12", "comment": " ", "type": "Option msg" }, { "name": "pullLg2", "comment": " ", "type": "Option msg" }, { "name": "pullLg3", "comment": " ", "type": "Option msg" }, { "name": "pullLg4", "comment": " ", "type": "Option msg" }, { "name": "pullLg5", "comment": " ", "type": "Option msg" }, { "name": "pullLg6", "comment": " ", "type": "Option msg" }, { "name": "pullLg7", "comment": " ", "type": "Option msg" }, { "name": "pullLg8", "comment": " ", "type": "Option msg" }, { "name": "pullLg9", "comment": " ", "type": "Option msg" }, { "name": "pullMd0", "comment": " ", "type": "Option msg" }, { "name": "pullMd1", "comment": " ", "type": "Option msg" }, { "name": "pullMd10", "comment": " ", "type": "Option msg" }, { "name": "pullMd11", "comment": " ", "type": "Option msg" }, { "name": "pullMd12", "comment": " ", "type": "Option msg" }, { "name": "pullMd2", "comment": " ", "type": "Option msg" }, { "name": "pullMd3", "comment": " ", "type": "Option msg" }, { "name": "pullMd4", "comment": " ", "type": "Option msg" }, { "name": "pullMd5", "comment": " ", "type": "Option msg" }, { "name": "pullMd6", "comment": " ", "type": "Option msg" }, { "name": "pullMd7", "comment": " ", "type": "Option msg" }, { "name": "pullMd8", "comment": " ", "type": "Option msg" }, { "name": "pullMd9", "comment": " ", "type": "Option msg" }, { "name": "pullSm0", "comment": " ", "type": "Option msg" }, { "name": "pullSm1", "comment": " ", "type": "Option msg" }, { "name": "pullSm10", "comment": " ", "type": "Option msg" }, { "name": "pullSm11", "comment": " ", "type": "Option msg" }, { "name": "pullSm12", "comment": " ", "type": "Option msg" }, { "name": "pullSm2", "comment": " ", "type": "Option msg" }, { "name": "pullSm3", "comment": " ", "type": "Option msg" }, { "name": "pullSm4", "comment": " ", "type": "Option msg" }, { "name": "pullSm5", "comment": " ", "type": "Option msg" }, { "name": "pullSm6", "comment": " ", "type": "Option msg" }, { "name": "pullSm7", "comment": " ", "type": "Option msg" }, { "name": "pullSm8", "comment": " ", "type": "Option msg" }, { "name": "pullSm9", "comment": " ", "type": "Option msg" }, { "name": "pullXl0", "comment": " ", "type": "Option msg" }, { "name": "pullXl1", "comment": " ", "type": "Option msg" }, { "name": "pullXl10", "comment": " ", "type": "Option msg" }, { "name": "pullXl11", "comment": " ", "type": "Option msg" }, { "name": "pullXl12", "comment": " ", "type": "Option msg" }, { "name": "pullXl2", "comment": " ", "type": "Option msg" }, { "name": "pullXl3", "comment": " ", "type": "Option msg" }, { "name": "pullXl4", "comment": " ", "type": "Option msg" }, { "name": "pullXl5", "comment": " ", "type": "Option msg" }, { "name": "pullXl6", "comment": " ", "type": "Option msg" }, { "name": "pullXl7", "comment": " ", "type": "Option msg" }, { "name": "pullXl8", "comment": " ", "type": "Option msg" }, { "name": "pullXl9", "comment": " ", "type": "Option msg" }, { "name": "pullXs0", "comment": " ", "type": "Option msg" }, { "name": "pullXs1", "comment": " ", "type": "Option msg" }, { "name": "pullXs10", "comment": " ", "type": "Option msg" }, { "name": "pullXs11", "comment": " ", "type": "Option msg" }, { "name": "pullXs12", "comment": " ", "type": "Option msg" }, { "name": "pullXs2", "comment": " ", "type": "Option msg" }, { "name": "pullXs3", "comment": " ", "type": "Option msg" }, { "name": "pullXs4", "comment": " ", "type": "Option msg" }, { "name": "pullXs5", "comment": " ", "type": "Option msg" }, { "name": "pullXs6", "comment": " ", "type": "Option msg" }, { "name": "pullXs7", "comment": " ", "type": "Option msg" }, { "name": "pullXs8", "comment": " ", "type": "Option msg" }, { "name": "pullXs9", "comment": " ", "type": "Option msg" }, { "name": "pushLg0", "comment": " ", "type": "Option msg" }, { "name": "pushLg1", "comment": " ", "type": "Option msg" }, { "name": "pushLg10", "comment": " ", "type": "Option msg" }, { "name": "pushLg11", "comment": " ", "type": "Option msg" }, { "name": "pushLg12", "comment": " ", "type": "Option msg" }, { "name": "pushLg2", "comment": " ", "type": "Option msg" }, { "name": "pushLg3", "comment": " ", "type": "Option msg" }, { "name": "pushLg4", "comment": " ", "type": "Option msg" }, { "name": "pushLg5", "comment": " ", "type": "Option msg" }, { "name": "pushLg6", "comment": " ", "type": "Option msg" }, { "name": "pushLg7", "comment": " ", "type": "Option msg" }, { "name": "pushLg8", "comment": " ", "type": "Option msg" }, { "name": "pushLg9", "comment": " ", "type": "Option msg" }, { "name": "pushMd0", "comment": " ", "type": "Option msg" }, { "name": "pushMd1", "comment": " ", "type": "Option msg" }, { "name": "pushMd10", "comment": " ", "type": "Option msg" }, { "name": "pushMd11", "comment": " ", "type": "Option msg" }, { "name": "pushMd12", "comment": " ", "type": "Option msg" }, { "name": "pushMd2", "comment": " ", "type": "Option msg" }, { "name": "pushMd3", "comment": " ", "type": "Option msg" }, { "name": "pushMd4", "comment": " ", "type": "Option msg" }, { "name": "pushMd5", "comment": " ", "type": "Option msg" }, { "name": "pushMd6", "comment": " ", "type": "Option msg" }, { "name": "pushMd7", "comment": " ", "type": "Option msg" }, { "name": "pushMd8", "comment": " ", "type": "Option msg" }, { "name": "pushMd9", "comment": " ", "type": "Option msg" }, { "name": "pushSm0", "comment": " ", "type": "Option msg" }, { "name": "pushSm1", "comment": " ", "type": "Option msg" }, { "name": "pushSm10", "comment": " ", "type": "Option msg" }, { "name": "pushSm11", "comment": " ", "type": "Option msg" }, { "name": "pushSm12", "comment": " ", "type": "Option msg" }, { "name": "pushSm2", "comment": " ", "type": "Option msg" }, { "name": "pushSm3", "comment": " ", "type": "Option msg" }, { "name": "pushSm4", "comment": " ", "type": "Option msg" }, { "name": "pushSm5", "comment": " ", "type": "Option msg" }, { "name": "pushSm6", "comment": " ", "type": "Option msg" }, { "name": "pushSm7", "comment": " ", "type": "Option msg" }, { "name": "pushSm8", "comment": " ", "type": "Option msg" }, { "name": "pushSm9", "comment": " ", "type": "Option msg" }, { "name": "pushXl0", "comment": " ", "type": "Option msg" }, { "name": "pushXl1", "comment": " ", "type": "Option msg" }, { "name": "pushXl10", "comment": " ", "type": "Option msg" }, { "name": "pushXl11", "comment": " ", "type": "Option msg" }, { "name": "pushXl12", "comment": " ", "type": "Option msg" }, { "name": "pushXl2", "comment": " ", "type": "Option msg" }, { "name": "pushXl3", "comment": " ", "type": "Option msg" }, { "name": "pushXl4", "comment": " ", "type": "Option msg" }, { "name": "pushXl5", "comment": " ", "type": "Option msg" }, { "name": "pushXl6", "comment": " ", "type": "Option msg" }, { "name": "pushXl7", "comment": " ", "type": "Option msg" }, { "name": "pushXl8", "comment": " ", "type": "Option msg" }, { "name": "pushXl9", "comment": " ", "type": "Option msg" }, { "name": "pushXs0", "comment": " ", "type": "Option msg" }, { "name": "pushXs1", "comment": " ", "type": "Option msg" }, { "name": "pushXs10", "comment": " ", "type": "Option msg" }, { "name": "pushXs11", "comment": " ", "type": "Option msg" }, { "name": "pushXs12", "comment": " ", "type": "Option msg" }, { "name": "pushXs2", "comment": " ", "type": "Option msg" }, { "name": "pushXs3", "comment": " ", "type": "Option msg" }, { "name": "pushXs4", "comment": " ", "type": "Option msg" }, { "name": "pushXs5", "comment": " ", "type": "Option msg" }, { "name": "pushXs6", "comment": " ", "type": "Option msg" }, { "name": "pushXs7", "comment": " ", "type": "Option msg" }, { "name": "pushXs8", "comment": " ", "type": "Option msg" }, { "name": "pushXs9", "comment": " ", "type": "Option msg" }, { "name": "sm", "comment": " ", "type": "Option msg" }, { "name": "sm1", "comment": " ", "type": "Option msg" }, { "name": "sm10", "comment": " ", "type": "Option msg" }, { "name": "sm11", "comment": " ", "type": "Option msg" }, { "name": "sm12", "comment": " ", "type": "Option msg" }, { "name": "sm2", "comment": " ", "type": "Option msg" }, { "name": "sm3", "comment": " ", "type": "Option msg" }, { "name": "sm4", "comment": " ", "type": "Option msg" }, { "name": "sm5", "comment": " ", "type": "Option msg" }, { "name": "sm6", "comment": " ", "type": "Option msg" }, { "name": "sm7", "comment": " ", "type": "Option msg" }, { "name": "sm8", "comment": " ", "type": "Option msg" }, { "name": "sm9", "comment": " ", "type": "Option msg" }, { "name": "smAuto", "comment": " ", "type": "Option msg" }, { "name": "topLg", "comment": " ", "type": "Option msg" }, { "name": "topMd", "comment": " ", "type": "Option msg" }, { "name": "topSm", "comment": " ", "type": "Option msg" }, { "name": "topXl", "comment": " ", "type": "Option msg" }, { "name": "topXs", "comment": " ", "type": "Option msg" }, { "name": "xl", "comment": " ", "type": "Option msg" }, { "name": "xl1", "comment": " ", "type": "Option msg" }, { "name": "xl10", "comment": " ", "type": "Option msg" }, { "name": "xl11", "comment": " ", "type": "Option msg" }, { "name": "xl12", "comment": " ", "type": "Option msg" }, { "name": "xl2", "comment": " ", "type": "Option msg" }, { "name": "xl3", "comment": " ", "type": "Option msg" }, { "name": "xl4", "comment": " ", "type": "Option msg" }, { "name": "xl5", "comment": " ", "type": "Option msg" }, { "name": "xl6", "comment": " ", "type": "Option msg" }, { "name": "xl7", "comment": " ", "type": "Option msg" }, { "name": "xl8", "comment": " ", "type": "Option msg" }, { "name": "xl9", "comment": " ", "type": "Option msg" }, { "name": "xlAuto", "comment": " ", "type": "Option msg" }, { "name": "xs", "comment": " ", "type": "Option msg" }, { "name": "xs1", "comment": " ", "type": "Option msg" }, { "name": "xs10", "comment": " ", "type": "Option msg" }, { "name": "xs11", "comment": " ", "type": "Option msg" }, { "name": "xs12", "comment": " ", "type": "Option msg" }, { "name": "xs2", "comment": " ", "type": "Option msg" }, { "name": "xs3", "comment": " ", "type": "Option msg" }, { "name": "xs4", "comment": " ", "type": "Option msg" }, { "name": "xs5", "comment": " ", "type": "Option msg" }, { "name": "xs6", "comment": " ", "type": "Option msg" }, { "name": "xs7", "comment": " ", "type": "Option msg" }, { "name": "xs8", "comment": " ", "type": "Option msg" }, { "name": "xs9", "comment": " ", "type": "Option msg" }, { "name": "xsAuto", "comment": " ", "type": "Option msg" } ], "binops": [] }, { "name": "Bootstrap.Grid.Row", "comment": " Functions for creating grid row options.\n\n\n# Vertical alignment\n@docs topXs, topSm, topMd, topLg, topXl, middleXs, middleSm, middleMd, middleLg, middleXl, bottomXs, bottomSm, bottomMd, bottomLg, bottomXl\n\n\n# Horizontal alignment\n@docs leftXs, leftSm, leftMd, leftLg, leftXl, centerXs, centerSm, centerMd, centerLg, centerXl, rightXs, rightSm, rightMd, rightLg, rightXl, aroundXs, aroundSm, aroundMd, aroundLg, aroundXl, betweenXs, betweenSm, betweenMd, betweenLg, betweenXl\n\n\n# Misc\n@docs attrs, Option\n\n", "unions": [], "aliases": [ { "name": "Option", "comment": " Opaque type representing valid row options\n", "args": [ "msg" ], "type": "RowOption msg" } ], "values": [ { "name": "aroundLg", "comment": " ", "type": "Option msg" }, { "name": "aroundMd", "comment": " ", "type": "Option msg" }, { "name": "aroundSm", "comment": " ", "type": "Option msg" }, { "name": "aroundXl", "comment": " ", "type": "Option msg" }, { "name": "aroundXs", "comment": " ", "type": "Option msg" }, { "name": "attrs", "comment": " Use this function when you need to add custom Html attributes to the row container element.\n", "type": "List (Attribute msg) -> Option msg" }, { "name": "betweenLg", "comment": " ", "type": "Option msg" }, { "name": "betweenMd", "comment": " ", "type": "Option msg" }, { "name": "betweenSm", "comment": " ", "type": "Option msg" }, { "name": "betweenXl", "comment": " ", "type": "Option msg" }, { "name": "betweenXs", "comment": " ", "type": "Option msg" }, { "name": "bottomLg", "comment": " ", "type": "Option msg" }, { "name": "bottomMd", "comment": " ", "type": "Option msg" }, { "name": "bottomSm", "comment": " ", "type": "Option msg" }, { "name": "bottomXl", "comment": " ", "type": "Option msg" }, { "name": "bottomXs", "comment": " ", "type": "Option msg" }, { "name": "centerLg", "comment": " ", "type": "Option msg" }, { "name": "centerMd", "comment": " ", "type": "Option msg" }, { "name": "centerSm", "comment": " ", "type": "Option msg" }, { "name": "centerXl", "comment": " ", "type": "Option msg" }, { "name": "centerXs", "comment": " ", "type": "Option msg" }, { "name": "leftLg", "comment": " ", "type": "Option msg" }, { "name": "leftMd", "comment": " ", "type": "Option msg" }, { "name": "leftSm", "comment": " ", "type": "Option msg" }, { "name": "leftXl", "comment": " ", "type": "Option msg" }, { "name": "leftXs", "comment": " ", "type": "Option msg" }, { "name": "middleLg", "comment": " ", "type": "Option msg" }, { "name": "middleMd", "comment": " ", "type": "Option msg" }, { "name": "middleSm", "comment": " ", "type": "Option msg" }, { "name": "middleXl", "comment": " ", "type": "Option msg" }, { "name": "middleXs", "comment": " ", "type": "Option msg" }, { "name": "rightLg", "comment": " ", "type": "Option msg" }, { "name": "rightMd", "comment": " ", "type": "Option msg" }, { "name": "rightSm", "comment": " ", "type": "Option msg" }, { "name": "rightXl", "comment": " ", "type": "Option msg" }, { "name": "rightXs", "comment": " ", "type": "Option msg" }, { "name": "topLg", "comment": " ", "type": "Option msg" }, { "name": "topMd", "comment": " ", "type": "Option msg" }, { "name": "topSm", "comment": " ", "type": "Option msg" }, { "name": "topXl", "comment": " ", "type": "Option msg" }, { "name": "topXs", "comment": " ", "type": "Option msg" } ], "binops": [] }, { "name": "Bootstrap.Form.Input", "comment": " This module allows you to create Bootstrap styled HTML 5 inputs.\n\n\n# Input types\n@docs text, password, datetimeLocal, date, month, time, week, number, email, url, search, tel, color\n\n\n\n\n# Options\n@docs id, small, large, value, defaultValue, disabled, onInput, placeholder, attrs, Option\n\n# Validation\nThese options really only makes sense when used in conjunction with the form module.\nTo use standalone, remember to wrap your inputs in a containing element and provide it one of the following classes:\n\n* `has-success`\n* `has-warning`\n* `has-danger`\n\n@docs success, warning, danger\n\n\n", "unions": [ { "name": "Option", "comment": " Opaque type representing legal input configuration options\n", "args": [ "msg" ], "cases": [] } ], "aliases": [], "values": [ { "name": "attrs", "comment": " Use this function to handle any Html.Attribute option you wish for your input\n", "type": "List (Attribute msg) -> Option msg" }, { "name": "color", "comment": " Create an input with type=\"color\"\n", "type": "List (Option msg) -> Html msg" }, { "name": "danger", "comment": " Option to add a danger marker icon for your input.\n\n**Note:** Please read the caveat described about [`validation options`](#validation)\n", "type": "Option msg" }, { "name": "date", "comment": " Create an input with type=\"date\"\n", "type": "List (Option msg) -> Html msg" }, { "name": "datetimeLocal", "comment": " Create an input with type=\"datetime-local\"\n", "type": "List (Option msg) -> Html msg" }, { "name": "defaultValue", "comment": " Shorthand for setting the defaultValue attribute of an input\n", "type": "String -> Option msg" }, { "name": "disabled", "comment": " Shorthand for setting the disabled attribute of an input\n", "type": "Bool -> Option msg" }, { "name": "email", "comment": " Create an input with type=\"email\"\n", "type": "List (Option msg) -> Html msg" }, { "name": "id", "comment": " Options/shorthand for setting the id of an input\n", "type": "String -> Option msg" }, { "name": "large", "comment": " Option to make an input taller (in height)\n", "type": "Option msg" }, { "name": "month", "comment": " Create an input with type=\"month\"\n", "type": "List (Option msg) -> Html msg" }, { "name": "number", "comment": " Create an input with type=\"number\"\n", "type": "List (Option msg) -> Html msg" }, { "name": "onInput", "comment": " Shorthand for assigning an onInput handler for an input\n", "type": "(String -> msg) -> Option msg" }, { "name": "password", "comment": " Create an input with type=\"password\"\n", "type": "List (Option msg) -> Html msg" }, { "name": "placeholder", "comment": " Shorthand for setting the placeholder attribute of an input\n", "type": "String -> Option msg" }, { "name": "search", "comment": " Create an input with type=\"search\"\n", "type": "List (Option msg) -> Html msg" }, { "name": "small", "comment": " Option to make an input shorter (in height)\n", "type": "Option msg" }, { "name": "success", "comment": " Option to add a success marker icon for your input.\n\n**Note:** Please read the caveat described about [`validation options`](#validation)\n", "type": "Option msg" }, { "name": "tel", "comment": " Create an input with type=\"tel\"\n", "type": "List (Option msg) -> Html msg" }, { "name": "text", "comment": " Create an input with type=\"text\"\n\n Input.text\n [ Input.id \"myinput\"\n , Input.small\n , Input.defaultValue \"Hello\"\n , Input.onInput MyInputMsg\n ]\n\n", "type": "List (Option msg) -> Html msg" }, { "name": "time", "comment": " Create an input with type=\"time\"\n", "type": "List (Option msg) -> Html msg" }, { "name": "url", "comment": " Create an input with type=\"url\"\n", "type": "List (Option msg) -> Html msg" }, { "name": "value", "comment": " Shorthand for setting the value attribute of an input\n", "type": "String -> Option msg" }, { "name": "warning", "comment": " Option to add a warning marker icon for your input.\n\n**Note:** Please read the caveat described about [`validation options`](#validation)\n", "type": "Option msg" }, { "name": "week", "comment": " Create an input with type=\"week\"\n", "type": "List (Option msg) -> Html msg" } ], "binops": [] }, { "name": "Bootstrap.Form.Textarea", "comment": " This module allows you to create textarea elements.\n\n\n# Creating\n@docs textarea\n\n\n# Options\n@docs id, rows, value, defaultValue, disabled, onInput, attrs, Option\n\n# Validation\nThese options really only makes sense when you used in conjuction with the form module.\nTo use standalone, remember to wrap your textarea in a containing element and provide it one of the following classes:\n\n* `has-success`\n* `has-warning`\n* `has-danger`\n\n@docs success, warning, danger\n\n\n", "unions": [ { "name": "Option", "comment": " Opaque type representing legal textarea configuration options\n", "args": [ "msg" ], "cases": [] } ], "aliases": [], "values": [ { "name": "attrs", "comment": " Use this function to handle any Html.Attribute option you wish for your textarea\n", "type": "List (Attribute msg) -> Option msg" }, { "name": "danger", "comment": " Option to add a danger marker icon for your textarea.\n\n**Note:** Please read the caveat described about [`validation options`](#validation)\n", "type": "Option msg" }, { "name": "defaultValue", "comment": " Shorthand for setting the defaultValue attribute of a textarea\n", "type": "String -> Option msg" }, { "name": "disabled", "comment": " Shorthand for setting the disabled attribute of a textarea\n", "type": "Option msg" }, { "name": "id", "comment": " Options/shorthand for setting the id of a textarea\n", "type": "String -> Option msg" }, { "name": "onInput", "comment": " Shorthand for assigning an onInput handler for a textarea\n", "type": "(String -> msg) -> Option msg" }, { "name": "rows", "comment": " Option/shorthand to set the rows attribute of a textarea\n", "type": "Int -> Option msg" }, { "name": "success", "comment": " Option to add a success marker icon for your textarea.\n\n**Note:** Please read the caveat described about [`validation options`](#validation)\n", "type": "Option msg" }, { "name": "textarea", "comment": " Create a textarea element.\n\n Textarea.textarea\n [ Textarea.id \"myarea\"\n , Textarea.rows 4\n , Textarea.onInput MyTextareaMsg\n ]\n\n", "type": "List (Option msg) -> Html msg" }, { "name": "value", "comment": " Shorthand for setting the value attribute of a textarea\n", "type": "String -> Option msg" }, { "name": "warning", "comment": " Option to add a warning marker icon for your textarea.\n\n**Note:** Please read the caveat described about [`validation options`](#validation)\n", "type": "Option msg" } ], "binops": [] }, { "name": "Bootstrap.Form.Checkbox", "comment": " This module allows you to create Bootstrap styled checkboxes.\n\n\n# Creating\n@docs checkbox, custom\n\n# Options\n@docs checked, inline, indeterminate, disabled, onCheck, attrs, success, warning, danger, Option\n\n\n", "unions": [ { "name": "Option", "comment": " Opaque type representing valid customization options for a checkbox\n", "args": [ "msg" ], "cases": [] } ], "aliases": [], "values": [ { "name": "attrs", "comment": " Use this function to handle any Html.Attribute option you wish for your select\n", "type": "List (Attribute msg) -> Option msg" }, { "name": "checkbox", "comment": " Create a checkbox element\n\n Checkbox.checkbox\n [ Checkbox.checked True\n , Checkbox.onCheck MyCheckMsg\n ]\n\n", "type": "List (Option msg) -> String -> Html msg" }, { "name": "checked", "comment": " Option to toggle the checkbox checked property on off.\n", "type": "Bool -> Option msg" }, { "name": "custom", "comment": " Create a composable Bootstrap custom styled checkbox\n\n Checkbox.custom\n [ Checkbox.checked True\n , Checkbox.onCheck MyCheckMsg\n ]\n\n", "type": "List (Option msg) -> String -> Html msg" }, { "name": "danger", "comment": " Option to color a checkbox with danger.\n", "type": "Option msg" }, { "name": "disabled", "comment": " Option to disable the checkbox\n", "type": "Bool -> Option msg" }, { "name": "indeterminate", "comment": " Option to set the indeterminate property of a checkbox\n\n**Note**: A checkbox can't be both indeterminate and checked, so if you set both\nthe last one provided in the list of options to the checkbox function \"wins\".\n", "type": "Option msg" }, { "name": "inline", "comment": " Use this option to display checkboxes inline.\n", "type": "Option msg" }, { "name": "onCheck", "comment": " Shorthand for assigning an onCheck handler for a checkbox.\n", "type": "(Bool -> msg) -> Option msg" }, { "name": "success", "comment": " Option to color a checkbox with success.\n", "type": "Option msg" }, { "name": "warning", "comment": " Option to color a checkbox with warning.\n", "type": "Option msg" } ], "binops": [] }, { "name": "Bootstrap.Form.Radio", "comment": " This module allows you to create Bootstrap styled radios.\n\n\n# Creating\n@docs radio, custom, Radio\n\n# Options\n@docs checked, name, inline, onClick, disabled, attrs, Option\n\n\n# Composing\n@docs radioList, create, createCustom, Radio\n\n", "unions": [ { "name": "Option", "comment": " Opaque type representing valid customization options for a radio\n", "args": [ "msg" ], "cases": [] }, { "name": "Radio", "comment": " Opaque composable type representing a Radio.\n", "args": [ "msg" ], "cases": [] } ], "aliases": [], "values": [ { "name": "attrs", "comment": " Use this function to handle any Html.Attribute option you wish for your radio\n", "type": "List (Attribute msg) -> Option msg" }, { "name": "checked", "comment": " Option to toggle the radio checked property on off.\n", "type": "Bool -> Option msg" }, { "name": "create", "comment": " Create a composable radio for use in a [`radioList`](#radioList)\n", "type": "List (Option msg) -> String -> Radio msg" }, { "name": "createCustom", "comment": " Create a composable custom radio for use in a [`radioList`](#radioList)\n", "type": "List (Option msg) -> String -> Radio msg" }, { "name": "custom", "comment": " Create a single radio input with customized Bootstrap styling.\n\n Radio.custom\n [ Radio.checked True\n , Radio.onClick MyRadioMsg\n ]\n\n", "type": "List (Option msg) -> String -> Html msg" }, { "name": "disabled", "comment": " Option to disable the radio\n", "type": "Bool -> Option msg" }, { "name": "inline", "comment": " Use this option to display radios inline.\n", "type": "Option msg" }, { "name": "name", "comment": " Option to set the name of a radio.\n\nA single radio doesn't make much sense, typically you would have several. To automatically\nunselect one radio, when selecting another you need to have the same name for each radio in a group.\n", "type": "String -> Option msg" }, { "name": "onClick", "comment": " Shorthand for assigning an onClick handler for a radio.\n", "type": "msg -> Option msg" }, { "name": "radio", "comment": " Create a single radio input.\n\n Radio.radio\n [ Radio.checked True\n , Radio.onClick MyRadioMsg\n ]\n\n", "type": "List (Option msg) -> String -> Html msg" }, { "name": "radioList", "comment": " In most cases you would probably create multiple radios as a group.\nThis function is a convenient helper to create a list of radios\n\n -- You might have defined a single message for all your radios like this\n type Msg\n = MyRadioMsg MyRadio Bool\n\n type MyRadio\n = Radio1\n | Radio2\n | Radio3\n\n\n -- In some view function your could create a radio list as follows\n\n Radio.radioList \"myradios\"\n [ Radio.create [ Radio.onCheck (MyRadioMsg MyRadio1) ] \"Radio 1\"\n , Radio.create [ Radio.onCheck (MyRadioMsg MyRadio2) ] \"Radio 2\"\n , Radio.create [ Radio.onCheck (MyRadioMsg MyRadio3) ] \"Radio 3\"\n ]\n\n\n* `groupName` - Name of the radios, all radios will get the same name\n* `radios` - List of radios.\n", "type": "String -> List (Radio msg) -> List (Html msg)" } ], "binops": [] }, { "name": "Bootstrap.Carousel.Slide", "comment": " A slide is used as part of a carousel\n\n Slide.config [ ]\n (Slide.image [ Attributes.alt \"slide 1\" ] \"https://...\")\n |> Slide.caption []\n [ h3 [] [ text \"First slide label\" ]\n , p [] []\n ]\n\n# Slide\n@docs Config, config, caption\n\n# Content\n@docs SlideContent, image, customContent\n", "unions": [], "aliases": [ { "name": "Config", "comment": " Opaque type that defines the view configuration information of your slide\n\n", "args": [ "msg" ], "type": "Config msg" }, { "name": "SlideContent", "comment": " Opaque type that defines the content of a slide\n", "args": [ "msg" ], "type": "SlideContent msg" } ], "values": [ { "name": "caption", "comment": " Add a caption to your slide\n\nThe captions are automatically hidden on small devices.\n", "type": "List (Attribute msg) -> List (Html msg) -> Config msg -> Config msg" }, { "name": "config", "comment": " Creates an initial/default view configuration for a slide\n", "type": "List (Attribute msg) -> SlideContent msg -> Config msg" }, { "name": "customContent", "comment": " Populate a slide with whatever html you want\n", "type": "Html msg -> SlideContent msg" }, { "name": "image", "comment": " Populate a slide with an image.\n\n* `attributes` List of attributes\n* `src` the `src` attribute for the image\n", "type": "List (Attribute msg) -> String -> SlideContent msg" } ], "binops": [] }, { "name": "Bootstrap.Table", "comment": " Create simple and customizable tables in a fairly type safe manner!\n\n# Table\n@docs simpleTable, table\n\n## Table options\n@docs inversed, striped, bordered, hover, small, responsive, reflow, attr, TableOption\n\n\n# Table headers\n@docs simpleThead, thead, headAttr, THead\n\n\n## Header options\n@docs defaultHead, inversedHead, TableHeadOption\n\n\n# Table body\n@docs tbody, keyedTBody, TBody\n\n\n# Rows\n@docs tr, keyedTr, Row\n\n## Row options\n@docs rowActive, rowInfo, rowSuccess, rowWarning, rowDanger, rowAttr, RowOption\n\n\n# Cells\n@docs td, th, Cell\n\n## Cell options\n@docs cellActive, cellInfo, cellSuccess, cellWarning, cellDanger, cellAttr, CellOption\n\n", "unions": [ { "name": "Cell", "comment": " Opaque type representing a cell (tr or td)\n", "args": [ "msg" ], "cases": [] }, { "name": "CellOption", "comment": " Opaque type representing possible styling options for a cell, ie td and th\n", "args": [ "msg" ], "cases": [] }, { "name": "Row", "comment": " Opaque type representing a tr\n", "args": [ "msg" ], "cases": [] }, { "name": "RowOption", "comment": " Opaque type representing possible styling options for a tr element (both in thead and tbody)\n", "args": [ "msg" ], "cases": [] }, { "name": "TBody", "comment": " Opaque type representing a tbody element\n", "args": [ "msg" ], "cases": [] }, { "name": "THead", "comment": " Opaque type representing a thead element\n", "args": [ "msg" ], "cases": [] }, { "name": "TableHeadOption", "comment": " Opaque type representing possible styling options for a thead element\n", "args": [ "msg" ], "cases": [] }, { "name": "TableOption", "comment": " Opaque type representing possible styling options for a table\n", "args": [ "msg" ], "cases": [] } ], "aliases": [], "values": [ { "name": "attr", "comment": " When you need to customize a table element with a standard Html.Attribute, use this function to create it as a [`TableOption`](#TableOption)\n", "type": "Attribute msg -> TableOption msg" }, { "name": "bordered", "comment": " Option to put borders around a table\n", "type": "TableOption msg" }, { "name": "cellActive", "comment": " Option to style an individual cell with the active color\n", "type": "CellOption msg" }, { "name": "cellAttr", "comment": " When you need to customize a td or th with standard Html.Attribute attributes, use this function\n", "type": "Attribute msg -> CellOption msg" }, { "name": "cellDanger", "comment": " Option to style an individual cell with the danger color\n", "type": "CellOption msg" }, { "name": "cellInfo", "comment": " Option to style an individual cell with the info color\n", "type": "CellOption msg" }, { "name": "cellSuccess", "comment": " Option to style an individual cell with the success color\n", "type": "CellOption msg" }, { "name": "cellWarning", "comment": " Option to style an individual cell with the warning color\n", "type": "CellOption msg" }, { "name": "defaultHead", "comment": " Option to color header with default color scheme.\n", "type": "TableHeadOption msg" }, { "name": "headAttr", "comment": " When you need to customize a thead element with a standard Html.Attribute, use this function to create a [`TableHeadOption`](#TableHeadOption)\n", "type": "Attribute msg -> TableHeadOption msg" }, { "name": "hover", "comment": " Change row coloring to highlight row when hovered over\n", "type": "TableOption msg" }, { "name": "inversed", "comment": " Option to give a table an inversed color scheme (dark backround, light text)\n", "type": "TableOption msg" }, { "name": "inversedHead", "comment": " Option to inverse thead element. Dark background and light text color\n", "type": "TableHeadOption msg" }, { "name": "keyedTBody", "comment": " Create a tbody element where each row is keyed\n\n* `attributes` List of standard Elm html attributes\n* `rows` List of key table row elements (tr) tuples\n\n", "type": "List (Attribute msg) -> List ( String, Row msg ) -> TBody msg" }, { "name": "keyedTr", "comment": " Create a table row with keyed td or th child elements.\n", "type": "List (RowOption msg) -> List ( String, Cell msg ) -> Row msg" }, { "name": "reflow", "comment": " Turn traditional tables on their side. When using reflow, the table header becomes the first column of the table, the first row within the table body becomes the second column, the second row becomes the third column, etc. Only works out nicely for simple tables (e.g. no colspans, rowspans or multiple header rows etc.)\n", "type": "TableOption msg" }, { "name": "responsive", "comment": " Make table scroll horizontally on small devices (under 768px). When viewing on anything larger than 768px wide, you will not see any difference in the table.\n", "type": "TableOption msg" }, { "name": "rowActive", "comment": " Style a table row with the active color.\n", "type": "RowOption msg" }, { "name": "rowAttr", "comment": " When you need to customize a tr element with standard Html.Attribute attributes, use this function\n", "type": "Attribute msg -> RowOption msg" }, { "name": "rowDanger", "comment": " Style a table row with the danger color.\n", "type": "RowOption msg" }, { "name": "rowInfo", "comment": " Style a table row with the info color.\n", "type": "RowOption msg" }, { "name": "rowSuccess", "comment": " Style a table row with the success color.\n", "type": "RowOption msg" }, { "name": "rowWarning", "comment": " Style a table row with the warning color.\n", "type": "RowOption msg" }, { "name": "simpleTable", "comment": " Allows you to create a simple default table\n\n\n* (`thead`, `tbody`) - A tuple of a thead item and a tbody item\n\n", "type": "( THead msg, TBody msg ) -> Html msg" }, { "name": "simpleThead", "comment": " Create a default thead with one row of cells (typically th elements)\n\n simpleThead\n [ Table.th [] [ text \"Col1\" ]\n , Table.th [] [ text \"Col2\" ]\n ]\n\n", "type": "List (Cell msg) -> THead msg" }, { "name": "small", "comment": " Option to give a more condensed table with less padding/margins\n", "type": "TableOption msg" }, { "name": "striped", "comment": " Option to give a table a striped look (zebra style)\n", "type": "TableOption msg" }, { "name": "table", "comment": " Create a customizable table\n\n Table.table\n { options = [ Table.striped ] -- list of table options\n , thead = Table.thead ... etc\n , tbody = Table.tbody ... etc\n }\n\n", "type": "{ options : List (TableOption msg), thead : THead msg, tbody : TBody msg } -> Html msg" }, { "name": "tbody", "comment": " Create a tbody element\n\n* `attributes` List of standard Elm html attributes\n* `rows` List of table row elements (tr)\n\n", "type": "List (Attribute msg) -> List (Row msg) -> TBody msg" }, { "name": "td", "comment": " Create a td element\n\n Table.td [ Table.cellInfo ] [ text \"Some info cell\"]\n\n* `options` List of options for customizing\n* `children` List of child elements\n\n", "type": "List (CellOption msg) -> List (Html msg) -> Cell msg" }, { "name": "th", "comment": " Create a th element\n\n Table.th [ Table.cellInfo ] [ text \"Some info header cell\"]\n\n* `options` List of options for customizing\n* `children` List of child elements\n\n", "type": "List (CellOption msg) -> List (Html msg) -> Cell msg" }, { "name": "thead", "comment": " Create a customizable thead element\n\n* `options` List of options to style the thead element\n* `rows` List of rows (aka tr)\n", "type": "List (TableHeadOption msg) -> List (Row msg) -> THead msg" }, { "name": "tr", "comment": " Create a table row\n\n -- For use (typically) in a tbody\n Table.tr\n [ Table.rowInfo ]\n [ Table.td [] [ text \"Some cell\" ]\n , Table.td [] [ text \"Another cell\" ]\n ]\n\n -- alternatively when creating a thead\n Table.tr\n [ Table.rowInfo ]\n [ Table.th [] [ text \"Col1\" ]\n , Table.th [] [ text \"Col2\" ]\n ]\n\n", "type": "List (RowOption msg) -> List (Cell msg) -> Row msg" } ], "binops": [] }, { "name": "Bootstrap.Tab", "comment": " Use tabs to create tabbable regions. Tabs uses view state, so there is a little bit of wiring needed to use them.\n\n -- example with animation, you can drop the subscription part when not using animations\n\n type alias Model =\n { tabState : Tab.State }\n\n\n init : ( Model, Cmd Msg )\n init =\n ( { tabState : Tab.initalState}, Cmd.none )\n\n\n type Msg\n = TabMsg Tab.State\n\n\n update : Msg -> Model -> ( Model, Cmd msg )\n update msg model =\n case msg of\n TabMsg state ->\n ( { model | tabState = state }\n , Cmd.none\n )\n\n view : Model -> Html msg\n view model =\n Tab.config TabMsg\n |> Tab.withAnimation -- remember to wire up subscriptions when using this option\n |> Tab.right\n |> Tab.items\n [ Tab.item\n { id = \"tabItem1\"\n , link = Tab.link [] [ text \"Tab 1\" ]\n , pane = Tab.pane [] [ text \"Tab 1 Content\" ]\n }\n , Tab.item\n { id = \"tabItem2\"\n , link = Tab.link [] [ text \"Tab 2\" ]\n , pane = Tab.pane [] [ text \"Tab 2 Content\" ]\n }\n ]\n |> Tab.view model.tabState\n\n\n subscriptions : Model -> Sub Msg\n subscriptions model =\n Tab.subscriptions model.tabState TabMsg\n\n\n\n\n# Tabs\n@docs view, config, items, initialState, customInitialState, Config, State\n\n# Options\n@docs pills, withAnimation, justified, fill, center, right, attrs, useHash, Option\n\n# Tab items\n@docs item, link, pane, Item, Link, Pane\n\n\n\n# With animations\n@docs subscriptions\n\n", "unions": [ { "name": "Config", "comment": " Configuration for a tabs control\n\n* `toMsg` Message constructor function used for transitioning view state\n* `options` Customization options for the tabs control\n* `withAnimation` Option to enable a simple fade in animation for tabs.\n* `items` List of tab items\n\n**NOTE** When using animations you must also remember to set up [`subscriptions`](#subscriptions)\n\n", "args": [ "msg" ], "cases": [] }, { "name": "Item", "comment": " Opaque type representing a tab item\n", "args": [ "msg" ], "cases": [] }, { "name": "Link", "comment": " Opaque type representing a tab item link\n", "args": [ "msg" ], "cases": [] }, { "name": "Option", "comment": " Opaque type representing customization options for a tabs control\n", "args": [ "msg" ], "cases": [] }, { "name": "Pane", "comment": " Opaque type representing a tab item pane\n", "args": [ "msg" ], "cases": [] }, { "name": "State", "comment": " Opaque type representing the view state of the tabs control\n", "args": [], "cases": [] } ], "aliases": [], "values": [ { "name": "attrs", "comment": " Use this function when you need additional customization with Html.Attribute attributes for the tabs control\n", "type": "List (Attribute msg) -> Config msg -> Config msg" }, { "name": "center", "comment": " Option to center the tab menu items\n", "type": "Config msg -> Config msg" }, { "name": "config", "comment": " Create an initial/default view configuration for a Tab.\n", "type": "(State -> msg) -> Config msg" }, { "name": "customInitialState", "comment": " Use this function if you want to initialize your tabs control with a specific tab selected.\n\n**NOTE: ** Should you specify an id not found, the first tab item will be displayd by default\n", "type": "String -> State" }, { "name": "fill", "comment": " Space out tab menu items to use the entire tabs control width, as opposed to [`justified`](#justified) items will not get equal widths\n", "type": "Config msg -> Config msg" }, { "name": "initialState", "comment": " Use this function to create the inital state for the tabs control\n", "type": "State" }, { "name": "item", "comment": " Create a composable tab item\n\n* `id` A unique id for the tab item\n* `link` The link/menu for the tab item\n* `pane` The content part of a tab item\n", "type": "{ id : String, link : Link msg, pane : Pane msg } -> Item msg" }, { "name": "items", "comment": " Define the tab items for a Tab.\n", "type": "List (Item msg) -> Config msg -> Config msg" }, { "name": "justified", "comment": " Space out tab menu items evenly accross the the whole tabs control width\n", "type": "Config msg -> Config msg" }, { "name": "link", "comment": " Creates a composable tab menu item\n\n* `attributes` List of attributes\n* `children` List of child elements\n", "type": "List (Attribute msg) -> List (Html msg) -> Link msg" }, { "name": "pane", "comment": " Creates a composable tab menu pane\n\n* `attributes` List of attributes\n* `children` List of child elements\n", "type": "List (Attribute msg) -> List (Html msg) -> Pane msg" }, { "name": "pills", "comment": " Option to make the tab menu items display with a pilled/buttonish look\n", "type": "Config msg -> Config msg" }, { "name": "right", "comment": " Option to place tab menu items to the right\n", "type": "Config msg -> Config msg" }, { "name": "subscriptions", "comment": " When using animations you **must** remember to wire up this function to your main subscriptions\n\n subscriptions : Model -> Sub Msg\n subscriptions model =\n Sub.batch\n [ Tab.subscriptions model.tabState TabMsg\n -- ...other subscriptions you might have\n ]\n", "type": "State -> (State -> msg) -> Sub msg" }, { "name": "useHash", "comment": " By default the click handler for tabs has preventDefault true. If however you want the url hash\nto be updated with the tab item id, you may use this function to ensure the url is changed when users\nclick on a tab item. This is handy if you use \"real\"\" paths for your SPA pages but also want to be able to \"deep-link\" to a particular\ntab item.\n", "type": "Bool -> Config msg -> Config msg" }, { "name": "view", "comment": " Creates a tab control which keeps track of the selected tab item and displays the corresponding tab pane for you\n\n Tab.config TabMsg\n |> Tab.withAnimation -- remember to wire up subscriptions when using this option\n |> Tab.right\n |> Tab.items\n [ Tab.item\n { id = \"tabItem1\"\n , link = Tab.link [] [ text \"Tab 1\" ]\n , pane = Tab.pane [] [ text \"Tab 1 Content\" ]\n }\n , Tab.item\n { id = \"tabItem2\"\n , link = Tab.link [] [ text \"Tab 2\" ]\n , pane = Tab.pane [] [ text \"Tab 2 Content\" ]\n }\n ]\n |> Tab.view model.tabState\n", "type": "State -> Config msg -> Html msg" }, { "name": "withAnimation", "comment": " Option to add a fade in/out animation effect when switching tabs\n", "type": "Config msg -> Config msg" } ], "binops": [] }, { "name": "Bootstrap.Progress", "comment": " You can use the custom progress elment for displaying simple or complex progress bars.\nIt doesn't use the HTML5 `` element, ensuring you can stack progress bars, animate them, and place text labels over them.\n\n\n# Progress bar\n@docs progress\n\n\n## Options\n@docs value, height, label, customLabel, success, info, warning, danger, striped, animated, attrs, wrapperAttrs, Option\n\n\n# Stacking multiple\n@docs progressMulti\n\n", "unions": [ { "name": "Option", "comment": " Opaque type representing available display options for the progress bar\n", "args": [ "msg" ], "cases": [] } ], "aliases": [], "values": [ { "name": "animated", "comment": " Option to make the progress bar animated\n\n**NOTE: ** Giving this option will automatically also make the background [`striped`](#striped)\n", "type": "Option msg" }, { "name": "attrs", "comment": " Option to specify one ore more custom Html.Attribute for the progress bar\n", "type": "List (Attribute msg) -> Option msg" }, { "name": "customLabel", "comment": " Option to specify a funky custom label for a progress bar\n", "type": "List (Html msg) -> Option msg" }, { "name": "danger", "comment": " Option to give a progress bar a danger background color\n", "type": "Option msg" }, { "name": "height", "comment": " Option to specify the height (in pixels) for the progress bar\n", "type": "Int -> Option msg" }, { "name": "info", "comment": " Option to give a progress bar an info background color\n", "type": "Option msg" }, { "name": "label", "comment": " Option to specify a text label for a progress bar\n\nThe label will only display when you have set a [`value`](#value)\n", "type": "String -> Option msg" }, { "name": "progress", "comment": " Create a progress bar with various customization options\n\n Progress.progress\n [ Progress.primary\n , Progress.value 30\n ]\n\n* `options` List of options\n\n**NOTE: ** If you have duplicate options, the last one \"wins\"\n", "type": "List (Option msg) -> Html msg" }, { "name": "progressMulti", "comment": " Create a progress containing multiple progress bars next to each other\n\n Progress.progressMulti\n [ [ Progress.info, Progress.value 25 ]\n , [ Progress.success, Progress.value 30 ]\n ]\n\n", "type": "List (List (Option msg)) -> Html msg" }, { "name": "striped", "comment": " Option to make the progress bar background striped\n", "type": "Option msg" }, { "name": "success", "comment": " Option to give a progress bar a success background color\n", "type": "Option msg" }, { "name": "value", "comment": " Option to specify the progress amount for a bar in percent. Should be a value between 0 and 100\n", "type": "Float -> Option msg" }, { "name": "warning", "comment": " Option to give a progress bar a warning background color\n", "type": "Option msg" }, { "name": "wrapperAttrs", "comment": " Option to specify one ore more custom Html.Attribute for the progress bar wrapper/container\n(say you need to add a on click handler or something like that)\n", "type": "List (Attribute msg) -> Option msg" } ], "binops": [] }, { "name": "Bootstrap.Form.Fieldset", "comment": " Fieldset is a handy block level element you can use to group form elements.\nFieldset comes with the added benefit of disabling all child controls when we set it's disabled attribute.\n\n# General\n@docs Config, view, config\n\n# Customization\n@docs asGroup, disabled, children, legend, attrs\n\n\n", "unions": [ { "name": "Config", "comment": " Opaque representation of the view configuration for a fieldset.\n", "args": [ "msg" ], "cases": [] } ], "aliases": [], "values": [ { "name": "asGroup", "comment": " Make the fieldset a field group\n", "type": "Config msg -> Config msg" }, { "name": "attrs", "comment": " When you need to customize a fieldset with standard Html.Attribute attributes use this function\n", "type": "List (Attribute msg) -> Config msg -> Config msg" }, { "name": "children", "comment": " ", "type": "List (Html msg) -> Config msg -> Config msg" }, { "name": "config", "comment": " Create default config for a fieldset\n", "type": "Config msg" }, { "name": "disabled", "comment": " Disable a fieldset\n", "type": "Bool -> Config msg -> Config msg" }, { "name": "legend", "comment": " Provide a legend for a set of fields\n", "type": "List (Attribute msg) -> List (Html msg) -> Config msg -> Config msg" }, { "name": "view", "comment": " View a fieldset standalone. To create a fieldset you start off with a basic configuration which you can compose\nof several optional elements.\n\n Fieldset.config\n |> Fieldset.asGroup\n |> Fieldset.legend [] [ text \"Radio buttons\" ]\n |> Fieldset.children\n ( Radio.radioList \"myradios\"\n [ Radio.create [] \"Option one\"\n , Radio.create [] \"Option two\"\n , Radio.create [ Radio.disabled True] \"I'm disabled\"\n ]\n )\n |> Fieldset.view\n", "type": "Config msg -> Html msg" } ], "binops": [] }, { "name": "Bootstrap.Alert", "comment": " Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.\n\n\n Alert.info\n [ Alert.h4 \"For your information\"\n , p [] [ text \"An information message of sorts\"]\n , Alert.link [ href \"/somelink\" ] [ text \"link\"]\n ]\n\n# Contextual alerts\n@docs success, info, warning, danger\n\n\n## Styled content\n@docs link, h1, h2, h3, h4, h5, h6\n\n", "unions": [], "aliases": [], "values": [ { "name": "danger", "comment": " Alert signaling an error\n\n* `children` List of child elements\n\n", "type": "List (Html msg) -> Html msg" }, { "name": "h1", "comment": " Alert h1 header with appropriate color styling\n\n* `attributes` List of attributes\n* `children` List of child elements\n\n", "type": "List (Attribute msg) -> List (Html msg) -> Html msg" }, { "name": "h2", "comment": " Alert h2 header with appropriate color styling\n\n* `attributes` List of attributes\n* `children` List of child elements\n\n", "type": "List (Attribute msg) -> List (Html msg) -> Html msg" }, { "name": "h3", "comment": " Alert h3 header with appropriate color styling\n\n* `attributes` List of attributes\n* `children` List of child elements\n\n", "type": "List (Attribute msg) -> List (Html msg) -> Html msg" }, { "name": "h4", "comment": " Alert h3 header with appropriate color styling\n\n* `attributes` List of attributes\n* `children` List of child elements\n\n", "type": "List (Attribute msg) -> List (Html msg) -> Html msg" }, { "name": "h5", "comment": " Alert h5 header with appropriate color styling\n\n* `attributes` List of attributes\n* `children` List of child elements\n\n", "type": "List (Attribute msg) -> List (Html msg) -> Html msg" }, { "name": "h6", "comment": " Alert h6 header with appropriate color styling\n\n* `attributes` List of attributes\n* `children` List of child elements\n\n", "type": "List (Attribute msg) -> List (Html msg) -> Html msg" }, { "name": "info", "comment": " Alert information\n\n* `children` List of child elements\n\n", "type": "List (Html msg) -> Html msg" }, { "name": "link", "comment": " To get proper link colors for `a` elements use this function\n\n* `attributes` List of attributes for the link element\n* `children` List of child elements\n\n", "type": "List (Attribute msg) -> List (Html msg) -> Html msg" }, { "name": "success", "comment": " Alert signaling success\n\n* `children` List of child elements\n\n", "type": "List (Html msg) -> Html msg" }, { "name": "warning", "comment": " Alert signaling a warning of sorts\n\n* `children` List of child elements\n\n", "type": "List (Html msg) -> Html msg" } ], "binops": [] }, { "name": "Bootstrap.Popover", "comment": " Add small overlay content, like those found in iOS, to any element for housing secondary information.\n\n -- You need to keep track of the view state for a popover\n type alias Model =\n { popoverState = Popover.State }\n\n -- Define a message to handle popover state changes\n type Msg\n = PopoverMsg Popover.State\n\n\n -- Initialize the popover state\n initialState : ( Model, Cmd Msg )\n initialState =\n ( { popoverState = Popover.initialState}, Cmd.none )\n\n\n -- Step the popover state forward in your update function\n update : Msg -> Model -> ( Model, Cmd Msg)\n update msg model =\n case msg of\n PopoverMsg state ->\n ( { model | popoverState = state }, Cmd.none )\n\n\n -- Compose a popover in your view (or a view helper function)\n view : Model -> Html Msg\n view model =\n Popover.config\n ( Button.button\n -- Here configure the popover to be shown when the mouse is above the button ( tooltip basically !)\n [ Button.attrs <| Popover.onHover model.popoverState PopoverMsg ]\n [ text \"Toggle tooltip\" ]\n )\n |> Popover.right\n |> Popover.titleH4 [] [ text \"My title\" ]\n |> Popover.content []\n [ text \"Some content for my popover.\"\n , p [] [ text \"Different elements ok...\"]\n ]\n |> Popover.view model.popoverState\n\n\n\n_You should be aware that the triggering element is wrapped by an `inline-block` div with relative positioning and that\nthe popover is added as a sibling of the triggering element. This will limit it's usage and there are bound to be\ncases where they don't work as you'd expect. So make sure you test your views when using them !_\n\n\n\n# Setup\n@docs config, initialState, view, Config, State\n\n# Triggering\n@docs onClick, onHover\n\n# View composition\n@docs title, content, titleH1, titleH2, titleH3, titleH4, titleH5, titleH6\n\n# Positioning\n@docs left, right, top, bottom\n\n\n", "unions": [ { "name": "Config", "comment": " Opaque representation of the view configuration for a Popover\n", "args": [ "msg" ], "cases": [] }, { "name": "State", "comment": " Opaque representation of the view state for a Popover\n", "args": [], "cases": [] } ], "aliases": [], "values": [ { "name": "bottom", "comment": " Show popover below the triggering element.\n", "type": "Config msg -> Config msg" }, { "name": "config", "comment": " Creates a default view config for a popover\n\n* `triggerElement` - The element that will trigger the popover\n", "type": "Html msg -> Config msg" }, { "name": "content", "comment": " Define the popover body content.\n", "type": "List (Attribute msg) -> List (Html msg) -> Config msg -> Config msg" }, { "name": "initialState", "comment": " Initial default view state.\n", "type": "State" }, { "name": "left", "comment": " Show popover to the left of the triggering element.\n", "type": "Config msg -> Config msg" }, { "name": "onClick", "comment": " Creates a click handler that will toggle the visibility of\na popover\n\n* `state` - The current state of the popover to toggle\n* `toMsg` - Message tagger function to handle state changes to a popover\n", "type": "State -> (State -> msg) -> List (Attribute msg)" }, { "name": "onHover", "comment": " Creates a `mouseenter` and `mouseleave` message handler that will toggle the visibility of\na popover\n\n* `state` - The current state of the popover to toggle\n* `toMsg` - Message tagger function to handle state changes to a popover\n", "type": "State -> (State -> msg) -> List (Attribute msg)" }, { "name": "right", "comment": " Show popover to the right of the triggering element.\n", "type": "Config msg -> Config msg" }, { "name": "title", "comment": " Define a popover title.\n\n* `attributes` - List of attributes\n* `children` - List of child elements\n", "type": "List (Attribute msg) -> List (Html msg) -> Config msg -> Config msg" }, { "name": "titleH1", "comment": " Define a popover h1 title.\n\n* `attributes` - List of attributes\n* `children` - List of child elements\n", "type": "List (Attribute msg) -> List (Html msg) -> Config msg -> Config msg" }, { "name": "titleH2", "comment": " Define a popover h2 title.\n\n* `attributes` - List of attributes\n* `children` - List of child elements\n", "type": "List (Attribute msg) -> List (Html msg) -> Config msg -> Config msg" }, { "name": "titleH3", "comment": " Define a popover h3 title.\n\n* `attributes` - List of attributes\n* `children` - List of child elements\n", "type": "List (Attribute msg) -> List (Html msg) -> Config msg -> Config msg" }, { "name": "titleH4", "comment": " Define a popover h4 title.\n\n* `attributes` - List of attributes\n* `children` - List of child elements\n", "type": "List (Attribute msg) -> List (Html msg) -> Config msg -> Config msg" }, { "name": "titleH5", "comment": " Define a popover h5 title.\n\n* `attributes` - List of attributes\n* `children` - List of child elements\n", "type": "List (Attribute msg) -> List (Html msg) -> Config msg -> Config msg" }, { "name": "titleH6", "comment": " Define a popover h6 title.\n\n* `attributes` - List of attributes\n* `children` - List of child elements\n", "type": "List (Attribute msg) -> List (Html msg) -> Config msg -> Config msg" }, { "name": "top", "comment": " Show popover above the triggering element.\n", "type": "Config msg -> Config msg" }, { "name": "view", "comment": " This function creates the view representation for a Popover. Whether it's displayed or not\nis determined by it's view state.\n\n* `state` - The current view state for the popover\n* `config` - The view configuration for the popover\n", "type": "State -> Config msg -> Html msg" } ], "binops": [] }, { "name": "Bootstrap.CDN", "comment": " A helper module for easily embedding CSS when you want to work with the library using the Elm Reactor.\n\n\n@docs stylesheet, fontAwesome\n\n\n\n", "unions": [], "aliases": [], "values": [ { "name": "fontAwesome", "comment": " Font Awesome can also be conveniently included as an inline node. Font Awesome is not a dependency for `elm-bootstrap`.\n", "type": "Html msg" }, { "name": "stylesheet", "comment": " Allows you to embed the Bootstrap CSS as a node in your view.\n\n import Bootstrap.CDN\n\n\n view : Model -> Html Msg\n view model =\n div []\n [ CDN.stylesheet -- css embedded inline.\n , yourContentHere\n , navbar model\n , mainContent model\n ]\n", "type": "Html msg" } ], "binops": [] }, { "name": "Bootstrap.Badge", "comment": " Small and adaptive badge for adding context to just about any content.\n\n# Tags\n@docs badge, badgePrimary, badgeSuccess, badgeInfo, badgeWarning, badgeDanger\n\n\n# Pills\n@docs pill, pillPrimary, pillSuccess, pillInfo, pillWarning, pillDanger\n\n", "unions": [], "aliases": [], "values": [ { "name": "badge", "comment": " Create a badge with default styling\n\n* `attributes` List of attributes\n* `children` List of child elements\n\n", "type": "List (Attribute msg) -> List (Html msg) -> Html msg" }, { "name": "badgeDanger", "comment": " Create a badge with danger colors\n\n* `attributes` List of attributes\n* `children` List of child elements\n\n", "type": "List (Attribute msg) -> List (Html msg) -> Html msg" }, { "name": "badgeInfo", "comment": " Create a badge with info colors\n\n* `attributes` List of attributes\n* `children` List of child elements\n\n", "type": "List (Attribute msg) -> List (Html msg) -> Html msg" }, { "name": "badgePrimary", "comment": " Create a badge with primary colors\n\n* `attributes` List of attributes\n* `children` List of child elements\n\n", "type": "List (Attribute msg) -> List (Html msg) -> Html msg" }, { "name": "badgeSuccess", "comment": " Create a badge with success colors\n\n* `attributes` List of attributes\n* `children` List of child elements\n\n", "type": "List (Attribute msg) -> List (Html msg) -> Html msg" }, { "name": "badgeWarning", "comment": " Create a badge with warning colors\n\n* `attributes` List of attributes\n* `children` List of child elements\n\n", "type": "List (Attribute msg) -> List (Html msg) -> Html msg" }, { "name": "pill", "comment": " Create a pill (badge with rounded corners) using default coloring\n\n* `attributes` List of attributes\n* `children` List of child elements\n\n", "type": "List (Attribute msg) -> List (Html msg) -> Html msg" }, { "name": "pillDanger", "comment": " Create a pill with danger colors\n\n* `attributes` List of attributes\n* `children` List of child elements\n\n", "type": "List (Attribute msg) -> List (Html msg) -> Html msg" }, { "name": "pillInfo", "comment": " Create a pill with info colors\n\n* `attributes` List of attributes\n* `children` List of child elements\n\n", "type": "List (Attribute msg) -> List (Html msg) -> Html msg" }, { "name": "pillPrimary", "comment": " Create a pill with primary colors\n\n* `attributes` List of attributes\n* `children` List of child elements\n\n", "type": "List (Attribute msg) -> List (Html msg) -> Html msg" }, { "name": "pillSuccess", "comment": " Create a pill with success colors\n\n* `attributes` List of attributes\n* `children` List of child elements\n\n", "type": "List (Attribute msg) -> List (Html msg) -> Html msg" }, { "name": "pillWarning", "comment": " Create a pill with warning colors\n\n* `attributes` List of attributes\n* `children` List of child elements\n\n", "type": "List (Attribute msg) -> List (Html msg) -> Html msg" } ], "binops": [] } ]