容器组件

antd-layout 提供一个与布局高度融合的内器包裹组件：Container 容器组件，使用它可保持与整体布局统一UI风格，包括透明度和模糊特性，可选择性使用（强烈推荐），可以在需要的页面加入。容器组件会带上统一的标题、面包屑菜单、页脚和相应的钩子，也可以通过属性单独设置，非常灵活。

使用容器

需要作为页面的根节点，每个页面只能放置一个。

src/pages/welcome.tsx

import { Container } from '@adminui-dev/antd-layout';

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

复制成功

容器属性

可控制容器的细节形态 | 参数名 | 类型 |默认值| 说明 | |-------|-------|-------|-------| |mode|ContainerMode|inline|容器外观：主要是边距控制| |stretch|ContainerStretch|inline|容器高度伸缩模式| |hideBorder|bool|false|影响边线| |hideTitle|bool|false|影响标题| |hideBreadcrumb|bool|false|隐藏面包屑菜单| |hideFooter|bool|false|隐藏页角| |title|string|-|重新设置title| |transparent|bool|false|容器背景透明|

布局配置中也有一份 hideFooter、hideBreadcrumb、hideFooter，它是针对全局的，这里只影响当前容器。

ContainerMode

inline string- 容器没有边距
box string- 容器会有一个antd的padding
panel string- 在box的基础上在加上一个内边框

panel会带上边框和背景，但是标题和面包屑和页脚都是在外面的。

ContainerStretch

inline string- 容器和panel高度自动
auto string- panel高度自动
full string- 容器和panel高度都会充满

可以通过在panel模式下观察页脚查看不同的效果。

Preview
Code

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>
    )
}

复制成功

容器钩子

容器也有几个相应的钩子，全局钩子中有提到。