Layout Component

The core component is <AntdLayout />, which is placed inside layout files, typically under src/layouts. There may be multiple instances, and their states are isolated from each other—including configuration stored in the browser.

After using the layout component, all pages will include the configured menu, toolbar, and branding information. Before using it, you need to configure the routes and menu properties.

The parameters are divided into two parts: props and child component slots.

Usage Example

src/layouts/index.tsx

import { AntdLayout } from "@adminui-dev/antd-layout"
import type { LayoutConfig, MenuData } from "@adminui-dev/antd-layout"

/** menu data */
const menuData:MenuData = {
    name:"",
    path:"/",
    label:"Dashboard",
    children:[
        {name:"welcome",path:"welcome",label:"Welcome"},
        {name:"transaction",path:"transaction",label:"Transaction",children:[
            {name:"order",path:"order",label:"Order"},
            {name:"product",path:"product",label:"Product"},
        ]}
    ]
}
export default function(){  
    // layout config
    const layoutConfig:LayoutConfig = {
        disabledLocale:true,
        layoutType:"leftMenu",  
        primaryColor:"#4dbae9"        
    }
    return(
        <>
            <AntdLayout layoutConfig={layoutConfig} menuData={menuData} />
        </>
    )
}

Copied!

Props

Props are mainly used to configure initialization parameters, most of which support dynamic updates.

Name	Type	Default	Description
layoutConfig	`LayoutConfig`	-	Layout configuration(including theme mode, primary color, layout type, menu display style, etc.)
menuData	`MenuData`	-	menu configuration data
themeSkins	`ThemeSkin[]`	-	Custom theme skins resources
localeMessages	`Record<string, LocaleMessage>`	`false`	i18n localization data
locale	`string`	`en-US`	Force a specific locale (e.g.,`en-US`)
theme	`string`	-	Force brightness mode (e.g.,`light`)
disabledStorageConfig	`bool`	`false`	Disable local storage configuration

Forced props will override values in layoutConfig and setLayoutConfig will not take effect.

Child Component Slots

Child elements provide mount points for UI components such as user info, branding, and extended toolbar content.

src/layouts/index.tsx

<AntdLayout layoutConfig={...} menuData={...}>
    <AntdLayout.BrandPopoverContent>
        <div className="brandContent">
            <dl>
                <dt>Title</dt>
                <dd>Username</dt>
                <dd>Email<dt>
            <dl>
        </div>
    </AntdLayout.BrandPopoverContent>
</AntdLayout>

Copied!

Name	Type	Default	Description
BrandPopoverContent	`ReactNode`	-	Brand popover content in the top-left corner
AvatarPopoverContent	`ReactNode`	-	User info popover content
HeaderToolbarExtra	`ReactNode[]`	-	Extra content in the toolbar
AsideHeader	`ReactNode[]`	-	Header content of the side panel
AsideFooter	`ReactNode[]`	-	ooter content of the side panel
Footer	`ReactNode[]`	-	Page footer content
SlotContent	`ReactNode`	-	Slot content that does not affect layout