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
1.2 KiB
1.2 KiB
| title | description |
|---|---|
| SegmentedControl | Accessible selection and action-only segmented controls. |
SegmentedControl
SegmentedControl delegates selection, roving focus, and keyboard behavior to Reka UI. Single and multiple modes retain selection; action mode emits commands without toggle state.
Selection mode
<script setup lang="ts">
import { ref } from 'vue'
import { SegmentedControlItem, SegmentedControlRoot } from '@open-pencil/vue'
const alignment = ref('left')
</script>
<template>
<SegmentedControlRoot v-model="alignment" aria-label="Alignment">
<SegmentedControlItem value="left">Left</SegmentedControlItem>
<SegmentedControlItem value="center">Center</SegmentedControlItem>
<SegmentedControlItem value="right">Right</SegmentedControlItem>
</SegmentedControlRoot>
</template>
Action mode
Use mode="action" for grouped commands such as flip and rotate. Arrow keys move focus, while
Space or Enter emits action(value) without leaving a selected segment.
The complete state matrix is shown in the PropertySection demo.