FooterToolbar底部工具栏

固定在底部的工具栏。

何时使用

固定在内容区域的底部,不随滚动条移动,常用于长页面的数据搜集和提交工作。

引用方式:

  1. import FooterToolbar from 'ant-design-pro/lib/FooterToolbar';

详细使用方式请参照:独立使用 pro 组件

代码演示

FooterToolbar 底部工具栏 - 图1

演示

浮动固定页脚。

  1. import FooterToolbar from 'ant-design-pro/lib/FooterToolbar';
  2. import { Button } from 'antd';
  3. ReactDOM.render(
  4. <div style={{ background: '#f7f7f7', padding: 24 }}>
  5. <p>Content Content Content Content</p>
  6. <p>Content Content Content Content</p>
  7. <p>Content Content Content Content</p>
  8. <p>Content Content Content Content</p>
  9. <p>Content Content Content Content</p>
  10. <p>Content Content Content Content</p>
  11. <p>Content Content Content Content</p>
  12. <p>Content Content Content Content</p>
  13. <p>Content Content Content Content</p>
  14. <p>Content Content Content Content</p>
  15. <p>Content Content Content Content</p>
  16. <p>Content Content Content Content</p>
  17. <p>Content Content Content Content</p>
  18. <p>Content Content Content Content</p>
  19. <p>Content Content Content Content</p>
  20. <FooterToolbar extra="extra information">
  21. <Button>Cancel</Button>
  22. <Button type="primary">Submit</Button>
  23. </FooterToolbar>
  24. </div>
  25. , mountNode);

API

参数说明类型默认值
children工具栏内容,向右对齐ReactNode-
extra额外信息,向左对齐ReactNode-