基础 · Layout
布局
用于快捷划分页面整体布局

概述

  • Layout:布局容器,其下可嵌套 Header Sider Content FooterLayout 本身,可以放在任何父容器中。
  • Header:顶部布局,其下可嵌套任何元素,只能放在 Layout 中。
  • Sider:侧边栏,其下可嵌套任何元素,只能放在 Layout 中。
  • Content:内容部分,其下可嵌套任何元素,只能放在 Layout 中。
  • Footer:底部布局,其下可嵌套任何元素,只能放在 Layout 中。
注意事项
1、布局组件采用 Flex 布局实现,无法在非现代浏览器中工作
2、Layout 组件仅会帮你实现布局,但不会附带背景色、文本色、宽高度等样式。你可以根据自己实际需求传入 style 或给定特定 className 另行编写css实现

代码演示

如何引入

三行布局

左侧边栏布局

右侧边栏布局

侧边栏布局

响应式布局

侧边栏预设了六个响应尺寸:xssmmdlgxlxxl。可以通过设置 breakpoint 属性设置断点,通过 onBreakpoint 调用回调函数。

布局示例

顶部导航布局

顶部导航-侧边布局

侧边导航

API 参考

Layout

Layout.Header Layout.Footer Layout.Content API 与 Layout 相同
属性说明类型默认值
className类名string-
hasSider表示子元素里有 Sider,一般不用指定。可用于服务端渲染时避免样式闪动boolean-
style样式CSSProperties-
aria-labelaria-label 属性,用来给当前元素加上的标签描述, 提升可访问性 >=2.3.0string-
rolerole 属性, 提升可访问性 >=2.3.0string-

Layout.Sider

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

responsive map

Accessibility

ARIA

  • Sider 可传入 aria-label props,描述该 Sider 作用。
  • Header Content Main Footer 可传入 role aria-label 描述对应元素作用。

© 2021 Semi Design. All rights reserved.

京ICP备19058139号-13浙公网安备 33011002016131号

Designed & Developed with love by Douyin FE & MED