Default

Boundary is a component that allows you to create a boundary for floating elements. It is useful for creating a boundary for elements that need to be contained within a certain area.

boundary

<Boundary>
			 <Block caption="boundary" default class="p-0" display="both">
				<ViewBoundary></ViewBoundary>
			</Block>
</Boundary>

Axis

Use the axis property to specify which axes should be considered.

boundary x

boundary y

<Boundary axis="x">
			<Block caption="boundary x" default class="p-0" display="both">
				<ViewBoundary></ViewBoundary>
			</Block>
</Boundary>
<Boundary axis="y">
			 <Block caption="boundary y" default class="p-0" display="both">
				<ViewBoundary></ViewBoundary>
			</Block>
</Boundary>

Nesting

Boundary can be nested to create a hierarchy of boundaries. By it's nature most nested boundary counts. However, when using axis, the nested boundary will only override the axis specified.

boundary

nested boundary x

nested boundary y

<!-- source -->
 <Boundary>
	<Block caption="boundary" default class="p-0" display="both">
		<ViewBoundary></ViewBoundary>
		<div class="max-w-96 mt-20">
			<Boundary axis="x">
				<Block caption="nested boundary x" default class="p-0" display="both">
					<ViewBoundary></ViewBoundary>
				</Block>
			</Boundary>
			<Boundary axis="y" id="test">
				<Block caption="nested boundary y" default class="p-0" display="both">
					<ViewBoundary></ViewBoundary>
				</Block>
			</Boundary>
		</div>
	</Block>
 </Boundary>

Context

Use the contextKey property to specify a custom context for the boundary.

boundary default context

boundary custom context

<Boundary>
	<Block caption="boundary default context" default class="p-0" display="both">
		<div class="max-w-96 mx-auto mb-6">
			<!-- customKey = Symbol('customKey') -->
			<Boundary contextKey={customKey}>
				<Block caption="boundary custom context" default class="p-0" display="both">
					<div class="flex flex-col gap-2 mb-6">
						<div class="relative h-12">
							<ViewBoundary contextKey={customKey}></ViewBoundary>
						</div>
						<div class="relative h-12">
							<ViewBoundary></ViewBoundary>
						</div>
					</div>
				</Block>
			</Boundary>
		</div>
	</Block>
</Boundary>