← Back to Docs
  • index.html
  • Clayground
  • Clayground.Lab
  • CardFocusRing
  • Clayground 2026.7
  • CardFocusRing QML Type

    The ring a card's control wears while the keyboard is on it. More...

    Import Statement: import Clayground.Lab
    Inherits:

    Rectangle

    Properties

    Detailed Description

    Declare one inside any control row of a selection card and bind on to "this row is the focused one" - every card then shares one focus language instead of each lab inventing an outline. It draws just outside the row's bounds, never takes input, and draws nothing while on is false.

    Declared inside, but not living inside: a positioner (Row, Column, Grid, Flow) lays out every visible child, so an anchored ring as a real child breaks the very row it frames ("Row will not function", verbatim). On completion the ring therefore notes the row it was declared in as its track and climbs out of every positioner above it, following the row's geometry from the outside.

    Row {
        id: stateChips
        CardFocusRing { on: root.cardFocusedRow === "state" }
        // ... the chips
    }

    See also LabKeys::selection and SelectionFrame3D.

    Property Documentation

    host : Item

    Where the ring actually lives - the first non-positioner ancestor unless a lab names one.


    on : bool

    This row is the one j/\c k landed on.


    track : Item

    The row to frame; defaults to where the ring was declared.