[{"name":"UI.Backend.Graphics","comment":" Backend for the [UI module](https://github.com/UbiqueLambda/elm-with-ui) and [its renderer](https://github.com/UbiqueLambda/elm-with-ui-html).\n\n**NOTE**: Here you have a clone of all the functions exposed in the UI module, to make it sure you'll develop properly against the real thing.\n\n@docs Graphics, map\n\n@docs Color, intRGBA\n\n@docs Rect, Corners, singletonRect, singletonCorners\n\n@docs empty, looseText, spanText\n\n@docs singleton, row, column, stack, indexedRow, indexedColumn, indexedStack, implicitGroup, Direction\n\n@docs Attributes, PureAttributes, Layout, Events, Overflow, Inheritable\n\n@docs Length, withWidth, withFitContentsX, withHeight, withFitContentsY, withSpacing\n\n@docs withPadding, withPaddingXY, withPaddingEach\n\n@docs withScrollingX, withScrollingY, Scroll, scrollInsetAlwaysVisible\n\n@docs withBackground, Background, backgroundColor\n\n@docs withBorder, Border, border1uBlack, borderWithColor\n\n@docs borderWithWidth, borderWithWidthXY, borderWithWidthEach\n\n@docs borderWithRounding, borderWithRoundingEach\n\n@docs withOuterShadow, Shadow, shadow1uBlack, shadowWithColor, shadowWithLengthXY, shadowWithBlurRadius, shadowWithSpreadRadius\n\n@docs withTextAlign, TextAlignment\n\n@docs withAlignSelf, withJustifyItems, Alignment\n\n@docs withFontColor, withFontSize, withFontWeight\n\n@docs withFontFamilies, FontFallback\n\n@docs withInheritFontFamilies, withInheritFontColor, withInheritFontSize, withInheritFontWeight\n\n@docs withOnClick\n\n","unions":[{"name":"Alignment","comment":" Type for the possible alignment positions.\n","args":[],"cases":[["Start",[]],["Center",[]],["End",[]]]},{"name":"Attributes","comment":" You are supposed to not let this type escape to the final API.\n\nWhere all the group's attributes are stored. Opaque layer.\n\n","args":["msg"],"cases":[["Attributes",["UI.Backend.Graphics.PureAttributes msg"]]]},{"name":"Background","comment":" Type for the possible backgrounds types.\n","args":[],"cases":[["Background",["{ color : UI.Backend.Graphics.Color }"]]]},{"name":"Border","comment":" Type for describing border displaying.\n","args":[],"cases":[["Border",["{ color : UI.Backend.Graphics.Color, width : UI.Backend.Graphics.Rect, rounding : UI.Backend.Graphics.Corners }"]]]},{"name":"Color","comment":" Type for holding color primitives.\n","args":[],"cases":[["IntRGBA",["Basics.Int"]]]},{"name":"Direction","comment":" You are supposed to not let this type escape to the final API.\n\nThe direction in which a group grows.\n\n","args":[],"cases":[["Horizontal",[]],["Vertical",[]],["Stacked",[]]]},{"name":"FontFallback","comment":" Type for the possible font fallbacks.\n","args":[],"cases":[["SansSerif",[]],["Serif",[]],["Monospace",[]]]},{"name":"Graphics","comment":" Type for describing atoms or groups.\n","args":["msg"],"cases":[["Atomic",["String.String"]],["IndexedGroup",["UI.Backend.Graphics.Attributes msg","List.List (UI.Backend.Graphics.Graphics msg)"]],["KeyedGroup",["UI.Backend.Graphics.Attributes msg","List.List ( String.String, UI.Backend.Graphics.Graphics msg )"]]]},{"name":"Inheritable","comment":" You are supposed to not let this type escape to the final API\n","args":["a"],"cases":[["Inherit",[]],["Own",["a"]]]},{"name":"Length","comment":" \"Units\" here is defined by the renderer, please, stop mixing a bunch of metrics (px, in, em) in the same surface.\n","args":[],"cases":[["FitContents",[]],["Units",["Basics.Int"]]]},{"name":"Overflow","comment":" You are supposed to not let this type escape to the final API\n","args":[],"cases":[["Clip",[]],["Scrolling",["UI.Backend.Graphics.Scroll"]]]},{"name":"Scroll","comment":" Type for the possible options of scrolling.\n","args":[],"cases":[["Scroll",["{ alwaysVisible : Basics.Bool, inset : Basics.Bool }"]]]},{"name":"Shadow","comment":" Type for the describing shadow displaying.\n","args":[],"cases":[["Shadow",["{ color : UI.Backend.Graphics.Color, lengthX : Basics.Int, lengthY : Basics.Int, blurRadius : Basics.Int, spreadRadius : Basics.Int }"]]]},{"name":"TextAlignment","comment":" Type for the possible options of text alignemtn.\n","args":[],"cases":[["TextLeft",[]],["TextCenter",[]],["TextRight",[]]]}],"aliases":[{"name":"Corners","comment":" Helper type for grouping topLeft, topRight, bottomRight, and bottomLeft metrics (in units).\n","args":[],"type":"{ topLeft : Basics.Int, topRight : Basics.Int, bottomRight : Basics.Int, bottomLeft : Basics.Int }"},{"name":"Events","comment":" You are supposed to not let this type escape to the final API\n","args":["msg"],"type":"{ onClick : Maybe.Maybe msg }"},{"name":"Layout","comment":" You are supposed to not let this type escape to the final API.\n\nThis is a record, though I'm constantly reconsidering this because of the overhead created while updating it in V8.\n\nEvery attribute we current support is listed here. In the source of this file you can find the default values.\n\n","args":[],"type":"{ alignSelf : UI.Backend.Graphics.Alignment, background : Maybe.Maybe UI.Backend.Graphics.Background, border : Maybe.Maybe UI.Backend.Graphics.Border, displayDirection : Maybe.Maybe UI.Backend.Graphics.Direction, fontColor : UI.Backend.Graphics.Inheritable UI.Backend.Graphics.Color, fontFamilies : UI.Backend.Graphics.Inheritable ( List.List String.String, UI.Backend.Graphics.FontFallback ), fontSize : UI.Backend.Graphics.Inheritable Basics.Int, fontWeight : UI.Backend.Graphics.Inheritable Basics.Int, height : UI.Backend.Graphics.Length, justify : UI.Backend.Graphics.Alignment, outerShadow : Maybe.Maybe UI.Backend.Graphics.Shadow, overflowX : UI.Backend.Graphics.Overflow, overflowY : UI.Backend.Graphics.Overflow, padding : UI.Backend.Graphics.Rect, spacing : Basics.Int, textAlign : UI.Backend.Graphics.TextAlignment, width : UI.Backend.Graphics.Length }"},{"name":"PureAttributes","comment":" You are supposed to not let this type escape to the final API.\n\nWhere all the group's attributes are stored. Transparent layer.\n\n","args":["msg"],"type":"{ layout : UI.Backend.Graphics.Layout, events : UI.Backend.Graphics.Events msg }"},{"name":"Rect","comment":" Helper type for grouping top, right, bottom, and left distances (in units).\n","args":[],"type":"{ top : Basics.Int, right : Basics.Int, bottom : Basics.Int, left : Basics.Int }"}],"values":[{"name":"backgroundColor","comment":" Creates a background and fills it with a specific color.\n\n    green =\n        UI.intRGBA 0x00FF00FF\n\n    greenSquare =\n        UI.empty\n            |> UI.withWidth 32\n            |> UI.withHeight 32\n            |> UI.withBackground (UI.backgroundColor green |> Just)\n\n","type":"UI.Backend.Graphics.Color -> UI.Backend.Graphics.Background"},{"name":"border1uBlack","comment":" Creates a border with 1 unit on each side, solid and black.\n\n    emptySquare =\n        UI.empty\n            |> UI.withWidth 31\n            |> UI.withHeight 31\n            |> UI.withBorder (UI.border1uBlack |> Just)\n\n","type":"UI.Backend.Graphics.Border"},{"name":"borderWithColor","comment":" Changes the color of all sides of the border.\n\n    pink =\n        UI.intRGBA 0xFFC0CBFF\n\n    emptySquare =\n        UI.empty\n            |> UI.withWidth 31\n            |> UI.withHeight 31\n            |> UI.withBorder (UI.border1uBlack |> UI.borderWithColor pink |> Just)\n\n","type":"UI.Backend.Graphics.Color -> UI.Backend.Graphics.Border -> UI.Backend.Graphics.Border"},{"name":"borderWithRounding","comment":" Rounds all the corners of said group, including border, content and background (in units).\n\n    emptyCircle =\n        UI.empty\n            |> UI.withWidth 31\n            |> UI.withHeight 31\n            |> UI.withBorder (UI.border1uBlack |> UI.borderWithRounding 16 |> Just)\n\n","type":"Basics.Int -> UI.Backend.Graphics.Border -> UI.Backend.Graphics.Border"},{"name":"borderWithRoundingEach","comment":" Rounds each of the corners of said group, including border, content and background (in units).\n\n    emptyRoudedSquare =\n        UI.empty\n            |> UI.withWidth 31\n            |> UI.withHeight 31\n            |> UI.withBorder\n                (UI.border1uBlack\n                    |> UI.borderWithRoundingEach\n                        { topLeft = 8\n                        , topRight = 8\n                        , bottomRight = 4\n                        , bottomLeft = 4\n                        }\n                    |> Just\n                )\n\n","type":"UI.Backend.Graphics.Corners -> UI.Backend.Graphics.Border -> UI.Backend.Graphics.Border"},{"name":"borderWithWidth","comment":" Specify one width value to all sides of the border in units.\n\n    emptySquare32x32 =\n        UI.empty\n            |> UI.withWidth 24\n            |> UI.withHeight 24\n            |> UI.withBorder (UI.border1uBlack |> UI.borderWithWidth 4 |> Just)\n\n","type":"Basics.Int -> UI.Backend.Graphics.Border -> UI.Backend.Graphics.Border"},{"name":"borderWithWidthEach","comment":" Specify the width of each side's border.\n\n    emptySquare32x32 =\n        UI.empty\n            |> UI.withWidth 24\n            |> UI.withHeight 24\n            |> UI.withBorder\n                (UI.border1uBlack\n                    |> UI.borderWithWidthEach\n                        { top = 6\n                        , right = 5\n                        , bottom = 2\n                        , left = 3\n                        }\n                    |> Just\n                )\n\n","type":"UI.Backend.Graphics.Rect -> UI.Backend.Graphics.Border -> UI.Backend.Graphics.Border"},{"name":"borderWithWidthXY","comment":" Specify the width of X (pair left-right) and Y (pair top-bottom) borders in units.\n\n    emptySquare32x32 =\n        UI.empty\n            |> UI.withWidth 28\n            |> UI.withHeight 24\n            |> UI.withBorder\n                (UI.border1uBlack\n                    |> UI.borderWithWidthXY 2 4\n                    |> Just\n                )\n\n","type":"Basics.Int -> Basics.Int -> UI.Backend.Graphics.Border -> UI.Backend.Graphics.Border"},{"name":"column","comment":" Group itens disposing them vertically.\n\n    shopList model =\n        [ ( \"pineapple\", pineappleBox )\n        , ( \"rice\", riceBox )\n        , ( \"onions\", onionsBox )\n        ]\n            |> maybePrependBeans model\n            |> UI.column\n\n","type":"List.List ( String.String, UI.Backend.Graphics.Graphics msg ) -> UI.Backend.Graphics.Graphics msg"},{"name":"empty","comment":" Empty figure.\n","type":"UI.Backend.Graphics.Graphics msg"},{"name":"implicitGroup","comment":" You are supposed to not let this type escape to the final API\n","type":"UI.Backend.Graphics.Graphics msg -> UI.Backend.Graphics.Graphics msg"},{"name":"indexedColumn","comment":" You're supposed to tell the user to avoid this\n\nThis is like [`column`](#column), but the virtual-dom struggles to know what to recreate and what to update.\nIt should be fine when you group elements that don't disappear, don't decrease in number, don't increment, and don't swap their order.\n\n    pageView =\n        UI.indexedColumn\n            [ header\n            , text\n            , footer\n            ]\n\n","type":"List.List (UI.Backend.Graphics.Graphics msg) -> UI.Backend.Graphics.Graphics msg"},{"name":"indexedRow","comment":" You're supposed to tell the user to avoid this\n\nThis is like [`row`](#row), but the virtual-dom struggles to know what to recreate and what to update.\nIt should be fine when you group elements that don't disappear, don't decrease in number, don't increment, and don't swap their order.\n\n    tabsMenu =\n        UI.indexedRow\n            [ codeTab\n            , issuesTab\n            , prTab\n            , wikiTab\n            , settingsTab\n            ]\n\n","type":"List.List (UI.Backend.Graphics.Graphics msg) -> UI.Backend.Graphics.Graphics msg"},{"name":"indexedStack","comment":" You're supposed to tell the user to avoid this\n\nThis is like [`stack`](#stack), but the virtual-dom struggles to know what to recreate and what to update.\nIt should be fine when you group elements that don't disappear, don't decrease in number, don't increment, and don't swap their order.\n\n    tabsMenu =\n        UI.indexedStack\n            [ pageContents\n            , halfOpaqueBlackOverlay\n            , dialogBox\n            ]\n\n","type":"List.List (UI.Backend.Graphics.Graphics msg) -> UI.Backend.Graphics.Graphics msg"},{"name":"intRGBA","comment":" Elm's Int is 32 bits, don't fear it, use hexadecimal for colors.\n\n    red =\n        intRGBA 0xFF0000FF\n\n","type":"Basics.Int -> UI.Backend.Graphics.Color"},{"name":"looseText","comment":" Text without a container. Don't have any special behavior, it just renders.\n\nIn HTML, this will insert text in the document without surrouding it in a tag.\n\n**NOTE**: When you use any with-function in a loose-text, it automatically wraps in a [`singleton`](#singleton).\nThe result is then identical to a [`spanText`](#spanText).\n\n","type":"String.String -> UI.Backend.Graphics.Graphics msg"},{"name":"map","comment":" Usually used for nesting components.\n\n    dropdownView model =\n        UI.map ForDropdownMsg (MyDropdown.view model.dropdown)\n\n","type":"(a -> msg) -> UI.Backend.Graphics.Graphics a -> UI.Backend.Graphics.Graphics msg"},{"name":"row","comment":" Group itens disposing them horizontally.\n\n    pageView model =\n        [ ( \"contents\", contentsView model )\n        , ( \"tools\", toolingView model )\n        ]\n            |> maybePrependSidebar model\n            |> UI.row\n\n","type":"List.List ( String.String, UI.Backend.Graphics.Graphics msg ) -> UI.Backend.Graphics.Graphics msg"},{"name":"scrollInsetAlwaysVisible","comment":" The (default) HTML-like way of adding scrollbars to any group.\n\nThe scrollbar is inset, relative to the group's dimensions.\nAnd is always visible indiferent to the length of the group's contents.\n\nSee [`withScrollingX`](#withScrollingX) and [`withScrollingY`](#withScrollingY) for usage.\n\n","type":"UI.Backend.Graphics.Scroll"},{"name":"shadow1uBlack","comment":" The default shadow, black, 1 unit of length in X (slightly to the right) and Y (slightly to bottom),\n1 unit of blur-radius and 1 unit of spread-radius.\n","type":"UI.Backend.Graphics.Shadow"},{"name":"shadowWithBlurRadius","comment":" Change some shadow's blur-radius in units.\n\n    someShadow =\n        UI.shadow1uBlack\n            |> UI.shadowWithBlurRadius 12\n\n","type":"Basics.Int -> UI.Backend.Graphics.Shadow -> UI.Backend.Graphics.Shadow"},{"name":"shadowWithColor","comment":" Change some shadow's color.\n\n    someShadow =\n        UI.shadow1uBlack\n            |> UI.shadowWithColor cyan\n\n","type":"UI.Backend.Graphics.Color -> UI.Backend.Graphics.Shadow -> UI.Backend.Graphics.Shadow"},{"name":"shadowWithLengthXY","comment":" Changes the length in units of some shadow.\n\n  - Negatives X values means it grows to the left, positive X values means it grows to the right.\n  - Negatives Y values means it grows to the top, positive Y values means it grows to the bottom.\n\n```\nsomeShadow =\n    UI.shadow1uBlack\n        |> UI.shadowWithLengthXY 12 12\n```\n\n","type":"Basics.Int -> Basics.Int -> UI.Backend.Graphics.Shadow -> UI.Backend.Graphics.Shadow"},{"name":"shadowWithSpreadRadius","comment":" Change some shadow's spread-radius in units.\n\n    someShadow =\n        UI.shadow1uBlack\n            |> UI.shadowWithBlurRadius 12\n\n","type":"Basics.Int -> UI.Backend.Graphics.Shadow -> UI.Backend.Graphics.Shadow"},{"name":"singleton","comment":" Wraps a single element in a container.\n\n    nestedSquares =\n        UI.empty\n            |> UI.withWidth 25\n            |> UI.withHeight 25\n            |> UI.withBorder (UI.border1uBlack |> Just)\n            |> UI.singleton\n            |> UI.withBorder (UI.border1uBlack |> UI.borderWithColor red |> Just)\n            |> UI.singleton\n            |> UI.withBorder (UI.border1uBlack |> UI.borderWithColor orange |> Just)\n            |> UI.singleton\n            |> UI.withBorder (UI.border1uBlack |> UI.borderWithColor yellow |> Just)\n            |> UI.singleton\n            |> UI.withBorder (UI.border1uBlack |> UI.borderWithColor green |> Just)\n            |> UI.singleton\n            |> UI.withBorder (UI.border1uBlack |> UI.borderWithColor cyan |> Just)\n            |> UI.singleton\n            |> UI.withBorder (UI.border1uBlack |> UI.borderWithColor blue |> Just)\n\n","type":"UI.Backend.Graphics.Graphics msg -> UI.Backend.Graphics.Graphics msg"},{"name":"singletonCorners","comment":" Creates a [`Corners`](#Corners) with the same value on all its edges\n","type":"Basics.Int -> UI.Backend.Graphics.Corners"},{"name":"singletonRect","comment":" Creates a [`Rect`](#Rect) with the same value on all its sides\n","type":"Basics.Int -> UI.Backend.Graphics.Rect"},{"name":"spanText","comment":" Wraps text within a container. Behaves according to the parent grouping disposition.\n\nIn HTML, this will insert text in the document without surrouding it in a `<div>` tag.\n\n","type":"String.String -> UI.Backend.Graphics.Graphics msg"},{"name":"stack","comment":" Group itens disposing them one above the other. Head goes on bottom, tails goes on top.\n\n    pageView model =\n        [ ( \"contents\", pageContents ) ]\n            |> maybeAppendHalfOpaqueBlackOverlay model\n            |> maybeAppendDialogBox\n            |> UI.stack\n\n","type":"List.List ( String.String, UI.Backend.Graphics.Graphics msg ) -> UI.Backend.Graphics.Graphics msg"},{"name":"withAlignSelf","comment":" Aligns an item relative to the cross-axis of its group.\n\n    alignColumnContentsExample =\n        UI.column\n            [ pinkSquare\n                |> UI.withAlignSelf UI.start\n                |> Tuple.pair \"aligned-on-left\"\n            , greenSquare\n                |> UI.withAlignSelf UI.center\n                |> Tuple.pair \"aligned-on-center\"\n            , blueSquare\n                |> UI.withAlignSelf UI.end\n                |> Tuple.pair \"aligned-on-right\"\n            ]\n\n    alignRowContentsExample =\n        UI.row\n            [ pinkSquare\n                |> UI.withAlignSelf UI.start\n                |> Tuple.pair \"aligned-on-top\"\n            , greenSquare\n                |> UI.withAlignSelf UI.center\n                |> Tuple.pair \"aligned-on-center\"\n            , blueSquare\n                |> UI.withAlignSelf UI.end\n                |> Tuple.pair \"aligned-on-bottom\"\n            ]\n\n","type":"UI.Backend.Graphics.Alignment -> UI.Backend.Graphics.Graphics msg -> UI.Backend.Graphics.Graphics msg"},{"name":"withBackground","comment":" Applies a background to an element.\n\n    square =\n        UI.empty\n            |> UI.withWidth 32\n            |> UI.withHeight 32\n            |> UI.withBackground (UI.backgroundColor black |> Just)\n\n","type":"Maybe.Maybe UI.Backend.Graphics.Background -> UI.Backend.Graphics.Graphics msg -> UI.Backend.Graphics.Graphics msg"},{"name":"withBorder","comment":" Applies borders to an element.\n\n    square =\n        UI.empty\n            |> UI.withWidth 32\n            |> UI.withHeight 32\n            |> UI.withBorder (UI.border1uBlack |> Just)\n\n","type":"Maybe.Maybe UI.Backend.Graphics.Border -> UI.Backend.Graphics.Graphics msg -> UI.Backend.Graphics.Graphics msg"},{"name":"withFitContentsX","comment":" Instead of forcing the width, have enougth to show all the children contents.\n\nFor forcing a fixed one, see [`withWidth`](#withWidth).\n\n","type":"UI.Backend.Graphics.Graphics msg -> UI.Backend.Graphics.Graphics msg"},{"name":"withFitContentsY","comment":" Instead of forcing the height, have enougth to show all the children contents.\n\nFor forcing a fixed one, see [`withHeight`](#withHeight).\n\n","type":"UI.Backend.Graphics.Graphics msg -> UI.Backend.Graphics.Graphics msg"},{"name":"withFontColor","comment":" Changes the text's color.\n\nDefault text's color is inherited, where's in the root element it's black.\n\n    coolTitle =\n        UI.spanText \"HELLO\"\n            |> UI.withFontColor pink\n\n","type":"UI.Backend.Graphics.Color -> UI.Backend.Graphics.Graphics msg -> UI.Backend.Graphics.Graphics msg"},{"name":"withFontFamilies","comment":" Changes the text's font family. Tries all the font in the list, stopping in the first one available.\nThe fallback is used when nothing in the list is available.\n\nDefault font family value is inherited, where's in the root element it's [`serif`](#FontFallback).\n\n    coolTitle =\n        UI.spanText \"HELLO\"\n            |> UI.withFontFamilies\n                [ \"Borg Sans Mono\"\n                , \"Fira Code\"\n                , \"JuliaMono\"\n                , \"Fantasque Sans Mono\"\n                ]\n                UI.monospace\n\n","type":"List.List String.String -> UI.Backend.Graphics.FontFallback -> UI.Backend.Graphics.Graphics msg -> UI.Backend.Graphics.Graphics msg"},{"name":"withFontSize","comment":" Changes the text's size, in units.\n\nDefault text's color is inherited, where's in the root element it's 16 units.\n\n    coolTitle =\n        UI.spanText \"HELLO\"\n            |> UI.withFontSize 24\n\n","type":"Basics.Int -> UI.Backend.Graphics.Graphics msg -> UI.Backend.Graphics.Graphics msg"},{"name":"withFontWeight","comment":" Changes the text's weight.\n\nDefault font's weight is inherited, where's in the root element it's 400.\n\n    coolTitle =\n        UI.spanText \"BOLD\"\n            |> UI.withFontWeight 700\n\n","type":"Basics.Int -> UI.Backend.Graphics.Graphics msg -> UI.Backend.Graphics.Graphics msg"},{"name":"withHeight","comment":" Forces the group's height to a quantity in units.\n\nBy default, if the children's length is bigger, the content is cliped.\nSee [`withScrollingY`](#withScrollingY) to avoid it.\n\n    someSquare =\n        UI.empty\n            |> UI.withWidth 64\n            |> UI.withHeight 64\n            |> UI.withBackground (UI.backgroundColor blue |> Just)\n\n","type":"Basics.Int -> UI.Backend.Graphics.Graphics msg -> UI.Backend.Graphics.Graphics msg"},{"name":"withInheritFontColor","comment":" Instead of forcing the font's color, inherit it from the parent group.\n\nFor forcing a fixed one, or to learn about default behavior, see [`withFontColor`](#withFontColor).\n\n","type":"UI.Backend.Graphics.Graphics msg -> UI.Backend.Graphics.Graphics msg"},{"name":"withInheritFontFamilies","comment":" Instead of forcing the font's family, inherit it from the parent group.\n\nFor forcing a fixed one, or to learn about default behavior, see [`withFontFamilies`](#withFontFamilies).\n\n","type":"UI.Backend.Graphics.Graphics msg -> UI.Backend.Graphics.Graphics msg"},{"name":"withInheritFontSize","comment":" Instead of forcing the font's size, inherit it from the parent group.\n\nFor forcing a fixed one, or to learn about default behavior, see [`withFontSize`](#withFontSize).\n\n","type":"UI.Backend.Graphics.Graphics msg -> UI.Backend.Graphics.Graphics msg"},{"name":"withInheritFontWeight","comment":" Instead of forcing the font's weight, inherit it from the parent group.\n\nFor forcing a fixed one, or to learn about default behavior, see [`withFontWeight`](#withFontWeight).\n\n","type":"UI.Backend.Graphics.Graphics msg -> UI.Backend.Graphics.Graphics msg"},{"name":"withJustifyItems","comment":" How to align the items of a group.\nIn a row and in a stack this affects how they're show horizontally.\nIn a column this affects how they're show vertically.\n\n    alignRowContentsOnRightExample =\n        UI.row\n            [ pink32uSquare\n            , green32uSquare\n            , blue32uSquare\n            ]\n            |> UI.withWidth 640\n            |> UI.withJustifyItems UI.end\n\n","type":"UI.Backend.Graphics.Alignment -> UI.Backend.Graphics.Graphics msg -> UI.Backend.Graphics.Graphics msg"},{"name":"withOnClick","comment":" Listen for click events and dispatches the choosen message.\n\n**Implicit effect**: Changes the cursor to the platform's clickable-pointer, when available.\n\n    button =\n        UI.withOnClick Msg.IncrementCounter incrementButton\n\n","type":"msg -> UI.Backend.Graphics.Graphics msg -> UI.Backend.Graphics.Graphics msg"},{"name":"withOuterShadow","comment":" Applies outer-shadow to an element.\n\n    square =\n        UI.empty\n            |> UI.withWidth 32\n            |> UI.withHeight 32\n            |> UI.withBorder (UI.border1uBlack |> Just)\n            |> UI.withOuterShadow\n                (shadow1uBlack |> shadowWithColor green |> Just)\n\n","type":"Maybe.Maybe UI.Backend.Graphics.Shadow -> UI.Backend.Graphics.Graphics msg -> UI.Backend.Graphics.Graphics msg"},{"name":"withPadding","comment":" Applies empty space, in units, repeatedly on top, bottom, left and right, surrounding the group.\n\n    square =\n        UI.spanText \"Hello World!\"\n            |> UI.withPadding 12\n            |> UI.withBorder (UI.border1uBlack |> Just)\n\n","type":"Basics.Int -> UI.Backend.Graphics.Graphics msg -> UI.Backend.Graphics.Graphics msg"},{"name":"withPaddingEach","comment":" Applies empty space, in units, surrounding the group.\n\n    square =\n        UI.spanText \"Hello World!\"\n            |> UI.withPaddingEach { top = 1, right = 3, bottom = 4, left = 2 }\n            |> UI.withBorder (UI.border1uBlack |> Just)\n\n","type":"UI.Backend.Graphics.Rect -> UI.Backend.Graphics.Graphics msg -> UI.Backend.Graphics.Graphics msg"},{"name":"withPaddingXY","comment":" Applies empty space, in units, to X (left and right) and Y (top and bottom).\n\n    square =\n        UI.spanText \"Hello World!\"\n            |> UI.withPaddingXY 12 16\n            |> UI.withBorder (UI.border1uBlack |> Just)\n\n","type":"Basics.Int -> Basics.Int -> UI.Backend.Graphics.Graphics msg -> UI.Backend.Graphics.Graphics msg"},{"name":"withScrollingX","comment":" When the contents of a group does not fit into the group's width, you might want to show a horizontal scroll bar.\n\nSee [`scrollInsetAlwaysVisible`](#scrollInsetAlwaysVisible) for the only value available right now.\n`Nothing` means the content will be horizontally clipped (default behavior).\n\n    horizontalScrollbars items =\n        UI.row items\n            |> UI.withPadding 16\n            |> UI.withScrollingX (Just UI.scrollInsetAlwaysVisible)\n\n","type":"Maybe.Maybe UI.Backend.Graphics.Scroll -> UI.Backend.Graphics.Graphics msg -> UI.Backend.Graphics.Graphics msg"},{"name":"withScrollingY","comment":" When the contents of a group does not fit into the group's height, you might want to show a vertical scroll bar.\n\nSee [`scrollInsetAlwaysVisible`](#scrollInsetAlwaysVisible) for the only value available right now.\n`Nothing` means the content will be vertically clipped (default behavior).\n\n    verticalScrollbars items =\n        UI.column items\n            |> UI.withPadding 16\n            |> UI.withScrollingY (Just UI.scrollInsetAlwaysVisible)\n\n","type":"Maybe.Maybe UI.Backend.Graphics.Scroll -> UI.Backend.Graphics.Graphics msg -> UI.Backend.Graphics.Graphics msg"},{"name":"withSpacing","comment":" Empty space between the items of a group, in units.\n\n    spacedRow =\n        UI.row [ item1, item2, item3 ]\n            |> UI.withSpacing 8\n\n","type":"Basics.Int -> UI.Backend.Graphics.Graphics msg -> UI.Backend.Graphics.Graphics msg"},{"name":"withTextAlign","comment":" Where to align text inside a group.\n\n    spacedRow =\n        UI.spanText \"Foo Bar\"\n            |> UI.withWidth 640\n            |> UI.withTextAlign UI.textCenter\n\n","type":"UI.Backend.Graphics.TextAlignment -> UI.Backend.Graphics.Graphics msg -> UI.Backend.Graphics.Graphics msg"},{"name":"withWidth","comment":" Forces the group's width to a quantity in units.\n\nBy default, if the children's length is bigger, the content is cliped.\nSee [`withScrollingX`](#withScrollingX) to avoid it.\n\n    someSquare =\n        UI.empty\n            |> UI.withWidth 64\n            |> UI.withHeight 64\n            |> UI.withBackground (UI.backgroundColor blue |> Just)\n\n","type":"Basics.Int -> UI.Backend.Graphics.Graphics msg -> UI.Backend.Graphics.Graphics msg"}],"binops":[]}]