Skip to content

ConstraintsBar ​

Source: client/lib/theme/vueda-tailwind/display/index.js

Collapse wrapper. A grid-template-rows animation (0fr to 1fr) reveals or hides the band at the canonical interaction duration; the SFC sets the row value inline. Disabled under reduced-motion.

Vue component: ConstraintsBar

SlotDefault classesDescription
collapse3 classesCollapse wrapper. A grid-template-rows animation (0fr to 1fr) reveals or hides the band at the canonical interaction duration; the SFC sets the row value inline. Disabled under reduced-motion.
inneroverflow-hidden min-h-0Clipping wrapper inside the collapse grid; hides the band content while the row collapses to zero height.
root2 classesThe band wrapper. A single flex row that the hosted scope, filter, and sort groups flow into.
dividerh-5 w-hairline self-center bg-borderHairline divider between two active groups.

collapse ​

Collapse wrapper. A grid-template-rows animation (0fr to 1fr) reveals or hides the band at the canonical interaction duration; the SFC sets the row value inline. Disabled under reduced-motion.

Default classes:

text
grid transition-[grid-template-rows]
duration-[var(--vueda-duration-interaction)] ease-[var(--vueda-ease-interaction)]
motion-reduce:transition-none

Source: client/lib/theme/vueda-tailwind/display/ConstraintsBar.theme.js:18

inner ​

Clipping wrapper inside the collapse grid; hides the band content while the row collapses to zero height.

Default classes:

overflow-hidden min-h-0

Source: client/lib/theme/vueda-tailwind/display/ConstraintsBar.theme.js:26

root ​

The band wrapper. A single flex row that the hosted scope, filter, and sort groups flow into.

Default classes:

text
w-full flex flex-wrap items-center gap-x-3 gap-y-2 px-5 py-[10px]
border-b-hairline bg-[color-mix(in_oklab,var(--muted)_25%,var(--card))] text-foreground

Source: client/lib/theme/vueda-tailwind/display/ConstraintsBar.theme.js:30

divider ​

Hairline divider between two active groups.

Default classes:

h-5 w-hairline self-center bg-border

Source: client/lib/theme/vueda-tailwind/display/ConstraintsBar.theme.js:37