component

Bulk Bar

props · 16 shown · 16 total

Content

  • BulkBarLabels

    Every string the bar renders or announces.

Data

  • BulkAction<TIcon>[]
    default []

    The bulk actions, in inline priority order. An action with `options` is a picker; one without is a command.

  • BulkSelection

    The selection the bar acts on, as a snapshot (`tableSelection`, `idSelection`, …). The bar opens while it has rows.

Appearance

  • "light" "dark"

    The page's color mode. `surface="inverse"` takes the other one; the bar's popups take this one.

  • "neutral" "highlight"
    default "neutral"

    The count chip's color. neutral: one surface step down (`surface.ground`). highlight: the selection color the selected rows wear.

  • "page" "inverse"
    default "page"

    The bar's color mode. page: the page's own mode. inverse: the opposite mode, scoped to the bar (needs `colorMode`); its popups go back to the page's.

Layout

  • "container" "viewport"
    default "container"

    Where the bar floats. container: bottom centre of the nearest positioned ancestor (the pane). viewport: fixed to the bottom of the window.

  • number

    How many labelled actions fit inline; the rest move into "More". The framework measures and passes it (`fitInline`). Omit for all.

  • boolean
    default true

    Whether "More" shows its label. When even the bar without labelled actions or "Select all" doesn't fit, it becomes an icon-only button (still named "More"). The framework measures and passes it (`fitBulkBar`).

  • boolean
    default true

    Whether "Select all N" fits in the bar. When it doesn't (a narrow container, once every labelled action is already in "More") it moves to the top of "More". The framework measures and passes it (`fitBulkBar`).

Behavior

  • boolean
    default false

    Keep the bar visible with nothing selected (its controls disabled).

  • returnFocus svelte
    () => HTMLElement | null | undefined

    Where focus goes when the bar closes while it holds focus (the selection emptied under a focused bar button) — typically the row or checkbox the user came from.

Events

  • onAction svelte
    (actionId: string, optionId?: string) => void

    A command ran (`optionId` undefined), or a picker's option was picked.

Advanced

  • class svelte
    string

    Consumer class, merged onto the bar.

  • element binding svelte
    Element null

    Bindable reference to the bar's root element.

  • BulkBarPassThrough

    Per-slot style and attribute override bag.

Plus all standard <div> HTML attributes.

Type

  • Components
  • Blocks