Container Component

antd-layout provides a layout-integrated wrapper component called Container. It helps maintain a consistent UI style with the overall layout, including transparency and blur effects. It is optional (but highly recommended) and can be added to any page as needed.

The Container component includes a unified title, breadcrumb navigation, footer, and related hooks. These can also be customized individually through props, making it highly flexible.

Using the Container

It must be used as the root node of a page, and only one Container should be used per page.

src/pages/welcome.tsx 
import { Container } from '@adminui-dev/antd-layout';

export default function(){ 
    return(
        <Container mode="panel">
            <div>
                <h1>Welcome</h1>
            </div>
        </Container>
    )
}
Copied!

Container Props

These props control the detailed appearance of the container. | Name | Type |Default| Description | |-------|-------|-------|-------| |mode|ContainerMode|inline|Container appearance (mainly margin control)| |stretch|ContainerStretch|inline|Container height behavior| |hideBorder|bool|false|Controls border visibility| |hideTitle|bool|false|Controls title visibility| |hideBreadcrumb|bool|false|Hides breadcrumb navigation| |hideFooter|bool|false|Hides footer| |title|string|-|Override the title| |transparent|bool|false|Makes container background transparent|

The layout configuration also includes hideFooter,hideBreadcrumb,hideFooter, etc., which apply globally. The props here only affect the current container.

ContainerMode

The panel mode includes border and background, but the title, breadcrumb, and footer are rendered outside the panel.

ContainerStretch

You can observe different effects by checking the footer behavior in panel mode.

import { Container, useConfigState } from "@adminui-dev/antd-layout";
import type {ContainerStretch,ContainerMode} from "@adminui-dev/antd-layout";
import { Checkbox, Result, Segmented, Space } from 'antd';
import { useState } from 'react';

export default function(){    
  const {layoutConfig} = useConfigState();
  const [mode,setMode]= useState<ContainerMode>()
  const [stretch,setStretch] = useState<ContainerStretch>()

  const [hideTitle,setHideTitle]= useState(layoutConfig.hideTitle)
  const [hideBreadcrumb,setHideBreadcrumb] = useState(layoutConfig.hideBreadcrumb)
  const [hideFooter,setHideFooter] = useState(layoutConfig.hideFooter)
    return (
        <Container mode={mode} stretch={stretch} hideTitle={hideTitle} hideBreadcrumb={hideBreadcrumb} hideFooter={hideFooter}>
            <Result
                status="info"
                title="Set container style!"
                subTitle="Each<Container/>component can have three basic styles and can display the title bar and breadcrumb navigation separately."
                extra={[
                    <Segmented key="mode_segmented" defaultValue={mode} options={["inline","box","panel"]} onChange={(e)=>{setMode(e as ContainerMode)}} />
                ]} />
                <div style={{textAlign:"center",padding:"0px 0px 12px 0px"}}>
                <h4>Set container stretch for height</h4>
                    <div>
                        <Space>
                            <Segmented disabled={mode!="panel"} key="stretch_segmented" defaultValue={stretch} options={["inline ","auto","fill"]} onChange={(e)=>{setStretch(e as ContainerStretch)}} />
                        </Space>
                    </div> 
                    <h4>Set the display of breadcrumbs, title, and footer for the current page separately</h4>
                    <div style={{display:"flex",justifyContent:"center"}}>
                        <Space>              
                            <Checkbox defaultChecked={!hideFooter} checked={!hideFooter} onClick={()=>{setHideFooter(!hideFooter)}}>Footer</Checkbox>
                            <Checkbox defaultChecked={!hideBreadcrumb} checked={!hideBreadcrumb} onClick={()=>{setHideBreadcrumb(!hideBreadcrumb)}}>Breadcrumb</Checkbox>
                            <Checkbox defaultChecked={!hideTitle} checked={!hideTitle} onClick={()=>{setHideTitle(!hideTitle)}}>Title</Checkbox>                    
                        </Space>                 
                    </div>                    
                </div>
        </Container>
    )
}
Copied!

Container Hooks

The Container also provides several related hooks, which are mentioned in global hooks.