1b7934b98e
- Add headless PropertySection and accessible SegmentedControl anatomy - Make PropertyList controlled and exactly typed with an undo-aware editor adapter - Consolidate SDK metadata loaders and link untranslated docs to canonical pages
50 lines
1.4 KiB
Markdown
50 lines
1.4 KiB
Markdown
---
|
|
title: PropertySection
|
|
description: Headless collapsible anatomy for property-panel sections.
|
|
---
|
|
|
|
<script setup lang="ts">
|
|
import PropertyPrimitivesDemo from '#vue/primitives/PropertySection/demo/PropertyPrimitivesDemo.vue'
|
|
import { data } from './property-section.data'
|
|
</script>
|
|
|
|
# PropertySection
|
|
|
|
PropertySection supplies collapsible section anatomy and canonical open, empty, and disabled state
|
|
attributes without imposing presentation.
|
|
|
|
<PropertyPrimitivesDemo />
|
|
|
|
## 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`
|
|
|
|
```vue twoslash
|
|
<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
|
|
|
|
<SdkComponentAPI :components="data.components" />
|