概述
Layout：布局容器，其下可嵌套HeaderSiderContentFooter或Layout本身，可以放在任何父容器中。Header：顶部布局，其下可嵌套任何元素，只能放在Layout中。Sider：侧边栏，其下可嵌套任何元素，只能放在Layout中。Content：内容部分，其下可嵌套任何元素，只能放在Layout中。Footer：底部布局，其下可嵌套任何元素，只能放在Layout中。
代码演示
如何引入
import { Layout } from '@fibrous/semi-ui-react';三行布局
代码
import { Layout } from '@fibrous/semi-ui-react';
export default function LayoutDemo() {
const { Header, Footer, Content } = Layout;
const commonStyle = {
height: 64,
lineHeight: '64px',
background: 'var(--semi-color-fill-0)',
};
return (
<Layout className="components-layout-demo">
<Header style={commonStyle}>Header</Header>
<Content style={{ height: 300, lineHeight: '300px' }}>Content</Content>
<Footer style={commonStyle}>Footer</Footer>
</Layout>
);
}左侧边栏布局
代码
import { Layout } from '@fibrous/semi-ui-react';
export default function LayoutDemo() {
const { Header, Footer, Sider, Content } = Layout;
const commonStyle = {
height: 64,
lineHeight: '64px',
background: 'var(--semi-color-fill-0)',
};
return (
<Layout className="components-layout-demo">
<Header style={commonStyle}>Header</Header>
<Layout>
<Sider style={{ width: '120px', background: 'var(--semi-color-fill-2)' }}>Sider</Sider>
<Content style={{ height: 300, lineHeight: '300px' }}>Content</Content>
</Layout>
<Footer style={commonStyle}>Footer</Footer>
</Layout>
);
}右侧边栏布局
代码
import { Layout } from '@fibrous/semi-ui-react';
export default function LayoutDemo() {
const { Header, Footer, Sider, Content } = Layout;
const commonStyle = {
height: 64,
lineHeight: '64px',
background: 'var(--semi-color-fill-0)',
};
return (
<Layout className="components-layout-demo">
<Header style={commonStyle}>Header</Header>
<Layout>
<Content style={{ height: 300, lineHeight: '300px' }}>Content</Content>
<Sider style={{ width: '120px', background: 'var(--semi-color-fill-2)' }}>Sider</Sider>
</Layout>
<Footer style={commonStyle}>Footer</Footer>
</Layout>
);
}侧边栏布局
代码
import { Layout } from '@fibrous/semi-ui-react';
export default function LayoutDemo() {
const { Header, Footer, Sider, Content } = Layout;
const commonStyle = {
height: 64,
lineHeight: '64px',
background: 'var(--semi-color-fill-0)',
};
return (
<Layout className="components-layout-demo">
<Sider style={{ width: '120px', background: 'var(--semi-color-fill-2)' }}>Sider</Sider>
<Layout>
<Header style={commonStyle}>Header</Header>
<Content style={{ height: 300, lineHeight: '300px' }}>Content</Content>
<Footer style={commonStyle}>Footer</Footer>
</Layout>
</Layout>
);
}响应式布局
侧边栏预设了六个响应尺寸：xs、sm、md、lg、xl、xxl。可以通过设置 breakpoint 属性设置断点。
通过 onBreakpoint 调用回调函数。
代码
import { Layout, type SiderProps } from '@fibrous/semi-ui-react';
export default function LayoutDemo() {
const onbreakpoint: SiderProps['onBreakpoint'] = (screen, bool) => {
console.log(screen, bool);
};
const commonStyle = {
height: 64,
lineHeight: '64px',
background: 'var(--semi-color-fill-0)',
};
const { Header, Footer, Sider, Content } = Layout;
return (
<Layout className="components-layout-demo">
<Header style={commonStyle}>Header</Header>
<Layout>
<Sider style={{ width: '120px', background: 'var(--semi-color-fill-2)' }} breakpoint={['md']} onBreakpoint={onbreakpoint}>
Sider
</Sider>
<Content style={{ height: 300, lineHeight: '300px' }}>Content</Content>
</Layout>
<Footer style={commonStyle}>Footer</Footer>
</Layout>
);
}布局示例
顶部导航布局
顶部导航-侧边布局
侧边导航
API 参考
Layout
Props
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| children | 布局内容，可包含 Layout.Header、Layout.Sider、Layout.Content、Layout.Footer 或嵌套的 Layout。 | React.ReactNode | - |
| className | 根元素的类名。 | string | - |
| hasSider | 表示子元素里有 Sider，一般不用指定。直接子元素中的 Sider 在渲染时即可识别；更深层嵌套的 Sider 在挂载后才登记，服务端渲染时传 true 可避免样式闪动。传 false 不能去掉 Sider 带来的 has-sider 类。 | boolean | - |
| prefixCls | 类名前缀。 | string | "semi-layout" |
| ref | 根元素的引用，元素的标签由 tagName 决定。 | TypeReact.Ref<HTMLElement> | - |
| style | 根元素的样式。 | CSSProperties | - |
| tagName | 根元素的标签名。 | keyof HTMLElementTagNameMap | "section" |
未列出的原生属性（含 role、aria-*）落在根元素上。
Layout.HeaderLayout.FooterLayout.ContentAPI 与Layout相同，但没有hasSider，另有内部使用的type
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| className | 根元素的类名。 | string | - |
| prefixCls | 类名前缀。 | string | semi-layout |
| style | 根元素的样式。 | CSSProperties | - |
| tagName | 根元素的标签名。 | keyof HTMLElementTagNameMap | header、footer、main 分别为 Header、Footer、Content 的默认值 |
ref 与未列出的原生属性（含 role、aria-*）落在各自的根元素上。
Layout.Sider
Props
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| aria-label | 侧边栏的可访问名称，描述该 Sider 的作用。 | React.AriaAttributes['aria-label'] | - |
| breakpoint | 触发响应式布局的断点，可选 xs、sm、md、lg、xl 或 xxl。仅在挂载时读取一次。 | TypeArray<keyof ResponsiveMap> | - |
| children | 侧边栏内容，渲染在根元素内的包裹 div 中。 | React.ReactNode | - |
| className | 根元素的类名。 | string | - |
| onBreakpoint | 断点命中状态变化时调用，参数为断点名与是否命中。挂载时对 breakpoint 中的每个断点按当前视口调用一次，之后在命中或离开时调用。 | Type(screen: keyof ResponsiveMap, match: boolean) => void | - |
| prefixCls | 类名前缀。 | string | "semi-layout" |
| ref | 根元素 aside 的引用。 | TypeReact.Ref<HTMLElement> | - |
| role | 根元素 aside 的 role。 | React.AriaRole | - |
| style | 根元素的样式。 | CSSProperties | - |
未列出的原生属性（含 aria-*、onClick）落在根元素 aside 上。
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 渲染
aside，可传入aria-label描述该 Sider 的作用。 - Header、Footer 默认渲染
header、footer，位于 Layout 的section内时不会成为 banner、contentinfo 地标；作为整页的页头、页脚时传入role="banner"、role="contentinfo"。 - Content 默认渲染
main，一个页面只应有一个main；嵌套使用时可通过tagName换成其他标签。 - Header、Content、Footer 可传入
role、aria-label描述对应元素的作用。