component · layout

TuxSplitPane

In-page master-detail layout. Resizable list pane (persistent via localStorage when an id is set) + detail pane that reads selection from the consumer (URL-bound, Pinia store, or a simple ref). Optional bottom pane for related content (history / comments / linked records). Source: Microsoft Fabric "Multiview" absorption.

Drag the handle to resize, double-click to collapse, sliver click to expand. Below tablet width the layout folds into a single column (list above, detail below).

basic · master-detail

Records browser

Selecting a row in the list pane updates the detail pane. In a real consumer surface, the row click would set a URL param (Vue Router push({ query: { id } })) and the detail slot would read from useRoute().

record · r-1

I-35 corridor study · 2024-Q2

Lead agency: TxDOT. Status: active

In a real Landscape surface, this slot would render the record's full detail — methodology, dataset, findings, downloadable artifacts.

Bottom pane is opt-in via show-bottom. Hosts a UTabs strip with History / Comments / Linked records.

Show bottom pane

<tux-split-pane
  v-model="selected"
  id="landscape-records"
>
  <template #list>
    <ul>
      <li v-for="r in records" :key="r.id">
        <a @click="selected = r.id">{{ r.title }}</a>
      </li>
    </ul>
  </template>
  <template #detail>
    <h2>{{ selectedRecord?.title }}</h2>
    <p>Detail content…</p>
  </template>
</tux-split-pane>

empty state

Nothing selected

When modelValue is null, the detail pane renders the #empty slot — defaulting to a friendly TuxEmptyState if you don't override it.