@antadesign/anta
    Preparing search index...

    Interface BoxPropsUnreviewed

    JSX props for the observing light-DOM <a-box> container.

    interface BoxProps {
        display?: BoxDisplay;
        round?: boolean | number | string;
        gap?: number | string;
        includeRectsFor?: string;
        padding?: number | string;
        margin?: number | string;
        observe?: BoxObservation | readonly BoxObservation[];
        observeOffscreen?: boolean;
        throttle?: number;
        fade?: boolean;
        fadeSize?: number | string;
        onMeasureChange?: (
            event: CustomEvent<BoxMeasurementChange>,
            detail: BoxMeasurementChange,
        ) => void;
        onContextChange?: (
            event: CustomEvent<BoxContextChange>,
            detail: BoxContextChange,
        ) => void;
        className?: string;
        style?: CSSProperties;
        children?: ReactNode;
        id?: string;
        title?: string;
        slot?: string;
        tabIndex?: number;
        key?: string | number | null;
        [key: `data-${string}`]: unknown;
        [key: `aria-${string}`]: unknown;
    }

    Hierarchy (View Summary)

    Indexable

    • [key: `data-${string}`]: unknown

      Any data-* attribute is forwarded to the rendered element.

    • [key: `aria-${string}`]: unknown

      Any aria-* attribute is forwarded to the rendered element.

    Index
    display? round? gap? includeRectsFor? padding? margin? observe? observeOffscreen? throttle? fade? fadeSize? onMeasureChange? onContextChange? className? style? children? id? title? slot? tabIndex? key?
    display?: BoxDisplay

    Layout model for the host. Sizing, alignment, mask, and shadow properties stay ordinary className / style CSS on the Box itself.

    block
    round?: boolean | number | string

    Fully-round corners (border-radius: 999px, clamped to the box). Pass a number (px) or a CSS length string ('1rem') for a custom radius. Omit for square corners.

    gap?: number | string

    Gap between children, matching the CSS gap property. A number is pixels; a string is any CSS length or two-value gap ('1rem', '8px 16px'). Applies while the Box is a flex or grid container.

    includeRectsFor?: string

    CSS selector for descendants whose border boxes are included in measurement.rects when Box measures. Coordinates are relative to this Box's top-left border edge; matches are in document order. Box reads and compares matching rects for each measurement event. With observe="scroll", use throttle when the selector matches many descendants; it also delays CSS state updates after the initial read.

    padding?: number | string

    Inner spacing, matching CSS padding. Numbers are pixels; strings accept CSS shorthand, percentages, and custom properties. Omission adds no style.

    margin?: number | string

    Outer spacing, matching CSS margin. Numbers are pixels; strings accept CSS shorthand, auto, negative lengths, and custom properties. Omission adds no style.

    observe?: BoxObservation | readonly BoxObservation[]

    One selection or an array of selections, in any order. 'size' watches width and height; 'context' watches rendering context; 'overflow' watches content dimensions and clipping. 'edges' reports which edges hide content; 'scroll' reports offsets, potentially every frame; 'all' selects everything. Selections are independent: use ['size', 'edges'] to combine them. A measurement handler implies 'size' when no measurement is selected; a context handler adds 'context'. Size skips content and scroll observers; overflow adds content observation; hidden edges and scroll add scroll reads. Without handlers or fade, omission stays idle.

    observeOffscreen?: boolean

    Keeps measurement events and CSS clipping states current outside the viewport. Has no effect unless observe or fade selects measurement.

    throttle?: number

    Minimum interval between measurements, in milliseconds. The initial measurement runs immediately; a trailing read updates CSS states and delivers the latest event. Descendant rects are read only for emitted events. The measurement getter always reads fresh values.

    0
    fade?: boolean

    Fades out every edge that currently hides clipped content, and drops the fade from an edge once the reader scrolls to it.

    fadeSize?: number | string

    Depth of the fade gradient. A number is pixels; a string is any CSS length.

    24
    onMeasureChange?: (
        event: CustomEvent<BoxMeasurementChange>,
        detail: BoxMeasurementChange,
    ) => void

    Fired when a selected measurement field changes. detail.changed contains fields changed since the previous event; detail.current includes the full snapshot with matching rects. Rect changes alone do not trigger an event.

    onContextChange?: (
        event: CustomEvent<BoxContextChange>,
        detail: BoxContextChange,
    ) => void

    Fired after Box's browser and local rendering context changes. detail contains the changed fields and a full current snapshot.

    className?: string

    CSS class on the component's root element (merged with the component's own classes). Use it directly for layout and positioning — grid/flex placement, margins, alignment — rather than wrapping the component in a <div>/<span>.

    style?: CSSProperties

    Inline styles on the component's root element. Set layout/positioning here (or via className) directly on the component instead of adding a wrapper.

    children?: ReactNode

    Child elements. When provided, replaces the component's default label/content.

    id?: string

    HTML id attribute.

    title?: string

    HTML title attribute — native browser tooltip on hover.

    slot?: string

    Assigns the element to a named <slot> of a parent web component (e.g. slot="header" inside a <Card>, slot="footer" inside a <Dialog>).

    tabIndex?: number

    Tab order. Set to -1 to skip the element when tabbing.

    key?: string | number | null

    React/Preact reconciliation key when rendered inside a list. Consumed by the JSX runtime (not forwarded as a DOM attribute).

    Settings
    Member Visibility

    On This Page
    Properties