PropertySection

PropertySection supplies collapsible section anatomy and canonical open, empty, and disabled state attributes without imposing presentation.

Layer

⌘ L

Collapsible content

Effects

Action: None

Fill 1

Fill 2

Anatomy

• PropertySectionRoot — controlled or uncontrolled Collapsible state
• PropertySectionHeader — structural header container
• PropertySectionTitle — accessible Collapsible trigger
• PropertySectionActions — sibling action area, avoiding nested buttons
• PropertySectionContent — collapsible content region
• PropertySectionEmptyAction — empty-only action that opens before emitting activate

<script setup lang="ts">
import {
  PropertySectionContent,
  PropertySectionHeader,
  PropertySectionRoot,
  PropertySectionTitle
} from '@open-pencil/vue'
</script>

<template>
  <PropertySectionRoot default-open>
    <PropertySectionHeader>
      <PropertySectionTitle>Layout</PropertySectionTitle>
    </PropertySectionHeader>
    <PropertySectionContent>Panel fields</PropertySectionContent>
  </PropertySectionRoot>
</template>

Generated API reference

PropertySectionRoot

Generated from packages/vue/src/primitives/PropertySection/PropertySectionRoot.vue

Props

Prop	Default	Type
open Controlled expanded state.	—	boolean | undefined
defaultOpen Initial expanded state when uncontrolled.	true	boolean | undefined
empty Marks the section as having no current items.	—	boolean | undefined
disabled Prevents the section from being toggled.	—	boolean | undefined
unmountOnHide Keep collapsed content mounted in the DOM.	false	boolean | undefined

Events

Event	Payload	Description
update:open	[open: boolean]

Slots

Slot	Props	Description
default	PropertySectionSlotProps

PropertySectionHeader

Generated from packages/vue/src/primitives/PropertySection/PropertySectionHeader.vue

Props

Prop	Default	Type
asChild Change the default rendered element for the one passed as a child, merging their props and behavior. Read our [Composition](https://www.reka-ui.com/docs/guides/composition) guide for more details.	false	boolean | undefined
as The element or component this component should render as. Can be overwritten by `asChild`.	"div"	AsTag | Component | undefined

Slots

Slot	Props	Description
default	{ open: boolean; empty: boolean; stateAttrs: PropertySectionStateAttrs; actions: PropertySectionActionAPI; }

PropertySectionTitle

Generated from packages/vue/src/primitives/PropertySection/PropertySectionTitle.vue

Props

Prop	Default	Type
asChild Change the default rendered element for the one passed as a child, merging their props and behavior. Read our [Composition](https://www.reka-ui.com/docs/guides/composition) guide for more details.	false	boolean | undefined
as The element or component this component should render as. Can be overwritten by `asChild`.	"div"	AsTag | Component | undefined

Slots

Slot	Props	Description
default	{ open: boolean; empty: boolean; stateAttrs: PropertySectionStateAttrs; actions: PropertySectionActionAPI; }

PropertySectionActions

Generated from packages/vue/src/primitives/PropertySection/PropertySectionActions.vue

Props

Prop	Default	Type
asChild Change the default rendered element for the one passed as a child, merging their props and behavior. Read our [Composition](https://www.reka-ui.com/docs/guides/composition) guide for more details.	false	boolean | undefined
as The element or component this component should render as. Can be overwritten by `asChild`.	"div"	AsTag | Component | undefined

Slots

Slot	Props	Description
default	{ open: boolean; empty: boolean; stateAttrs: PropertySectionStateAttrs; actions: PropertySectionActionAPI; }

PropertySectionContent

Generated from packages/vue/src/primitives/PropertySection/PropertySectionContent.vue

Props

Prop	Default	Type
asChild Change the default rendered element for the one passed as a child, merging their props and behavior. Read our [Composition](https://www.reka-ui.com/docs/guides/composition) guide for more details.	false	boolean | undefined
as The element or component this component should render as. Can be overwritten by `asChild`.	"div"	AsTag | Component | undefined

Slots

Slot	Props	Description
default	{ open: boolean; empty: boolean; stateAttrs: PropertySectionStateAttrs; actions: PropertySectionActionAPI; }

PropertySectionEmptyAction

Generated from packages/vue/src/primitives/PropertySection/PropertySectionEmptyAction.vue

Props

Prop	Default	Type
asChild Change the default rendered element for the one passed as a child, merging their props and behavior. Read our [Composition](https://www.reka-ui.com/docs/guides/composition) guide for more details.	false	boolean | undefined
as The element or component this component should render as. Can be overwritten by `asChild`.	"button"	AsTag | Component | undefined

Events

Event	Payload	Description
activate	[]

Slots

Slot	Props	Description
default	{ open: boolean; empty: boolean; stateAttrs: PropertySectionStateAttrs; actions: PropertySectionActionAPI; }