chenzy-design

概述

Layout：布局容器，其下可嵌套 Header Sider Content Footer 或 Layout 本身，可以放在任何父容器中。
Header：顶部布局，其下可嵌套任何元素，只能放在 Layout 中。
Sider：侧边栏，其下可嵌套任何元素，只能放在 Layout 中。
Content：内容部分，其下可嵌套任何元素，只能放在 Layout 中。
Footer：底部布局，其下可嵌套任何元素，只能放在 Layout 中。

注意事项

1、布局组件采用 Flex 布局实现，无法在非现代浏览器中工作
2、Layout 组件仅会帮你实现布局，但不会附带背景色、文本色、宽高度等样式。你可以根据自己实际需求传入 style 或给定特定 class 另行编写 css 实现

代码演示

如何引入

import { Layout } from '@chenzy-design/svelte';

三行布局

Content

左侧边栏布局

Content

右侧边栏布局

Content

侧边栏布局

Content

响应式布局

侧边栏预设了六个响应尺寸：xs、sm、md、lg、xl、xxl。可以通过设置 breakpoint 属性设置断点，通过 onBreakpoint 调用回调函数。

Content

布局示例

顶部导航布局

顶部导航-侧边布局

侧边导航

API 参考

Layout

Layout.Header Layout.Footer Layout.Content API 与 Layout 相同

属性	说明	类型	默认值
aria-label	aria-label 属性，用来给当前元素加上的标签描述，提升可访问性	string	-
class	类名	string	-
hasSider	表示子元素里有 Sider，一般不用指定。可用于服务端渲染时避免样式闪动	boolean	-
role	role 属性，提升可访问性	string	-
style	样式	string	-

Layout.Sider

属性	说明	类型	默认值
aria-label	aria-label 属性，用来给当前元素加上的标签描述，提升可访问性	string	-
breakpoint	触发响应式布局的断点，可选值 ‘xs’, ‘sm’, ‘md’, ‘lg’, ‘xl’, ‘xxl’	string[]	-
class	类名	string	-
onBreakpoint	触发响应式布局断点时的回调	(screen: string, matched: boolean) => void	-
role	role 属性，提升可访问性	string	-
style	样式	string	-

responsive map

{
    xs: '(max-width: 575px)',
    sm: '(min-width: 576px)',
    md: '(min-width: 768px)',
    lg: '(min-width: 992px)',
    xl: '(min-width: 1200px)',
    xxl: '(min-width: 1600px)',
};

Accessibility

ARIA

Sider 可传入 aria-label props，描述该 Sider 作用。
Header Content Main Footer 可传入 role、aria-label 描述对应元素作用。
默认使用 landmark 语义标签（与 Semi 一致）：Layout→<section>，Header→<header>，Content→<main>，Footer→<footer>，Sider→<aside>；传入 role 可覆盖默认语义。