FooterToolbar

A toolbar fixed at the bottom.

Usage#

It is fixed at the bottom of the content area and does not move along with the scroll bar, which is usually used for data collection and submission for long pages.

Usage:

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

Learning more to visit: Using Pro Components Alone

Examples

demo

Fixed to the footer.

expand codeexpand code
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#

Property Description Type Default
children toolbar content, align to the right ReactNode -
extra extra information, align to the left ReactNode -
ExceptionGlobalFooter