[ { "name": "Element.Input", "comment": "\n\n\n## Inputs\n\n@docs button\n\n@docs checkbox\n\n@docs text, Placeholder, placeholder, username, newPassword, currentPassword, email, search, spellChecked\n\n@docs multiline\n\n@docs Radio, radio, radioRow, Option, option, optionWith, OptionState\n\n\n## Labels\n\n@docs Label, labelAbove, labelBelow, labelLeft, labelRight\n\n@docs focusedOnLoad\n\n", "unions": [ { "name": "Label", "comment": " Every input has a required `label`.\n", "args": [ "msg" ], "cases": [] }, { "name": "Option", "comment": " Add choices to your radio and select menus.\n", "args": [ "value", "msg" ], "cases": [] }, { "name": "OptionState", "comment": " ", "args": [], "cases": [ [ "Idle", [] ], [ "Focused", [] ], [ "Selected", [] ] ] }, { "name": "Placeholder", "comment": " ", "args": [ "msg" ], "cases": [] } ], "aliases": [ { "name": "Radio", "comment": " ", "args": [ "option", "msg" ], "type": "{ onChange : Maybe (option -> msg), options : List (Option option msg), selected : Maybe option, label : Label msg }" } ], "values": [ { "name": "button", "comment": " A standard button.\n\nThe `onPress` handler will be fired either `onClick` or when the element is focused and the enter key has been pressed.\n\n import Element.Input as Input\n\n Input.button []\n { onPress = Just ClickMsg\n , label = text \"My Button\"\n }\n\n`onPress` takes a `Maybe msg`. If you provide the value `Nothing`, then the button will be disabled.\n\n", "type": "List (Attribute msg) -> { onPress : Maybe msg, label : Element msg } -> Element msg" }, { "name": "checkbox", "comment": " ", "type": "List (Attribute msg) -> { onChange : Maybe (Bool -> msg), icon : Maybe (Element msg), checked : Bool, label : Label msg } -> Element msg" }, { "name": "currentPassword", "comment": " ", "type": "List (Attribute msg) -> { onChange : Maybe (String -> msg), text : String, placeholder : Maybe (Placeholder msg), label : Label msg, show : Bool } -> Element msg" }, { "name": "email", "comment": " ", "type": "List (Attribute msg) -> { onChange : Maybe (String -> msg), text : String, placeholder : Maybe (Placeholder msg), label : Label msg } -> Element msg" }, { "name": "focusedOnLoad", "comment": " ", "type": "Attribute msg" }, { "name": "labelAbove", "comment": " ", "type": "List (Attribute msg) -> Element msg -> Label msg" }, { "name": "labelBelow", "comment": " ", "type": "List (Attribute msg) -> Element msg -> Label msg" }, { "name": "labelLeft", "comment": " ", "type": "List (Attribute msg) -> Element msg -> Label msg" }, { "name": "labelRight", "comment": " ", "type": "List (Attribute msg) -> Element msg -> Label msg" }, { "name": "multiline", "comment": " ", "type": "List (Attribute msg) -> { onChange : Maybe (String -> msg), text : String, placeholder : Maybe (Placeholder msg), label : Label msg, spellcheck : Bool } -> Element msg" }, { "name": "newPassword", "comment": " A password input that allows the browser to autofill.\n\nIt's `newPassword` instead of just `password` because it gives the browser a hint on what type of password input it is.\n\nA password takes all the arguments a normal `Input.text` would, and also `show`, which will remove the password mask (e.g. `****` vs `pass1234`)\n\n", "type": "List (Attribute msg) -> { onChange : Maybe (String -> msg), text : String, placeholder : Maybe (Placeholder msg), label : Label msg, show : Bool } -> Element msg" }, { "name": "option", "comment": " ", "type": "value -> Element msg -> Option value msg" }, { "name": "optionWith", "comment": " ", "type": "value -> (OptionState -> Element msg) -> Option value msg" }, { "name": "placeholder", "comment": " ", "type": "List (Attribute msg) -> Element msg -> Placeholder msg" }, { "name": "radio", "comment": "\n\n Input.radio\n [ padding 10\n , spacing 20\n ]\n { onChange = Just ChooseLunch\n , selected = Just model.lunch\n , label = Input.labelAbove (text \"Lunch\")\n , options =\n [ Input.styledChoice Burrito <|\n \\selected ->\n Element.row\n [ spacing 5 ]\n [ el None [] <|\n if selected then\n text \":D\"\n else\n text \":(\"\n , text \"burrito\"\n ]\n , Input.option Taco (text \"Taco!\")\n , Input.option Gyro (text \"Gyro\")\n ]\n }\n\n", "type": "List (Attribute msg) -> Radio option msg -> Element msg" }, { "name": "radioRow", "comment": " Same as radio, but displayed as a row\n", "type": "List (Attribute msg) -> Radio option msg -> Element msg" }, { "name": "search", "comment": " ", "type": "List (Attribute msg) -> { onChange : Maybe (String -> msg), text : String, placeholder : Maybe (Placeholder msg), label : Label msg } -> Element msg" }, { "name": "spellChecked", "comment": " ", "type": "List (Attribute msg) -> { onChange : Maybe (String -> msg), text : String, placeholder : Maybe (Placeholder msg), label : Label msg } -> Element msg" }, { "name": "text", "comment": " ", "type": "List (Attribute msg) -> { onChange : Maybe (String -> msg), text : String, placeholder : Maybe (Placeholder msg), label : Label msg } -> Element msg" }, { "name": "username", "comment": " ", "type": "List (Attribute msg) -> { onChange : Maybe (String -> msg), text : String, placeholder : Maybe (Placeholder msg), label : Label msg } -> Element msg" } ], "binops": [] }, { "name": "Element.Region", "comment": "\n\n\n# Region Annotations\n\nThis module is meant to make accessibility easy! They're sign posts that accessibility software like screen readers can use to navigate your app.\n\nAll you have to do is add them to elements in your app where you see fit.\n\nHere's an example of annotating your navigation area:\n\n import Element.Area as Area\n\n myNavigation =\n Element.row [ Area.navigation ]\n [-- ..your navigation links\n ]\n\n@docs mainContent, navigation, heading, aside, footer\n\n@docs description\n\n@docs announce, announceUrgently\n\n", "unions": [], "aliases": [], "values": [ { "name": "announce", "comment": " Screen readers will announce when changes to this element are made.\n", "type": "Attribute msg" }, { "name": "announceUrgently", "comment": " Screen readers will announce changes to this element and potentially interrupt any other announcement.\n", "type": "Attribute msg" }, { "name": "aside", "comment": " ", "type": "Attribute msg" }, { "name": "description", "comment": " ", "type": "String -> Attribute msg" }, { "name": "footer", "comment": " ", "type": "Attribute msg" }, { "name": "heading", "comment": " This will mark an element as `h1`, `h2`, etc where possible.\n\nThough it's also smart enough to not conflict with existing nodes.\n\nSo, this code\n\n link [ Area.heading 1 ]\n { url = \"http://fruits.com\"\n , label = text \"Best site ever\"\n }\n\nwill generate\n\n \n

Best site ever

\n \n\n", "type": "Int -> Attribute msg" }, { "name": "mainContent", "comment": " ", "type": "Attribute msg" }, { "name": "navigation", "comment": " ", "type": "Attribute msg" } ], "binops": [] }, { "name": "Element.Font", "comment": "\n\n\n# Style your fonts!\n\n import Color exposing (blue)\n import Element\n import Element.Font as Font\n\n view =\n Element.el\n [ Font.color blue\n , Font.size 18\n , Font.family\n [ Font.typeface \"Open Sans\"\n , Font.sansSerif\n ]\n ]\n (Element.text \"Woohoo, I'm stylish text\")\n\n**Note**: `Font.color`, `Font.size`, and `Font.family` are inherited, meaning you can set them at the top of your view and all subsequent nodes will have that value.\n\n@docs color, size\n\n\n## Typefaces\n\n@docs family, Font, typeface, serif, sansSerif, monospace\n\n@docs external\n\n`Font.external` can be used to import font files. Let's say you found a neat font on :\n\n import Element\n import Element.Font as Font\n\n view =\n Element.el\n [ Font.family\n [ Font.external\n { name = \"Roboto\"\n , url = \"https://fonts.googleapis.com/css?family=Roboto\"\n }\n , Font.sansSerif\n ]\n ]\n (Element.text \"Woohoo, I'm stylish text\")\n\n\n## Alignment and Spacing\n\n@docs alignLeft, alignRight, center, justify, letterSpacing, wordSpacing\n\n\n## Font Styles\n\n@docs underline, strike, italic, unitalicized\n\n\n## Font Weight\n\n@docs heavy, extraBold, bold, semiBold, medium, regular, light, extraLight, hairline\n\n\n## Shadows\n\n@docs glow, shadow\n\n", "unions": [], "aliases": [ { "name": "Font", "comment": " ", "args": [], "type": "Font" } ], "values": [ { "name": "alignLeft", "comment": " Align the font to the left.\n", "type": "Attribute msg" }, { "name": "alignRight", "comment": " Align the font to the right.\n", "type": "Attribute msg" }, { "name": "bold", "comment": " ", "type": "Attribute msg" }, { "name": "center", "comment": " Center align the font.\n", "type": "Attribute msg" }, { "name": "color", "comment": " ", "type": "Color -> Attr decorative msg" }, { "name": "external", "comment": " ", "type": "{ url : String, name : String } -> Font" }, { "name": "extraBold", "comment": " ", "type": "Attribute msg" }, { "name": "extraLight", "comment": " ", "type": "Attribute msg" }, { "name": "family", "comment": "\n\n import Element\n import Element.Font as Font\n\n myElement =\n Element.el\n [ Font.family\n [ Font.typeface \"Helvetica\"\n , Font.sansSerif\n ]\n ]\n (text \"\")\n\n", "type": "List Font -> Attribute msg" }, { "name": "glow", "comment": " A glow is just a simplified shadow\n", "type": "Color -> Float -> Attr decorative msg" }, { "name": "hairline", "comment": " ", "type": "Attribute msg" }, { "name": "heavy", "comment": " ", "type": "Attribute msg" }, { "name": "italic", "comment": " ", "type": "Attribute msg" }, { "name": "justify", "comment": " ", "type": "Attribute msg" }, { "name": "letterSpacing", "comment": " In `px`.\n", "type": "Float -> Attribute msg" }, { "name": "light", "comment": " ", "type": "Attribute msg" }, { "name": "medium", "comment": " ", "type": "Attribute msg" }, { "name": "monospace", "comment": " ", "type": "Font" }, { "name": "regular", "comment": " ", "type": "Attribute msg" }, { "name": "sansSerif", "comment": " ", "type": "Font" }, { "name": "semiBold", "comment": " ", "type": "Attribute msg" }, { "name": "serif", "comment": " ", "type": "Font" }, { "name": "shadow", "comment": " ", "type": "{ offset : ( Float, Float ), blur : Float, color : Color } -> Attr decorative msg" }, { "name": "size", "comment": " Font sizes are always given as `px`.\n", "type": "Int -> Attr decorative msg" }, { "name": "strike", "comment": " ", "type": "Attribute msg" }, { "name": "typeface", "comment": " ", "type": "String -> Font" }, { "name": "underline", "comment": " ", "type": "Attribute msg" }, { "name": "unitalicized", "comment": " This will reset bold and italic.\n", "type": "Attribute msg" }, { "name": "wordSpacing", "comment": " In `px`.\n", "type": "Float -> Attribute msg" } ], "binops": [] }, { "name": "Element.Events", "comment": "\n\n\n# Mouse Events\n\n@docs onClick, onDoubleClick, onMouseDown, onMouseUp, onMouseEnter, onMouseLeave, onMouseMove\n\n\n# Focus Events\n\n@docs onFocus, onLoseFocus\n\n", "unions": [], "aliases": [], "values": [ { "name": "onClick", "comment": " ", "type": "msg -> Attribute msg" }, { "name": "onDoubleClick", "comment": " ", "type": "msg -> Attribute msg" }, { "name": "onFocus", "comment": " ", "type": "msg -> Attribute msg" }, { "name": "onLoseFocus", "comment": " ", "type": "msg -> Attribute msg" }, { "name": "onMouseDown", "comment": " ", "type": "msg -> Attribute msg" }, { "name": "onMouseEnter", "comment": " ", "type": "msg -> Attribute msg" }, { "name": "onMouseLeave", "comment": " ", "type": "msg -> Attribute msg" }, { "name": "onMouseMove", "comment": " ", "type": "msg -> Attribute msg" }, { "name": "onMouseUp", "comment": " ", "type": "msg -> Attribute msg" } ], "binops": [] }, { "name": "Element.Border", "comment": " Border Properties\n\n@docs color\n\n\n# Border Widths\n\n@docs width, widthXY, widthEach\n\n\n# Border Styles\n\n@docs solid, dashed, dotted\n\n\n# Rounded Corners\n\n@docs rounded, roundEach\n\n\n# Shadows\n\n@docs glow, innerGlow, shadow, innerShadow\n\n", "unions": [], "aliases": [], "values": [ { "name": "color", "comment": " ", "type": "Color -> Attr decorative msg" }, { "name": "dashed", "comment": " ", "type": "Attribute msg" }, { "name": "dotted", "comment": " ", "type": "Attribute msg" }, { "name": "glow", "comment": " A simple glow by specifying the color and size.\n", "type": "Color -> Float -> Attr decorative msg" }, { "name": "innerGlow", "comment": " ", "type": "Color -> Float -> Attr decorative msg" }, { "name": "innerShadow", "comment": " ", "type": "{ offset : ( Float, Float ), size : Float, blur : Float, color : Color } -> Attr decorative msg" }, { "name": "roundEach", "comment": " ", "type": "{ topLeft : Int, topRight : Int, bottomLeft : Int, bottomRight : Int } -> Attribute msg" }, { "name": "rounded", "comment": " Round all corners.\n", "type": "Int -> Attribute msg" }, { "name": "shadow", "comment": " ", "type": "{ offset : ( Float, Float ), blur : Float, size : Float, color : Color } -> Attr decorative msg" }, { "name": "solid", "comment": " ", "type": "Attribute msg" }, { "name": "width", "comment": " ", "type": "Int -> Attribute msg" }, { "name": "widthEach", "comment": " ", "type": "{ bottom : Int, left : Int, right : Int, top : Int } -> Attribute msg" }, { "name": "widthXY", "comment": " Set horizontal and vertical borders.\n", "type": "Int -> Int -> Attribute msg" } ], "binops": [] }, { "name": "Element.Keyed", "comment": " Notes from the `Html.Keyed` on how keyed works:\n\n A keyed node helps optimize cases where children are getting added, moved, removed, etc. Common examples include:\n\n - The user can delete items from a list.\n - The user can create new items in a list.\n - You can sort a list based on name or date or whatever.\n\n When you use a keyed node, every child is paired with a string identifier. This makes it possible for the underlying diffing algorithm to reuse nodes more efficiently.\n\nThis means if a key is changed between renders, then the diffing step will be skipped and the node will be forced to rerender.\n\n@docs el, column, row\n\n", "unions": [], "aliases": [], "values": [ { "name": "column", "comment": " ", "type": "List (Attribute msg) -> List ( String, Element msg ) -> Element msg" }, { "name": "el", "comment": " ", "type": "List (Attribute msg) -> ( String, Element msg ) -> Element msg" }, { "name": "row", "comment": " ", "type": "List (Attribute msg) -> List ( String, Element msg ) -> Element msg" } ], "binops": [] }, { "name": "Element.Background", "comment": "\n\n@docs color, gradient\n\n\n# Images\n\n@docs image, uncropped, tiled, tiledX, tiledY\n\n**Note** if you want more control over a background image than is provided here, you should try just using a normal `Element.image` with something like `Element.behind`.\n\n", "unions": [], "aliases": [], "values": [ { "name": "color", "comment": " ", "type": "Color -> Attr decorative msg" }, { "name": "gradient", "comment": " A linear gradient.\n\nFirst you need to specify what direction the gradient is going by providing an angle in radians. `0` is up and `pi` is down.\n\nThe colors will be evenly spaced.\n\n", "type": "Float -> List Color -> Attribute msg" }, { "name": "image", "comment": " Resize the image to fit the containing element while maintaining proportions and cropping the overflow.\n", "type": "String -> Attribute msg" }, { "name": "tiled", "comment": " Tile an image in the x and y axes.\n", "type": "String -> Attribute msg" }, { "name": "tiledX", "comment": " Tile an image in the x axis.\n", "type": "String -> Attribute msg" }, { "name": "tiledY", "comment": " Tile an image in the y axis.\n", "type": "String -> Attribute msg" }, { "name": "uncropped", "comment": " A centered background image that keeps it's natural propostions, but scales to fit the space.\n", "type": "String -> Attribute msg" } ], "binops": [] }, { "name": "Element.Lazy", "comment": " Same as `Html.lazy`. In case you're unfamiliar, here's a note from the `Html` library!\n\n Since all Elm functions are pure we have a guarantee that the same input\n will always result in the same output. This module gives us tools to be lazy\n about building `Html` that utilize this fact.\n\n Rather than immediately applying functions to their arguments, the `lazy`\n functions just bundle the function and arguments up for later. When diffing\n the old and new virtual DOM, it checks to see if all the arguments are equal\n by reference. If so, it skips calling the function!\n\n This is a really cheap test and often makes things a lot faster, but definitely\n benchmark to be sure!\n\n@docs lazy\n\n_Note:_ For now only `lazy` that covers one argument can be provided. In `0.19` this will change!\n\n", "unions": [], "aliases": [], "values": [ { "name": "lazy", "comment": " ", "type": "(a -> Element msg) -> a -> Element msg" } ], "binops": [] }, { "name": "Element", "comment": "\n\n\n# Basic Elements\n\n@docs Element, Attribute, none, text, el\n\n\n# Rows and Columns\n\nRows and columns are the most common layouts.\n\n@docs row, column\n\n\n# Text Layout\n\nText needs it's own layout primitives.\n\n@docs paragraph, textColumn\n\n\n# Data Table\n\n@docs Table, Column, table\n\n@docs IndexedTable, IndexedColumn, indexedTable\n\n\n# Rendering\n\n@docs layout, layoutWith, Option, noStaticStyleSheet, forceHover, noHover, focusStyle, FocusStyle\n\n\n# Links and Images\n\n@docs Link, link, newTabLink, download, downloadAs\n\n@docs image, decorativeImage\n\n\n# Attributes\n\n@docs Attribute, transparent, alpha, pointer\n\n@docs width, height, Length, px, shrink, fill, fillPortion, minimum, maximum\n\n\n## Padding and Spacing\n\nThere's no concept of margin in `style-elements`, instead we have padding and spacing.\n\nPadding is what you'd expect, the distance between the outer edge and the content, and spacing is the space between children.\n\nSo, if we have the following row, with some padding and spacing.\n\n Element.row [ padding 10, spacing 7 ]\n [ Element.el [] none\n , Element.el [] none\n , Element.el [] none\n ]\n\nHere's what we can expect.\n\n\"Three\n\n@docs padding, paddingXY, paddingEach\n\n@docs spacing, spacingXY, spaceEvenly\n\n\n## Alignment\n\nAlignment can be used to align an `Element` within another `Element`.\n\n Element.el [ centerX, alignTop ] (text \"I'm centered and aligned top!\")\n\nIf alignment is set on elements in a layout such as `row`, then the element will push the other elements in that direction. Here's an example.\n\n Element.row []\n [ Element.el [] Element.none\n , Element.el [ alignLeft ] Element.none\n , Element.el [ centerX ] Element.none\n , Element.el [ alignRight ] Element.none\n ]\n\nwill result in a layout like\n\n |-|-| |-| |-|\n\nWhere there are two elements on the left, one in the center, and on on the right.\n\n@docs centerX, centerY, alignLeft, alignRight, alignTop, alignBottom\n\n\n# Nearby Elements\n\nLet's say we want a dropdown menu. Essentially we want to say: _put this element below this other element, but don't affect the layout when you do_.\n\n Elemenet.row []\n [ Element.el\n [ Element.below (Element.text \"I'm below!\")\n ]\n (Element.text \"I'm normal!\")\n ]\n\nThis will result in\n\n |- I'm normal! -|\n I'm below\n\nWhere `\"I'm Below\"` doesn't change the size of `Element.row`.\n\nThis is very useful for things like dropdown menus or tooltips.\n\n@docs above, below, onRight, onLeft, inFront, behind\n\n\n# Temporary Styling\n\n@docs Attr, Decoration, mouseOver, mouseDown, focused\n\n\n# Adjustment\n\n@docs moveRight, moveUp, moveLeft, moveDown, rotate, scale\n\n\n# Clipping and Scrollbars\n\nClip the content if it overflows.\n\n@docs clip, clipX, clipY\n\nIf these are present, the element will add a scrollbar if necessary.\n\n@docs scrollbars, scrollbarX, scrollbarY\n\n\n# Responsiveness\n\n@docs Device, classifyDevice\n\n\n# Scaling\n\n@docs modular\n\n\n## Mapping\n\n@docs map, mapAttribute\n\n\n## Compatibility\n\n@docs html, htmlAttribute\n\n", "unions": [], "aliases": [ { "name": "Attr", "comment": " This is a special attribute that counts as both a `Attribute msg` and a `Decoration`.\n", "args": [ "decorative", "msg" ], "type": "Attribute decorative msg" }, { "name": "Attribute", "comment": " Standard attribute which cannot be a decoration.\n", "args": [ "msg" ], "type": "Attribute () msg" }, { "name": "Column", "comment": " ", "args": [ "record", "msg" ], "type": "{ header : Element msg, view : record -> Element msg }" }, { "name": "Decoration", "comment": " Only decorations\n", "args": [], "type": "Attribute Never Never" }, { "name": "Device", "comment": " ", "args": [], "type": "{ phone : Bool, tablet : Bool, desktop : Bool, bigDesktop : Bool, portrait : Bool }" }, { "name": "Element", "comment": " The basic building block of your layout. Here we create a\n\n import Element\n\n view =\n Element.el [] (Element.text \"Hello!\")\n\n", "args": [ "msg" ], "type": "Element msg" }, { "name": "FocusStyle", "comment": " ", "args": [], "type": "{ borderColor : Maybe Color, backgroundColor : Maybe Color, shadow : Maybe { color : Color, offset : ( Int, Int ), blur : Int, size : Int } }" }, { "name": "IndexedColumn", "comment": " ", "args": [ "record", "msg" ], "type": "{ header : Element msg, view : Int -> record -> Element msg }" }, { "name": "IndexedTable", "comment": " ", "args": [ "records", "msg" ], "type": "{ data : List records, columns : List (IndexedColumn records msg) }" }, { "name": "Length", "comment": " ", "args": [], "type": "Length" }, { "name": "Link", "comment": " ", "args": [ "msg" ], "type": "{ url : String, label : Element msg }" }, { "name": "Option", "comment": " ", "args": [], "type": "Option" }, { "name": "Table", "comment": " ", "args": [ "records", "msg" ], "type": "{ data : List records, columns : List (Column records msg) }" } ], "values": [ { "name": "above", "comment": " ", "type": "Element msg -> Attribute msg" }, { "name": "alignBottom", "comment": " ", "type": "Attribute msg" }, { "name": "alignLeft", "comment": " ", "type": "Attribute msg" }, { "name": "alignRight", "comment": " ", "type": "Attribute msg" }, { "name": "alignTop", "comment": " ", "type": "Attribute msg" }, { "name": "alpha", "comment": " A capped value between 0.0 and 1.0, where 0.0 is transparent and 1.0 is fully opaque.\n\nSemantically equavalent to html opacity.\n\n", "type": "Float -> Attr decorative msg" }, { "name": "behind", "comment": " ", "type": "Element msg -> Attribute msg" }, { "name": "below", "comment": " ", "type": "Element msg -> Attribute msg" }, { "name": "centerX", "comment": " ", "type": "Attribute msg" }, { "name": "centerY", "comment": " ", "type": "Attribute msg" }, { "name": "classifyDevice", "comment": " Takes in a Window.Size and returns a device profile which can be used for responsiveness.\n", "type": "{ window | height : Int, width : Int } -> Device" }, { "name": "clip", "comment": " ", "type": "Attribute msg" }, { "name": "clipX", "comment": " ", "type": "Attribute msg" }, { "name": "clipY", "comment": " ", "type": "Attribute msg" }, { "name": "column", "comment": " ", "type": "List (Attribute msg) -> List (Element msg) -> Element msg" }, { "name": "decorativeImage", "comment": " If an image is purely decorative, you can skip the caption.\n", "type": "List (Attribute msg) -> { src : String } -> Element msg" }, { "name": "download", "comment": " A link to download a file.\n", "type": "List (Attribute msg) -> Link msg -> Element msg" }, { "name": "downloadAs", "comment": " A link to download a file, but you can specify the filename.\n", "type": "List (Attribute msg) -> { label : Element msg, filename : String, url : String } -> Element msg" }, { "name": "el", "comment": " The basic building block of your layout.\n\n import Color exposing (blue, darkBlue)\n import Element exposing (Element)\n import Element.Background as Background\n import Element.Border as Border\n\n myElement : Element msg\n myElement =\n Element.el\n [ Background.color blue\n , Border.color darkBlue\n ]\n (Element.text \"You've made a stylish element!\")\n\n", "type": "List (Attribute msg) -> Element msg -> Element msg" }, { "name": "fill", "comment": " Fill the available space. The available space will be split evenly between elements that have `width fill`.\n", "type": "Length" }, { "name": "fillPortion", "comment": " Sometimes you may not want to split available space evenly. In this case you can use `fillPortion` to define which elements should have what portion of the available space.\n\nSo, two elements, one with `width (fillPortion 2)` and one with `width (fillPortion 3)`. The first would get 2 portions of the available space, while the second would get 3.\n\nAlso: `fill == fillPortion 1`\n\n", "type": "Int -> Length" }, { "name": "focusStyle", "comment": " ", "type": "FocusStyle -> Option" }, { "name": "focused", "comment": " ", "type": "List Decoration -> Attribute msg" }, { "name": "forceHover", "comment": " Any `hover` styles, aka attributes with `mouseOver` in the name, will be always turned on.\n\nThis is useful for when you're targeting a platform that has no mouse, such as mobile.\n\n", "type": "Option" }, { "name": "height", "comment": " ", "type": "Length -> Attribute msg" }, { "name": "html", "comment": " ", "type": "Html msg -> Element msg" }, { "name": "htmlAttribute", "comment": " ", "type": "Attribute msg -> Attribute msg" }, { "name": "image", "comment": " Both a source and a description are required for images. The description is used to describe the image to screen readers.\n", "type": "List (Attribute msg) -> { src : String, description : String } -> Element msg" }, { "name": "inFront", "comment": " ", "type": "Element msg -> Attribute msg" }, { "name": "indexedTable", "comment": " Same as `Element.table` except the `view` for each column will also receive the row index as well as the record.\n", "type": "List (Attribute msg) -> IndexedTable data msg -> Element msg" }, { "name": "layout", "comment": " This is your top level node where you can turn `Element` into `Html`.\n", "type": "List (Attribute msg) -> Element msg -> Html msg" }, { "name": "layoutWith", "comment": " ", "type": "{ options : List Option } -> List (Attribute msg) -> Element msg -> Html msg" }, { "name": "link", "comment": "\n\n link []\n { url = \"google.com\"\n , label = text \"My Link to Google\"\n }\n\n", "type": "List (Attribute msg) -> Link msg -> Element msg" }, { "name": "map", "comment": " ", "type": "(msg -> msg1) -> Element msg -> Element msg1" }, { "name": "mapAttribute", "comment": " ", "type": "(msg -> msg1) -> Attribute msg -> Attribute msg1" }, { "name": "maximum", "comment": " ", "type": "Int -> Length -> Length" }, { "name": "minimum", "comment": " ", "type": "Int -> Length -> Length" }, { "name": "modular", "comment": " When designing it's nice to use a modular scale to set spacial rythms.\nscaled =\nScale.modular 16 1.25\n\nA modular scale starts with a number, and multiplies it by a ratio a number of times.\nThen, when setting font sizes you can use:\n\n Font.size (scaled 1) -- results in 16\n\n Font.size (scaled 2) -- 16 * 1.25 results in 20\n\n Font.size (scaled 4) -- 16 * 1.25 ^ (4 - 1) results in 31.25\n\nWe can also provide negative numbers to scale below 16px.\n\n Font.size (scaled -1) -- 16 * 1.25 ^ (-1) results in 12.8\n\n", "type": "Float -> Float -> Int -> Float" }, { "name": "mouseDown", "comment": " ", "type": "List Decoration -> Attribute msg" }, { "name": "mouseOver", "comment": " ", "type": "List Decoration -> Attribute msg" }, { "name": "moveDown", "comment": " ", "type": "Float -> Attr decorative msg" }, { "name": "moveLeft", "comment": " ", "type": "Float -> Attr decorative msg" }, { "name": "moveRight", "comment": " ", "type": "Float -> Attr decorative msg" }, { "name": "moveUp", "comment": " ", "type": "Float -> Attr decorative msg" }, { "name": "newTabLink", "comment": " ", "type": "List (Attribute msg) -> Link msg -> Element msg" }, { "name": "noHover", "comment": " Disable all `mouseOver` styles.\n", "type": "Option" }, { "name": "noStaticStyleSheet", "comment": " Style elements embeds two StyleSheets, one that is constant, and one that changes dynamically based on styles collected from the elments being rendered.\n\nThis option will stop the static/constant stylesheet from rendering.\n\nMake sure to render the constant/static stylesheet at least once on your page!\n\n", "type": "Option" }, { "name": "none", "comment": " Nothing to see here!\n", "type": "Element msg" }, { "name": "onLeft", "comment": " ", "type": "Element msg -> Attribute msg" }, { "name": "onRight", "comment": " ", "type": "Element msg -> Attribute msg" }, { "name": "padding", "comment": " ", "type": "Int -> Attribute msg" }, { "name": "paddingEach", "comment": " ", "type": "{ bottom : Int, left : Int, right : Int, top : Int } -> Attribute msg" }, { "name": "paddingXY", "comment": " Set horizontal and vertical padding.\n", "type": "Int -> Int -> Attribute msg" }, { "name": "paragraph", "comment": " A paragraph will layout all children as wrapped, inline elements.\n\n import Element\n import Element.Font as Font\n\n Element.paragraph []\n [ text \"lots of text ....\"\n , el [ Font.bold ] (text \"this is bold\")\n , text \"lots of text ....\"\n ]\n\nThis is really useful when you want to markup text by having some parts be bold, or some be links, or whatever you so desire.\n\nAlso, if a child element has `alignLeft` or `alignRight`, then it will be moved to that side and the text will flow around it, (ah yes, `float` behavior).\n\nThis makes it particularly easy to do something like a [dropped capital](https://en.wikipedia.org/wiki/Initial).\n\n import Element\n import Element.Font as Font\n\n Element.paragraph []\n [ el\n [ alignLeft\n , padding 5\n , Font.lineHeight 1\n ]\n (text \"S\")\n , text \"lots of text ....\"\n ]\n\nWhich will look something like\n\n\n\n", "type": "List (Attribute msg) -> List (Element msg) -> Element msg" }, { "name": "pointer", "comment": " Set the cursor to the pointer hand.\n", "type": "Attribute msg" }, { "name": "px", "comment": " ", "type": "Int -> Length" }, { "name": "rotate", "comment": " ", "type": "Float -> Attr decorative msg" }, { "name": "row", "comment": " If you want a row of elements, use `row`!\n", "type": "List (Attribute msg) -> List (Element msg) -> Element msg" }, { "name": "scale", "comment": " ", "type": "Float -> Attr decorative msg" }, { "name": "scrollbarX", "comment": " ", "type": "Attribute msg" }, { "name": "scrollbarY", "comment": " ", "type": "Attribute msg" }, { "name": "scrollbars", "comment": " ", "type": "Attribute msg" }, { "name": "shrink", "comment": " Shrink to an element to fit it's contents.\n", "type": "Length" }, { "name": "spaceEvenly", "comment": " ", "type": "Attribute msg" }, { "name": "spacing", "comment": " ", "type": "Int -> Attribute msg" }, { "name": "spacingXY", "comment": " In the majority of cases you'll just need to use `spacing`, which will work as intended.\n\nHowever for some layouts, like `textColumn`, you may want to set a different spacing for the x axis compared to the y axis.\n\n", "type": "Int -> Int -> Attribute msg" }, { "name": "table", "comment": " Show some tabular data.\n\nStart with a list of records and specify how each column should be rendered.\n\nSo, if we have a list of `persons`:\n\n type alias Person =\n { firstName : String\n , lastName : String\n }\n\n persons : List Person\n persons =\n [ { firstName = \"David\"\n , lastName = \"Bowie\"\n }\n , { firstName = \"Florence\"\n , lastName = \"Welch\"\n }\n ]\n\nWe could render it using\n\n Element.table []\n { data = persons\n , columns =\n [ { header = Element.text \"First Name\"\n , view =\n (\\person ->\n Element.text person.firstName\n )\n }\n , { header = Element.text \"Last Name\"\n , view =\n (\\person ->\n Element.text person.lastName\n )\n }\n ]\n }\n\n**Note:** Sometimes you might not have a list of records directly in your model. In this case it can be really nice to write a function that transforms some part of your model into a list of records before feeding it into `Element.table`.\n\n", "type": "List (Attribute msg) -> Table data msg -> Element msg" }, { "name": "text", "comment": " Create some plain text.\n\n text \"Hello, you stylish developer!\"\n\n**Note** text does not wrap by default. In order to get text to wrap, check out `paragraph`!\n\n", "type": "String -> Element msg" }, { "name": "textColumn", "comment": " Now that we have a paragraph, we need someway to attach a bunch of paragraph's together.\n\nTo do that we can use a `textColumn`.\n\nThe main difference between a `column` and a `textColumn` is that `textColumn` will flow the text around elements that have `alignRight` or `alignLeft`, just like we just saw with paragraph.\n\nIn the following example, we have a `textColumn` where one child has `alignLeft`.\n\n Element.textColumn [ spacing 10, padding 10 ]\n [ paragraph [] [ text \"lots of text ....\" ]\n , el [ alignLeft ] none\n , paragraph [] [ text \"lots of text ....\" ]\n ]\n\nWhich will result in something like:\n\n\n\n", "type": "List (Attribute msg) -> List (Element msg) -> Element msg" }, { "name": "transparent", "comment": " Make an element transparent and have it ignore any mouse or touch events, though it will stil take up space.\n", "type": "Bool -> Attr decorative msg" }, { "name": "width", "comment": " ", "type": "Length -> Attribute msg" } ], "binops": [] } ]