Spacing

Spacing component

Basic

Margin

0

0

0

0

Padding

0

0

0

0

Vue

<HLBuilderSpace :margin-values="marginValues" :padding-values="paddingValues" />

ts

const marginValues = ref({
  top: '20px',
  bottom: '20px',
  right: '-100px',
  left: 'auto',
})
const paddingValues = ref({
  top: '2rem',
  bottom: '20px',
  right: '20em',
  left: '20%',
})

Invalid Data

Margin

0

0

0

0

Padding

0

0

0

0

Vue

<HLBuilderSpace :margin-values="invalidMarginValues" :padding-values="invalidPaddingValues" />

ts

const invalidMarginValues = ref({
  top: '👾',
  bottom: '👾',
  right: '👾',
  left: '👾',
})
const invalidPaddingValues = ref({
  top: '🚀',
  bottom: '0px',
  right: '🚀',
  left: '🚀',
})

Unit Customization

Margin

0

0

0

0

Padding

0

0

0

0

Vue

<HLBuilderSpace :margin-values="marginValues" :padding-values="paddingValues" :margin-units-config="marginUnitsConfig" />

ts

const marginUnitsConfig = ref(['rem', 'em'])

Only Specific Directions

Margin

0

0

Padding

0

0

Vue

<HLBuilderSpace
  :margin-values="marginValues"
  :padding-values="paddingValues"
  :allowed-margin-directions="['top', 'bottom']"
  :allowed-padding-directions="['right', 'left']"
/>

Import

import { HLBuilderSpace } from '@platform-ui/highrise'

Props

Prop	Type	Default	Description
margin-values	Object	{top: 'auto', bottom: 'auto', left: 'auto', right: 'auto'}	Margin object with pre applied values
padding-values	Object	{ top: '0px', bottom: '0px', left: '0px', right: '0px' }	Padding object with pre applied values
margin-units-config	Array	['px','%','rem','em','vw','vh',]	List of units that are allowed for margin values, that will be shown in the dropdown
padding-units-config	Array	['px','%','rem','em','vw','vh',]	List of units that are allowed for padding values, that will be shown in the dropdown
allowed-margin-directions	Array	['top', 'bottom', 'right', 'left']	Use this to customise certain margin directions. Only the passed values will be shown
allowed-padding-directions	Array	['top', 'bottom', 'right', 'left']	Use this to customise certain padding directions. Only the passed values will be shown
margin-readonly	Boolean	false	Makes ALL margin inputs as read-only margin values
padding-readonly	Boolean	false	Makes ALL padding inputs as read-only padding values
dropdown-placement	'top-start' | 'top' | 'top-end' | 'right-start' | 'right' | 'right-end' | 'bottom-start' | 'bottom' | 'bottom-end' | 'left-start' | 'left' | 'left-end'	top	Dropdown position for both margin and padding
error-msg	String	Provided value is invalid	Custom message to be passed for error validations
disable-drag	Boolean	false	Disables dragging on the spacing trigger

Emits

Event	Params	Description
update:value	{changed: { spaceType: { position: value } }, value: Number, unit: String, numericValue: Number}	Update value