2026-03-24 20:24:08 +00:00
|
|
|
---
|
|
|
|
|
title: LayoutControlsRoot
|
|
|
|
|
description: Headless root primitive for auto-layout and sizing controls.
|
|
|
|
|
---
|
|
|
|
|
|
2026-07-13 12:34:25 +00:00
|
|
|
<script setup lang="ts">
|
|
|
|
|
import { data } from './layout-controls-root.data'
|
|
|
|
|
</script>
|
|
|
|
|
|
2026-03-24 20:24:08 +00:00
|
|
|
# LayoutControlsRoot
|
|
|
|
|
|
|
|
|
|
`LayoutControlsRoot` exposes the slot contract returned by `useLayout()` as a structural primitive.
|
|
|
|
|
Use it when you want a reusable layout-controls shell with app-owned markup.
|
|
|
|
|
|
2026-07-13 12:34:25 +00:00
|
|
|
Width and height fields can remain editable while their axis uses Hug or Fill. On the first actual
|
|
|
|
|
numeric mutation, `updateAxisSize()` records the sizing transition and changes that axis to Fixed.
|
|
|
|
|
Compose the field with `BindableValue` and an interaction-batch-capable provider when sizing mode,
|
|
|
|
|
variable detachment, and the numeric value must commit or roll back as one undo step. Focus and
|
|
|
|
|
picker opening do not change sizing mode.
|
|
|
|
|
|
|
|
|
|
Use `setAxisSizing('width', mode)` or `setAxisSizing('height', mode)` for sizing menus. The older
|
|
|
|
|
axis-specific setters are not part of the current contract.
|
|
|
|
|
|
|
|
|
|
## Generated API reference
|
|
|
|
|
|
|
|
|
|
The following tables are extracted from the Vue source and JSDoc during the documentation build.
|
|
|
|
|
|
|
|
|
|
<SdkComponentAPI :components="data.components" />
|
|
|
|
|
|
2026-03-24 20:24:08 +00:00
|
|
|
## Related APIs
|
|
|
|
|
|
|
|
|
|
- [useLayout](../composables/use-layout)
|
2026-07-13 12:34:25 +00:00
|
|
|
- [BindableValue](./bindable-value)
|
2026-03-24 20:24:08 +00:00
|
|
|
- [Property Panels guide](../../guides/property-panels)
|
