FooterToolbar底部工具栏
固定在底部的工具栏。
何时使用
固定在内容区域的底部,不随滚动条移动,常用于长页面的数据搜集和提交工作。
引用方式:
import FooterToolbar from 'ant-design-pro/lib/FooterToolbar';
详细使用方式请参照:独立使用 pro 组件
代码演示
浮动固定页脚。
import FooterToolbar from 'ant-design-pro/lib/FooterToolbar';
import { Button } from 'antd';
ReactDOM.render(
<div style={{ background: '#f7f7f7', padding: 24 }}>
<p>Content Content Content Content</p>
<p>Content Content Content Content</p>
<p>Content Content Content Content</p>
<p>Content Content Content Content</p>
<p>Content Content Content Content</p>
<p>Content Content Content Content</p>
<p>Content Content Content Content</p>
<p>Content Content Content Content</p>
<p>Content Content Content Content</p>
<p>Content Content Content Content</p>
<p>Content Content Content Content</p>
<p>Content Content Content Content</p>
<p>Content Content Content Content</p>
<p>Content Content Content Content</p>
<p>Content Content Content Content</p>
<FooterToolbar extra="extra information">
<Button>Cancel</Button>
<Button type="primary">Submit</Button>
</FooterToolbar>
</div>
, mountNode);
API
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
children | 工具栏内容,向右对齐 | ReactNode | - |
extra | 额外信息,向左对齐 | ReactNode | - |