Skip to content

BbCollapsible

Toggles visibility of collapsible content blocks.

import { BbCollapsible } from 'bitboss-ui';

On this page

Props

NameTypeDefaultDescription
eagerboolean | undefinedfalse

Prevents rendering content before it's made visible.

Renders the slot before the first open. Needed when the content must exist up front — a form field that registers and validates, text a prerendered page has to carry, anything measured on mount. It does not weaken the hidden state: closed content stays aria-hidden and inert either way.

See example
modelValueboolean | undefinedfalse

Used by v-model to trigger opening / closing the collapsible. Optional, matching the runtime: withDefaults supplies false, so an omitted binding renders closed and Vue never warns. It was typed required while carrying that default, which made the manifest publish a row that was required: true AND default: false — a contradiction that read as a generator bug.

One-way. The component renders this value and never writes it back — there is no event and no model row on this page, because it cannot open or close itself. v-model compiles but acts purely as a prop binding, so put side effects on your trigger. Initialize it explicitly: an undefined binding renders as closed rather than warning.

See example
ptPtMap<BbCollapsiblePtPart, "open"> | undefined-

Passthrough, object form: the same keys as the pt:* attributes without the prefix. See the pt:<part> row.

pt:contentPtValue | undefined-
pt:content:openPtValue | undefined-
pt:rootPtValue | undefined-
pt:root:openPtValue | undefined-
tagLayoutTag | undefined"span"

Element rendered as the root, and mirrored by the inner animating element — so the pair is span-in-span or div-in-div, both valid. Keep the default inside phrasing content (a <p>); use 'div' when the body is block content (paragraphs, lists, forms), which a span may not contain.

transitionDurationnumber | undefined250

How long the transition has to last in milliseconds

Milliseconds; the manifest default resolves to 250. One value drives both the height animation and the opacity fade. Under prefers-reduced-motion: reduce both drop to near-instant regardless of what you pass.

See example

Slots

The listed properties are the ones exposed to the slot scope.

NameTypeDescription
defaultany

The collapsible body content that is shown or hidden based on modelValue. When eager is false, the content is not rendered until the first open.

Deferred until the first open, then mounted for good, so state inside survives close and reopen. Put padding and borders on what you slot in here, not on the collapsible: its own spacing is forced to zero to guarantee a true zero-height collapse.

See example