Builder Space
HLBuilderSpace is a visual editor for an element's margin and padding. It renders per-direction inputs (top / right / bottom / left) with a unit dropdown, validates the values, and emits the changes — the kind of spacing control used in page builders and style panels.
Basic
Pass margin-values and padding-values objects (one entry per direction) to pre-fill the spacing controls.
Margin
0
0
0
0
Padding
0
0
0
0
vue
<template>
<HLBuilderSpace :margin-values="marginValues" :padding-values="paddingValues" />
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { HLBuilderSpace } from '@platform-ui/highrise'
const marginValues = ref({
top: '20px',
bottom: '20px',
right: '-100px',
left: 'auto',
})
const paddingValues = ref({
top: '2rem',
bottom: '20px',
right: '20em',
left: '20%',
})
</script>Invalid Data
Values that aren't valid CSS lengths are rejected and surface the error message instead of being applied.
Margin
0
0
0
0
Padding
0
0
0
0
vue
<template>
<HLBuilderSpace :margin-values="invalidMarginValues" :padding-values="invalidPaddingValues" />
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { HLBuilderSpace } from '@platform-ui/highrise'
const invalidMarginValues = ref({
top: '👾',
bottom: '👾',
right: '👾',
left: '👾',
})
const invalidPaddingValues = ref({
top: '🚀',
bottom: '0px',
right: '🚀',
left: '🚀',
})
</script>Unit Customization
Pass margin-units-config (or padding-units-config) to limit which units appear in the unit dropdown.
Margin
0
0
0
0
Padding
0
0
0
0
vue
<template>
<HLBuilderSpace
:margin-values="marginValues"
:padding-values="paddingValues"
:margin-units-config="marginUnitsConfig"
/>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { HLBuilderSpace } from '@platform-ui/highrise'
const marginValues = ref({ top: '20px', bottom: '20px', right: '-100px', left: 'auto' })
const paddingValues = ref({ top: '2rem', bottom: '20px', right: '20em', left: '20%' })
const marginUnitsConfig = ref(['rem', 'em'])
</script>Only Specific Directions
Use allowed-margin-directions / allowed-padding-directions to show controls for only the directions you list.
Margin
0
0
Padding
0
0
vue
<template>
<HLBuilderSpace
:margin-values="marginValues"
:padding-values="paddingValues"
:allowed-margin-directions="['top', 'bottom']"
:allowed-padding-directions="['right', 'left']"
/>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { HLBuilderSpace } from '@platform-ui/highrise'
const marginValues = ref({ top: '20px', bottom: '20px', right: '-100px', left: 'auto' })
const paddingValues = ref({ top: '2rem', bottom: '20px', right: '20em', left: '20%' })
</script>Read-only
Set margin-readonly and/or padding-readonly to display the values without letting the user edit them.
Margin
0
0
0
0
Padding
0
0
0
0
vue
<template>
<HLBuilderSpace :margin-values="marginValues" :padding-values="paddingValues" :margin-readonly="true" :padding-readonly="true" />
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { HLBuilderSpace } from '@platform-ui/highrise'
const marginValues = ref({ top: '20px', bottom: '20px', right: '-100px', left: 'auto' })
const paddingValues = ref({ top: '2rem', bottom: '20px', right: '20em', left: '20%' })
</script>Dropdown Placement, Drag & Error Message
Fine-tune the interaction with a few more props:
dropdown-placement— where the unit dropdown opens relative to its input.disable-drag— turns off drag-to-adjust on the spacing trigger, so values change only through the inputs.error-msg— the message shown when a value fails validation (see Invalid Data).
Margin
0
0
0
0
Padding
0
0
0
0
vue
<template>
<HLBuilderSpace
:margin-values="invalidMarginValues"
:padding-values="paddingValues"
dropdown-placement="bottom"
:disable-drag="true"
error-msg="Enter a valid CSS length"
/>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { HLBuilderSpace } from '@platform-ui/highrise'
const invalidMarginValues = ref({ top: '👾', bottom: '👾', right: '👾', left: '👾' })
const paddingValues = ref({ top: '2rem', bottom: '20px', right: '20em', left: '20%' })
</script>Import
ts
import { HLBuilderSpace } from '@platform-ui/highrise'Props
| Prop | Type | Default | Description |
|---|---|---|---|
| marginValues | Object | {top: 'auto', bottom: 'auto', left: 'auto', right: 'auto'} | Margin object with pre applied values |
| paddingValues | Object | { top: '0px', bottom: '0px', left: '0px', right: '0px' } | Padding object with pre applied values |
| marginUnitsConfig | Array | ['px','%','rem','em','vw','vh','auto'] | List of units that are allowed for margin values, that will be shown in the dropdown |
| paddingUnitsConfig | Array | ['px','%','rem','em','vw','vh'] | List of units that are allowed for padding values, that will be shown in the dropdown |
| allowedMarginDirections | Array | ['top', 'bottom', 'right', 'left'] | Use this to customise certain margin directions. Only the passed values will be shown |
| allowedPaddingDirections | Array | ['top', 'bottom', 'right', 'left'] | Use this to customise certain padding directions. Only the passed values will be shown |
| marginReadonly | Boolean | false | Makes all margin inputs read-only |
| paddingReadonly | Boolean | false | Makes all padding inputs read-only |
| dropdownPlacement | 'top-start' | 'top' | 'top-end' | 'right-start' | 'right' | 'right-end' | 'bottom-start' | 'bottom' | 'bottom-end' | 'left-start' | 'left' | 'left-end' | bottom | Dropdown position for both margin and padding |
| errorMsg | String | Provided value is invalid. | Custom message to be passed for error validations |
| disableDrag | Boolean | false | Disables dragging on the spacing trigger |
Emits
| Event | Params | Description |
|---|---|---|
update:value | { changed: { [spaceType]: { [position]: string } }, value: String, unit: String, numericValue: String } | Emitted whenever a margin/padding value changes |
Understanding the update:value payload
Every time the user changes one margin or padding value, you get an object describing that single change. All values in it are strings.
If the user sets the left margin to 20px, the payload is:
js
{
changed: { margin: { left: '20px' } }, // which side changed, and its new value
value: '20px', // the new value with its unit
unit: 'px', // just the unit
numericValue: '20', // just the number (as a string)
}changedtells you what changed —marginorpadding, then the side (top/right/bottom/left).valueis the full CSS length you'd apply, e.g.'20px'.unitandnumericValueare the same value split apart, in case you need the number and unit separately.
When the unit is auto, all three of value / unit / numericValue are simply 'auto'.