[ { "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 type alias Model =\n { accordionState = Accordion.state }\n\n\n init : (Model, Cmd Msg)\n init =\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 AccordionMsg\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## Accordion\n\n@docs view, config, cards, withAnimation, onlyOneOpen, isOpen, Config, initialState, initialStateCardOpen, State\n\n\n## Contents\n\n@docs card, block, listGroup, header, toggle, headerH1, headerH2, headerH3, headerH4, headerH5, headerH6, appendHeader, prependHeader, Card, CardBlock, Header, Toggle\n\n\n## Animation\n\n@docs subscriptions\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\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 Accordion.block []\n [ Block.text [] [ text \"Just some text\"] ]\n\n - `blockOptions` List of block options\n - `blockItems` List of block items\n\n", "type": "List (Option msg) -> List (Item 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\n", "type": "{ id : String, options : List (Option 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", "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": "initialStateCardOpen", "comment": " Initial state with card that matches given id expanded.\n", "type": "String -> State" }, { "name": "isOpen", "comment": " Check if given card is open/expanded (or when animating, on it's way to become open/expanded).\n\n**NOTE: If you give a non-existing id it will return False (:**\n\n", "type": "String -> State -> Bool" }, { "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\n", "type": "List (Item msg) -> CardBlock msg" }, { "name": "onlyOneOpen", "comment": " Set option for only allowing one (or zero) open cards at any one time.\n", "type": "Config msg -> Config 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\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\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 - `state` The current view state\n - `config` The configuration for the display of the accordion\n\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\n", "type": "Config msg -> Config 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\n# Forms\n\n@docs form, formInline\n\n\n# Groups\n\nUse form groups to group items together (label + input is a typical simple example)\n\n@docs group, label, Option\n\n\n# Grid layouts\n\n@docs row, col, colLabel, colLabelSm, colLabelLg, Col\n\n\n# Validation\n\n@docs validFeedback, invalidFeedback\n\n\n# Handy helpers\n\n@docs help, helpInline\n\n", "unions": [ { "name": "Col", "comment": " Opaque type representing a column in a form row\n", "args": [ "msg" ], "cases": [] }, { "name": "Option", "comment": " Opaque type representing options for customing form groups.\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\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\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\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\n", "type": "List (Option msg) -> List (Html msg) -> Html 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": "invalidFeedback", "comment": " Function to provide validation feedback information for invalid 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\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\n", "type": "List (Option msg) -> List (Col msg) -> Html msg" }, { "name": "validFeedback", "comment": " Function to provide validation feedback information for valid inputs\n", "type": "List (Attribute msg) -> List (Html msg) -> Html msg" } ], "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\n# Containers\n\n@docs container, containerFluid\n\n\n# Rows\n\n@docs row, simpleRow, keyedRow\n\n\n# Columns\n\n@docs col, colBreak, keyedCol, Column\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\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\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\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\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.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\n@docs view, Config\n\n\n## Header\n\n@docs header, headerH1, headerH2, headerH3, headerH4, headerH5, headerH6, Header\n\n\n## Footer\n\n@docs Footer, footer\n\n\n## Images\n\n@docs imgTop, imgBottom, ImageTop, ImageBottom\n\n\n## Options\n\nYou can customize the look and feel of your cards using the following options\n\n@docs config, align, primary, secondary, success, info, warning, danger, light, dark, outlinePrimary, outlineSecondary, outlineSuccess, outlineInfo, outlineWarning, outlineDanger, outlineLight, outlineDark, textColor, attrs, Option\n\n\n# Blocks\n\n@docs block, listGroup\n\n\n# Composing cards\n\nCards can be composed into\n\n - [`groups`](#group)\n - [`decks`](#deck)\n - [`columns`](#columns)\n\n@docs group, deck, columns, keyedGroup, keyedDeck, keyedColumns\n\n", "unions": [ { "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\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": [] }, { "name": "Footer", "comment": " Opaque type representing a card footer element\n", "args": [ "msg" ], "cases": [] }, { "name": "Header", "comment": " Opaque type representing a card header element\n", "args": [ "msg" ], "cases": [] }, { "name": "ImageBottom", "comment": " Opaque type representing a card image placed at the bottom\n", "args": [ "msg" ], "cases": [] }, { "name": "ImageTop", "comment": " Opaque type representing a card image placed at the top\n", "args": [ "msg" ], "cases": [] } ], "aliases": [ { "name": "Option", "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 -> Option 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) -> Option 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 to configure block level styling\n - item - List of Block Items\n - `config` A card [`Config`](#Config) that you wish to add a block element to\n\n", "type": "List (Option msg) -> List (Item msg) -> Config msg -> Config 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 - `cards` List of [`card configs`](#Config)\n\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\n", "type": "List (Option msg) -> Config msg" }, { "name": "danger", "comment": " Give cards a danger background color\n", "type": "Option msg" }, { "name": "dark", "comment": " Give cards a dark background color\n", "type": "Option 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\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\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\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\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\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\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\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\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\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\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\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\n", "type": "List (Attribute msg) -> List (Html msg) -> Config msg -> Config msg" }, { "name": "info", "comment": " Give cards a info background color\n", "type": "Option 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": "light", "comment": " Give cards a light background color\n", "type": "Option 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": "Option msg" }, { "name": "outlineDark", "comment": " Give cards a dark colored outline\n", "type": "Option msg" }, { "name": "outlineInfo", "comment": " Give cards a info colored outline\n", "type": "Option msg" }, { "name": "outlineLight", "comment": " Give cards a light colored outline\n", "type": "Option msg" }, { "name": "outlinePrimary", "comment": " Give cards a primary colored outline\n", "type": "Option msg" }, { "name": "outlineSecondary", "comment": " Give cards a secondary colored outline\n", "type": "Option msg" }, { "name": "outlineSuccess", "comment": " Give cards a success colored outline\n", "type": "Option msg" }, { "name": "outlineWarning", "comment": " Give cards a warning colored outline\n", "type": "Option msg" }, { "name": "primary", "comment": " Give cards a primary background color\n", "type": "Option msg" }, { "name": "secondary", "comment": " Give cards a secondary background color\n", "type": "Option msg" }, { "name": "success", "comment": " Give cards a success background color\n", "type": "Option msg" }, { "name": "textColor", "comment": " Set the text color used within a card. |\n", "type": "Color -> Option 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 [ Block.titleH1 [] [ text \"Block title\" ]\n , Block.text [] [ text \"Some block content\" ]\n , Block.link [ href \"#\" ] [ text \"MyLink\"]\n ]\n |> Card.view\n\n - config - See [`Config`](#Config) for what items you may compose your cards with\n\n", "type": "Config msg -> Html msg" }, { "name": "warning", "comment": " Give cards a warning background color\n", "type": "Option msg" } ], "binops": [] }, { "name": "Bootstrap.Grid.Col", "comment": " Functions for creating grid column options.\n\n\n# Vertical alignment\n\n@docs topXs, topSm, topMd, topLg, topXl, middleXs, middleSm, middleMd, middleLg, middleXl, bottomXs, bottomSm, bottomMd, bottomLg, bottomXl\n\n\n# Sizing\n\n\n## Extra Small\n\n@docs xs, xs1, xs2, xs3, xs4, xs5, xs6, xs7, xs8, xs9, xs10, xs11, xs12, xsAuto\n\n\n## Small\n\n@docs sm, sm1, sm2, sm3, sm4, sm5, sm6, sm7, sm8, sm9, sm10, sm11, sm12, smAuto\n\n\n## Medium\n\n@docs md, md1, md2, md3, md4, md5, md6, md7, md8, md9, md10, md11, md12, mdAuto\n\n\n## Large\n\n@docs lg, lg1, lg2, lg3, lg4, lg5, lg6, lg7, lg8, lg9, lg10, lg11, lg12, lgAuto\n\n\n## Extra Large\n\n@docs xl, xl1, xl2, xl3, xl4, xl5, xl6, xl7, xl8, xl9, xl10, xl11, xl12, xlAuto\n\n\n# Offsets\n\n\n## Extra Small\n\n@docs offsetXs1, offsetXs2, offsetXs3, offsetXs4, offsetXs5, offsetXs6, offsetXs7, offsetXs8, offsetXs9, offsetXs10, offsetXs11\n\n\n## Small\n\n@docs offsetSm0, offsetSm1, offsetSm2, offsetSm3, offsetSm4, offsetSm5, offsetSm6, offsetSm7, offsetSm8, offsetSm9, offsetSm10, offsetSm11\n\n\n## Medium\n\n@docs offsetMd0, offsetMd1, offsetMd2, offsetMd3, offsetMd4, offsetMd5, offsetMd6, offsetMd7, offsetMd8, offsetMd9, offsetMd10, offsetMd11\n\n\n## Large\n\n@docs offsetLg0, offsetLg1, offsetLg2, offsetLg3, offsetLg4, offsetLg5, offsetLg6, offsetLg7, offsetLg8, offsetLg9, offsetLg10, offsetLg11\n\n\n## Extra Large\n\n@docs offsetXl0, offsetXl1, offsetXl2, offsetXl3, offsetXl4, offsetXl5, offsetXl6, offsetXl7, offsetXl8, offsetXl9, offsetXl10, offsetXl11\n\n\n# Pulls\n\n\n## Extra Small\n\n@docs pullXs0, pullXs1, pullXs2, pullXs3, pullXs4, pullXs5, pullXs6, pullXs7, pullXs8, pullXs9, pullXs10, pullXs11, pullXs12\n\n\n## Small\n\n@docs pullSm0, pullSm1, pullSm2, pullSm3, pullSm4, pullSm5, pullSm6, pullSm7, pullSm8, pullSm9, pullSm10, pullSm11, pullSm12\n\n\n## Medium\n\n@docs pullMd0, pullMd1, pullMd2, pullMd3, pullMd4, pullMd5, pullMd6, pullMd7, pullMd8, pullMd9, pullMd10, pullMd11, pullMd12\n\n\n## Large\n\n@docs pullLg0, pullLg1, pullLg2, pullLg3, pullLg4, pullLg5, pullLg6, pullLg7, pullLg8, pullLg9, pullLg10, pullLg11, pullLg12\n\n\n## Extra Large\n\n@docs pullXl0, pullXl1, pullXl2, pullXl3, pullXl4, pullXl5, pullXl6, pullXl7, pullXl8, pullXl9, pullXl10, pullXl11, pullXl12\n\n\n# Pushes\n\n\n## Extra Small\n\n@docs pushXs0, pushXs1, pushXs2, pushXs3, pushXs4, pushXs5, pushXs6, pushXs7, pushXs8, pushXs9, pushXs10, pushXs11, pushXs12\n\n\n## Small\n\n@docs pushSm0, pushSm1, pushSm2, pushSm3, pushSm4, pushSm5, pushSm6, pushSm7, pushSm8, pushSm9, pushSm10, pushSm11, pushSm12\n\n\n## Medium\n\n@docs pushMd0, pushMd1, pushMd2, pushMd3, pushMd4, pushMd5, pushMd6, pushMd7, pushMd8, pushMd9, pushMd10, pushMd11, pushMd12\n\n\n## Large\n\n@docs pushLg0, pushLg1, pushLg2, pushLg3, pushLg4, pushLg5, pushLg6, pushLg7, pushLg8, pushLg9, pushLg10, pushLg11, pushLg12\n\n\n## Extra Large\n\n@docs pushXl0, pushXl1, pushXl2, pushXl3, pushXl4, pushXl5, pushXl6, pushXl7, pushXl8, pushXl9, pushXl10, pushXl11, pushXl12\n\n\n# Order\n\n\n## Extra Small\n\n@docs orderXsFirst, orderXs1, orderXs2, orderXs3, orderXs4, orderXs5, orderXs6, orderXs7, orderXs8, orderXs9, orderXs10, orderXs11, orderXs12, orderXsLast\n\n\n## Small\n\n@docs orderSmFirst, orderSm1, orderSm2, orderSm3, orderSm4, orderSm5, orderSm6, orderSm7, orderSm8, orderSm9, orderSm10, orderSm11, orderSm12, orderSmLast\n\n\n## Medium\n\n@docs orderMdFirst, orderMd1, orderMd2, orderMd3, orderMd4, orderMd5, orderMd6, orderMd7, orderMd8, orderMd9, orderMd10, orderMd11, orderMd12, orderMdLast\n\n\n## Large\n\n@docs orderLgFirst, orderLg1, orderLg2, orderLg3, orderLg4, orderLg5, orderLg6, orderLg7, orderLg8, orderLg9, orderLg10, orderLg11, orderLg12, orderLgLast\n\n\n## Extra Large\n\n@docs orderXlFirst, orderXl1, orderXl2, orderXl3, orderXl4, orderXl5, orderXl6, orderXl7, orderXl8, orderXl9, orderXl10, orderXl11, orderXl12, orderXlLast\n\n\n# Misc\n\n@docs attrs, textAlign, 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": "orderLg1", "comment": " ", "type": "Option msg" }, { "name": "orderLg10", "comment": " ", "type": "Option msg" }, { "name": "orderLg11", "comment": " ", "type": "Option msg" }, { "name": "orderLg12", "comment": " ", "type": "Option msg" }, { "name": "orderLg2", "comment": " ", "type": "Option msg" }, { "name": "orderLg3", "comment": " ", "type": "Option msg" }, { "name": "orderLg4", "comment": " ", "type": "Option msg" }, { "name": "orderLg5", "comment": " ", "type": "Option msg" }, { "name": "orderLg6", "comment": " ", "type": "Option msg" }, { "name": "orderLg7", "comment": " ", "type": "Option msg" }, { "name": "orderLg8", "comment": " ", "type": "Option msg" }, { "name": "orderLg9", "comment": " ", "type": "Option msg" }, { "name": "orderLgFirst", "comment": " ", "type": "Option msg" }, { "name": "orderLgLast", "comment": " ", "type": "Option msg" }, { "name": "orderMd1", "comment": " ", "type": "Option msg" }, { "name": "orderMd10", "comment": " ", "type": "Option msg" }, { "name": "orderMd11", "comment": " ", "type": "Option msg" }, { "name": "orderMd12", "comment": " ", "type": "Option msg" }, { "name": "orderMd2", "comment": " ", "type": "Option msg" }, { "name": "orderMd3", "comment": " ", "type": "Option msg" }, { "name": "orderMd4", "comment": " ", "type": "Option msg" }, { "name": "orderMd5", "comment": " ", "type": "Option msg" }, { "name": "orderMd6", "comment": " ", "type": "Option msg" }, { "name": "orderMd7", "comment": " ", "type": "Option msg" }, { "name": "orderMd8", "comment": " ", "type": "Option msg" }, { "name": "orderMd9", "comment": " ", "type": "Option msg" }, { "name": "orderMdFirst", "comment": " ", "type": "Option msg" }, { "name": "orderMdLast", "comment": " ", "type": "Option msg" }, { "name": "orderSm1", "comment": " ", "type": "Option msg" }, { "name": "orderSm10", "comment": " ", "type": "Option msg" }, { "name": "orderSm11", "comment": " ", "type": "Option msg" }, { "name": "orderSm12", "comment": " ", "type": "Option msg" }, { "name": "orderSm2", "comment": " ", "type": "Option msg" }, { "name": "orderSm3", "comment": " ", "type": "Option msg" }, { "name": "orderSm4", "comment": " ", "type": "Option msg" }, { "name": "orderSm5", "comment": " ", "type": "Option msg" }, { "name": "orderSm6", "comment": " ", "type": "Option msg" }, { "name": "orderSm7", "comment": " ", "type": "Option msg" }, { "name": "orderSm8", "comment": " ", "type": "Option msg" }, { "name": "orderSm9", "comment": " ", "type": "Option msg" }, { "name": "orderSmFirst", "comment": " ", "type": "Option msg" }, { "name": "orderSmLast", "comment": " ", "type": "Option msg" }, { "name": "orderXl1", "comment": " ", "type": "Option msg" }, { "name": "orderXl10", "comment": " ", "type": "Option msg" }, { "name": "orderXl11", "comment": " ", "type": "Option msg" }, { "name": "orderXl12", "comment": " ", "type": "Option msg" }, { "name": "orderXl2", "comment": " ", "type": "Option msg" }, { "name": "orderXl3", "comment": " ", "type": "Option msg" }, { "name": "orderXl4", "comment": " ", "type": "Option msg" }, { "name": "orderXl5", "comment": " ", "type": "Option msg" }, { "name": "orderXl6", "comment": " ", "type": "Option msg" }, { "name": "orderXl7", "comment": " ", "type": "Option msg" }, { "name": "orderXl8", "comment": " ", "type": "Option msg" }, { "name": "orderXl9", "comment": " ", "type": "Option msg" }, { "name": "orderXlFirst", "comment": " ", "type": "Option msg" }, { "name": "orderXlLast", "comment": " ", "type": "Option msg" }, { "name": "orderXs1", "comment": " ", "type": "Option msg" }, { "name": "orderXs10", "comment": " ", "type": "Option msg" }, { "name": "orderXs11", "comment": " ", "type": "Option msg" }, { "name": "orderXs12", "comment": " ", "type": "Option msg" }, { "name": "orderXs2", "comment": " ", "type": "Option msg" }, { "name": "orderXs3", "comment": " ", "type": "Option msg" }, { "name": "orderXs4", "comment": " ", "type": "Option msg" }, { "name": "orderXs5", "comment": " ", "type": "Option msg" }, { "name": "orderXs6", "comment": " ", "type": "Option msg" }, { "name": "orderXs7", "comment": " ", "type": "Option msg" }, { "name": "orderXs8", "comment": " ", "type": "Option msg" }, { "name": "orderXs9", "comment": " ", "type": "Option msg" }, { "name": "orderXsFirst", "comment": " ", "type": "Option msg" }, { "name": "orderXsLast", "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": "textAlign", "comment": " You might find this function handy for aligning inline elements inside a column.\n\n Grid.col [ Col.textAlign Text.alignXsCenter ]\n\n", "type": "HAlign -> ColOption 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\n@docs topXs, topSm, topMd, topLg, topXl, middleXs, middleSm, middleMd, middleLg, middleXl, bottomXs, bottomSm, bottomMd, bottomLg, bottomXl\n\n\n# Horizontal alignment\n\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\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.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\n@docs view, config, predecessors, successors, text, button, dropdown, splitDropdown, span, Config, Input, Addon\n\n\n# Additional input flavors\n\n@docs password, datetimeLocal, date, month, time, week, number, email, url, search, tel\n\n\n# Sizing\n\n@docs large, small\n\n\n# Further customization\n\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\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\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": "dropdown", "comment": " Create a dropdown add-on.\n\nFor details see the [`Bootstrap.Dropdown`](Bootstrap-Dropdown) module.\n\n", "type": "State -> { toggleMsg : State -> msg, toggleButton : DropdownToggle msg, options : List (DropdownOption msg), items : List (DropdownItem msg) } -> Addon 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\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\n", "type": "List (Attribute msg) -> List (Html msg) -> Addon msg" }, { "name": "splitDropdown", "comment": " Create a split dropdown add-on.\n\nFor details see the [`Bootstrap.Dropdown`](Bootstrap-Dropdown) module.\n\n", "type": "State -> { toggleMsg : State -> msg, toggleButton : SplitDropdownToggle msg, options : List (DropdownOption msg), items : List (DropdownItem 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\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.Card.Block", "comment": " Blocks are the main content elements withing a Card.\n\n\n# Title\n\n@docs titleH1, titleH2, titleH3, titleH4, titleH5, titleH6\n\n\n# Items\n\n@docs link, text, quote, custom, Item\n\n\n# Options\n\n@docs align, primary, secondary, success, info, warning, danger, light, dark, textColor, attrs, Option\n\n", "unions": [], "aliases": [ { "name": "Item", "comment": " Opaque type representing a legal card block child element\n", "args": [ "msg" ], "type": "BlockItem msg" }, { "name": "Option", "comment": " Opaque type representing options for styling a card block\n", "args": [ "msg" ], "type": "BlockOption msg" } ], "values": [ { "name": "align", "comment": " Option to specify horizontal alignment of a card block item\n\n Block.align Text.xs\n\n", "type": "HAlign -> Option msg" }, { "name": "attrs", "comment": " When you need to customize a block item with standard Html.Attribute attributes use this function\n", "type": "List (Attribute msg) -> Option msg" }, { "name": "custom", "comment": " Add a custom HTML element to be displayed in a Card block\n", "type": "Html msg -> Item msg" }, { "name": "danger", "comment": " Give blocks a danger background color\n", "type": "Option msg" }, { "name": "dark", "comment": " Give blocks a dark background color\n", "type": "Option msg" }, { "name": "info", "comment": " Give blocks a info background color\n", "type": "Option msg" }, { "name": "light", "comment": " Give blocks a light background color\n", "type": "Option 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\n", "type": "List (Attribute msg) -> List (Html msg) -> Item msg" }, { "name": "primary", "comment": " Give blocks a primary background color\n", "type": "Option msg" }, { "name": "quote", "comment": " Create a block quote element\n\n - `attributes` List of attributes\n - `children` List of child elements\n\n", "type": "List (Attribute msg) -> List (Html msg) -> Item msg" }, { "name": "secondary", "comment": " Give blocks a secondary background color\n", "type": "Option msg" }, { "name": "success", "comment": " Give blocks a success background color\n", "type": "Option msg" }, { "name": "text", "comment": " Create a card text element\n\n - `attributes` List of attributes\n - `children` List of child elements\n\n", "type": "List (Attribute msg) -> List (Html msg) -> Item msg" }, { "name": "textColor", "comment": " Set the text color used within a block. |\n", "type": "Color -> Option msg" }, { "name": "titleH1", "comment": " Create a block h1 title\n\n - `attributes` List of attributes\n - `children` List of child elements\n\n", "type": "List (Attribute msg) -> List (Html msg) -> Item msg" }, { "name": "titleH2", "comment": " Create a block h2 title\n\n - `attributes` List of attributes\n - `children` List of child elements\n\n", "type": "List (Attribute msg) -> List (Html msg) -> Item msg" }, { "name": "titleH3", "comment": " Create a block h3 title\n\n - `attributes` List of attributes\n - `children` List of child elements\n\n", "type": "List (Attribute msg) -> List (Html msg) -> Item msg" }, { "name": "titleH4", "comment": " Create a block h4 title\n\n - `attributes` List of attributes\n - `children` List of child elements\n\n", "type": "List (Attribute msg) -> List (Html msg) -> Item msg" }, { "name": "titleH5", "comment": " Create a block h5 title\n\n - `attributes` List of attributes\n - `children` List of child elements\n\n", "type": "List (Attribute msg) -> List (Html msg) -> Item msg" }, { "name": "titleH6", "comment": " Create a block h6 title\n\n - `attributes` List of attributes\n - `children` List of child elements\n\n", "type": "List (Attribute msg) -> List (Html msg) -> Item msg" }, { "name": "warning", "comment": " Give blocks a warning background color\n", "type": "Option msg" } ], "binops": [] }, { "name": "Bootstrap.Pagination", "comment": " Module for creating a Boostrap Pagination control, to indicate a series of related content exists across multiple pages.\n\n\n## Simple list example\n\n import Bootstrap.Pagination as Pagination\n import Bootstrap.HAlign as HAlign\n\n simplePaginationList : Model -> Html Msg\n simplePaginationList model =\n Pagination.defaultConfig\n |> Pagination.ariaLabel \"Pagination\"\n |> Pagination HAlign.centerXs\n |> Pagination.large\n |> Pagination.itemsList\n { selectedMsg = PaginationMsg\n , prevItem = Just <| Pagination.ListItem [] [ text \"Previous\" ]\n , nextItem = Just <| Pagination.ListItem [] [ text \"Next\" ]\n , activeIdx = model.activePageIdx\n , data = [ 1, 2, 3, 4, 5 ] -- You'd typically generate this from your model somehow !\n , itemFn = \\idx _ -> Pagination.ListItem [] [ text <| toString (idx + 1) ]\n , urlFn = \\idx _ -> \"#/pages/\" ++ toString (idx + 1)\n }\n |> Pagination.view\n\n\n## Customized pagination\n\n import Bootstrap.Pagination as Pagination\n import Bootstrap.Pagination as Item\n import Bootstrap.HAlign as HAlign\n\n\n -- Not you'll also need to fill in the pagination logic yourselves (not shown for brevity)\n\n customPagination : Model -> Html Msg\n customPagination model =\n let\n myData =\n [ { icon = \"car\", name = \"Car\" }\n , { icon = \"bus\", name = \"Bus\" }\n , { icon = \"train\", name = \"Train\" }\n ]\n in\n div []\n [ h1 [] [ text \"Pagination\" ]\n , Pagination.defaultConfig\n |> Pagination.ariaLabel \"Pagination\"\n |> Pagination.align HAlign.centerXs\n |> Pagination.large\n |> Pagination.items\n ([ Item.item\n |> Item.span [ class \"custom-page-item\" ]\n [ span\n [ class \"fa fa-fast-backward\"\n , attribute \"aria-hidden\" \"true\"\n ]\n []\n , span [ class \"sr-only\" ]\n [ text \"First page\" ]\n ]\n , Item.item\n |> Item.span [ class \"custom-page-item\" ]\n [ span\n [ class \"fa fa-arrow-left\"\n , attribute \"aria-hidden\" \"true\"\n ]\n []\n , span [ class \"sr-only\" ] [ text \"Previous\" ]\n ]\n ]\n ++ (List.indexedMap\n (\\idx item ->\n Item.item\n |> Item.active (idx == model.activePageIdx)\n |> Item.span [ class \"custom-page-item\" ]\n [ span\n [ class <| \"fa fa-\" ++ item.icon\n , attribute \"aria-hidden\" \"true\"\n ]\n []\n , span [ class \"sr-only\" ] [ text item.name ]\n ]\n )\n myData\n )\n ++ [ Item.item\n |> Item.span [ class \"custom-page-item\" ]\n [ span\n [ class \"fa fa-arrow-right\"\n , attribute \"aria-hidden\" \"true\"\n ]\n []\n , span [ class \"sr-only\" ] [ text \"Next\" ]\n ]\n , Item.item\n |> Item.span [ class \"custom-page-item\" ]\n [ span\n [ class \"fa fa-fast-forward\"\n , attribute \"aria-hidden\" \"true\"\n ]\n []\n , span [ class \"sr-only\" ] [ text \"Last page\" ]\n ]\n ]\n )\n |> Pagination.view\n ]\n\n@docs defaultConfig, view\n\n\n## Customization\n\n@docs ariaLabel, small, large, attrs, listAttrs, align, items, Config\n\n\n## Simple pagination lists\n\n@docs itemsList, ListItem, ListConfig\n\n", "unions": [ { "name": "Config", "comment": " Opaque type holding the configuration options for a pagination widget.\n", "args": [ "msg" ], "cases": [] } ], "aliases": [ { "name": "ListConfig", "comment": " Record type for providing configuration for a simple pagination list with default behaviours/\n\n - **selectedMsg** - A msg that you use to keep track of the activeIdx in your model\n - **prevItem** - When provided will render a previous item link before the individual page items.\n - **nextItem** - When provided will render a next item link after the individual page items.\n - **activeIdx** - Index of currently active item in the items list.\n - **data** - List of actual data items (of any type)\n - **itemFn** - Callback function to allow you to specify what's rendered for the paginations individual page items\n - **urlFn** - Callback function to allow you to specify the href url for an individual pagination item\n\n", "args": [ "a", "msg" ], "type": "{ selectedMsg : Int -> msg, prevItem : Maybe (ListItem msg), nextItem : Maybe (ListItem msg), activeIdx : Int, data : List a, itemFn : Int -> a -> ListItem msg, urlFn : Int -> a -> String }" }, { "name": "ListItem", "comment": " Record alias for describing a pagination page item.\n", "args": [ "msg" ], "type": "{ attributes : List (Attribute msg), children : List (Html msg) }" } ], "values": [ { "name": "align", "comment": " Customize the horizontal alignment of the pagination components.\n\n import Bootstrap.Pagination as Pagination\n import Bootstrap.General.HAlign as HAlign\n\n\n Pagination.defaultConfig\n |> Pagination.align HAlign.centerXs\n\n", "type": "HAlign -> Config msg -> Config msg" }, { "name": "ariaLabel", "comment": " Provide screen readers a helpful descriptive text for your pagination widget.\n", "type": "String -> Config msg -> Config msg" }, { "name": "attrs", "comment": " Customize the root nav element with std. Html.Attribute(s) for the pagination.\n", "type": "List (Attribute msg) -> Config msg -> Config msg" }, { "name": "defaultConfig", "comment": " Provides a default configuration which you can configure further using the various customization functions.\n", "type": "Config msg" }, { "name": "items", "comment": " Configure the items to be shown in the pagination.\n", "type": "List (Item msg) -> Config msg -> Config msg" }, { "name": "itemsList", "comment": " Create a simple default pagination list.\n\n import Bootstrap.Pagination as Pagination\n\n viewPagination : Model -> Html Msg\n viewPagination model =\n Pagination.defaultConfig\n |> Pagination.itemsList\n { selectedMsg = PaginationMsg\n , prevItem = Just <| Pagination.ListItem [] [ text \"Previous\" ]\n , nextItem = Just <| Pagination.ListItem [] [ text \"Next\" ]\n , activeIdx = model.activePageIdx\n , data = [ 1, 2, 3, 4, 5 ] -- You'd typically generate this from your model somehow !\n , itemFn = \\idx _ -> Pagination.ListItem [] [ text <| toString (idx + 1) ]\n , urlFn = \\idx _ -> \"#/pages/\" ++ toString (idx + 1)\n }\n\n", "type": "ListConfig a msg -> Config msg -> Config msg" }, { "name": "large", "comment": " Configure the pagination and its control to be larger.\n", "type": "Config msg -> Config msg" }, { "name": "listAttrs", "comment": " Customize the pagination ul element with std. Html.Attribute(s) for the pagination.\n", "type": "List (Attribute msg) -> Config msg -> Config msg" }, { "name": "small", "comment": " Configure the pagination and its control to be smaller.\n", "type": "Config msg -> Config msg" }, { "name": "view", "comment": " Takes a pagination config and renders it to std Elm Html.\n", "type": "Config msg -> Html msg" } ], "binops": [] }, { "name": "Bootstrap.Carousel", "comment": " A carousel is a slideshow for cycling through a series of content.\n\n\n# Model\n\n@docs State, StateOptions, initialState, initialStateWithOptions, defaultStateOptions, Cycling\n\n\n# Update\n\n@docs update, Msg, next, prev, toSlide, pause, cycle\n\n\n# View\n\n@docs Config, config, view, slides, withControls, withIndicators\n\n\n# Subscriptions\n\n@docs subscriptions\n\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\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 =\n initialStateWithOptions myOptions\n\n", "type": "StateOptions -> State" }, { "name": "next", "comment": " Move the carousel to the next slide.\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\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\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\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\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\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.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**Wiring needed**\n\n import Bootstrap.Dropdown as Dropdown\n import Bootstrap.Button as Button\n\n\n -- .. etc\n -- Model\n\n type alias Model =\n { myDrop1State : Dropdown.State\n , myDrop1State : Dropdown.State\n }\n\n\n -- Msg\n\n type Msg\n = MyDrop1Msg Dropdown.State\n | MyDrop2Msg Dropdown.State\n\n\n -- init\n\n init : ( Model, Cmd Msg )\n init =\n ( { myDrop1State = Dropdown.initialState\n , myDrop2State = Dropdown.initialState\n }\n , Cmd.none\n )\n\n\n -- update\n\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\n -- ... and cases for the drop down actions\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 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\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# Dropdown\n\n@docs dropdown, toggle, DropdownToggle\n\n\n## Options\n\n@docs dropUp, dropLeft, dropRight, alignMenuRight, attrs, menuAttrs, DropdownOption\n\n\n# Dropdown items\n\n@docs anchorItem, buttonItem, divider, header, customItem, DropdownItem\n\n\n# Split dropdown\n\n@docs splitDropdown, splitToggle, SplitToggleConfig, SplitDropdownToggle\n\n\n# Required wiring\n\n@docs subscriptions, initialState, State\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 - `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\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\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\n", "type": "List (Attribute msg) -> List (Html msg) -> DropdownItem msg" }, { "name": "customItem", "comment": " Creates a dropdown item from any html element\n\n - `child` Child element\n\n", "type": "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\n", "type": "DropdownItem msg" }, { "name": "dropLeft", "comment": " Show menu to the left of the button.\n", "type": "DropdownOption msg" }, { "name": "dropRight", "comment": " Show menu to the right of the button.\n", "type": "DropdownOption 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\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\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 - `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 subscriptions : Model -> Sub Msg\n subscriptions model =\n Sub.batch\n [ Dropdown.subscriptions model.myDrop1State MyDrop1Msg\n , Dropdown.subscriptions model.myDrop2State MyDrop2Msg\n\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\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\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\n@docs small, large, vertical, attrs, Option\n\n\n# Button toolbar\n\n@docs toolbar, buttonGroupItem, linkButtonGroupItem, radioButtonGroupItem\n@docs checkboxButtonGroupItem, GroupItem\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.buttonGroup\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\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\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\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 - `attributes` List of attributes to customize the toolbar element\n - `items` List of button group (items)\n\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.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\n# General\n\n@docs Config, view, config\n\n\n# Customization\n\n@docs asGroup, disabled, children, legend, attrs\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\n", "type": "Config msg -> Html msg" } ], "binops": [] }, { "name": "Bootstrap.Form.Checkbox", "comment": " This module allows you to create Bootstrap styled checkboxes.\n\n\n# Creating\n\n@docs checkbox, custom\n\n\n# Options\n\n@docs id, checked, inline, indeterminate, disabled, onCheck, attrs, success, danger, Option\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.id \"myChk\"\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.id \"myCustomChk\"\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": "id", "comment": " Set the id for the checkbox. Will automatically set the for attribute for the label\n\nNOTE: You have to use this for custom checkboxes.\n\n", "type": "String -> 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\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" } ], "binops": [] }, { "name": "Bootstrap.Utilities.Spacing", "comment": " Bootstrap includes a wide range of shorthand responsive margin and padding utility classes to modify an element’s appearance.\n\n\n# Margins\n\n@docs m0, m1, m2, m3, m4, m5, mAuto, mt0, mt1, mt2, mt3, mt4, mt5, mtAuto, mb0, mb1, mb2, mb3, mb4, mb5, mbAuto, ml0, ml1, ml2, ml3, ml4, ml5, mlAuto, mr0, mr1, mr2, mr3, mr4, mr5, mrAuto, mx0, mx1, mx2, mx3, mx4, mx5, mxAuto, my0, my1, my2, my3, my4, my5, myAuto, m0Sm, m1Sm, m2Sm, m3Sm, m4Sm, m5Sm, mAutoSm, mt0Sm, mt1Sm, mt2Sm, mt3Sm, mt4Sm, mt5Sm, mtAutoSm, mb0Sm, mb1Sm, mb2Sm, mb3Sm, mb4Sm, mb5Sm, mbAutoSm, ml0Sm, ml1Sm, ml2Sm, ml3Sm, ml4Sm, ml5Sm, mlAutoSm, mr0Sm, mr1Sm, mr2Sm, mr3Sm, mr4Sm, mr5Sm, mrAutoSm, mx0Sm, mx1Sm, mx2Sm, mx3Sm, mx4Sm, mx5Sm, mxAutoSm, my0Sm, my1Sm, my2Sm, my3Sm, my4Sm, my5Sm, myAutoSm, m0Md, m1Md, m2Md, m3Md, m4Md, m5Md, mAutoMd, mt0Md, mt1Md, mt2Md, mt3Md, mt4Md, mt5Md, mtAutoMd, mb0Md, mb1Md, mb2Md, mb3Md, mb4Md, mb5Md, mbAutoMd, ml0Md, ml1Md, ml2Md, ml3Md, ml4Md, ml5Md, mlAutoMd, mr0Md, mr1Md, mr2Md, mr3Md, mr4Md, mr5Md, mrAutoMd, mx0Md, mx1Md, mx2Md, mx3Md, mx4Md, mx5Md, mxAutoMd, my0Md, my1Md, my2Md, my3Md, my4Md, my5Md, myAutoMd, m0Lg, m1Lg, m2Lg, m3Lg, m4Lg, m5Lg, mAutoLg, mt0Lg, mt1Lg, mt2Lg, mt3Lg, mt4Lg, mt5Lg, mtAutoLg, mb0Lg, mb1Lg, mb2Lg, mb3Lg, mb4Lg, mb5Lg, mbAutoLg, ml0Lg, ml1Lg, ml2Lg, ml3Lg, ml4Lg, ml5Lg, mlAutoLg, mr0Lg, mr1Lg, mr2Lg, mr3Lg, mr4Lg, mr5Lg, mrAutoLg, mx0Lg, mx1Lg, mx2Lg, mx3Lg, mx4Lg, mx5Lg, mxAutoLg, my0Lg, my1Lg, my2Lg, my3Lg, my4Lg, my5Lg, myAutoLg, m0Xl, m1Xl, m2Xl, m3Xl, m4Xl, m5Xl, mAutoXl, mt0Xl, mt1Xl, mt2Xl, mt3Xl, mt4Xl, mt5Xl, mtAutoXl, mb0Xl, mb1Xl, mb2Xl, mb3Xl, mb4Xl, mb5Xl, mbAutoXl, ml0Xl, ml1Xl, ml2Xl, ml3Xl, ml4Xl, ml5Xl, mlAutoXl, mr0Xl, mr1Xl, mr2Xl, mr3Xl, mr4Xl, mr5Xl, mrAutoXl, mx0Xl, mx1Xl, mx2Xl, mx3Xl, mx4Xl, mx5Xl, mxAutoXl, my0Xl, my1Xl, my2Xl, my3Xl, my4Xl, my5Xl, myAutoXl\n\n\n# Padding\n\n@docs p0, p1, p2, p3, p4, p5, pt0, pt1, pt2, pt3, pt4, pt5, pb0, pb1, pb2, pb3, pb4, pb5, pl0, pl1, pl2, pl3, pl4, pl5, pr0, pr1, pr2, pr3, pr4, pr5, px0, px1, px2, px3, px4, px5, py0, py1, py2, py3, py4, py5, p0Sm, p1Sm, p2Sm, p3Sm, p4Sm, p5Sm, pt0Sm, pt1Sm, pt2Sm, pt3Sm, pt4Sm, pt5Sm, pb0Sm, pb1Sm, pb2Sm, pb3Sm, pb4Sm, pb5Sm, pl0Sm, pl1Sm, pl2Sm, pl3Sm, pl4Sm, pl5Sm, pr0Sm, pr1Sm, pr2Sm, pr3Sm, pr4Sm, pr5Sm, px0Sm, px1Sm, px2Sm, px3Sm, px4Sm, px5Sm, py0Sm, py1Sm, py2Sm, py3Sm, py4Sm, py5Sm, p0Md, p1Md, p2Md, p3Md, p4Md, p5Md, pt0Md, pt1Md, pt2Md, pt3Md, pt4Md, pt5Md, pb0Md, pb1Md, pb2Md, pb3Md, pb4Md, pb5Md, pl0Md, pl1Md, pl2Md, pl3Md, pl4Md, pl5Md, pr0Md, pr1Md, pr2Md, pr3Md, pr4Md, pr5Md, px0Md, px1Md, px2Md, px3Md, px4Md, px5Md, py0Md, py1Md, py2Md, py3Md, py4Md, py5Md, p0Lg, p1Lg, p2Lg, p3Lg, p4Lg, p5Lg, pt0Lg, pt1Lg, pt2Lg, pt3Lg, pt4Lg, pt5Lg, pb0Lg, pb1Lg, pb2Lg, pb3Lg, pb4Lg, pb5Lg, pl0Lg, pl1Lg, pl2Lg, pl3Lg, pl4Lg, pl5Lg, pr0Lg, pr1Lg, pr2Lg, pr3Lg, pr4Lg, pr5Lg, px0Lg, px1Lg, px2Lg, px3Lg, px4Lg, px5Lg, py0Lg, py1Lg, py2Lg, py3Lg, py4Lg, py5Lg, p0Xl, p1Xl, p2Xl, p3Xl, p4Xl, p5Xl, pt0Xl, pt1Xl, pt2Xl, pt3Xl, pt4Xl, pt5Xl, pb0Xl, pb1Xl, pb2Xl, pb3Xl, pb4Xl, pb5Xl, pl0Xl, pl1Xl, pl2Xl, pl3Xl, pl4Xl, pl5Xl, pr0Xl, pr1Xl, pr2Xl, pr3Xl, pr4Xl, pr5Xl, px0Xl, px1Xl, px2Xl, px3Xl, px4Xl, px5Xl, py0Xl, py1Xl, py2Xl, py3Xl, py4Xl, py5Xl\n\n", "unions": [], "aliases": [], "values": [ { "name": "m0", "comment": " Set margin to 0.\n", "type": "Attribute msg" }, { "name": "m0Lg", "comment": " Set margin to 0 applicable from breakpoint LG.\n", "type": "Attribute msg" }, { "name": "m0Md", "comment": " Set margin to 0 applicable from breakpoint MD.\n", "type": "Attribute msg" }, { "name": "m0Sm", "comment": " Set margin to 0 applicable from breakpoint SM.\n", "type": "Attribute msg" }, { "name": "m0Xl", "comment": " Set margin to 0 applicable from breakpoint XL.\n", "type": "Attribute msg" }, { "name": "m1", "comment": " Set margin to 1.\n", "type": "Attribute msg" }, { "name": "m1Lg", "comment": " Set margin to 1 applicable from breakpoint LG.\n", "type": "Attribute msg" }, { "name": "m1Md", "comment": " Set margin to 1 applicable from breakpoint MD.\n", "type": "Attribute msg" }, { "name": "m1Sm", "comment": " Set margin to 1 applicable from breakpoint SM.\n", "type": "Attribute msg" }, { "name": "m1Xl", "comment": " Set margin to 1 applicable from breakpoint XL.\n", "type": "Attribute msg" }, { "name": "m2", "comment": " Set margin to 2.\n", "type": "Attribute msg" }, { "name": "m2Lg", "comment": " Set margin to 2 applicable from breakpoint LG.\n", "type": "Attribute msg" }, { "name": "m2Md", "comment": " Set margin to 2 applicable from breakpoint MD.\n", "type": "Attribute msg" }, { "name": "m2Sm", "comment": " Set margin to 2 applicable from breakpoint SM.\n", "type": "Attribute msg" }, { "name": "m2Xl", "comment": " Set margin to 2 applicable from breakpoint XL.\n", "type": "Attribute msg" }, { "name": "m3", "comment": " Set margin to 3.\n", "type": "Attribute msg" }, { "name": "m3Lg", "comment": " Set margin to 3 applicable from breakpoint LG.\n", "type": "Attribute msg" }, { "name": "m3Md", "comment": " Set margin to 3 applicable from breakpoint MD.\n", "type": "Attribute msg" }, { "name": "m3Sm", "comment": " Set margin to 3 applicable from breakpoint SM.\n", "type": "Attribute msg" }, { "name": "m3Xl", "comment": " Set margin to 3 applicable from breakpoint XL.\n", "type": "Attribute msg" }, { "name": "m4", "comment": " Set margin to 4.\n", "type": "Attribute msg" }, { "name": "m4Lg", "comment": " Set margin to 4 applicable from breakpoint LG.\n", "type": "Attribute msg" }, { "name": "m4Md", "comment": " Set margin to 4 applicable from breakpoint MD.\n", "type": "Attribute msg" }, { "name": "m4Sm", "comment": " Set margin to 4 applicable from breakpoint SM.\n", "type": "Attribute msg" }, { "name": "m4Xl", "comment": " Set margin to 4 applicable from breakpoint XL.\n", "type": "Attribute msg" }, { "name": "m5", "comment": " Set margin to 5.\n", "type": "Attribute msg" }, { "name": "m5Lg", "comment": " Set margin to 5 applicable from breakpoint LG.\n", "type": "Attribute msg" }, { "name": "m5Md", "comment": " Set margin to 5 applicable from breakpoint MD.\n", "type": "Attribute msg" }, { "name": "m5Sm", "comment": " Set margin to 5 applicable from breakpoint SM.\n", "type": "Attribute msg" }, { "name": "m5Xl", "comment": " Set margin to 5 applicable from breakpoint XL.\n", "type": "Attribute msg" }, { "name": "mAuto", "comment": " Set margin to auto.\n", "type": "Attribute msg" }, { "name": "mAutoLg", "comment": " Set margin to auto applicable from breakpoint LG.\n", "type": "Attribute msg" }, { "name": "mAutoMd", "comment": " Set margin to auto applicable from breakpoint MD.\n", "type": "Attribute msg" }, { "name": "mAutoSm", "comment": " Set margin to auto applicable from breakpoint SM.\n", "type": "Attribute msg" }, { "name": "mAutoXl", "comment": " Set margin to auto applicable from breakpoint XL.\n", "type": "Attribute msg" }, { "name": "mb0", "comment": " Set margin bottom to 0.\n", "type": "Attribute msg" }, { "name": "mb0Lg", "comment": " Set margin bottom to 0 applicable from breakpoint LG.\n", "type": "Attribute msg" }, { "name": "mb0Md", "comment": " Set margin bottom to 0 applicable from breakpoint MD.\n", "type": "Attribute msg" }, { "name": "mb0Sm", "comment": " Set margin bottom to 0 applicable from breakpoint SM.\n", "type": "Attribute msg" }, { "name": "mb0Xl", "comment": " Set margin bottom to 0 applicable from breakpoint XL.\n", "type": "Attribute msg" }, { "name": "mb1", "comment": " Set margin bottom to 1.\n", "type": "Attribute msg" }, { "name": "mb1Lg", "comment": " Set margin bottom to 1 applicable from breakpoint LG.\n", "type": "Attribute msg" }, { "name": "mb1Md", "comment": " Set margin bottom to 1 applicable from breakpoint MD.\n", "type": "Attribute msg" }, { "name": "mb1Sm", "comment": " Set margin bottom to 1 applicable from breakpoint SM.\n", "type": "Attribute msg" }, { "name": "mb1Xl", "comment": " Set margin bottom to 1 applicable from breakpoint XL.\n", "type": "Attribute msg" }, { "name": "mb2", "comment": " Set margin bottom to 2.\n", "type": "Attribute msg" }, { "name": "mb2Lg", "comment": " Set margin bottom to 2 applicable from breakpoint LG.\n", "type": "Attribute msg" }, { "name": "mb2Md", "comment": " Set margin bottom to 2 applicable from breakpoint MD.\n", "type": "Attribute msg" }, { "name": "mb2Sm", "comment": " Set margin bottom to 2 applicable from breakpoint SM.\n", "type": "Attribute msg" }, { "name": "mb2Xl", "comment": " Set margin bottom to 2 applicable from breakpoint XL.\n", "type": "Attribute msg" }, { "name": "mb3", "comment": " Set margin bottom to 3.\n", "type": "Attribute msg" }, { "name": "mb3Lg", "comment": " Set margin bottom to 3 applicable from breakpoint LG.\n", "type": "Attribute msg" }, { "name": "mb3Md", "comment": " Set margin bottom to 3 applicable from breakpoint MD.\n", "type": "Attribute msg" }, { "name": "mb3Sm", "comment": " Set margin bottom to 3 applicable from breakpoint SM.\n", "type": "Attribute msg" }, { "name": "mb3Xl", "comment": " Set margin bottom to 3 applicable from breakpoint XL.\n", "type": "Attribute msg" }, { "name": "mb4", "comment": " Set margin bottom to 4.\n", "type": "Attribute msg" }, { "name": "mb4Lg", "comment": " Set margin bottom to 4 applicable from breakpoint LG.\n", "type": "Attribute msg" }, { "name": "mb4Md", "comment": " Set margin bottom to 4 applicable from breakpoint MD.\n", "type": "Attribute msg" }, { "name": "mb4Sm", "comment": " Set margin bottom to 4 applicable from breakpoint SM.\n", "type": "Attribute msg" }, { "name": "mb4Xl", "comment": " Set margin bottom to 4 applicable from breakpoint XL.\n", "type": "Attribute msg" }, { "name": "mb5", "comment": " Set margin bottom to 5.\n", "type": "Attribute msg" }, { "name": "mb5Lg", "comment": " Set margin bottom to 5 applicable from breakpoint LG.\n", "type": "Attribute msg" }, { "name": "mb5Md", "comment": " Set margin bottom to 5 applicable from breakpoint MD.\n", "type": "Attribute msg" }, { "name": "mb5Sm", "comment": " Set margin bottom to 5 applicable from breakpoint SM.\n", "type": "Attribute msg" }, { "name": "mb5Xl", "comment": " Set margin bottom to 5 applicable from breakpoint XL.\n", "type": "Attribute msg" }, { "name": "mbAuto", "comment": " Set margin bottom to auto.\n", "type": "Attribute msg" }, { "name": "mbAutoLg", "comment": " Set margin bottom to auto applicable from breakpoint LG.\n", "type": "Attribute msg" }, { "name": "mbAutoMd", "comment": " Set margin bottom to auto applicable from breakpoint MD.\n", "type": "Attribute msg" }, { "name": "mbAutoSm", "comment": " Set margin bottom to auto applicable from breakpoint SM.\n", "type": "Attribute msg" }, { "name": "mbAutoXl", "comment": " Set margin bottom to auto applicable from breakpoint XL.\n", "type": "Attribute msg" }, { "name": "ml0", "comment": " Set margin left to 0.\n", "type": "Attribute msg" }, { "name": "ml0Lg", "comment": " Set margin left to 0 applicable from breakpoint LG.\n", "type": "Attribute msg" }, { "name": "ml0Md", "comment": " Set margin left to 0 applicable from breakpoint MD.\n", "type": "Attribute msg" }, { "name": "ml0Sm", "comment": " Set margin left to 0 applicable from breakpoint SM.\n", "type": "Attribute msg" }, { "name": "ml0Xl", "comment": " Set margin left to 0 applicable from breakpoint XL.\n", "type": "Attribute msg" }, { "name": "ml1", "comment": " Set margin left to 1.\n", "type": "Attribute msg" }, { "name": "ml1Lg", "comment": " Set margin left to 1 applicable from breakpoint LG.\n", "type": "Attribute msg" }, { "name": "ml1Md", "comment": " Set margin left to 1 applicable from breakpoint MD.\n", "type": "Attribute msg" }, { "name": "ml1Sm", "comment": " Set margin left to 1 applicable from breakpoint SM.\n", "type": "Attribute msg" }, { "name": "ml1Xl", "comment": " Set margin left to 1 applicable from breakpoint XL.\n", "type": "Attribute msg" }, { "name": "ml2", "comment": " Set margin left to 2.\n", "type": "Attribute msg" }, { "name": "ml2Lg", "comment": " Set margin left to 2 applicable from breakpoint LG.\n", "type": "Attribute msg" }, { "name": "ml2Md", "comment": " Set margin left to 2 applicable from breakpoint MD.\n", "type": "Attribute msg" }, { "name": "ml2Sm", "comment": " Set margin left to 2 applicable from breakpoint SM.\n", "type": "Attribute msg" }, { "name": "ml2Xl", "comment": " Set margin left to 2 applicable from breakpoint XL.\n", "type": "Attribute msg" }, { "name": "ml3", "comment": " Set margin left to 3.\n", "type": "Attribute msg" }, { "name": "ml3Lg", "comment": " Set margin left to 3 applicable from breakpoint LG.\n", "type": "Attribute msg" }, { "name": "ml3Md", "comment": " Set margin left to 3 applicable from breakpoint MD.\n", "type": "Attribute msg" }, { "name": "ml3Sm", "comment": " Set margin left to 3 applicable from breakpoint SM.\n", "type": "Attribute msg" }, { "name": "ml3Xl", "comment": " Set margin left to 3 applicable from breakpoint XL.\n", "type": "Attribute msg" }, { "name": "ml4", "comment": " Set margin left to 4.\n", "type": "Attribute msg" }, { "name": "ml4Lg", "comment": " Set margin left to 4 applicable from breakpoint LG.\n", "type": "Attribute msg" }, { "name": "ml4Md", "comment": " Set margin left to 4 applicable from breakpoint MD.\n", "type": "Attribute msg" }, { "name": "ml4Sm", "comment": " Set margin left to 4 applicable from breakpoint SM.\n", "type": "Attribute msg" }, { "name": "ml4Xl", "comment": " Set margin left to 4 applicable from breakpoint XL.\n", "type": "Attribute msg" }, { "name": "ml5", "comment": " Set margin left to 5.\n", "type": "Attribute msg" }, { "name": "ml5Lg", "comment": " Set margin left to 5 applicable from breakpoint LG.\n", "type": "Attribute msg" }, { "name": "ml5Md", "comment": " Set margin left to 5 applicable from breakpoint MD.\n", "type": "Attribute msg" }, { "name": "ml5Sm", "comment": " Set margin left to 5 applicable from breakpoint SM.\n", "type": "Attribute msg" }, { "name": "ml5Xl", "comment": " Set margin left to 5 applicable from breakpoint XL.\n", "type": "Attribute msg" }, { "name": "mlAuto", "comment": " Set margin left to auto.\n", "type": "Attribute msg" }, { "name": "mlAutoLg", "comment": " Set margin left to auto applicable from breakpoint LG.\n", "type": "Attribute msg" }, { "name": "mlAutoMd", "comment": " Set margin left to auto applicable from breakpoint MD.\n", "type": "Attribute msg" }, { "name": "mlAutoSm", "comment": " Set margin left to auto applicable from breakpoint SM.\n", "type": "Attribute msg" }, { "name": "mlAutoXl", "comment": " Set margin left to auto applicable from breakpoint XL.\n", "type": "Attribute msg" }, { "name": "mr0", "comment": " Set margin right to 0.\n", "type": "Attribute msg" }, { "name": "mr0Lg", "comment": " Set margin right to 0 applicable from breakpoint LG.\n", "type": "Attribute msg" }, { "name": "mr0Md", "comment": " Set margin right to 0 applicable from breakpoint MD.\n", "type": "Attribute msg" }, { "name": "mr0Sm", "comment": " Set margin right to 0 applicable from breakpoint SM.\n", "type": "Attribute msg" }, { "name": "mr0Xl", "comment": " Set margin right to 0 applicable from breakpoint XL.\n", "type": "Attribute msg" }, { "name": "mr1", "comment": " Set margin right to 1.\n", "type": "Attribute msg" }, { "name": "mr1Lg", "comment": " Set margin right to 1 applicable from breakpoint LG.\n", "type": "Attribute msg" }, { "name": "mr1Md", "comment": " Set margin right to 1 applicable from breakpoint MD.\n", "type": "Attribute msg" }, { "name": "mr1Sm", "comment": " Set margin right to 1 applicable from breakpoint SM.\n", "type": "Attribute msg" }, { "name": "mr1Xl", "comment": " Set margin right to 1 applicable from breakpoint XL.\n", "type": "Attribute msg" }, { "name": "mr2", "comment": " Set margin right to 2.\n", "type": "Attribute msg" }, { "name": "mr2Lg", "comment": " Set margin right to 2 applicable from breakpoint LG.\n", "type": "Attribute msg" }, { "name": "mr2Md", "comment": " Set margin right to 2 applicable from breakpoint MD.\n", "type": "Attribute msg" }, { "name": "mr2Sm", "comment": " Set margin right to 2 applicable from breakpoint SM.\n", "type": "Attribute msg" }, { "name": "mr2Xl", "comment": " Set margin right to 2 applicable from breakpoint XL.\n", "type": "Attribute msg" }, { "name": "mr3", "comment": " Set margin right to 3.\n", "type": "Attribute msg" }, { "name": "mr3Lg", "comment": " Set margin right to 3 applicable from breakpoint LG.\n", "type": "Attribute msg" }, { "name": "mr3Md", "comment": " Set margin right to 3 applicable from breakpoint MD.\n", "type": "Attribute msg" }, { "name": "mr3Sm", "comment": " Set margin right to 3 applicable from breakpoint SM.\n", "type": "Attribute msg" }, { "name": "mr3Xl", "comment": " Set margin right to 3 applicable from breakpoint XL.\n", "type": "Attribute msg" }, { "name": "mr4", "comment": " Set margin right to 4.\n", "type": "Attribute msg" }, { "name": "mr4Lg", "comment": " Set margin right to 4 applicable from breakpoint LG.\n", "type": "Attribute msg" }, { "name": "mr4Md", "comment": " Set margin right to 4 applicable from breakpoint MD.\n", "type": "Attribute msg" }, { "name": "mr4Sm", "comment": " Set margin right to 4 applicable from breakpoint SM.\n", "type": "Attribute msg" }, { "name": "mr4Xl", "comment": " Set margin right to 4 applicable from breakpoint XL.\n", "type": "Attribute msg" }, { "name": "mr5", "comment": " Set margin right to 5.\n", "type": "Attribute msg" }, { "name": "mr5Lg", "comment": " Set margin right to 5 applicable from breakpoint LG.\n", "type": "Attribute msg" }, { "name": "mr5Md", "comment": " Set margin right to 5 applicable from breakpoint MD.\n", "type": "Attribute msg" }, { "name": "mr5Sm", "comment": " Set margin right to 5 applicable from breakpoint SM.\n", "type": "Attribute msg" }, { "name": "mr5Xl", "comment": " Set margin right to 5 applicable from breakpoint XL.\n", "type": "Attribute msg" }, { "name": "mrAuto", "comment": " Set margin right to auto.\n", "type": "Attribute msg" }, { "name": "mrAutoLg", "comment": " Set margin right to auto applicable from breakpoint LG.\n", "type": "Attribute msg" }, { "name": "mrAutoMd", "comment": " Set margin right to auto applicable from breakpoint MD.\n", "type": "Attribute msg" }, { "name": "mrAutoSm", "comment": " Set margin right to auto applicable from breakpoint SM.\n", "type": "Attribute msg" }, { "name": "mrAutoXl", "comment": " Set margin right to auto applicable from breakpoint XL.\n", "type": "Attribute msg" }, { "name": "mt0", "comment": " Set margin top to 0.\n", "type": "Attribute msg" }, { "name": "mt0Lg", "comment": " Set margin top to 0 applicable from breakpoint LG.\n", "type": "Attribute msg" }, { "name": "mt0Md", "comment": " Set margin top to 0 applicable from breakpoint MD.\n", "type": "Attribute msg" }, { "name": "mt0Sm", "comment": " Set margin top to 0 applicable from breakpoint SM.\n", "type": "Attribute msg" }, { "name": "mt0Xl", "comment": " Set margin top to 0 applicable from breakpoint XL.\n", "type": "Attribute msg" }, { "name": "mt1", "comment": " Set margin top to 1.\n", "type": "Attribute msg" }, { "name": "mt1Lg", "comment": " Set margin top to 1 applicable from breakpoint LG.\n", "type": "Attribute msg" }, { "name": "mt1Md", "comment": " Set margin top to 1 applicable from breakpoint MD.\n", "type": "Attribute msg" }, { "name": "mt1Sm", "comment": " Set margin top to 1 applicable from breakpoint SM.\n", "type": "Attribute msg" }, { "name": "mt1Xl", "comment": " Set margin top to 1 applicable from breakpoint XL.\n", "type": "Attribute msg" }, { "name": "mt2", "comment": " Set margin top to 2.\n", "type": "Attribute msg" }, { "name": "mt2Lg", "comment": " Set margin top to 2 applicable from breakpoint LG.\n", "type": "Attribute msg" }, { "name": "mt2Md", "comment": " Set margin top to 2 applicable from breakpoint MD.\n", "type": "Attribute msg" }, { "name": "mt2Sm", "comment": " Set margin top to 2 applicable from breakpoint SM.\n", "type": "Attribute msg" }, { "name": "mt2Xl", "comment": " Set margin top to 2 applicable from breakpoint XL.\n", "type": "Attribute msg" }, { "name": "mt3", "comment": " Set margin top to 3.\n", "type": "Attribute msg" }, { "name": "mt3Lg", "comment": " Set margin top to 3 applicable from breakpoint LG.\n", "type": "Attribute msg" }, { "name": "mt3Md", "comment": " Set margin top to 3 applicable from breakpoint MD.\n", "type": "Attribute msg" }, { "name": "mt3Sm", "comment": " Set margin top to 3 applicable from breakpoint SM.\n", "type": "Attribute msg" }, { "name": "mt3Xl", "comment": " Set margin top to 3 applicable from breakpoint XL.\n", "type": "Attribute msg" }, { "name": "mt4", "comment": " Set margin top to 4.\n", "type": "Attribute msg" }, { "name": "mt4Lg", "comment": " Set margin top to 4 applicable from breakpoint LG.\n", "type": "Attribute msg" }, { "name": "mt4Md", "comment": " Set margin top to 4 applicable from breakpoint MD.\n", "type": "Attribute msg" }, { "name": "mt4Sm", "comment": " Set margin top to 4 applicable from breakpoint SM.\n", "type": "Attribute msg" }, { "name": "mt4Xl", "comment": " Set margin top to 4 applicable from breakpoint XL.\n", "type": "Attribute msg" }, { "name": "mt5", "comment": " Set margin top to 5.\n", "type": "Attribute msg" }, { "name": "mt5Lg", "comment": " Set margin top to 5 applicable from breakpoint LG.\n", "type": "Attribute msg" }, { "name": "mt5Md", "comment": " Set margin top to 5 applicable from breakpoint MD.\n", "type": "Attribute msg" }, { "name": "mt5Sm", "comment": " Set margin top to 5 applicable from breakpoint SM.\n", "type": "Attribute msg" }, { "name": "mt5Xl", "comment": " Set margin top to 5 applicable from breakpoint XL.\n", "type": "Attribute msg" }, { "name": "mtAuto", "comment": " Set margin top to auto.\n", "type": "Attribute msg" }, { "name": "mtAutoLg", "comment": " Set margin top to auto applicable from breakpoint LG.\n", "type": "Attribute msg" }, { "name": "mtAutoMd", "comment": " Set margin top to auto applicable from breakpoint MD.\n", "type": "Attribute msg" }, { "name": "mtAutoSm", "comment": " Set margin top to auto applicable from breakpoint SM.\n", "type": "Attribute msg" }, { "name": "mtAutoXl", "comment": " Set margin top to auto applicable from breakpoint XL.\n", "type": "Attribute msg" }, { "name": "mx0", "comment": " Set margin left and right to 0.\n", "type": "Attribute msg" }, { "name": "mx0Lg", "comment": " Set margin left and right to 0 applicable from breakpoint LG.\n", "type": "Attribute msg" }, { "name": "mx0Md", "comment": " Set margin left and right to 0 applicable from breakpoint MD.\n", "type": "Attribute msg" }, { "name": "mx0Sm", "comment": " Set margin left and right to 0 applicable from breakpoint SM.\n", "type": "Attribute msg" }, { "name": "mx0Xl", "comment": " Set margin left and right to 0 applicable from breakpoint XL.\n", "type": "Attribute msg" }, { "name": "mx1", "comment": " Set margin left and right to 1.\n", "type": "Attribute msg" }, { "name": "mx1Lg", "comment": " Set margin left and right to 1 applicable from breakpoint LG.\n", "type": "Attribute msg" }, { "name": "mx1Md", "comment": " Set margin left and right to 1 applicable from breakpoint MD.\n", "type": "Attribute msg" }, { "name": "mx1Sm", "comment": " Set margin left and right to 1 applicable from breakpoint SM.\n", "type": "Attribute msg" }, { "name": "mx1Xl", "comment": " Set margin left and right to 1 applicable from breakpoint XL.\n", "type": "Attribute msg" }, { "name": "mx2", "comment": " Set margin left and right to 2.\n", "type": "Attribute msg" }, { "name": "mx2Lg", "comment": " Set margin left and right to 2 applicable from breakpoint LG.\n", "type": "Attribute msg" }, { "name": "mx2Md", "comment": " Set margin left and right to 2 applicable from breakpoint MD.\n", "type": "Attribute msg" }, { "name": "mx2Sm", "comment": " Set margin left and right to 2 applicable from breakpoint SM.\n", "type": "Attribute msg" }, { "name": "mx2Xl", "comment": " Set margin left and right to 2 applicable from breakpoint XL.\n", "type": "Attribute msg" }, { "name": "mx3", "comment": " Set margin left and right to 3.\n", "type": "Attribute msg" }, { "name": "mx3Lg", "comment": " Set margin left and right to 3 applicable from breakpoint LG.\n", "type": "Attribute msg" }, { "name": "mx3Md", "comment": " Set margin left and right to 3 applicable from breakpoint MD.\n", "type": "Attribute msg" }, { "name": "mx3Sm", "comment": " Set margin left and right to 3 applicable from breakpoint SM.\n", "type": "Attribute msg" }, { "name": "mx3Xl", "comment": " Set margin left and right to 3 applicable from breakpoint XL.\n", "type": "Attribute msg" }, { "name": "mx4", "comment": " Set margin left and right to 4.\n", "type": "Attribute msg" }, { "name": "mx4Lg", "comment": " Set margin left and right to 4 applicable from breakpoint LG.\n", "type": "Attribute msg" }, { "name": "mx4Md", "comment": " Set margin left and right to 4 applicable from breakpoint MD.\n", "type": "Attribute msg" }, { "name": "mx4Sm", "comment": " Set margin left and right to 4 applicable from breakpoint SM.\n", "type": "Attribute msg" }, { "name": "mx4Xl", "comment": " Set margin left and right to 4 applicable from breakpoint XL.\n", "type": "Attribute msg" }, { "name": "mx5", "comment": " Set margin left and right to 5.\n", "type": "Attribute msg" }, { "name": "mx5Lg", "comment": " Set margin left and right to 5 applicable from breakpoint LG.\n", "type": "Attribute msg" }, { "name": "mx5Md", "comment": " Set margin left and right to 5 applicable from breakpoint MD.\n", "type": "Attribute msg" }, { "name": "mx5Sm", "comment": " Set margin left and right to 5 applicable from breakpoint SM.\n", "type": "Attribute msg" }, { "name": "mx5Xl", "comment": " Set margin left and right to 5 applicable from breakpoint XL.\n", "type": "Attribute msg" }, { "name": "mxAuto", "comment": " Set margin left and right to auto.\n", "type": "Attribute msg" }, { "name": "mxAutoLg", "comment": " Set margin left and right to auto applicable from breakpoint LG.\n", "type": "Attribute msg" }, { "name": "mxAutoMd", "comment": " Set margin left and right to auto applicable from breakpoint MD.\n", "type": "Attribute msg" }, { "name": "mxAutoSm", "comment": " Set margin left and right to auto applicable from breakpoint SM.\n", "type": "Attribute msg" }, { "name": "mxAutoXl", "comment": " Set margin left and right to auto applicable from breakpoint XL.\n", "type": "Attribute msg" }, { "name": "my0", "comment": " Set margin top and bottom to 0.\n", "type": "Attribute msg" }, { "name": "my0Lg", "comment": " Set margin top and bottom to 0 applicable from breakpoint LG.\n", "type": "Attribute msg" }, { "name": "my0Md", "comment": " Set margin top and bottom to 0 applicable from breakpoint MD.\n", "type": "Attribute msg" }, { "name": "my0Sm", "comment": " Set margin top and bottom to 0 applicable from breakpoint SM.\n", "type": "Attribute msg" }, { "name": "my0Xl", "comment": " Set margin top and bottom to 0 applicable from breakpoint XL.\n", "type": "Attribute msg" }, { "name": "my1", "comment": " Set margin top and bottom to 1.\n", "type": "Attribute msg" }, { "name": "my1Lg", "comment": " Set margin top and bottom to 1 applicable from breakpoint LG.\n", "type": "Attribute msg" }, { "name": "my1Md", "comment": " Set margin top and bottom to 1 applicable from breakpoint MD.\n", "type": "Attribute msg" }, { "name": "my1Sm", "comment": " Set margin top and bottom to 1 applicable from breakpoint SM.\n", "type": "Attribute msg" }, { "name": "my1Xl", "comment": " Set margin top and bottom to 1 applicable from breakpoint XL.\n", "type": "Attribute msg" }, { "name": "my2", "comment": " Set margin top and bottom to 2.\n", "type": "Attribute msg" }, { "name": "my2Lg", "comment": " Set margin top and bottom to 2 applicable from breakpoint LG.\n", "type": "Attribute msg" }, { "name": "my2Md", "comment": " Set margin top and bottom to 2 applicable from breakpoint MD.\n", "type": "Attribute msg" }, { "name": "my2Sm", "comment": " Set margin top and bottom to 2 applicable from breakpoint SM.\n", "type": "Attribute msg" }, { "name": "my2Xl", "comment": " Set margin top and bottom to 2 applicable from breakpoint XL.\n", "type": "Attribute msg" }, { "name": "my3", "comment": " Set margin top and bottom to 3.\n", "type": "Attribute msg" }, { "name": "my3Lg", "comment": " Set margin top and bottom to 3 applicable from breakpoint LG.\n", "type": "Attribute msg" }, { "name": "my3Md", "comment": " Set margin top and bottom to 3 applicable from breakpoint MD.\n", "type": "Attribute msg" }, { "name": "my3Sm", "comment": " Set margin top and bottom to 3 applicable from breakpoint SM.\n", "type": "Attribute msg" }, { "name": "my3Xl", "comment": " Set margin top and bottom to 3 applicable from breakpoint XL.\n", "type": "Attribute msg" }, { "name": "my4", "comment": " Set margin top and bottom to 4.\n", "type": "Attribute msg" }, { "name": "my4Lg", "comment": " Set margin top and bottom to 4 applicable from breakpoint LG.\n", "type": "Attribute msg" }, { "name": "my4Md", "comment": " Set margin top and bottom to 4 applicable from breakpoint MD.\n", "type": "Attribute msg" }, { "name": "my4Sm", "comment": " Set margin top and bottom to 4 applicable from breakpoint SM.\n", "type": "Attribute msg" }, { "name": "my4Xl", "comment": " Set margin top and bottom to 4 applicable from breakpoint XL.\n", "type": "Attribute msg" }, { "name": "my5", "comment": " Set margin top and bottom to 5.\n", "type": "Attribute msg" }, { "name": "my5Lg", "comment": " Set margin top and bottom to 5 applicable from breakpoint LG.\n", "type": "Attribute msg" }, { "name": "my5Md", "comment": " Set margin top and bottom to 5 applicable from breakpoint MD.\n", "type": "Attribute msg" }, { "name": "my5Sm", "comment": " Set margin top and bottom to 5 applicable from breakpoint SM.\n", "type": "Attribute msg" }, { "name": "my5Xl", "comment": " Set margin top and bottom to 5 applicable from breakpoint XL.\n", "type": "Attribute msg" }, { "name": "myAuto", "comment": " Set margin top and bottom to auto.\n", "type": "Attribute msg" }, { "name": "myAutoLg", "comment": " Set margin top and bottom to auto applicable from breakpoint LG.\n", "type": "Attribute msg" }, { "name": "myAutoMd", "comment": " Set margin top and bottom to auto applicable from breakpoint MD.\n", "type": "Attribute msg" }, { "name": "myAutoSm", "comment": " Set margin top and bottom to auto applicable from breakpoint SM.\n", "type": "Attribute msg" }, { "name": "myAutoXl", "comment": " Set margin top and bottom to auto applicable from breakpoint XL.\n", "type": "Attribute msg" }, { "name": "p0", "comment": " Set padding to 0.\n", "type": "Attribute msg" }, { "name": "p0Lg", "comment": " Set padding to 0 applicable from breakpoint LG.\n", "type": "Attribute msg" }, { "name": "p0Md", "comment": " Set padding to 0 applicable from breakpoint MD.\n", "type": "Attribute msg" }, { "name": "p0Sm", "comment": " Set padding to 0 applicable from breakpoint SM.\n", "type": "Attribute msg" }, { "name": "p0Xl", "comment": " Set padding to 0 applicable from breakpoint XL.\n", "type": "Attribute msg" }, { "name": "p1", "comment": " Set padding to 1.\n", "type": "Attribute msg" }, { "name": "p1Lg", "comment": " Set padding to 1 applicable from breakpoint LG.\n", "type": "Attribute msg" }, { "name": "p1Md", "comment": " Set padding to 1 applicable from breakpoint MD.\n", "type": "Attribute msg" }, { "name": "p1Sm", "comment": " Set padding to 1 applicable from breakpoint SM.\n", "type": "Attribute msg" }, { "name": "p1Xl", "comment": " Set padding to 1 applicable from breakpoint XL.\n", "type": "Attribute msg" }, { "name": "p2", "comment": " Set padding to 2.\n", "type": "Attribute msg" }, { "name": "p2Lg", "comment": " Set padding to 2 applicable from breakpoint LG.\n", "type": "Attribute msg" }, { "name": "p2Md", "comment": " Set padding to 2 applicable from breakpoint MD.\n", "type": "Attribute msg" }, { "name": "p2Sm", "comment": " Set padding to 2 applicable from breakpoint SM.\n", "type": "Attribute msg" }, { "name": "p2Xl", "comment": " Set padding to 2 applicable from breakpoint XL.\n", "type": "Attribute msg" }, { "name": "p3", "comment": " Set padding to 3.\n", "type": "Attribute msg" }, { "name": "p3Lg", "comment": " Set padding to 3 applicable from breakpoint LG.\n", "type": "Attribute msg" }, { "name": "p3Md", "comment": " Set padding to 3 applicable from breakpoint MD.\n", "type": "Attribute msg" }, { "name": "p3Sm", "comment": " Set padding to 3 applicable from breakpoint SM.\n", "type": "Attribute msg" }, { "name": "p3Xl", "comment": " Set padding to 3 applicable from breakpoint XL.\n", "type": "Attribute msg" }, { "name": "p4", "comment": " Set padding to 4.\n", "type": "Attribute msg" }, { "name": "p4Lg", "comment": " Set padding to 4 applicable from breakpoint LG.\n", "type": "Attribute msg" }, { "name": "p4Md", "comment": " Set padding to 4 applicable from breakpoint MD.\n", "type": "Attribute msg" }, { "name": "p4Sm", "comment": " Set padding to 4 applicable from breakpoint SM.\n", "type": "Attribute msg" }, { "name": "p4Xl", "comment": " Set padding to 4 applicable from breakpoint XL.\n", "type": "Attribute msg" }, { "name": "p5", "comment": " Set padding to 5.\n", "type": "Attribute msg" }, { "name": "p5Lg", "comment": " Set padding to 5 applicable from breakpoint LG.\n", "type": "Attribute msg" }, { "name": "p5Md", "comment": " Set padding to 5 applicable from breakpoint MD.\n", "type": "Attribute msg" }, { "name": "p5Sm", "comment": " Set padding to 5 applicable from breakpoint SM.\n", "type": "Attribute msg" }, { "name": "p5Xl", "comment": " Set padding to 5 applicable from breakpoint XL.\n", "type": "Attribute msg" }, { "name": "pb0", "comment": " Set padding bottom to 0.\n", "type": "Attribute msg" }, { "name": "pb0Lg", "comment": " Set padding bottom to 0 applicable from breakpoint LG.\n", "type": "Attribute msg" }, { "name": "pb0Md", "comment": " Set padding bottom to 0 applicable from breakpoint MD.\n", "type": "Attribute msg" }, { "name": "pb0Sm", "comment": " Set padding bottom to 0 applicable from breakpoint SM.\n", "type": "Attribute msg" }, { "name": "pb0Xl", "comment": " Set padding bottom to 0 applicable from breakpoint XL.\n", "type": "Attribute msg" }, { "name": "pb1", "comment": " Set padding bottom to 1.\n", "type": "Attribute msg" }, { "name": "pb1Lg", "comment": " Set padding bottom to 1 applicable from breakpoint LG.\n", "type": "Attribute msg" }, { "name": "pb1Md", "comment": " Set padding bottom to 1 applicable from breakpoint MD.\n", "type": "Attribute msg" }, { "name": "pb1Sm", "comment": " Set padding bottom to 1 applicable from breakpoint SM.\n", "type": "Attribute msg" }, { "name": "pb1Xl", "comment": " Set padding bottom to 1 applicable from breakpoint XL.\n", "type": "Attribute msg" }, { "name": "pb2", "comment": " Set padding bottom to 2.\n", "type": "Attribute msg" }, { "name": "pb2Lg", "comment": " Set padding bottom to 2 applicable from breakpoint LG.\n", "type": "Attribute msg" }, { "name": "pb2Md", "comment": " Set padding bottom to 2 applicable from breakpoint MD.\n", "type": "Attribute msg" }, { "name": "pb2Sm", "comment": " Set padding bottom to 2 applicable from breakpoint SM.\n", "type": "Attribute msg" }, { "name": "pb2Xl", "comment": " Set padding bottom to 2 applicable from breakpoint XL.\n", "type": "Attribute msg" }, { "name": "pb3", "comment": " Set padding bottom to 3.\n", "type": "Attribute msg" }, { "name": "pb3Lg", "comment": " Set padding bottom to 3 applicable from breakpoint LG.\n", "type": "Attribute msg" }, { "name": "pb3Md", "comment": " Set padding bottom to 3 applicable from breakpoint MD.\n", "type": "Attribute msg" }, { "name": "pb3Sm", "comment": " Set padding bottom to 3 applicable from breakpoint SM.\n", "type": "Attribute msg" }, { "name": "pb3Xl", "comment": " Set padding bottom to 3 applicable from breakpoint XL.\n", "type": "Attribute msg" }, { "name": "pb4", "comment": " Set padding bottom to 4.\n", "type": "Attribute msg" }, { "name": "pb4Lg", "comment": " Set padding bottom to 4 applicable from breakpoint LG.\n", "type": "Attribute msg" }, { "name": "pb4Md", "comment": " Set padding bottom to 4 applicable from breakpoint MD.\n", "type": "Attribute msg" }, { "name": "pb4Sm", "comment": " Set padding bottom to 4 applicable from breakpoint SM.\n", "type": "Attribute msg" }, { "name": "pb4Xl", "comment": " Set padding bottom to 4 applicable from breakpoint XL.\n", "type": "Attribute msg" }, { "name": "pb5", "comment": " Set padding bottom to 5.\n", "type": "Attribute msg" }, { "name": "pb5Lg", "comment": " Set padding bottom to 5 applicable from breakpoint LG.\n", "type": "Attribute msg" }, { "name": "pb5Md", "comment": " Set padding bottom to 5 applicable from breakpoint MD.\n", "type": "Attribute msg" }, { "name": "pb5Sm", "comment": " Set padding bottom to 5 applicable from breakpoint SM.\n", "type": "Attribute msg" }, { "name": "pb5Xl", "comment": " Set padding bottom to 5 applicable from breakpoint XL.\n", "type": "Attribute msg" }, { "name": "pl0", "comment": " Set padding left to 0.\n", "type": "Attribute msg" }, { "name": "pl0Lg", "comment": " Set padding left to 0 applicable from breakpoint LG.\n", "type": "Attribute msg" }, { "name": "pl0Md", "comment": " Set padding left to 0 applicable from breakpoint MD.\n", "type": "Attribute msg" }, { "name": "pl0Sm", "comment": " Set padding left to 0 applicable from breakpoint SM.\n", "type": "Attribute msg" }, { "name": "pl0Xl", "comment": " Set padding left to 0 applicable from breakpoint XL.\n", "type": "Attribute msg" }, { "name": "pl1", "comment": " Set padding left to 1.\n", "type": "Attribute msg" }, { "name": "pl1Lg", "comment": " Set padding left to 1 applicable from breakpoint LG.\n", "type": "Attribute msg" }, { "name": "pl1Md", "comment": " Set padding left to 1 applicable from breakpoint MD.\n", "type": "Attribute msg" }, { "name": "pl1Sm", "comment": " Set padding left to 1 applicable from breakpoint SM.\n", "type": "Attribute msg" }, { "name": "pl1Xl", "comment": " Set padding left to 1 applicable from breakpoint XL.\n", "type": "Attribute msg" }, { "name": "pl2", "comment": " Set padding left to 2.\n", "type": "Attribute msg" }, { "name": "pl2Lg", "comment": " Set padding left to 2 applicable from breakpoint LG.\n", "type": "Attribute msg" }, { "name": "pl2Md", "comment": " Set padding left to 2 applicable from breakpoint MD.\n", "type": "Attribute msg" }, { "name": "pl2Sm", "comment": " Set padding left to 2 applicable from breakpoint SM.\n", "type": "Attribute msg" }, { "name": "pl2Xl", "comment": " Set padding left to 2 applicable from breakpoint XL.\n", "type": "Attribute msg" }, { "name": "pl3", "comment": " Set padding left to 3.\n", "type": "Attribute msg" }, { "name": "pl3Lg", "comment": " Set padding left to 3 applicable from breakpoint LG.\n", "type": "Attribute msg" }, { "name": "pl3Md", "comment": " Set padding left to 3 applicable from breakpoint MD.\n", "type": "Attribute msg" }, { "name": "pl3Sm", "comment": " Set padding left to 3 applicable from breakpoint SM.\n", "type": "Attribute msg" }, { "name": "pl3Xl", "comment": " Set padding left to 3 applicable from breakpoint XL.\n", "type": "Attribute msg" }, { "name": "pl4", "comment": " Set padding left to 4.\n", "type": "Attribute msg" }, { "name": "pl4Lg", "comment": " Set padding left to 4 applicable from breakpoint LG.\n", "type": "Attribute msg" }, { "name": "pl4Md", "comment": " Set padding left to 4 applicable from breakpoint MD.\n", "type": "Attribute msg" }, { "name": "pl4Sm", "comment": " Set padding left to 4 applicable from breakpoint SM.\n", "type": "Attribute msg" }, { "name": "pl4Xl", "comment": " Set padding left to 4 applicable from breakpoint XL.\n", "type": "Attribute msg" }, { "name": "pl5", "comment": " Set padding left to 5.\n", "type": "Attribute msg" }, { "name": "pl5Lg", "comment": " Set padding left to 5 applicable from breakpoint LG.\n", "type": "Attribute msg" }, { "name": "pl5Md", "comment": " Set padding left to 5 applicable from breakpoint MD.\n", "type": "Attribute msg" }, { "name": "pl5Sm", "comment": " Set padding left to 5 applicable from breakpoint SM.\n", "type": "Attribute msg" }, { "name": "pl5Xl", "comment": " Set padding left to 5 applicable from breakpoint XL.\n", "type": "Attribute msg" }, { "name": "pr0", "comment": " Set padding right to 0.\n", "type": "Attribute msg" }, { "name": "pr0Lg", "comment": " Set padding right to 0 applicable from breakpoint LG.\n", "type": "Attribute msg" }, { "name": "pr0Md", "comment": " Set padding right to 0 applicable from breakpoint MD.\n", "type": "Attribute msg" }, { "name": "pr0Sm", "comment": " Set padding right to 0 applicable from breakpoint SM.\n", "type": "Attribute msg" }, { "name": "pr0Xl", "comment": " Set padding right to 0 applicable from breakpoint XL.\n", "type": "Attribute msg" }, { "name": "pr1", "comment": " Set padding right to 1.\n", "type": "Attribute msg" }, { "name": "pr1Lg", "comment": " Set padding right to 1 applicable from breakpoint LG.\n", "type": "Attribute msg" }, { "name": "pr1Md", "comment": " Set padding right to 1 applicable from breakpoint MD.\n", "type": "Attribute msg" }, { "name": "pr1Sm", "comment": " Set padding right to 1 applicable from breakpoint SM.\n", "type": "Attribute msg" }, { "name": "pr1Xl", "comment": " Set padding right to 1 applicable from breakpoint XL.\n", "type": "Attribute msg" }, { "name": "pr2", "comment": " Set padding right to 2.\n", "type": "Attribute msg" }, { "name": "pr2Lg", "comment": " Set padding right to 2 applicable from breakpoint LG.\n", "type": "Attribute msg" }, { "name": "pr2Md", "comment": " Set padding right to 2 applicable from breakpoint MD.\n", "type": "Attribute msg" }, { "name": "pr2Sm", "comment": " Set padding right to 2 applicable from breakpoint SM.\n", "type": "Attribute msg" }, { "name": "pr2Xl", "comment": " Set padding right to 2 applicable from breakpoint XL.\n", "type": "Attribute msg" }, { "name": "pr3", "comment": " Set padding right to 3.\n", "type": "Attribute msg" }, { "name": "pr3Lg", "comment": " Set padding right to 3 applicable from breakpoint LG.\n", "type": "Attribute msg" }, { "name": "pr3Md", "comment": " Set padding right to 3 applicable from breakpoint MD.\n", "type": "Attribute msg" }, { "name": "pr3Sm", "comment": " Set padding right to 3 applicable from breakpoint SM.\n", "type": "Attribute msg" }, { "name": "pr3Xl", "comment": " Set padding right to 3 applicable from breakpoint XL.\n", "type": "Attribute msg" }, { "name": "pr4", "comment": " Set padding right to 4.\n", "type": "Attribute msg" }, { "name": "pr4Lg", "comment": " Set padding right to 4 applicable from breakpoint LG.\n", "type": "Attribute msg" }, { "name": "pr4Md", "comment": " Set padding right to 4 applicable from breakpoint MD.\n", "type": "Attribute msg" }, { "name": "pr4Sm", "comment": " Set padding right to 4 applicable from breakpoint SM.\n", "type": "Attribute msg" }, { "name": "pr4Xl", "comment": " Set padding right to 4 applicable from breakpoint XL.\n", "type": "Attribute msg" }, { "name": "pr5", "comment": " Set padding right to 5.\n", "type": "Attribute msg" }, { "name": "pr5Lg", "comment": " Set padding right to 5 applicable from breakpoint LG.\n", "type": "Attribute msg" }, { "name": "pr5Md", "comment": " Set padding right to 5 applicable from breakpoint MD.\n", "type": "Attribute msg" }, { "name": "pr5Sm", "comment": " Set padding right to 5 applicable from breakpoint SM.\n", "type": "Attribute msg" }, { "name": "pr5Xl", "comment": " Set padding right to 5 applicable from breakpoint XL.\n", "type": "Attribute msg" }, { "name": "pt0", "comment": " Set padding top to 0.\n", "type": "Attribute msg" }, { "name": "pt0Lg", "comment": " Set padding top to 0 applicable from breakpoint LG.\n", "type": "Attribute msg" }, { "name": "pt0Md", "comment": " Set padding top to 0 applicable from breakpoint MD.\n", "type": "Attribute msg" }, { "name": "pt0Sm", "comment": " Set padding top to 0 applicable from breakpoint SM.\n", "type": "Attribute msg" }, { "name": "pt0Xl", "comment": " Set padding top to 0 applicable from breakpoint XL.\n", "type": "Attribute msg" }, { "name": "pt1", "comment": " Set padding top to 1.\n", "type": "Attribute msg" }, { "name": "pt1Lg", "comment": " Set padding top to 1 applicable from breakpoint LG.\n", "type": "Attribute msg" }, { "name": "pt1Md", "comment": " Set padding top to 1 applicable from breakpoint MD.\n", "type": "Attribute msg" }, { "name": "pt1Sm", "comment": " Set padding top to 1 applicable from breakpoint SM.\n", "type": "Attribute msg" }, { "name": "pt1Xl", "comment": " Set padding top to 1 applicable from breakpoint XL.\n", "type": "Attribute msg" }, { "name": "pt2", "comment": " Set padding top to 2.\n", "type": "Attribute msg" }, { "name": "pt2Lg", "comment": " Set padding top to 2 applicable from breakpoint LG.\n", "type": "Attribute msg" }, { "name": "pt2Md", "comment": " Set padding top to 2 applicable from breakpoint MD.\n", "type": "Attribute msg" }, { "name": "pt2Sm", "comment": " Set padding top to 2 applicable from breakpoint SM.\n", "type": "Attribute msg" }, { "name": "pt2Xl", "comment": " Set padding top to 2 applicable from breakpoint XL.\n", "type": "Attribute msg" }, { "name": "pt3", "comment": " Set padding top to 3.\n", "type": "Attribute msg" }, { "name": "pt3Lg", "comment": " Set padding top to 3 applicable from breakpoint LG.\n", "type": "Attribute msg" }, { "name": "pt3Md", "comment": " Set padding top to 3 applicable from breakpoint MD.\n", "type": "Attribute msg" }, { "name": "pt3Sm", "comment": " Set padding top to 3 applicable from breakpoint SM.\n", "type": "Attribute msg" }, { "name": "pt3Xl", "comment": " Set padding top to 3 applicable from breakpoint XL.\n", "type": "Attribute msg" }, { "name": "pt4", "comment": " Set padding top to 4.\n", "type": "Attribute msg" }, { "name": "pt4Lg", "comment": " Set padding top to 4 applicable from breakpoint LG.\n", "type": "Attribute msg" }, { "name": "pt4Md", "comment": " Set padding top to 4 applicable from breakpoint MD.\n", "type": "Attribute msg" }, { "name": "pt4Sm", "comment": " Set padding top to 4 applicable from breakpoint SM.\n", "type": "Attribute msg" }, { "name": "pt4Xl", "comment": " Set padding top to 4 applicable from breakpoint XL.\n", "type": "Attribute msg" }, { "name": "pt5", "comment": " Set padding top to 5.\n", "type": "Attribute msg" }, { "name": "pt5Lg", "comment": " Set padding top to 5 applicable from breakpoint LG.\n", "type": "Attribute msg" }, { "name": "pt5Md", "comment": " Set padding top to 5 applicable from breakpoint MD.\n", "type": "Attribute msg" }, { "name": "pt5Sm", "comment": " Set padding top to 5 applicable from breakpoint SM.\n", "type": "Attribute msg" }, { "name": "pt5Xl", "comment": " Set padding top to 5 applicable from breakpoint XL.\n", "type": "Attribute msg" }, { "name": "px0", "comment": " Set padding left and right to 0.\n", "type": "Attribute msg" }, { "name": "px0Lg", "comment": " Set padding left and right to 0 applicable from breakpoint LG.\n", "type": "Attribute msg" }, { "name": "px0Md", "comment": " Set padding left and right to 0 applicable from breakpoint MD.\n", "type": "Attribute msg" }, { "name": "px0Sm", "comment": " Set padding left and right to 0 applicable from breakpoint SM.\n", "type": "Attribute msg" }, { "name": "px0Xl", "comment": " Set padding left and right to 0 applicable from breakpoint XL.\n", "type": "Attribute msg" }, { "name": "px1", "comment": " Set padding left and right to 1.\n", "type": "Attribute msg" }, { "name": "px1Lg", "comment": " Set padding left and right to 1 applicable from breakpoint LG.\n", "type": "Attribute msg" }, { "name": "px1Md", "comment": " Set padding left and right to 1 applicable from breakpoint MD.\n", "type": "Attribute msg" }, { "name": "px1Sm", "comment": " Set padding left and right to 1 applicable from breakpoint SM.\n", "type": "Attribute msg" }, { "name": "px1Xl", "comment": " Set padding left and right to 1 applicable from breakpoint XL.\n", "type": "Attribute msg" }, { "name": "px2", "comment": " Set padding left and right to 2.\n", "type": "Attribute msg" }, { "name": "px2Lg", "comment": " Set padding left and right to 2 applicable from breakpoint LG.\n", "type": "Attribute msg" }, { "name": "px2Md", "comment": " Set padding left and right to 2 applicable from breakpoint MD.\n", "type": "Attribute msg" }, { "name": "px2Sm", "comment": " Set padding left and right to 2 applicable from breakpoint SM.\n", "type": "Attribute msg" }, { "name": "px2Xl", "comment": " Set padding left and right to 2 applicable from breakpoint XL.\n", "type": "Attribute msg" }, { "name": "px3", "comment": " Set padding left and right to 3.\n", "type": "Attribute msg" }, { "name": "px3Lg", "comment": " Set padding left and right to 3 applicable from breakpoint LG.\n", "type": "Attribute msg" }, { "name": "px3Md", "comment": " Set padding left and right to 3 applicable from breakpoint MD.\n", "type": "Attribute msg" }, { "name": "px3Sm", "comment": " Set padding left and right to 3 applicable from breakpoint SM.\n", "type": "Attribute msg" }, { "name": "px3Xl", "comment": " Set padding left and right to 3 applicable from breakpoint XL.\n", "type": "Attribute msg" }, { "name": "px4", "comment": " Set padding left and right to 4.\n", "type": "Attribute msg" }, { "name": "px4Lg", "comment": " Set padding left and right to 4 applicable from breakpoint LG.\n", "type": "Attribute msg" }, { "name": "px4Md", "comment": " Set padding left and right to 4 applicable from breakpoint MD.\n", "type": "Attribute msg" }, { "name": "px4Sm", "comment": " Set padding left and right to 4 applicable from breakpoint SM.\n", "type": "Attribute msg" }, { "name": "px4Xl", "comment": " Set padding left and right to 4 applicable from breakpoint XL.\n", "type": "Attribute msg" }, { "name": "px5", "comment": " Set padding left and right to 5.\n", "type": "Attribute msg" }, { "name": "px5Lg", "comment": " Set padding left and right to 5 applicable from breakpoint LG.\n", "type": "Attribute msg" }, { "name": "px5Md", "comment": " Set padding left and right to 5 applicable from breakpoint MD.\n", "type": "Attribute msg" }, { "name": "px5Sm", "comment": " Set padding left and right to 5 applicable from breakpoint SM.\n", "type": "Attribute msg" }, { "name": "px5Xl", "comment": " Set padding left and right to 5 applicable from breakpoint XL.\n", "type": "Attribute msg" }, { "name": "py0", "comment": " Set padding top and bottom to 0.\n", "type": "Attribute msg" }, { "name": "py0Lg", "comment": " Set padding top and bottom to 0 applicable from breakpoint LG.\n", "type": "Attribute msg" }, { "name": "py0Md", "comment": " Set padding top and bottom to 0 applicable from breakpoint MD.\n", "type": "Attribute msg" }, { "name": "py0Sm", "comment": " Set padding top and bottom to 0 applicable from breakpoint SM.\n", "type": "Attribute msg" }, { "name": "py0Xl", "comment": " Set padding top and bottom to 0 applicable from breakpoint XL.\n", "type": "Attribute msg" }, { "name": "py1", "comment": " Set padding top and bottom to 1.\n", "type": "Attribute msg" }, { "name": "py1Lg", "comment": " Set padding top and bottom to 1 applicable from breakpoint LG.\n", "type": "Attribute msg" }, { "name": "py1Md", "comment": " Set padding top and bottom to 1 applicable from breakpoint MD.\n", "type": "Attribute msg" }, { "name": "py1Sm", "comment": " Set padding top and bottom to 1 applicable from breakpoint SM.\n", "type": "Attribute msg" }, { "name": "py1Xl", "comment": " Set padding top and bottom to 1 applicable from breakpoint XL.\n", "type": "Attribute msg" }, { "name": "py2", "comment": " Set padding top and bottom to 2.\n", "type": "Attribute msg" }, { "name": "py2Lg", "comment": " Set padding top and bottom to 2 applicable from breakpoint LG.\n", "type": "Attribute msg" }, { "name": "py2Md", "comment": " Set padding top and bottom to 2 applicable from breakpoint MD.\n", "type": "Attribute msg" }, { "name": "py2Sm", "comment": " Set padding top and bottom to 2 applicable from breakpoint SM.\n", "type": "Attribute msg" }, { "name": "py2Xl", "comment": " Set padding top and bottom to 2 applicable from breakpoint XL.\n", "type": "Attribute msg" }, { "name": "py3", "comment": " Set padding top and bottom to 3.\n", "type": "Attribute msg" }, { "name": "py3Lg", "comment": " Set padding top and bottom to 3 applicable from breakpoint LG.\n", "type": "Attribute msg" }, { "name": "py3Md", "comment": " Set padding top and bottom to 3 applicable from breakpoint MD.\n", "type": "Attribute msg" }, { "name": "py3Sm", "comment": " Set padding top and bottom to 3 applicable from breakpoint SM.\n", "type": "Attribute msg" }, { "name": "py3Xl", "comment": " Set padding top and bottom to 3 applicable from breakpoint XL.\n", "type": "Attribute msg" }, { "name": "py4", "comment": " Set padding top and bottom to 4.\n", "type": "Attribute msg" }, { "name": "py4Lg", "comment": " Set padding top and bottom to 4 applicable from breakpoint LG.\n", "type": "Attribute msg" }, { "name": "py4Md", "comment": " Set padding top and bottom to 4 applicable from breakpoint MD.\n", "type": "Attribute msg" }, { "name": "py4Sm", "comment": " Set padding top and bottom to 4 applicable from breakpoint SM.\n", "type": "Attribute msg" }, { "name": "py4Xl", "comment": " Set padding top and bottom to 4 applicable from breakpoint XL.\n", "type": "Attribute msg" }, { "name": "py5", "comment": " Set padding top and bottom to 5.\n", "type": "Attribute msg" }, { "name": "py5Lg", "comment": " Set padding top and bottom to 5 applicable from breakpoint LG.\n", "type": "Attribute msg" }, { "name": "py5Md", "comment": " Set padding top and bottom to 5 applicable from breakpoint MD.\n", "type": "Attribute msg" }, { "name": "py5Sm", "comment": " Set padding top and bottom to 5 applicable from breakpoint SM.\n", "type": "Attribute msg" }, { "name": "py5Xl", "comment": " Set padding top and bottom to 5 applicable from breakpoint XL.\n", "type": "Attribute 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\n@docs progress\n\n\n## Options\n\n@docs value, height, label, customLabel, success, info, warning, danger, striped, animated, attrs, wrapperAttrs, Option\n\n\n# Stacking multiple\n\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\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\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\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.Utilities.Border", "comment": " Use border utilities to quickly style the border and border-radius of an element. Great for images, buttons, or any other element.\n\n\n# Additive\n\n@docs all, top, bottom, left, right\n\n\n# Subtractive\n\n@docs none, topNone, bottomNone, leftNone, rightNone\n\n\n# Colored\n\n@docs primary, secondary, info, success, warning, danger, light, dark\n\n\n# Border radius\n\n@docs rounded, roundedTop, roundedBottom, roundedLeft, roundedRight, roundedNone, circle\n\n", "unions": [], "aliases": [], "values": [ { "name": "all", "comment": " All sides bordered.\n", "type": "Attribute msg" }, { "name": "bottom", "comment": " Add bottom border.\n", "type": "Attribute msg" }, { "name": "bottomNone", "comment": " Force bottom border to be removed.\n", "type": "Attribute msg" }, { "name": "circle", "comment": " Turn your element into a circle.\n", "type": "Attribute msg" }, { "name": "danger", "comment": " Color borders with danger color\n\n**Note**: Assumes the element has borders. You might want to use togther with [`all`](#all)\n\n", "type": "Attribute msg" }, { "name": "dark", "comment": " Color borders with dark color\n\n**Note**: Assumes the element has borders. You might want to use togther with [`all`](#all)\n\n", "type": "Attribute msg" }, { "name": "info", "comment": " Color borders with info color\n\n**Note**: Assumes the element has borders. You might want to use togther with [`all`](#all)\n\n", "type": "Attribute msg" }, { "name": "left", "comment": " Add left border.\n", "type": "Attribute msg" }, { "name": "leftNone", "comment": " Force left border to be removed.\n", "type": "Attribute msg" }, { "name": "light", "comment": " Color borders with light color\n\n**Note**: Assumes the element has borders. You might want to use togther with [`all`](#all)\n\n", "type": "Attribute msg" }, { "name": "none", "comment": " Force all borders to be removed.\n", "type": "Attribute msg" }, { "name": "primary", "comment": " Color borders with primary color\n\n**Note**: Assumes the element has borders. You might want to use togther with [`all`](#all)\n\n", "type": "Attribute msg" }, { "name": "right", "comment": " Add right border.\n", "type": "Attribute msg" }, { "name": "rightNone", "comment": " Force right border to be removed.\n", "type": "Attribute msg" }, { "name": "rounded", "comment": " Give the element rounded corners (through border-radius)\n", "type": "Attribute msg" }, { "name": "roundedBottom", "comment": " Give element rounded bottom corners.\n", "type": "Attribute msg" }, { "name": "roundedLeft", "comment": " Give element rounded left corners.\n", "type": "Attribute msg" }, { "name": "roundedNone", "comment": " Remove any border radius that might be set on the element.\n", "type": "Attribute msg" }, { "name": "roundedRight", "comment": " Give element rounded right corners.\n", "type": "Attribute msg" }, { "name": "roundedTop", "comment": " Give element rounded top corners.\n", "type": "Attribute msg" }, { "name": "secondary", "comment": " Color borders with secondary color\n\n**Note**: Assumes the element has borders. You might want to use togther with [`all`](#all)\n\n", "type": "Attribute msg" }, { "name": "success", "comment": " Color borders with success color\n\n**Note**: Assumes the element has borders. You might want to use togther with [`all`](#all)\n\n", "type": "Attribute msg" }, { "name": "top", "comment": " Add top border.\n", "type": "Attribute msg" }, { "name": "topNone", "comment": " Force top border to be removed.\n", "type": "Attribute msg" }, { "name": "warning", "comment": " Color borders with warning color\n\n**Note**: Assumes the element has borders. You might want to use togther with [`all`](#all)\n\n", "type": "Attribute msg" } ], "binops": [] }, { "name": "Bootstrap.Utilities.Size", "comment": " Easily make an element as wide or as tall (relative to its parent) with our width and height utilities.\n\n@docs h25, h50, h75, h100, w25, w50, w75, w100\n\n", "unions": [], "aliases": [], "values": [ { "name": "h100", "comment": " Set height to 100% of parent element.\n", "type": "Attribute msg" }, { "name": "h25", "comment": " Set height to 25% of parent element.\n", "type": "Attribute msg" }, { "name": "h50", "comment": " Set height to 50% of parent element.\n", "type": "Attribute msg" }, { "name": "h75", "comment": " Set height to 75% of parent element.\n", "type": "Attribute msg" }, { "name": "w100", "comment": " Set width to 100% of parent element.\n", "type": "Attribute msg" }, { "name": "w25", "comment": " Set width to 25% of parent element.\n", "type": "Attribute msg" }, { "name": "w50", "comment": " Set width to 50% of parent element.\n", "type": "Attribute msg" }, { "name": "w75", "comment": " Set width to 75% of parent element.\n", "type": "Attribute msg" } ], "binops": [] }, { "name": "Bootstrap.Utilities.Display", "comment": " Quickly and responsively toggle the display value of components and more with these display utilities.\n\n\n# Flexibily responsive display\n\nYou may combine hiding and display functions to control when an element is displayed accross breakposints.\n\n** To hide only for xs:**\n\n div [ Display.none, Display.blockSm ] [ text \"Can't see me in XS\" ]\n\n** To show only for sm:**\n\n div [ Display.none, Display.blockSm, Display.noneMd ] [ text \"Only see me in MD\" ]\n\n\n# Hiding elements\n\n@docs none, noneSm, noneMd, noneLg, noneXl\n\n\n# Displaying elements\n\n@docs block, blockSm, blockMd, blockLg, blockXl, inline, inlineSm, inlineMd, inlineLg, inlineXl, inlineBlock, inlineBlockSm, inlineBlockMd, inlineBlockLg, inlineBlockXl, table, tableSm, tableMd, tableLg, tableXl, tableCell, tableCellSm, tableCellMd, tableCellLg, tableCellXl, tableRow, tableRowSm, tableRowMd, tableRowLg, tableRowXl\n\n", "unions": [], "aliases": [], "values": [ { "name": "block", "comment": " Display as block element.\n", "type": "Attribute msg" }, { "name": "blockLg", "comment": " Display as block element from LG breakpoint and up.\n", "type": "Attribute msg" }, { "name": "blockMd", "comment": " Display as block element from MD breakpoint and up.\n", "type": "Attribute msg" }, { "name": "blockSm", "comment": " Display as block element from SM breakpoint and up.\n", "type": "Attribute msg" }, { "name": "blockXl", "comment": " Display as block element from XL breakpoint and up.\n", "type": "Attribute msg" }, { "name": "inline", "comment": " Display as inline element.\n", "type": "Attribute msg" }, { "name": "inlineBlock", "comment": " Display as inline block element.\n", "type": "Attribute msg" }, { "name": "inlineBlockLg", "comment": " Display as inline block element from LG breakpoint and up.\n", "type": "Attribute msg" }, { "name": "inlineBlockMd", "comment": " Display as inline block element from MD breakpoint and up.\n", "type": "Attribute msg" }, { "name": "inlineBlockSm", "comment": " Display as inline block element from SM breakpoint and up.\n", "type": "Attribute msg" }, { "name": "inlineBlockXl", "comment": " Display as inline block element from XL breakpoint and up.\n", "type": "Attribute msg" }, { "name": "inlineLg", "comment": " Display as inline element from LG breakpoint and up.\n", "type": "Attribute msg" }, { "name": "inlineMd", "comment": " Display as inline element from MD breakpoint and up.\n", "type": "Attribute msg" }, { "name": "inlineSm", "comment": " Display as inline element from SM breakpoint and up.\n", "type": "Attribute msg" }, { "name": "inlineXl", "comment": " Display as inline element from XL breakpoint and up.\n", "type": "Attribute msg" }, { "name": "none", "comment": " Hide element.\n", "type": "Attribute msg" }, { "name": "noneLg", "comment": " Hidden from LG breakpoint and up.\n", "type": "Attribute msg" }, { "name": "noneMd", "comment": " Hidden from MD breakpoint and up.\n", "type": "Attribute msg" }, { "name": "noneSm", "comment": " Hidden from SM breakpoint and up.\n", "type": "Attribute msg" }, { "name": "noneXl", "comment": " Hidden from XL breakpoint and up.\n", "type": "Attribute msg" }, { "name": "table", "comment": " Display as table element.\n", "type": "Attribute msg" }, { "name": "tableCell", "comment": " Display as table cell element.\n", "type": "Attribute msg" }, { "name": "tableCellLg", "comment": " Display as table cell element from LG breakpoint and up.\n", "type": "Attribute msg" }, { "name": "tableCellMd", "comment": " Display as table cell element from MD breakpoint and up.\n", "type": "Attribute msg" }, { "name": "tableCellSm", "comment": " Display as table cell element from SM breakpoint and up.\n", "type": "Attribute msg" }, { "name": "tableCellXl", "comment": " Display as table cell element from XL breakpoint and up.\n", "type": "Attribute msg" }, { "name": "tableLg", "comment": " Display as table element from LG breakpoint and up.\n", "type": "Attribute msg" }, { "name": "tableMd", "comment": " Display as table element from MD breakpoint and up.\n", "type": "Attribute msg" }, { "name": "tableRow", "comment": " Display as table row element.\n", "type": "Attribute msg" }, { "name": "tableRowLg", "comment": " Display as table row element from LG breakpoint and up.\n", "type": "Attribute msg" }, { "name": "tableRowMd", "comment": " Display as table row element from MD breakpoint and up.\n", "type": "Attribute msg" }, { "name": "tableRowSm", "comment": " Display as table row element from SM breakpoint and up.\n", "type": "Attribute msg" }, { "name": "tableRowXl", "comment": " Display as table row element from XL breakpoint and up.\n", "type": "Attribute msg" }, { "name": "tableSm", "comment": " Display as table element from SM breakpoint and up.\n", "type": "Attribute msg" }, { "name": "tableXl", "comment": " Display as table element from XL breakpoint and up.\n", "type": "Attribute 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 type alias Model =\n { modalVisibility : Modal.Visibility }\n\n init : ( Model, Cmd Msg )\n init =\n ( { modalVisibility = Modal.hidden }, Cmd.none )\n\n type Msg\n = CloseModal\n | ShowModal\n\n update : Msg -> Model -> ( Model, Cmd msg )\n update msg model =\n case msg of\n CloseModal ->\n ( { model | modalVisibility = Modal.hidden }\n , Cmd.none\n )\n\n ShowModal ->\n ( { model | modalVisibility = Modal.shown }\n , Cmd.none\n )\n\n view : Model -> Html msg\n view model =\n Grid.container []\n [ Button.button\n [ Button.attrs [ onClick ShowModal ] ]\n [ text \"Show modal\" ]\n , Modal.config CloseModal\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 CloseModal ]\n ]\n [ text \"Close\" ]\n ]\n |> Modal.view model.modalVisibility\n ]\n\n**NOTE:** Don't try to open several modals at the same time. It probably won't end well.\n\n\n# Modal\n\n@docs view, config, Config\n\n\n# State\n\n@docs hidden, shown, Visibility\n\n\n# Modal options\n\n@docs small, large, hideOnBackdropClick\n\n\n# Header\n\n@docs header, h1, h2, h3, h4, h5, h6, Header\n\n\n# Body\n\n@docs body, Body\n\n\n# Footer\n\n@docs footer, Footer\n\n\n# Animated Modals\n\nWhen you want your modal to support an animation when displayed and closed. There\nis a few more things you must wire-up and keep in mind.\n\n@docs withAnimation, subscriptions, hiddenAnimated\n\n\n## Example\n\n type Msg\n = ShowModal\n -- Note the extra msg constructor needed\n | AnimateModal Modal.Visibility\n | CloseModal\n\n update : Msg -> State -> State\n update msg state =\n case msg of\n CloseModal ->\n { state | modalVisibility = Modal.hidden }\n\n ShowModal ->\n { state | modalVisibility = Modal.shown }\n\n -- You need to handle the extra animation message\n AnimateModal visibility ->\n { state | modalVisibility = visibility }\n\n\n -- Animations for modal doesn't work without a subscription.\n -- DON´T forget this !\n\n subscriptions : Model -> Sub msg\n subscriptions model =\n Sub.batch\n [ Modal.subscriptions model.modalVisibility AnimateModal ]\n\n view : Model -> Html msg\n view model =\n Grid.container []\n [ Button.button\n [ Button.attrs [ onClick ShowModal ] ]\n [ text \"Show modal\" ]\n , Modal.config CloseModal\n |> Modal.h5 [] [ text \"Modal header\" ]\n |> Modal.body [] [ text \"Modal body\" ]\n |> Modal.footer []\n [ Button.button\n [ Button.outlinePrimary\n , Button.attrs [ onClick <| AnimateModal Modal.hiddenAnimated ]\n ]\n [ text \"Close\" ]\n ]\n |> Modal.view model.modalVisibility\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": "Visibility", "comment": " Visibility state for the 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\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": "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\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\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\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\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\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\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\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\n", "type": "List (Attribute msg) -> List (Html msg) -> Config msg -> Config msg" }, { "name": "hidden", "comment": " The modal should be hidden\n", "type": "Visibility" }, { "name": "hiddenAnimated", "comment": " When using animations use this state for handling custom close buttons etc.\n\n Button.button\n [ Button.outlinePrimary\n , Button.attrs [ onClick <| CloseModalAnimated Modal.hiddenAnimated ]\n ]\n [ text \"Close\" ]\n\n", "type": "Visibility" }, { "name": "hideOnBackdropClick", "comment": " Option to trigger close message when the user clicks on the modal backdrop. Default True.\n", "type": "Bool -> Config msg -> Config msg" }, { "name": "large", "comment": " Option to make a modal larger than the default\n", "type": "Config msg -> Config msg" }, { "name": "shown", "comment": " The modal should be made visible.\n", "type": "Visibility" }, { "name": "small", "comment": " Option to make a modal smaller than the default\n", "type": "Config msg -> Config msg" }, { "name": "subscriptions", "comment": " Subscription for handling animations\n", "type": "Visibility -> (Visibility -> msg) -> Sub msg" }, { "name": "view", "comment": " Create a modal for your application\n\n - `show` Whether to display the modal or not (if `False` the content is still in the dom, but hidden). You need to keep track of this state in your model\n - `config` View configuration\n\n", "type": "Visibility -> Config msg -> Html msg" }, { "name": "withAnimation", "comment": " Configure the modal to support fade-in/out animations. You'll need to provide\na message to handle animation.\n", "type": "(Visibility -> msg) -> Config msg -> Config msg" } ], "binops": [] }, { "name": "Bootstrap.Utilities.Flex", "comment": " Quickly manage the layout, alignment, and sizing of grid columns, navigation, components, and more with a full suite of responsive flexbox utilities. For more complex implementations, custom CSS may be necessary.\n\n\n# Flex containers\n\n\n## Block containers\n\n@docs block, blockSm, blockMd, blockLg, blockXl\n\n\n## Inline containers\n\n@docs inline, inlineSm, inlineMd, inlineLg, inlineXl\n\n\n## Direction\n\n@docs row, rowSm, rowMd, rowLg, rowXl, rowReverse, rowReverseSm, rowReverseMd, rowReverseLg, rowReverseXl, col, colSm, colMd, colLg, colXl, colReverse, colReverseSm, colReverseMd, colReverseLg, colReverseXl\n\n\n## Justify content\n\nUse justify-content utilities on flexbox containers to change the alignment of flex items on the main axis (the x-axis to start y-axis if flex-direction: column). Choose from start (browser default)/ end / center / between / or around.\n@docs justifyStart, justifyStartSm, justifyStartMd, justifyStartLg, justifyStartXl, justifyEnd, justifyEndSm, justifyEndMd, justifyEndLg, justifyEndXl, justifyCenter, justifyCenterSm, justifyCenterMd, justifyCenterLg, justifyCenterXl, justifyBetween, justifyBetweenSm, justifyBetweenMd, justifyBetweenLg, justifyBetweenXl, justifyAround, justifyAroundSm, justifyAroundMd, justifyAroundLg, justifyAroundXl\n\n\n## Align items\n\nUse align-items utilities on flexbox containers to change the alignment of flex items on the cross axis (the y-axis to start or x-axis if flex-direction: column). Choose from start / end / center / baseline / or stretch (browser default).\n@docs alignItemsStart, alignItemsStartSm, alignItemsStartMd, alignItemsStartLg, alignItemsStartXl, alignItemsEnd, alignItemsEndSm, alignItemsEndMd, alignItemsEndLg, alignItemsEndXl, alignItemsCenter, alignItemsCenterSm, alignItemsCenterMd, alignItemsCenterLg, alignItemsCenterXl, alignItemsBaseline, alignItemsBaselineSm, alignItemsBaselineMd, alignItemsBaselineLg, alignItemsBaselineXl, alignItemsStretch, alignItemsStretchSm, alignItemsStretchMd, alignItemsStretchLg, alignItemsStretchXl\n\n\n## Wrapping\n\nChange how flex items wrap in a flex container. Choose from no wrapping at all (the browser default) with nowrap / wrap or reverse wrapping.\n@docs wrap, wrapSm, wrapMd, wrapLg, wrapXl, wrapReverse, wrapReverseSm, wrapReverseMd, wrapReverseLg, wrapReverseXl, nowrap, nowrapSm, nowrapMd, nowrapLg, nowrapXl\n\n\n# Item level\n\n\n## Align self\n\nUse align-self utilities on flexbox items to individually change their alignment on the cross axis (the y-axis to start or x-axis if flex-direction: column). Choose from the same options as align-items: start / end / center / baseline / or stretch (browser default).\n\n@docs alignSelfStart, alignSelfStartSm, alignSelfStartMd, alignSelfStartLg, alignSelfStartXl, alignSelfEnd, alignSelfEndSm, alignSelfEndMd, alignSelfEndLg, alignSelfEndXl, alignSelfCenter, alignSelfCenterSm, alignSelfCenterMd, alignSelfCenterLg, alignSelfCenterXl, alignSelfBaseline, alignSelfBaselineSm, alignSelfBaselineMd, alignSelfBaselineLg, alignSelfBaselineXl, alignSelfStretch, alignSelfStretchSm, alignSelfStretchMd, alignSelfStretchLg, alignSelfStretchXl\n\n", "unions": [], "aliases": [], "values": [ { "name": "alignItemsBaseline", "comment": " Set cross axis alignment for items in flexbox container to baseline.\n", "type": "Attribute msg" }, { "name": "alignItemsBaselineLg", "comment": " Set cross axis alignment for items in flexbox container to baseline. Applicable from breakpoint LG and up.\n", "type": "Attribute msg" }, { "name": "alignItemsBaselineMd", "comment": " Set cross axis alignment for items in flexbox container to baseline. Applicable from breakpoint MD and up.\n", "type": "Attribute msg" }, { "name": "alignItemsBaselineSm", "comment": " Set cross axis alignment for items in flexbox container to baseline. Applicable from breakpoint SM and up.\n", "type": "Attribute msg" }, { "name": "alignItemsBaselineXl", "comment": " Set cross axis alignment for items in flexbox container to baseline. Applicable from breakpoint LG and up.\n", "type": "Attribute msg" }, { "name": "alignItemsCenter", "comment": " Set cross axis alignment for items in flexbox container to center.\n", "type": "Attribute msg" }, { "name": "alignItemsCenterLg", "comment": " Set cross axis alignment for items in flexbox container to center. Applicable from breakpoint LG and up.\n", "type": "Attribute msg" }, { "name": "alignItemsCenterMd", "comment": " Set cross axis alignment for items in flexbox container to center. Applicable from breakpoint MD and up.\n", "type": "Attribute msg" }, { "name": "alignItemsCenterSm", "comment": " Set cross axis alignment for items in flexbox container to center. Applicable from breakpoint SM and up.\n", "type": "Attribute msg" }, { "name": "alignItemsCenterXl", "comment": " Set cross axis alignment for items in flexbox container to center. Applicable from breakpoint LG and up.\n", "type": "Attribute msg" }, { "name": "alignItemsEnd", "comment": " Set cross axis alignment for items in flexbox container to end.\n", "type": "Attribute msg" }, { "name": "alignItemsEndLg", "comment": " Set cross axis alignment for items in flexbox container to end. Applicable from breakpoint LG and up.\n", "type": "Attribute msg" }, { "name": "alignItemsEndMd", "comment": " Set cross axis alignment for items in flexbox container to end. Applicable from breakpoint MD and up.\n", "type": "Attribute msg" }, { "name": "alignItemsEndSm", "comment": " Set cross axis alignment for items in flexbox container to end. Applicable from breakpoint SM and up.\n", "type": "Attribute msg" }, { "name": "alignItemsEndXl", "comment": " Set cross axis alignment for items in flexbox container to end. Applicable from breakpoint LG and up.\n", "type": "Attribute msg" }, { "name": "alignItemsStart", "comment": " Set cross axis alignment for items in flexbox container to start.\n", "type": "Attribute msg" }, { "name": "alignItemsStartLg", "comment": " Set cross axis alignment for items in flexbox container to start. Applicable from breakpoint LG and up.\n", "type": "Attribute msg" }, { "name": "alignItemsStartMd", "comment": " Set cross axis alignment for items in flexbox container to start. Applicable from breakpoint MD and up.\n", "type": "Attribute msg" }, { "name": "alignItemsStartSm", "comment": " Set cross axis alignment for items in flexbox container to start. Applicable from breakpoint SM and up.\n", "type": "Attribute msg" }, { "name": "alignItemsStartXl", "comment": " Set cross axis alignment for items in flexbox container to start. Applicable from breakpoint LG and up.\n", "type": "Attribute msg" }, { "name": "alignItemsStretch", "comment": " Set cross axis alignment for items in flexbox container to stretched.\n", "type": "Attribute msg" }, { "name": "alignItemsStretchLg", "comment": " Set cross axis alignment for items in flexbox container to stretched. Applicable from breakpoint LG and up.\n", "type": "Attribute msg" }, { "name": "alignItemsStretchMd", "comment": " Set cross axis alignment for items in flexbox container to stretched. Applicable from breakpoint MD and up.\n", "type": "Attribute msg" }, { "name": "alignItemsStretchSm", "comment": " Set cross axis alignment for items in flexbox container to stretched. Applicable from breakpoint SM and up.\n", "type": "Attribute msg" }, { "name": "alignItemsStretchXl", "comment": " Set cross axis alignment for items in flexbox container to stretched. Applicable from breakpoint LG and up.\n", "type": "Attribute msg" }, { "name": "alignSelfBaseline", "comment": " Set cross axis alignment for an individual flex item in a flexbox container to baseline.\n", "type": "Attribute msg" }, { "name": "alignSelfBaselineLg", "comment": " Set cross axis alignment for an individual flex item in a flexbox container to baseline. Applicable from breakpoint LG and up.\n", "type": "Attribute msg" }, { "name": "alignSelfBaselineMd", "comment": " Set cross axis alignment for an individual flex item in a flexbox container to baseline. Applicable from breakpoint MD and up.\n", "type": "Attribute msg" }, { "name": "alignSelfBaselineSm", "comment": " Set cross axis alignment for an individual flex item in a flexbox container to baseline. Applicable from breakpoint SM and up.\n", "type": "Attribute msg" }, { "name": "alignSelfBaselineXl", "comment": " Set cross axis alignment for an individual flex item in a flexbox container to baseline. Applicable from breakpoint LG and up.\n", "type": "Attribute msg" }, { "name": "alignSelfCenter", "comment": " Set cross axis alignment for an individual flex item in a flexbox container to center.\n", "type": "Attribute msg" }, { "name": "alignSelfCenterLg", "comment": " Set cross axis alignment for an individual flex item in a flexbox container to center. Applicable from breakpoint LG and up.\n", "type": "Attribute msg" }, { "name": "alignSelfCenterMd", "comment": " Set cross axis alignment for an individual flex item in a flexbox container to center. Applicable from breakpoint MD and up.\n", "type": "Attribute msg" }, { "name": "alignSelfCenterSm", "comment": " Set cross axis alignment for an individual flex item in a flexbox container to center. Applicable from breakpoint SM and up.\n", "type": "Attribute msg" }, { "name": "alignSelfCenterXl", "comment": " Set cross axis alignment for an individual flex item in a flexbox container to center. Applicable from breakpoint LG and up.\n", "type": "Attribute msg" }, { "name": "alignSelfEnd", "comment": " Set cross axis alignment for an individual flex item in a flexbox container to end.\n", "type": "Attribute msg" }, { "name": "alignSelfEndLg", "comment": " Set cross axis alignment for an individual flex item in a flexbox container to end. Applicable from breakpoint LG and up.\n", "type": "Attribute msg" }, { "name": "alignSelfEndMd", "comment": " Set cross axis alignment for an individual flex item in a flexbox container to end. Applicable from breakpoint MD and up.\n", "type": "Attribute msg" }, { "name": "alignSelfEndSm", "comment": " Set cross axis alignment for an individual flex item in a flexbox container to end. Applicable from breakpoint SM and up.\n", "type": "Attribute msg" }, { "name": "alignSelfEndXl", "comment": " Set cross axis alignment for an individual flex item in a flexbox container to end. Applicable from breakpoint LG and up.\n", "type": "Attribute msg" }, { "name": "alignSelfStart", "comment": " Set cross axis alignment for an individual flex item in a flexbox container to start.\n", "type": "Attribute msg" }, { "name": "alignSelfStartLg", "comment": " Set cross axis alignment for an individual flex item in a flexbox container to start. Applicable from breakpoint LG and up.\n", "type": "Attribute msg" }, { "name": "alignSelfStartMd", "comment": " Set cross axis alignment for an individual flex item in a flexbox container to start. Applicable from breakpoint MD and up.\n", "type": "Attribute msg" }, { "name": "alignSelfStartSm", "comment": " Set cross axis alignment for an individual flex item in a flexbox container to start. Applicable from breakpoint SM and up.\n", "type": "Attribute msg" }, { "name": "alignSelfStartXl", "comment": " Set cross axis alignment for an individual flex item in a flexbox container to start. Applicable from breakpoint LG and up.\n", "type": "Attribute msg" }, { "name": "alignSelfStretch", "comment": " Set cross axis alignment for an individual flex item in a flexbox container to stretch.\n", "type": "Attribute msg" }, { "name": "alignSelfStretchLg", "comment": " Set cross axis alignment for an individual flex item in a flexbox container to stretch. Applicable from breakpoint LG and up.\n", "type": "Attribute msg" }, { "name": "alignSelfStretchMd", "comment": " Set cross axis alignment for an individual flex item in a flexbox container to stretch. Applicable from breakpoint MD and up.\n", "type": "Attribute msg" }, { "name": "alignSelfStretchSm", "comment": " Set cross axis alignment for an individual flex item in a flexbox container to stretch. Applicable from breakpoint SM and up.\n", "type": "Attribute msg" }, { "name": "alignSelfStretchXl", "comment": " Set cross axis alignment for an individual flex item in a flexbox container to stretch. Applicable from breakpoint LG and up.\n", "type": "Attribute msg" }, { "name": "block", "comment": " Make an element become a flex container (whilst being a block level element).\n", "type": "Attribute msg" }, { "name": "blockLg", "comment": " Make an element become a flex container (whilst being a block level element) from LG breakpoint and up.\n", "type": "Attribute msg" }, { "name": "blockMd", "comment": " Make an element become a flex container (whilst being a block level element) from MD breakpoint and up.\n", "type": "Attribute msg" }, { "name": "blockSm", "comment": " Make an element become a flex container (whilst being a block level element) from SM breakpoint and up.\n", "type": "Attribute msg" }, { "name": "blockXl", "comment": " Make an element become a flex container (whilst being a block level element) from XL breakpoint and up.\n", "type": "Attribute msg" }, { "name": "col", "comment": " Set flex direction to flex-column.\n", "type": "Attribute msg" }, { "name": "colLg", "comment": " Set flex direction to flex-column from LG breakpoint and up.\n", "type": "Attribute msg" }, { "name": "colMd", "comment": " Set flex direction to flex-column from MD breakpoint and up.\n", "type": "Attribute msg" }, { "name": "colReverse", "comment": " Set flex direction to flex-column-reverse.\n", "type": "Attribute msg" }, { "name": "colReverseLg", "comment": " Set flex direction to flex-column-reverse from LG breakpoint and up.\n", "type": "Attribute msg" }, { "name": "colReverseMd", "comment": " Set flex direction to flex-column-reverse from MD breakpoint and up.\n", "type": "Attribute msg" }, { "name": "colReverseSm", "comment": " Set flex direction to flex-column-reverse from SM breakpoint and up.\n", "type": "Attribute msg" }, { "name": "colReverseXl", "comment": " Set flex direction to flex-column-reverse from XL breakpoint and up.\n", "type": "Attribute msg" }, { "name": "colSm", "comment": " Set flex direction to flex-column from SM breakpoint and up.\n", "type": "Attribute msg" }, { "name": "colXl", "comment": " Set flex direction to flex-column from XL breakpoint and up.\n", "type": "Attribute msg" }, { "name": "inline", "comment": " Make and element become a flex container (whilst being an inline element).\n", "type": "Attribute msg" }, { "name": "inlineLg", "comment": " Make and element become a flex container (whilst being an inline element) from LG breakpoint and up.\n", "type": "Attribute msg" }, { "name": "inlineMd", "comment": " Make and element become a flex container (whilst being an inline element) from MD breakpoint and up.\n", "type": "Attribute msg" }, { "name": "inlineSm", "comment": " Make and element become a flex container (whilst being an inline element) from SM breakpoint and up.\n", "type": "Attribute msg" }, { "name": "inlineXl", "comment": " Make and element become a flex container (whilst being an inline element) from XL breakpoint and up.\n", "type": "Attribute msg" }, { "name": "justifyAround", "comment": " Set main axis alignment for items in flexbox container to around.\n", "type": "Attribute msg" }, { "name": "justifyAroundLg", "comment": " Set main axis alignment for items in flexbox container to around. Applicable from breakpoint LG and up.\n", "type": "Attribute msg" }, { "name": "justifyAroundMd", "comment": " Set main axis alignment for items in flexbox container to around. Applicable from breakpoint MD and up.\n", "type": "Attribute msg" }, { "name": "justifyAroundSm", "comment": " Set main axis alignment for items in flexbox container to around. Applicable from breakpoint SM and up.\n", "type": "Attribute msg" }, { "name": "justifyAroundXl", "comment": " Set main axis alignment for items in flexbox container to around. Applicable from breakpoint XL and up.\n", "type": "Attribute msg" }, { "name": "justifyBetween", "comment": " Set main axis alignment for items in flexbox container to between.\n", "type": "Attribute msg" }, { "name": "justifyBetweenLg", "comment": " Set main axis alignment for items in flexbox container to between. Applicable from breakpoint LG and up.\n", "type": "Attribute msg" }, { "name": "justifyBetweenMd", "comment": " Set main axis alignment for items in flexbox container to between. Applicable from breakpoint MD and up.\n", "type": "Attribute msg" }, { "name": "justifyBetweenSm", "comment": " Set main axis alignment for items in flexbox container to between. Applicable from breakpoint SM and up.\n", "type": "Attribute msg" }, { "name": "justifyBetweenXl", "comment": " Set main axis alignment for items in flexbox container to between. Applicable from breakpoint XL and up.\n", "type": "Attribute msg" }, { "name": "justifyCenter", "comment": " Set main axis alignment for items in flexbox container to center.\n", "type": "Attribute msg" }, { "name": "justifyCenterLg", "comment": " Set main axis alignment for items in flexbox container to center. Applicable from breakpoint LG and up.\n", "type": "Attribute msg" }, { "name": "justifyCenterMd", "comment": " Set main axis alignment for items in flexbox container to center. Applicable from breakpoint MD and up.\n", "type": "Attribute msg" }, { "name": "justifyCenterSm", "comment": " Set main axis alignment for items in flexbox container to center. Applicable from breakpoint SM and up.\n", "type": "Attribute msg" }, { "name": "justifyCenterXl", "comment": " Set main axis alignment for items in flexbox container to center. Applicable from breakpoint XL and up.\n", "type": "Attribute msg" }, { "name": "justifyEnd", "comment": " Set main axis alignment for items in flexbox container to end\n", "type": "Attribute msg" }, { "name": "justifyEndLg", "comment": " Set main axis alignment for items in flexbox container to end. Applicable from breakpoint LG and up.\n", "type": "Attribute msg" }, { "name": "justifyEndMd", "comment": " Set main axis alignment for items in flexbox container to end. Applicable from breakpoint MD and up.\n", "type": "Attribute msg" }, { "name": "justifyEndSm", "comment": " Set main axis alignment for items in flexbox container to end. Applicable from breakpoint SM and up.\n", "type": "Attribute msg" }, { "name": "justifyEndXl", "comment": " Set main axis alignment for items in flexbox container to end. Applicable from breakpoint XL and up.\n", "type": "Attribute msg" }, { "name": "justifyStart", "comment": " Set main axis alignment for items in flexbox container to start.\n", "type": "Attribute msg" }, { "name": "justifyStartLg", "comment": " Set main axis alignment for items in flexbox container to start. Applicable from breakpoint LG and up.\n", "type": "Attribute msg" }, { "name": "justifyStartMd", "comment": " Set main axis alignment for items in flexbox container to start. Applicable from breakpoint MD and up.\n", "type": "Attribute msg" }, { "name": "justifyStartSm", "comment": " Set main axis alignment for items in flexbox container to start. Applicable from breakpoint SM and up.\n", "type": "Attribute msg" }, { "name": "justifyStartXl", "comment": " Set main axis alignment for items in flexbox container to start. Applicable from breakpoint XL and up.\n", "type": "Attribute msg" }, { "name": "nowrap", "comment": " Don't allow flex items in a flex container to break into multiple lines.\n", "type": "Attribute msg" }, { "name": "nowrapLg", "comment": " Don't allow flex items in a flex container to break into multiple lines. Applicable from breakpoint LG and up.\n", "type": "Attribute msg" }, { "name": "nowrapMd", "comment": " Don't allow flex items in a flex container to break into multiple lines. Applicable from breakpoint MD and up.\n", "type": "Attribute msg" }, { "name": "nowrapSm", "comment": " Don't allow flex items in a flex container to break into multiple lines. Applicable from breakpoint SM and up.\n", "type": "Attribute msg" }, { "name": "nowrapXl", "comment": " Don't allow flex items in a flex container to break into multiple lines. Applicable from breakpoint XL and up.\n", "type": "Attribute msg" }, { "name": "row", "comment": " Set flex direction to row.\n", "type": "Attribute msg" }, { "name": "rowLg", "comment": " Set flex direction to row from LG breakpoint and up.\n", "type": "Attribute msg" }, { "name": "rowMd", "comment": " Set flex direction to row from MD breakpoint and up.\n", "type": "Attribute msg" }, { "name": "rowReverse", "comment": " Set flex direction to row-reverse (starting from the oposite side).\n", "type": "Attribute msg" }, { "name": "rowReverseLg", "comment": " Set flex direction to row-reverse (starting from the oposite side) from LG breakpoint and up.\n", "type": "Attribute msg" }, { "name": "rowReverseMd", "comment": " Set flex direction to row-reverse (starting from the oposite side) from MD breakpoint and up.\n", "type": "Attribute msg" }, { "name": "rowReverseSm", "comment": " Set flex direction to row-reverse (starting from the oposite side) from SM breakpoint and up.\n", "type": "Attribute msg" }, { "name": "rowReverseXl", "comment": " Set flex direction to row-reverse (starting from the oposite side) from XL breakpoint and up.\n", "type": "Attribute msg" }, { "name": "rowSm", "comment": " Set flex direction to row from SM breakpoint and up.\n", "type": "Attribute msg" }, { "name": "rowXl", "comment": " Set flex direction to row from XL breakpoint and up.\n", "type": "Attribute msg" }, { "name": "wrap", "comment": " Allow flex items in a flex container to break into multiple lines.\n", "type": "Attribute msg" }, { "name": "wrapLg", "comment": " Allow flex items in a flex container to break into multiple lines. Applicable from breakpoint LG and up.\n", "type": "Attribute msg" }, { "name": "wrapMd", "comment": " Allow flex items in a flex container to break into multiple lines. Applicable from breakpoint MD and up.\n", "type": "Attribute msg" }, { "name": "wrapReverse", "comment": " Allow flex items in a flex container to break into multiple lines in reverse order.\n", "type": "Attribute msg" }, { "name": "wrapReverseLg", "comment": " Allow flex items in a flex container to break into multiple lines in reverse order. Applicable from breakpoint LG and up.\n", "type": "Attribute msg" }, { "name": "wrapReverseMd", "comment": " Allow flex items in a flex container to break into multiple lines in reverse order. Applicable from breakpoint MD and up.\n", "type": "Attribute msg" }, { "name": "wrapReverseSm", "comment": " Allow flex items in a flex container to break into multiple lines in reverse order. Applicable from breakpoint SM and up.\n", "type": "Attribute msg" }, { "name": "wrapReverseXl", "comment": " Allow flex items in a flex container to break into multiple lines in reverse order. Applicable from breakpoint XL and up.\n", "type": "Attribute msg" }, { "name": "wrapSm", "comment": " Allow flex items in a flex container to break into multiple lines. Applicable from breakpoint SM and up.\n", "type": "Attribute msg" }, { "name": "wrapXl", "comment": " Allow flex items in a flex container to break into multiple lines. Applicable from breakpoint XL and up.\n", "type": "Attribute msg" } ], "binops": [] }, { "name": "Bootstrap.Text", "comment": " Utilities for text options. Currently only exposing helpers used by Bootstrap.Card for horizontal alignment and text coloring\n\n\n# Aligment\n\n@docs alignXsLeft, alignXsCenter, alignXsRight, alignSmLeft, alignSmCenter, alignSmRight, alignMdLeft, alignMdCenter, alignMdRight, alignLgLeft, alignLgCenter, alignLgRight, alignXlLeft, alignXlCenter, alignXlRight, HAlign\n\n\n# Text coloring\n\n@docs white, primary, secondary, success, info, warning, danger, light, dark, Color\n\n", "unions": [], "aliases": [ { "name": "Color", "comment": " Opaque type representing a text color option\n|\n", "args": [], "type": "Color" }, { "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" }, { "name": "danger", "comment": " Danger color text option. |\n", "type": "Color" }, { "name": "dark", "comment": " Dark color text option. |\n", "type": "Color" }, { "name": "info", "comment": " Info color text option. |\n", "type": "Color" }, { "name": "light", "comment": " Light color text option. |\n", "type": "Color" }, { "name": "primary", "comment": " Primary color text option. |\n", "type": "Color" }, { "name": "secondary", "comment": " Secondary color text option. |\n", "type": "Color" }, { "name": "success", "comment": " Success color text option. |\n", "type": "Color" }, { "name": "warning", "comment": " Warning color text option. |\n", "type": "Color" }, { "name": "white", "comment": " White text color option. |\n", "type": "Color" } ], "binops": [] }, { "name": "Bootstrap.Table", "comment": " Create simple and customizable tables in a fairly type safe manner!\n\n\n# Table\n\n@docs simpleTable, table\n\n\n## Table options\n\n@docs inversed, striped, bordered, hover, small, responsive, responsiveSm, responsiveMd, responsiveLg, responsiveXl, attr, TableOption\n\n\n# Table headers\n\n@docs simpleThead, thead, headAttr, THead\n\n\n## Header options\n\n@docs defaultHead, inversedHead, TableHeadOption\n\n\n# Table body\n\n@docs tbody, keyedTBody, TBody\n\n\n# Rows\n\n@docs tr, keyedTr, Row\n\n\n## Row options\n\n@docs rowActive, rowPrimary, rowSecondary, rowInfo, rowSuccess, rowWarning, rowDanger, rowLight, rowDark, rowAttr, RowOption\n\n\n# Cells\n\n@docs td, th, Cell\n\n\n## Cell options\n\n@docs cellActive, cellPrimary, cellSecondary, cellInfo, cellSuccess, cellWarning, cellDanger, cellLight, cellDark, 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": "cellDark", "comment": " Option to style an individual cell with the dark color\n", "type": "CellOption msg" }, { "name": "cellInfo", "comment": " Option to style an individual cell with the info color\n", "type": "CellOption msg" }, { "name": "cellLight", "comment": " Option to style an individual cell with the light color\n", "type": "CellOption msg" }, { "name": "cellPrimary", "comment": " Option to style an individual cell with the primary color\n", "type": "CellOption msg" }, { "name": "cellSecondary", "comment": " Option to style an individual cell with the secondary 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": "responsive", "comment": " Make table responsive for horizontally scrolling tables accross all breakpoints.\n", "type": "TableOption msg" }, { "name": "responsiveLg", "comment": " Make table responsive for up until the -lg breakpoint.\n", "type": "TableOption msg" }, { "name": "responsiveMd", "comment": " Make table responsive for up until the -md breakpoint.\n", "type": "TableOption msg" }, { "name": "responsiveSm", "comment": " Make table responsive for up until the -sm breakpoint.\n", "type": "TableOption msg" }, { "name": "responsiveXl", "comment": " Make table responsive for up until the -xl breakpoint.\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": "rowDark", "comment": " Style a table row with the dark color.\n", "type": "RowOption msg" }, { "name": "rowInfo", "comment": " Style a table row with the info color.\n", "type": "RowOption msg" }, { "name": "rowLight", "comment": " Style a table row with the light color.\n", "type": "RowOption msg" }, { "name": "rowPrimary", "comment": " Style a table row with the primary color.\n", "type": "RowOption msg" }, { "name": "rowSecondary", "comment": " Style a table row with the secondary 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 - (`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\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 type alias Model =\n { tabState : Tab.State }\n\n init : ( Model, Cmd Msg )\n init =\n ( { tabState = Tab.initalState }, Cmd.none )\n\n type Msg\n = TabMsg Tab.State\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\n -- 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 subscriptions : Model -> Sub Msg\n subscriptions model =\n Tab.subscriptions model.tabState TabMsg\n\n\n# Tabs\n\n@docs view, config, items, initialState, customInitialState, Config, State\n\n\n# Options\n\n@docs pills, withAnimation, justified, fill, center, right, attrs, useHash, Option\n\n\n# Tab items\n\n@docs item, link, pane, Item, Link, Pane\n\n\n# With animations\n\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\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\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\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\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\n -- ...other subscriptions you might have\n ]\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\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.Popover", "comment": " Add small overlay content, like those found in iOS, to any element for housing secondary information.\n\n type alias Model =\n { popoverState : Popover.State }\n\n\n -- Define a message to handle popover state changes\n\n type Msg\n = PopoverMsg Popover.State\n\n\n -- Initialize the popover state\n\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\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\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*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# Setup\n\n@docs config, initialState, view, Config, State\n\n\n# Triggering\n\n@docs onClick, onHover\n\n\n# View composition\n\n@docs title, content, titleH1, titleH2, titleH3, titleH4, titleH5, titleH6\n\n\n# Positioning\n\n@docs left, right, top, bottom\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\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\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\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\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\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\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\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\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\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\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\n", "type": "State -> Config msg -> Html msg" } ], "binops": [] }, { "name": "Bootstrap.Pagination.Item", "comment": " When you need more control over pagination items you would use the functions in this module.\n\n@docs item, link, span, active, disabled, attrs, ItemConfig, Item\n\n", "unions": [], "aliases": [ { "name": "Item", "comment": " Opaque type representing an pagination item.\n", "args": [ "msg" ], "type": "Item msg" }, { "name": "ItemConfig", "comment": " Opaque type representing configuration options for an item (regardless of whether its a Link or a Span).\n", "args": [ "msg" ], "type": "ItemConfig msg" } ], "values": [ { "name": "active", "comment": " Set this particular item as active/selected in the pagination widget.\n", "type": "Bool -> ItemConfig msg -> ItemConfig msg" }, { "name": "attrs", "comment": " Customize the (li) element container for a pagination item.\n", "type": "List (Attribute msg) -> ItemConfig msg -> ItemConfig msg" }, { "name": "disabled", "comment": " Set this item as disabled. For links it will also set tabindex to -1 and override the clickhandler.\n", "type": "Bool -> ItemConfig msg -> ItemConfig msg" }, { "name": "item", "comment": " Creates an initial item configuration.\n", "type": "ItemConfig msg" }, { "name": "link", "comment": " Create a pagination link (a) element.\n", "type": "List (Attribute msg) -> List (Html msg) -> ItemConfig msg -> Item msg" }, { "name": "span", "comment": " Create a pagination span element.\n", "type": "List (Attribute msg) -> List (Html msg) -> ItemConfig msg -> Item 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 import Bootstrap.Navbar as Navbar\n\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 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\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# Navbar\n\n@docs view, config, Config\n\n\n## Options\n\n@docs withAnimation, primary, secondary, success, info, warning, danger, light, dark, fixTop, fixBottom, lightCustom, darkCustom, lightCustomClass, darkCustomClass, collapseSmall, collapseMedium, collapseLarge, collapseExtraLarge, container, attrs\n\n\n## Brand\n\n@docs brand, Brand\n\n\n## Menu items\n\n@docs items, itemLink, itemLinkActive, Item\n\n\n## Dropdown menu\n\n@docs dropdown, dropdownToggle, dropdownItem, dropdownDivider, dropdownHeader, DropdownToggle, DropdownItem\n\n\n## Custom items\n\n@docs customItems, textItem, formItem, customItem, CustomItem\n\n\n# State\n\n@docs initialState, State\n\n\n# Interactive elements and subscriptions\n\n@docs subscriptions\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\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\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 your main content is also configured 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.\nYou 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**Note: If you have multiple custom items you will need to provide spacing between them yourself **\n\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\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": "dark", "comment": " Use a dark background color (with a light text)\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 - `items` List of menu items for the dropdown\n\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", "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 - `children` List of child elements\n\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\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\n", "type": "List (Attribute msg) -> List (Html msg) -> DropdownToggle 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\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**Note: If you have multiple custom items you will need to provide spacing between them yourself **\n\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", "type": "(State -> msg) -> ( State, Cmd 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\n", "type": "List (Item msg) -> Config msg -> Config msg" }, { "name": "light", "comment": " Use a light background color (with a dark text)\n", "type": "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": "secondary", "comment": " Option to color menu using the secondary 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**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\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**Note: If you have multiple custom items you will need to provide spacing between them yourself **\n\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\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\n# Simple lists\n\n@docs ul, li, keyedUl, Item\n\n\n# Custom lists\n\n@docs custom, keyedCustom, anchor, button, CustomItem\n\n\n# Options\n\n@docs primary, secondary, success, info, warning, danger, light, dark, active, disabled, attrs, ItemOption\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\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\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": "dark", "comment": " Option to style a list item with dark 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": "light", "comment": " Option to style a list item with light colors\n", "type": "ItemOption msg" }, { "name": "primary", "comment": " Option to style a list item with primary colors\n", "type": "ItemOption msg" }, { "name": "secondary", "comment": " Option to style a list item with secondary colors\n", "type": "ItemOption 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\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.General.HAlign", "comment": " General utility for creating a Horizontal alignment option (i.e. flex-justify-)\n\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, HAlign\n\n", "unions": [], "aliases": [ { "name": "HAlign", "comment": " Internal representation of a Horizontal alignment option.\n", "args": [], "type": "HAlign" } ], "values": [ { "name": "aroundLg", "comment": " ", "type": "HAlign" }, { "name": "aroundMd", "comment": " ", "type": "HAlign" }, { "name": "aroundSm", "comment": " ", "type": "HAlign" }, { "name": "aroundXl", "comment": " ", "type": "HAlign" }, { "name": "aroundXs", "comment": " ", "type": "HAlign" }, { "name": "betweenLg", "comment": " ", "type": "HAlign" }, { "name": "betweenMd", "comment": " ", "type": "HAlign" }, { "name": "betweenSm", "comment": " ", "type": "HAlign" }, { "name": "betweenXl", "comment": " ", "type": "HAlign" }, { "name": "betweenXs", "comment": " ", "type": "HAlign" }, { "name": "centerLg", "comment": " ", "type": "HAlign" }, { "name": "centerMd", "comment": " ", "type": "HAlign" }, { "name": "centerSm", "comment": " ", "type": "HAlign" }, { "name": "centerXl", "comment": " ", "type": "HAlign" }, { "name": "centerXs", "comment": " ", "type": "HAlign" }, { "name": "leftLg", "comment": " ", "type": "HAlign" }, { "name": "leftMd", "comment": " ", "type": "HAlign" }, { "name": "leftSm", "comment": " ", "type": "HAlign" }, { "name": "leftXl", "comment": " ", "type": "HAlign" }, { "name": "leftXs", "comment": " ", "type": "HAlign" }, { "name": "rightLg", "comment": " ", "type": "HAlign" }, { "name": "rightMd", "comment": " ", "type": "HAlign" }, { "name": "rightSm", "comment": " ", "type": "HAlign" }, { "name": "rightXl", "comment": " ", "type": "HAlign" }, { "name": "rightXs", "comment": " ", "type": "HAlign" } ], "binops": [] }, { "name": "Bootstrap.Form.Radio", "comment": " This module allows you to create Bootstrap styled radios.\n\n\n# Creating\n\n@docs radio, custom, Radio\n\n\n# Options\n\n@docs id, checked, name, inline, onClick, disabled, attrs, Option\n\n\n# Validation\n\n@docs success, danger\n\n\n# Composing\n\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.id \"myCustomRadio\"\n , Radio.checked True\n , Radio.onClick MyRadioMsg\n ]\n\n", "type": "List (Option msg) -> String -> Html msg" }, { "name": "danger", "comment": " Option to color a radio with danger.\n", "type": "Option msg" }, { "name": "disabled", "comment": " Option to disable the radio\n", "type": "Bool -> Option msg" }, { "name": "id", "comment": " Set the id for the radio. Will automatically set the for attribute for the label\n\nNOTE: You have to use this for custom checkboxes.\n\n", "type": "String -> 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\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.id \"myRadio\"\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\n [ Radio.id \"myRadio1\", Radio.onCheck (MyRadioMsg MyRadio1) ]\n \"Radio 1\"\n , Radio.create\n [ Radio.id \"myRadio2\", Radio.onCheck (MyRadioMsg MyRadio2) ]\n \"Radio 2\"\n , Radio.create\n [ Radio.id \"myRadio3\", Radio.onCheck (MyRadioMsg MyRadio3) ]\n \"Radio 3\"\n ]\n\n - `groupName` - Name of the radios, all radios will get the same name\n - `radios` - List of radios.\n\n", "type": "String -> List (Radio msg) -> List (Html msg)" }, { "name": "success", "comment": " Option to color a radio with success.\n", "type": "Option msg" } ], "binops": [] }, { "name": "Bootstrap.Form.Textarea", "comment": " This module allows you to create textarea elements.\n\n\n# Creating\n\n@docs textarea\n\n\n# Options\n\n@docs id, rows, value, defaultValue, disabled, onInput, attrs, Option\n\n\n# Validation\n\n@docs success, danger\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", "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", "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" } ], "binops": [] }, { "name": "Bootstrap.Form.Input", "comment": " This module allows you to create Bootstrap styled HTML 5 inputs.\n\n\n# Input types\n\n@docs text, password, datetimeLocal, date, month, time, week, number, email, url, search, tel, color\n\n\n# Options\n\n@docs id, small, large, value, defaultValue, disabled, readonly, onInput, placeholder, attrs, Option\n\n\n# Validation\n\nYou can indicate success or invalid input using these functions.\n@docs success, danger\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", "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": "readonly", "comment": " Shorthand for setting the readonly attribute of an input\n", "type": "Bool -> 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", "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": "week", "comment": " Create an input with type=\"week\"\n", "type": "List (Option msg) -> 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\n# Slide\n\n@docs Config, config, caption\n\n\n# Content\n\n@docs SlideContent, image, customContent\n\n", "unions": [], "aliases": [ { "name": "Config", "comment": " Opaque type that defines the view configuration information of your slide\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\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\n", "type": "List (Attribute msg) -> String -> SlideContent msg" } ], "binops": [] }, { "name": "Bootstrap.Form.Select", "comment": " This module allows you to create Bootstrap styled `select` elements.\n\n\n# Creating\n\n@docs select, custom, item, Item\n\n\n# Options\n\n@docs id, small, large, id, disabled, onChange, attrs, Option\n\n\n# Validation\n\n@docs success, danger\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": "danger", "comment": " Option to add a danger marker icon for your select.\n", "type": "Option 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" }, { "name": "success", "comment": " Option to add a success marker icon for your select.\n", "type": "Option 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\n@docs button, linkButton, radioButton, checkboxButton\n\n\n# Button options\n\n@docs attrs, onClick, disabled, Option\n\n\n## Roled\n\n@docs primary, secondary, success, info, warning, danger, light, dark, roleLink\n\n\n## Outlined\n\n@docs outlinePrimary, outlineSecondary, outlineSuccess, outlineInfo, outlineWarning, outlineDanger, outlineLight, outlineDark\n\n\n## Size\n\n@docs small, large\n\n\n## Block\n\n@docs block\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 - `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 - `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": "dark", "comment": " Option to create a dark button\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": "light", "comment": " Option to create a light button\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 - `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": "outlineDark", "comment": " Option to create a dark outlined button\n", "type": "Option msg" }, { "name": "outlineInfo", "comment": " Option to outline an info action. Typically used for alerts.\n", "type": "Option msg" }, { "name": "outlineLight", "comment": " Option to create a light outlined button\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 - `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.CDN", "comment": " A helper module for easily embedding CSS when you want to work with the library using the Elm Reactor.\n\n@docs stylesheet, fontAwesome\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 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\n", "type": "Html msg" } ], "binops": [] }, { "name": "Bootstrap.Breadcrumb", "comment": " Indicate the current page's location within a navigational hierarchy that automatically adds separators via CSS.\n\n Breadcrumb.container\n [ Breadcrumb.item [] [ a [ href \"#home\" ] [ text \"home\" ] ]\n , Breadcrumb.item [] [ text \"page\" ]\n ]\n\n\n# Breadcrumb\n\n@docs Item, item, container\n\n", "unions": [ { "name": "Item", "comment": " Opaque type representing an item in the breadcrumb trail.\n", "args": [ "msg" ], "cases": [] } ], "aliases": [], "values": [ { "name": "container", "comment": " Create a breadcrumb container.\n\n - `items` List of breadcrumb items\n\n", "type": "List (Item msg) -> Html msg" }, { "name": "item", "comment": " Create a breadcrumb item.\n\n - `attributes` List of attributes\n - `children` List of child elements\n\n", "type": "List (Attribute msg) -> List (Html msg) -> Item msg" } ], "binops": [] }, { "name": "Bootstrap.Badge", "comment": " Small and adaptive badge for adding context to just about any content.\n\n\n# Tags\n\n@docs badgePrimary, badgeSecondary, badgeSuccess, badgeInfo, badgeWarning, badgeDanger, badgeLight, badgeDark\n\n\n# Pills\n\n@docs pillPrimary, pillSecondary, pillSuccess, pillInfo, pillWarning, pillDanger, pillLight, pillDark\n\n", "unions": [], "aliases": [], "values": [ { "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": "badgeDark", "comment": " Create a dark badge\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": "badgeLight", "comment": " Create a light badge\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": "badgeSecondary", "comment": " Create a badge with secondary 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": "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": "pillDark", "comment": " Create a dark pill\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": "pillLight", "comment": " Create a light pill\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": "pillSecondary", "comment": " Create a pill (badge with rounded corners) using secondary 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": "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": [] }, { "name": "Bootstrap.Alert", "comment": " Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.\n\n\n# Simple alerts\n\nWhen you just need a simple alert, these shorthand functions lets you quickly display an alert.\n\n simplePrimary [] [ text \"I'm a simple alert!\" ]\n\n simpleWarning\n [ class \"myCustomAlertClass\" ]\n [ Alert.h1 [] [ text \"Alert heading\" ]\n , p [] [ text \"Some alert content.\" ]\n , Alert.link [ href \"#somewhere\" ] [ text \"Styled link\" ]\n ]\n\n@docs simplePrimary, simpleSecondary, simpleSuccess, simpleInfo, simpleWarning, simpleDanger, simpleLight, simpleDark\n\n\n## Helpers\n\nThese functions allow you to create alert children with alert specific styling\n@docs link, h1, h2, h3, h4, h5, h6\n\n\n# Dismissable alerts\n\nDismissable alerts are also supported. You can even configure them to have a fade out animation when dismissed.\nUnlike it's Twitter Bootstrap JavaScript counterpart we can't remove the alert element from the DOM. It's simply set to **display:none**.\nTo support dismissable alerts you must keep track of the alerts visibility in your model.\n\n type alias Model =\n { alertVisibility : Alert.Visibility }\n\n type Msg\n = AlertMsg Alert.Visibility\n\n init : ( Model, Cmd Msg )\n init =\n ({ alertVisibility = Alert.shownn })\n\n update : Msg -> Model -> ( Model, Cmd Msg )\n update msg model =\n case msg of\n AlertMsg visibility ->\n ( { model | alertVisibility = visibility }, Cmd.none )\n\n view : Model -> Html Msg\n view model =\n Alert.config\n |> Alert.dismissableWithAnimation AlertMsg\n |> Alert.info\n |> Alert.children\n [ Alert.h4 [] [ text \"Alert heading\" ]\n , Alert.text \"This info message has a \"\n , Alert.link [ href \"javascript:void()\" ] [ text \"link\" ]\n , Alert.p [] [ text \"Followed by a paragraph behaving as you'd expect.\" ]\n ]\n |> Alert.view model.alertVisibility\n\n\n -- Subscriptions are only needed when you choose to use dismissableWithAnimation\n\n subscriptions : Model -> Sub Msg\n subscriptions model =\n Alert.subscriptions model.alertVisibility AlertMsg\n\n\n## Configure\n\n@docs config, view, children, Config\n\n\n## Visibility\n\n@docs shown, closed, Visibility\n\n\n## Contextual alerts\n\n@docs primary, secondary, success, info, warning, danger, light, dark\n\n\n## Dismiss with/without Animation\n\n@docs dismissable, dismissableWithAnimation, subscriptions\n\n", "unions": [ { "name": "Config", "comment": " Opaque type used for describing the configuration of an alert.\n", "args": [ "msg" ], "cases": [] }, { "name": "Visibility", "comment": " Opaque type used to represent whether to display the alert or not.\n", "args": [], "cases": [] } ], "aliases": [], "values": [ { "name": "children", "comment": " Configure child elements for the alert.\n", "type": "List (Html msg) -> Config msg -> Config msg" }, { "name": "closed", "comment": " Use this function to represent the closed/dismissed state for an alert.\n", "type": "Visibility" }, { "name": "config", "comment": " Create a default config for an alert.\n", "type": "Config msg" }, { "name": "danger", "comment": " Configure alert to use danger colors.\n", "type": "Config msg -> Config msg" }, { "name": "dark", "comment": " Configure alert to use dark colors.\n", "type": "Config msg -> Config msg" }, { "name": "dismissable", "comment": " Make the alert dismissable. Adds a close icon top right.\nYou'll need to handle the msg in your update function.\n\n type Msg\n = AlertMsg Alert.Visibilty\n\n -- somewhere in your view function where you display the alert\n Alert.config\n |> Alert.dismissable AlertMsg\n |> ... etc\n\n", "type": "(Visibility -> msg) -> Config msg -> Config msg" }, { "name": "dismissableWithAnimation", "comment": " Enable a fade out animation when closing/dismissing an Alert.\n", "type": "(Visibility -> msg) -> Config msg -> Config 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": " Configure alert to use info colors.\n", "type": "Config msg -> Config msg" }, { "name": "light", "comment": " Configure alert to use light colors.\n", "type": "Config msg -> Config 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": "primary", "comment": " Configure alert to use primary colors.\n", "type": "Config msg -> Config msg" }, { "name": "secondary", "comment": " Configure alert to use secondary colors.\n", "type": "Config msg -> Config msg" }, { "name": "shown", "comment": " Use this function to represent the shown state for an alert.\n", "type": "Visibility" }, { "name": "simpleDanger", "comment": " Show an elert using danger color.\n\n - `attributes` - List of attributes to customize the alert container\n - `children` - List of child html elements\n\n", "type": "List (Attribute msg) -> List (Html msg) -> Html msg" }, { "name": "simpleDark", "comment": " Show an elert using dark color.\n\n - `attributes` - List of attributes to customize the alert container\n - `children` - List of child html elements\n\n", "type": "List (Attribute msg) -> List (Html msg) -> Html msg" }, { "name": "simpleInfo", "comment": " Show an elert using info color.\n\n - `attributes` - List of attributes to customize the alert container\n - `children` - List of child html elements\n\n", "type": "List (Attribute msg) -> List (Html msg) -> Html msg" }, { "name": "simpleLight", "comment": " Show an elert using light color.\n\n - `attributes` - List of attributes to customize the alert container\n - `children` - List of child html elements\n\n", "type": "List (Attribute msg) -> List (Html msg) -> Html msg" }, { "name": "simplePrimary", "comment": " Show an elert using primary color.\n\n - `attributes` - List of attributes to customize the alert container\n - `children` - List of child html elements\n\n", "type": "List (Attribute msg) -> List (Html msg) -> Html msg" }, { "name": "simpleSecondary", "comment": " Show an elert using secondary color.\n\n - `attributes` - List of attributes to customize the alert container\n - `children` - List of child html elements\n\n", "type": "List (Attribute msg) -> List (Html msg) -> Html msg" }, { "name": "simpleSuccess", "comment": " Show an elert using success color.\n\n - `attributes` - List of attributes to customize the alert container\n - `children` - List of child html elements\n\n", "type": "List (Attribute msg) -> List (Html msg) -> Html msg" }, { "name": "simpleWarning", "comment": " Show an elert using warning color.\n\n - `attributes` - List of attributes to customize the alert container\n - `children` - List of child html elements\n\n", "type": "List (Attribute msg) -> List (Html msg) -> Html msg" }, { "name": "subscriptions", "comment": " Subscription for handling animations. Don't forget this when configuring your alert to be dismissable with animation.\n\n subscriptions : Model -> Sub Msg\n subscriptions model =\n Alert.subscriptions model.alertVisibility AlertMsg\n\n", "type": "Visibility -> (Visibility -> msg) -> Sub msg" }, { "name": "success", "comment": " Configure alert to use success colors.\n", "type": "Config msg -> Config msg" }, { "name": "view", "comment": " Call the view function to turn an alert config into an Elm Html element.\n\n - `visibility` The current visibility for the alert.\n - `config` Configuration settings and child elements for your alert.\n\n", "type": "Visibility -> Config msg -> Html msg" }, { "name": "warning", "comment": " Configure alert to use warning colors.\n", "type": "Config msg -> Config msg" } ], "binops": [] } ]