← all modules

Std.Ui

Std.Ui
  Std.Ui — typed, no-CSS layout DSL for Sky.Live / Sky.Tui / Sky.Webview.

Types
  type Element msg = Empty | Text String | Node Description (List (Attribute msg)) (List (Element msg)) | TaggedNode String Description (List (Attribute msg)) (List (Element msg)) | Raw any
  type Attribute msg = NoAttribute | AttrWidth Length | AttrHeight Length | AttrAlignX HAlign | AttrAlignY VAlign | AttrNearby Location (Element msg) | AttrPadding Int Int Int Int | AttrSpacing Int | AttrStyle String String | AttrDescribe Description | AttrClass String | AttrEvent any | AttrAttribute String String | AttrFontSize Int | AttrFontColor Color | AttrFontFamily String | AttrFontWeight Int | AttrFontItalic | AttrFontUnderline | AttrFontDecoration String | AttrFontLetterSpacing Float | AttrFontWordSpacing Float | AttrFontAlign String | AttrBgColor Color | AttrBgImage String | AttrBgGradient String | AttrBorderWidth Int | AttrBorderWidthEach Int Int Int Int | AttrBorderColor Color | AttrBorderRounded Int | AttrBorderStyle String | AttrBorderShadow Int Int Int Int Color | AttrBorderInsetShadow Int Int Int Int Color | AttrPointer | AttrOverflow String String | AttrPseudoRule PseudoClass String | AttrTransition String Bool | AttrAnimation String String String Bool
  type PseudoClass = Hover | Focus | FocusVisible | Active | Disabled
  type Length = Px Int | Content | Fill Int | Min Int Length | Max Int Length | Vh Int | Vw Int
  type HAlign = AlignLeft | CenterX | AlignRight
  type VAlign = AlignTop | CenterY | AlignBottom
  type Location = Above | Below | OnRight | OnLeft | InFront | Behind
  type Color = Rgba Int Int Int Float
  type Description = NoDescription | DescMain | DescNavigation | DescContentInfo | DescComplementary | DescHeading Int | DescLabel String | DescLivePolite | DescLiveAssertive | DescButton | DescParagraph
  type LayoutContext
  type Breakpoint = SmAndUp | MdAndUp | LgAndUp | XlAndUp | Mobile | Tablet | Desktop | DarkMode | LightMode | ReducedMotion | TouchDevice | Portrait | Landscape | Custom Int Int
  type AnimationEntry = AnimationEntry String String String Bool
  type alias Nesting = { phrasing : Bool , inLink : Bool , inButton : Bool , inForm : Bool , inHeading : Bool }
  type alias MarkerFlags = { row : Bool , col : Bool , paragraph : Bool , textcolumn : Bool , grid : Bool , wrap : Bool }

