SplitLayout

Two-column layout with configurable column widths and left/right slots.

Import

Vue

import { UiSplitLayout } from '@ziyarago/ui/vue'

Left pane content

Right pane content

Vue

<UiSplitLayout columns="1fr 1fr">
  <template #left>Left pane content</template>
  <template #right>Right pane content</template>
</UiSplitLayout>

Filters

Search results go here

Vue

<UiSplitLayout columns="200px 1fr">
  <template #left>Filters</template>
  <template #right>Search results go here</template>
</UiSplitLayout>

Two-column layout with configurable column widths; use for master-detail or side-by-side content.

PropType and valuesDefaultDescription

columnsstring'1fr 1fr'CSS grid-template-columns value, for example "280px 1fr".

Vue: named slots. React: a prop with the same name; default is children.

leftFirst column. Falls back to the first child.

rightSecond column. Falls back to the second child.