Splitter

<script lang="ts">
	import Splitter from '@tcpsystems/ui/foundation/Splitter';
</script>

<Splitter label="Resize deployment panes">
	{#snippet start()}<p>Studio · Production</p>{/snippet}
	{#snippet end()}<p>Deployment healthy · All checks passed</p>{/snippet}
</Splitter>

<script lang="ts">
	import Splitter from '@tcpsystems/ui/foundation/Splitter';
</script>

<Splitter orientation="vertical" value={40} label="Resize deployment and log panes">
	{#snippet start()}<p>Acumen · Production deployment</p>{/snippet}
	{#snippet end()}<p>Build complete. Health checks passed. Traffic switched.</p>{/snippet}
</Splitter>

<script lang="ts">
	import Splitter from '@tcpsystems/ui/foundation/Splitter';
</script>

<Splitter min={30} max={70} value={30} label="Resize service list between 30 and 70 percent">
	{#snippet start()}<p>Services · Studio, Acumen, Search</p>{/snippet}
	{#snippet end()}<p>Drag the divider or use arrow keys. Home and End reach the limits.</p>{/snippet}
</Splitter>

<script lang="ts">
	import Splitter from '@tcpsystems/ui/foundation/Splitter';
</script>

<Splitter aria-disabled="true" label="Deployment panes locked during rollout">
	{#snippet start()}<p>Studio · Rollout in progress</p>{/snippet}
	{#snippet end()}<p>Pane resizing is unavailable during this rollout.</p>{/snippet}
</Splitter>