Values
  above : Element msg -> Attribute msg
      Attach an Element as an absolutely-positioned overlay relative to
  active : PseudoClass
  alignBottom : Attribute msg
  alignLeft : Attribute msg
  alignRight : Attribute msg
  alignTop : Attribute msg
  animateRaw : String -> String -> String -> Bool -> Attribute msg
      `Ui.animateRaw name shorthand keyframesBody respect` — low-level
  animationEntryName : AnimationEntry -> String
      Extract the name of an AnimationEntry. Helper for users /
  aspectRatio : Float -> Attribute msg
      Lock an element to a fixed width/height ratio. Compiles to inline
  aspectRatioWH : Int -> Int -> Attribute msg
      Lock an element to a width:height ratio expressed as two integers.
  behind : Element msg -> Attribute msg
  below : Element msg -> Attribute msg
  bgColor : Color -> Attribute msg
      Sky's canonicaliser doesn't propagate type parameters when ADT
  bgGradient : String -> Attribute msg
  bgImage : String -> Attribute msg
  black : Color
  borderColor : Color -> Attribute msg
  borderInsetShadow : Int -> Int -> Int -> Int -> Color -> Attribute msg
  borderRounded : Int -> Attribute msg
  borderShadow : Int -> Int -> Int -> Int -> Color -> Attribute msg
  borderStyle : String -> Attribute msg
  borderWidth : Int -> Attribute msg
  borderWidthEach : Int -> Int -> Int -> Int -> Attribute msg
  breakpoint : Breakpoint -> List (Attribute msg) -> Element msg -> Element msg
      `breakpoint bp attrs child` — wrap `child` so the attrs apply only
  breakpointToQuery : Breakpoint -> String
      Map a Breakpoint to its CSS media-query expression. Defaults
  button : List (Attribute msg) -> { onPress : Maybe msg , label : Element msg } -> Element msg
      A `<button>`. Use `Ui.onClick` to attach a handler. The default
  centerX : Attribute msg
  centerY : Attribute msg
  cinemascope : Attribute msg
      21:9 ultra-wide (cinemascope) — common for hero banners + cinema
  class : String -> Attribute msg
      Add a CSS class to the rendered element. Doesn't replace existing
  clip : Attribute msg
      Clip overflow on both axes (overflow: hidden). Use when an
  clipX : Attribute msg
      Single-axis clip uses the `clip` keyword, not `hidden`. CSS
  clipY : Attribute msg
  collectAnimations : List (Attribute msg) -> List AnimationEntry
      Extract animation specs from the attribute list. Returns a list
  collectPseudoRules : List (Attribute msg) -> List ( String, String )
      Extract pseudo-class rules from the attribute list. Returned
  collectTransitions : List (Attribute msg) -> ( String, Bool )
      Extract transition rules from the attribute list. Returns the
  colorCss : Color -> String
      Render a Color as a CSS rgba(...) string using percentage
  column : List (Attribute msg) -> List (Element msg) -> Element msg
  customRangeQuery : Int -> Int -> String
      0 means "unset". Both 0 → fallback `all` matches everything (the
  darkMode : Breakpoint
  descComplementary : Description
  descContentInfo : Description
  descHeading : Int -> Description
  descLabel : String -> Description
  descLiveAssertive : Description
  descLivePolite : Description
  descMain : Description
      Description-value helpers. Description is a non-parameterised ADT
  descNavigation : Description
  describe : Description -> Attribute msg
  desktop : Breakpoint
  disabled : PseudoClass
  el : List (Attribute msg) -> Element msg -> Element msg
  elementText : Element msg -> String
      Extract a plain string from a `Text s` element, or "" for any
  encodePseudoRules : List ( String, String ) -> String
      Serialise the collected pseudo rules into the on-the-wire
  fileMaxHeight : Int -> Attribute msg
      Image resize hint — height in pixels. Pair with `fileMaxWidth`.
  fileMaxSize : Int -> Attribute msg
      Client-side file-size cap in bytes. Files exceeding this are
  fileMaxWidth : Int -> Attribute msg
      Image resize hint — width in pixels. The image is scaled to fit
  fill : Length
  fillPortion : Int -> Length
  focus : PseudoClass
  focusVisible : PseudoClass
  fontAlign : String -> Attribute msg
      text-align kernel — `value` is the raw CSS keyword
  fontColor : Color -> Attribute msg
  fontDecoration : String -> Attribute msg
      Generic text-decoration kernel — `value` is the raw CSS keyword
  fontFamily : String -> Attribute msg
      Pre-join with `, ` for the CSS family stack. Tier-1 sidestep:
  fontItalic : Attribute msg
  fontLetterSpacing : Float -> Attribute msg
  fontSize : Int -> Attribute msg
  fontUnderline : Attribute msg
  fontWeight : Int -> Attribute msg
  fontWordSpacing : Float -> Attribute msg
  form : List (Attribute msg) -> List (Element msg) -> Element msg
      A `<form>`. Wrap inputs to use the `<form onSubmit=...>` pattern
  fullHd : Attribute msg
      16:9 — alias for `widescreen` (full-HD is 1920×1080, same ratio).
  grid : List (Attribute msg) -> List (Element msg) -> Element msg
      Auto-fit grid container — the right primitive for product cards,
  gridColumns : Int -> Attribute msg
      Set the minimum column width for a `Ui.grid` container. Compiles
  gridTracksRaw : String -> String -> Attribute msg
      Explicit grid track lists (issue #379). Pre-built CSS strings —
  height : Length -> Attribute msg
  hover : PseudoClass
      `:hover`, `:focus`, `:focus-visible`, `:active`, `:disabled` —
  html : any -> Element msg
      Escape hatch — wrap an arbitrary Std.Html node as an Element.
  htmlAttribute : String -> String -> Attribute msg
      Add an arbitrary HTML attribute to the element (href, src, name,
  image : List (Attribute msg) -> { src : String , description : String } -> Element msg
      Inline image with required src + alt for accessibility. Renders
  inFront : Element msg -> Attribute msg
  input : List (Attribute msg) -> Element msg
      A `<input>`. The browser fires `input` and `change` events
  island : { name : String, id : String, props : Value } -> List (Attribute msg) -> Element msg
      A widget island: a place in the view that a third-party JS widget (a
  landscape : Breakpoint
  layout : List (Attribute msg) -> Element msg -> Html.Html msg
      Render an Element tree to plain Html. Wrap your top-level view
  layoutWith : { wrapperAttrs : List (Attribute msg) , rootAttrs : List (Attribute msg) } -> Element msg -> Html.Html msg
      `Ui.layoutWith` — additive entry point that lets callers reach
  lgAndUp : Breakpoint
  lightMode : Breakpoint
  link : List (Attribute msg) -> { url : String , label : Element msg } -> Element msg
      Hyperlink. Renders as `<a href=…>…</a>`. The href is set as an
  maximum : Int -> Length -> Length
  mdAndUp : Breakpoint
  mediaQuery : String -> List (Attribute msg) -> Element msg -> Element msg
      Escape hatch — any raw CSS media-query string. The string is
  minimum : Int -> Length -> Length
  mobile : Breakpoint
      Typed-constant shortcuts so user code can write `Ui.mobile` /
  name : String -> Attribute msg
      Convenience for the `name` attribute on form inputs. Sky.Live's
  none : Element msg
  onChange : (String -> msg) -> Attribute msg
  onClick : msg -> Attribute msg
      Bind a click handler. The msg is dispatched on the wire when the
  onEnter : msg -> Attribute msg
      Fire a Msg on a plain Enter (no Shift); Shift-Enter inserts a newline.
  onFile : (String -> msg) -> Attribute msg
      File-input change handler. Wire this on `<input type="file">`
  onFocus : msg -> Attribute msg
  onImage : (String -> msg) -> Attribute msg
      Image-input change handler — same as onFile, plus a browser-side
  onInput : (String -> msg) -> Attribute msg
      Input change handler — fires per keystroke for text inputs.
  onIslandEvent : String -> Decoder a -> (a -> msg) -> Attribute msg
      A widget event: the widget calls `send type data` and the `data`
  onKeyDown : msg -> Attribute msg
      Fire a Msg on every keydown. It is a bare-Msg event (like onFocus): the key
  onLeft : Element msg -> Attribute msg
  onMouseOut : msg -> Attribute msg
  onMouseOver : msg -> Attribute msg
  onPseudo : PseudoClass -> List (Attribute msg) -> Attribute msg
      Generic escape hatch — attach a set of attrs that apply only
  onRight : Element msg -> Attribute msg
  onSubmit : a -> Attribute b
      Form-submit handler — fires when the form is submitted (Enter
  overflow : String -> String -> Attribute msg
  padding : Int -> Attribute msg
      Uniform padding on all four sides.
  paddingEach : { top : Int , right : Int , bottom : Int , left : Int } -> Attribute msg
      Per-side padding. Record-shaped to match `Std.Ui.Border.widthEach`
  paddingXY : Int -> Int -> Attribute msg
      (horizontal, vertical) padding — elm-ui order (X first, Y second).
  paragraph : List (Attribute msg) -> List (Element msg) -> Element msg
      A `<p>` block. Children flow as inline text (no flex layout); use
  pointer : Attribute msg
      Cursor: pointer. Marks an element as clickable.
  portrait : Breakpoint
  pseudoClassSelector : PseudoClass -> String
      Map a PseudoClass to its CSS selector suffix (`:hover`,
  pseudoClassTag : PseudoClass -> String
      Stable wire tag for a PseudoClass — the runtime parser keys off
  px : Int -> Length
  reducedMotion : Breakpoint
  rgb : Int -> Int -> Int -> Color
      0-255 integer channels. Recommended for predictable colours.
  rgb255 : Int -> Int -> Int -> Color
  rgba : Int -> Int -> Int -> Float -> Color
      0-255 RGB + 0-1 alpha. Alpha stays Float for transparency
  row : List (Attribute msg) -> List (Element msg) -> Element msg
  scrollbarX : Attribute msg
      The off-axis is `hidden`, not `visible`: a `visible` off-axis
  scrollbarY : Attribute msg
  scrollbars : Attribute msg
      Show scrollbars on overflow on both axes.
  shrink : Length
  smAndUp : Breakpoint
  spacing : Int -> Attribute msg
      Gap between children of a row / column container.
  square : Attribute msg
      1:1 square — alias for `aspectRatio 1.0` / `aspectRatioWH 1 1`.
  style : String -> String -> Attribute msg
      Raw inline-style escape hatch. Prefer the typed attrs above.
  tablet : Breakpoint
  text : String -> Element msg
      `text s` — a run of text. Inside a `paragraph` it is inline and flows
  textColumn : List (Attribute msg) -> List (Element msg) -> Element msg
      Stack of paragraph-style children. Renders as a block-level
  textNoWrap : String -> Element msg
      `textNoWrap s` — a run of text that never wraps: one line, clipped or
  touchDevice : Breakpoint
  transitionRaw : String -> Bool -> Attribute msg
      `Ui.transitionRaw shorthand respect` — low-level escape hatch
  transparent : Color
  vh : Int -> Length
      Viewport-relative length: `vh n` = `n%` of the viewport height,
  vw : Int -> Length
  white : Color
  widescreen : Attribute msg
      16:9 widescreen — alias for `aspectRatioWH 16 9`. Matches HDTV /
  width : Length -> Attribute msg
  wrappedRow : List (Attribute msg) -> List (Element msg) -> Element msg
      Like `row`, but children that overflow the parent's width wrap to
  xlAndUp : Breakpoint