Section footers contain actions or navigation components. Often they contain actions to save the settings or user choices related to particular section.
import React from "react";
import { Button, Divider, Grid, Space, theme, Typography } from "antd";
const { useToken } = theme;
const { useBreakpoint } = Grid;
const { Text } = Typography;
export default function App() {
const { token } = useToken();
const screens = useBreakpoint();
const styles = {
container: {
margin: "0 auto",
maxWidth: screens.lg ? token.screenXL : token.screenSM,
padding: screens.md ? `0px ${token.paddingLG}px` : `0px ${token.padding}px`
},
footer: {
display: "flex",
justifyContent: "flex-end",
width: "100%"
},
paragraph: {
color: token.colorTextSecondary
},
placeholder: {
backgroundColor: token.colorBgLayout,
border: `${token.lineWidth}px dashed ${token.colorBorder}`,
borderRadius: token.borderRadiusLG,
padding: token.paddingLG,
textAlign: "center"
},
section: {
backgroundColor: token.colorBgContainer,
padding: `${token.sizeLG}px 0px`
},
textWrapper: {
width: "100%"
},
title: {
fontSize: token.fontSizeHeading4,
marginBottom: token.marginXXS,
marginTop: 0
}
};
return (
<div style={styles.section}>
<div style={styles.container}>
<div style={styles.placeholder}>
<Text>Content</Text>
</div>
<Divider direction="horizontal" />
<div style={styles.footer}>
<Space>
<Button>Cancel</Button>
<Button type="primary">Save</Button>
</Space>
</div>
</div>
</div>
);
}
import React from "react";
import { Button, Divider, Dropdown, Grid, Space, theme, Typography } from "antd";
import { MoreOutlined } from "@ant-design/icons";
const { useToken } = theme;
const { useBreakpoint } = Grid;
const { Text } = Typography;
export default function App() {
const { token } = useToken();
const screens = useBreakpoint();
const items = [
{
label: "Action 1",
key: "1",
type: "default",
},
{
label: "Action 2",
key: "2",
type: "default",
},
{
label: "Action 3",
key: "3",
type: "default",
},
{
label: "Action 4",
key: "4",
type: "default",
},
];
const menuProps = {
items,
};
const styles = {
container: {
margin: "0 auto",
maxWidth: screens.lg ? token.screenXL : token.screenSM,
padding: screens.md ? `0px ${token.paddingLG}px` : `0px ${token.padding}px`
},
footer: {
alignContent: "center",
alignItems: screens.md ? "flex-end" : "flex-start",
justifyContent: "space-between",
width: "100%"
},
paragraph: {
color: token.colorTextSecondary
},
placeholder: {
backgroundColor: token.colorBgLayout,
border: `${token.lineWidth}px dashed ${token.colorBorder}`,
borderRadius: token.borderRadiusLG,
padding: token.paddingLG,
textAlign: "center"
},
section: {
backgroundColor: token.colorBgContainer,
padding: `${token.sizeLG}px 0px`
},
textWrapper: {
width: "100%"
},
title: {
fontSize: token.fontSizeHeading4,
marginBottom: token.marginXXS,
marginTop: 0
}
};
return (
<div style={styles.section}>
<div style={styles.container}>
<div style={styles.placeholder}>
<Text>Content</Text>
</div>
<Divider direction="horizontal" />
<Space size="middle" direction="horizontal" style={styles.footer}>
{screens.lg ? (
<Space.Compact>
{items.map((item) => (
<Button key={item.key} type={item.type}>
{item.label}
</Button>
))}
</Space.Compact>
) : (
<Dropdown menu={menuProps} placement="topRight" arrow>
<Button type="text" icon={<MoreOutlined />} />
</Dropdown>
)}
<Space>
<Button>Cancel</Button>
<Button type="primary">Save</Button>
</Space>
</Space>
</div>
</div>
);
}
import React from "react";
import { Divider, Grid, Pagination, theme, Typography } from "antd";
const { useToken } = theme;
const { useBreakpoint } = Grid;
const { Text } = Typography;
export default function App() {
const { token } = useToken();
const screens = useBreakpoint();
const styles = {
container: {
margin: "0 auto",
maxWidth: screens.lg ? token.screenXL : token.screenSM,
padding: screens.md ? `0px ${token.paddingLG}px` : `0px ${token.padding}px`
},
footer: {
display: "flex",
justifyContent: screens.md ? "end" : "center",
width: "100%"
},
header: {
backgroundColor: token.colorBgContainer
},
paragraph: {
color: token.colorTextSecondary
},
placeholder: {
backgroundColor: token.colorBgLayout,
border: `${token.lineWidth}px dashed ${token.colorBorder}`,
borderRadius: token.borderRadiusLG,
padding: token.paddingLG,
textAlign: "center"
},
section: {
backgroundColor: token.colorBgContainer,
padding: `${token.sizeLG}px 0px`
},
title: {
fontSize: token.fontSizeHeading4,
marginBottom: token.marginXXS,
marginTop: 0
}
};
return (
<div style={styles.section}>
<div style={styles.container}>
<div style={styles.placeholder}>
<Text>Content</Text>
</div>
<Divider direction="horizontal" />
<div style={styles.footer}>
<Pagination defaultCurrent={1} total={50} />
</div>
</div>
</div>
);
}