AppLayout
<ts-app-layout> vv0.6.3
A layout shell that provides a sidebar, header, and main content area using CSS Grid.
Open in Storybook for interactive demos.
Preview
Section titled “Preview”<ts-app-layout sidebar-placement="start">Content</ts-app-layout>Properties
Section titled “Properties”| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
sidebarPlacement | sidebar-placement | "end" | "start" | 'start' | Controls which side the sidebar appears on. |
| Name | Description |
|---|---|
*(default)* | Default slot for the main content area. |
header | Content for the top header bar. |
sidebar | Content for the sidebar panel (e.g., navigation). |
CSS Parts
Section titled “CSS Parts”Use ::part() to style internal elements:
| Part | Description |
|---|---|
content | The main content container. |
header | The header container. |
sidebar | The sidebar container. |
ts-app-layout::part(content) { /* your custom styles */}<ts-app-layout sidebar-placement="start">Content</ts-app-layout>import { TsAppLayout } from '@tessera-ui/react';
<TsAppLayout sidebarPlacement="start">Content</TsAppLayout>