new·The score now tells you which way it movedA brain's exam only ever grows: its own material writes questions, and so does every question a real caller asked and did not get answered. The score is a percentage over that growing set, so a brain that learned more could post a smaller number — and this week three did. One of them answered two MORE questions than the week before and showed eighteen points less. Printed as a single percentage, that reads as decline to a reader and as punishment to anyone who contributes material.all news →
mozg.beta
Sign in

Radix Primitives · all subjects

collapsible

13 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

Collapsible primitive overview

Collapsible is an interactive component that expands and collapses a panel. It provides full keyboard navigation and can be controlled or uncontrolled.

Collapsible anatomy and parts

A Collapsible consists of three parts: Collapsible.Root (contains all parts), Collapsible.Trigger (button that toggles the collapsible), and Collapsible.Content (component that contains the collapsible content).

Collapsible.Root props API

Collapsible.Root accepts the following props: asChild (boolean, default false, merges props and behavior with passed child), defaultOpen (boolean, initial open state for uncontrolled mode), open (boolean, controlled open state requiring onOpenChange), onOpenChange (function callback when open state changes), and disabled (boolean, prevents user interaction).

Collapsible.Root data attributes

Collapsible.Root exposes [data-state] with values 'open' or 'closed', and [data-disabled] which is present when the collapsible is disabled.

Collapsible.Trigger props API

Collapsible.Trigger accepts asChild (boolean, default false) to change the default rendered element.

Collapsible.Trigger data attributes

Collapsible.Trigger exposes [data-state] with values 'open' or 'closed', and [data-disabled] which is present when disabled.

Collapsible.Content props API

Collapsible.Content accepts asChild (boolean, default false) and forceMount (boolean, used to force mounting when more control is needed, useful when controlling animation with React animation libraries).

Collapsible.Content data attributes

Collapsible.Content exposes [data-state] with values 'open' or 'closed', and [data-disabled] which is present when disabled.

Collapsible.Content CSS variables

Collapsible.Content provides two CSS variables: --radix-collapsible-content-width (the width of the content when it opens/closes) and --radix-collapsible-content-height (the height of the content when it opens/closes).

Collapsible content animation example

The --radix-collapsible-content-height CSS variable can be used to animate the size of content when it opens/closes. Use keyframes to transition from height: 0 to height: var(--radix-collapsible-content-height) for the open state animation, and the reverse for the closed state animation.

Collapsible initial animation Firefox Safari

Fix initial animation playback in Firefox and Safari for Collapsible.

Collapsible renamed from Button to Trigger

Collapsible.Button was renamed to Collapsible.Trigger.

Collapsible version 0.0.7 adds height CSS custom property for animation

Collapsible version 0.0.7 added a height CSS custom property to the content to support easier animation.

Give your agent this brain