Layout
页面级布局骨架：Layout 根容器 + Header / Sider / Content / Footer 子组件。纯布局容器，不附带背景/尺寸样式，按需自定义。
如何引入
import { Layout, Layout.Header, Layout.Footer, Layout.Content, Layout.Sider } from '@chenzy-design/svelte';三行布局
Header / Content / Footer 纵向三段式，最基础的页面骨架。
左侧边栏布局
内层 Layout 含 Sider + Content，Sider 在左、Content 占据剩余空间。
右侧边栏布局
内层 Layout 里 Content 在前、Sider 在后，侧栏置于右侧。
侧边栏布局
Sider 与含 Header/Content/Footer 的内层 Layout 并列，侧栏贯穿全高。
响应式布局
Sider breakpoint + onBreakpoint：视口跨断点（md）时触发回调。可选 xs/sm/md/lg/xl/xxl。
顶部导航布局
Header 放横向 Nav + logo，右侧用户 Avatar，Content 放 Breadcrumb + 骨架卡片。
顶部导航-侧边布局
顶栏横向 Nav + 侧栏纵向 Nav（footer collapseButton）+ 内容区面包屑。
侧边导航
最外层 Sider 承载纵向 Nav（logo + collapseButton），内层 Layout 含顶栏/内容/页脚。
API 参考
Layout
Events
| 事件 | 载荷 | 说明 |
|---|---|---|
onBreakpoint | — | Sider 命中 / 解除响应式断点时触发，(screen, matched) |
Slots
| 名称 | 说明 |
|---|---|
children | 各子组件内容 |
Layout <section>
Props
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
class | 根元素自定义类名 | string | '' |
style | 根元素自定义内联样式 | string | undefined |
hasSider | 表示子元素里有 Sider，一般不用指定；可用于 SSR 避免样式闪动 | boolean | undefined |
ariaLabel | 可访问性标签 | string | undefined |
role | 可访问性 role | string | undefined |
Layout.Header <header>
Props
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
class | 根元素自定义类名 | string | '' |
style | 根元素自定义内联样式 | string | undefined |
ariaLabel | 可访问性标签 | string | undefined |
role | 可访问性 role | string | undefined |
Layout.Footer <footer>
Props
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
class | 根元素自定义类名 | string | '' |
style | 根元素自定义内联样式 | string | undefined |
ariaLabel | 可访问性标签 | string | undefined |
role | 可访问性 role | string | undefined |
Layout.Content <main>
Props
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
class | 根元素自定义类名 | string | '' |
style | 根元素自定义内联样式 | string | undefined |
ariaLabel | 可访问性标签 | string | undefined |
role | 可访问性 role（覆盖默认 main 语义） | string | undefined |
Layout.Sider <aside>
Props
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
breakpoint | 触发响应式布局的断点数组 | ('xs'|'sm'|'md'|'lg'|'xl'|'xxl')[] | undefined |
onBreakpoint | 触发响应式布局断点时的回调 | (screen, matched: boolean) => void | undefined |
class | 根元素自定义类名 | string | '' |
style | 根元素自定义内联样式 | string | undefined |
ariaLabel | 可访问性标签，描述该 Sider 作用 | string | undefined |
role | 可访问性 role | string | undefined |
Accessibility
- landmark 语义：Header→header，Content→main，Footer→footer，Sider→aside；Sider 可传 aria-label 描述作用。