Appearance
Split View
The FTSplitView component creates a split-screen layout with a main content area and a resizable side panel that slides in from the right. This component is perfect for displaying detailed information, forms, or additional content without navigating away from the current page.
Usage
The split view component provides a flexible layout where the main content area adjusts its padding to accommodate the side panel when open. The panel can be resizable with drag handles and supports various customization options.
Composition api (script setup)
vue
<script setup lang="ts">
import { FTSplitView } from '@fasttrack-solutions/vue-components-lib';
</script><script setup lang="ts">
import { FTSplitView } from '@fasttrack-solutions/vue-components-lib';
</script>Options api
vue
<script>
import { FTSplitView } from '@fasttrack-solutions/vue-components-lib';
export default {
components: {
FTSplitView
}
}
</script><script>
import { FTSplitView } from '@fasttrack-solutions/vue-components-lib';
export default {
components: {
FTSplitView
}
}
</script>Basic Example
INFO
vue
<template>
<FTSplitView
title="Panel Title"
:show="showPanel"
@close="showPanel = false">
<template #default>
<!-- Main content area -->
<div>
<h1>Main Content</h1>
<p>This is the main content area that will have its padding adjusted when the panel is open.</p>
</div>
</template>
<template #body>
<!-- Panel content -->
<div>
<h2>Panel Content</h2>
<p>This content appears in the side panel.</p>
</div>
</template>
</FTSplitView>
</template><template>
<FTSplitView
title="Panel Title"
:show="showPanel"
@close="showPanel = false">
<template #default>
<!-- Main content area -->
<div>
<h1>Main Content</h1>
<p>This is the main content area that will have its padding adjusted when the panel is open.</p>
</div>
</template>
<template #body>
<!-- Panel content -->
<div>
<h2>Panel Content</h2>
<p>This content appears in the side panel.</p>
</div>
</template>
</FTSplitView>
</template>Main Content Area
This is the main content area. When the panel opens, this area's padding will adjust to accommodate the panel.
Resizable Panel
INFO
vue
<template>
<FTSplitView
title="Resizable Panel"
:show="showResizable"
:resizable="true"
:min-width="300"
:max-width="800"
@close="showResizable = false">
<template #default>
<div>
<h1>Main Content</h1>
<p>Drag the panel's left edge to resize it.</p>
</div>
</template>
<template #body>
<div>
<h2>Resizable Panel</h2>
<p>This panel can be resized by dragging the handle on the left edge.</p>
<p>The width is saved to localStorage and will be remembered on the next visit.</p>
</div>
</template>
</FTSplitView>
</template><template>
<FTSplitView
title="Resizable Panel"
:show="showResizable"
:resizable="true"
:min-width="300"
:max-width="800"
@close="showResizable = false">
<template #default>
<div>
<h1>Main Content</h1>
<p>Drag the panel's left edge to resize it.</p>
</div>
</template>
<template #body>
<div>
<h2>Resizable Panel</h2>
<p>This panel can be resized by dragging the handle on the left edge.</p>
<p>The width is saved to localStorage and will be remembered on the next visit.</p>
</div>
</template>
</FTSplitView>
</template>Confirm Closing
INFO
vue
<template>
<FTSplitView
title="Panel with Confirm Close"
:show="showPanelWithConfirmClose"
:confirm-close="true"
@close="showPanelWithConfirmClose = false">
<template #default>
<div>
<h1>Main Content</h1>
<p>Try closing the panel - you'll get a confirmation dialog.</p>
</div>
</template>
<template #body>
<div>
<h2>Panel with Confirm Close</h2>
<p>This panel will show a confirmation dialog before closing to prevent accidental loss of work.</p>
</div>
</template>
</FTSplitView>
</template><template>
<FTSplitView
title="Panel with Confirm Close"
:show="showPanelWithConfirmClose"
:confirm-close="true"
@close="showPanelWithConfirmClose = false">
<template #default>
<div>
<h1>Main Content</h1>
<p>Try closing the panel - you'll get a confirmation dialog.</p>
</div>
</template>
<template #body>
<div>
<h2>Panel with Confirm Close</h2>
<p>This panel will show a confirmation dialog before closing to prevent accidental loss of work.</p>
</div>
</template>
</FTSplitView>
</template>Advanced Usage with Custom Header
INFO
vue
<template>
<FTSplitView
title="Advanced Panel"
:show="showPanelAdvanced"
:resizable="true"
@close="showPanelAdvanced = false">
<template #default>
<div>
<h1>Main Content Area</h1>
<p>This demonstrates an advanced split view with custom header content, actions, and footer.</p>
</div>
</template>
<template #header-body>
<FTInput model-value="Task ID: ATP-104 - Split View Implementation"></FTInput>
</template>
<template #actions>
<FTButton primary>Save</FTButton>
<FTButton>Cancel</FTButton>
</template>
<template #body>
<div>
<h2>Panel Body</h2>
<p>This is the main content area of the panel.</p>
<FTInput label="Name" placeholder="Enter name"></FTInput>
<FTInput label="Description" placeholder="Enter description"></FTInput>
</div>
</template>
<template #footer>
<div style="padding: 10px; background: #f5f5f5; border-top: 1px solid #ddd;">
<small>Last saved: Never</small>
</div>
</template>
</FTSplitView>
</template><template>
<FTSplitView
title="Advanced Panel"
:show="showPanelAdvanced"
:resizable="true"
@close="showPanelAdvanced = false">
<template #default>
<div>
<h1>Main Content Area</h1>
<p>This demonstrates an advanced split view with custom header content, actions, and footer.</p>
</div>
</template>
<template #header-body>
<FTInput model-value="Task ID: ATP-104 - Split View Implementation"></FTInput>
</template>
<template #actions>
<FTButton primary>Save</FTButton>
<FTButton>Cancel</FTButton>
</template>
<template #body>
<div>
<h2>Panel Body</h2>
<p>This is the main content area of the panel.</p>
<FTInput label="Name" placeholder="Enter name"></FTInput>
<FTInput label="Description" placeholder="Enter description"></FTInput>
</div>
</template>
<template #footer>
<div style="padding: 10px; background: #f5f5f5; border-top: 1px solid #ddd;">
<small>Last saved: Never</small>
</div>
</template>
</FTSplitView>
</template>Fixed Width Panel
INFO
vue
<template>
<FTSplitView
title="Fixed Width Panel"
:show="showWithWidth"
:resizable="false"
:width="400"
@close="showWithWidth = false">
<template #default>
<div>
<h1>Main Content</h1>
<p>This panel has a fixed width of 400px and cannot be resized.</p>
</div>
</template>
<template #body>
<div>
<h2>Fixed Width Panel</h2>
<p>This panel maintains a consistent width of 400px.</p>
</div>
</template>
</FTSplitView>
</template><template>
<FTSplitView
title="Fixed Width Panel"
:show="showWithWidth"
:resizable="false"
:width="400"
@close="showWithWidth = false">
<template #default>
<div>
<h1>Main Content</h1>
<p>This panel has a fixed width of 400px and cannot be resized.</p>
</div>
</template>
<template #body>
<div>
<h2>Fixed Width Panel</h2>
<p>This panel maintains a consistent width of 400px.</p>
</div>
</template>
</FTSplitView>
</template>Main Content
Drag the panel's left edge to resize it.
Main Content
Try closing the panel - you'll get a confirmation dialog.
Main Content
This panel has a fixed width of 400px.
Main Content Area
This demonstrates an advanced split view with custom header content, actions, and footer.
Props
| Name | Type | Default | Description |
|---|---|---|---|
title | string | '' | Title displayed in the panel header |
show | boolean | false | Controls whether the panel is visible or hidden |
confirmClose | boolean | false | Shows confirmation dialog before closing panel |
id | string | '' | Optional ID attribute for the panel body element |
minWidth | number | 0 | Minimum width constraint for resizable panels (px) |
maxWidth | number | undefined | Maximum width constraint for resizable panels (px) |
saveWidth | boolean | true | Saves panel width to localStorage when resizable |
resizable | boolean | true | Enables drag-to-resize functionality |
width | number | undefined | Fixed width for non-resizable panels (px) |
Events
| Name | Description |
|---|---|
close | Emitted when the panel should be closed |
Slots
| Name | Description |
|---|---|
default | Main content area that adjusts padding when panel is open |
header | Complete custom header (replaces title, header-body, actions) |
header-body | Content area between title and actions in the header |
actions | Action buttons in the right side of the header |
sub-header | Optional sub-header content below main header |
body | Main content area of the panel |
footer | Footer content at the bottom of the panel |
CSS Custom Properties
The component can be customized using CSS custom properties:
| Property | Default | Description |
|---|---|---|
--ft-split-view-bg | #f3f3f3 | Panel background color |
--ft-split-view-z-index | 50 | Base z-index for panel |
--ft-split-view-width | 95% / 80% | Default panel width (responsive) |
--ft-split-view-header-bg | #fff | Header background color |
--ft-split-view-header-padding | 0 40px 0 20px | Header padding |
--ft-split-view-footer-bg | #fff | Footer background color |
--ft-split-view-title-font-size | 12px | Title font size |
--ft-split-view-close-color | #cacaca | Close button color |
--ft-split-view-handle-border-color | var(--color-mono-300) | Resize handle border color |
--ft-split-view-handle-bg | var(--color-mono-white) | Resize handle background |
--ft-split-view-border-color | var(--color-mono-300) | Panel border color |