@ant-design/pro-layout
- Version 6.38.2
- Published
- 1.36 MB
- 18 dependencies
- MIT license
Install
npm i @ant-design/pro-layout
yarn add @ant-design/pro-layout
pnpm add @ant-design/pro-layout
Overview
@ant-design/pro-layout
Index
Variables
Functions
Classes
Type Aliases
Variables
variable BasicLayout
const BasicLayout: React.FC<BasicLayoutProps>;
🌃 Powerful and easy to use beautiful layout 🏄 Support multiple topics and layout types
Parameter props
variable DefaultFooter
const DefaultFooter: React.FC<FooterProps>;
variable FooterToolbar
const FooterToolbar: React.FC<FooterToolbarProps>;
variable GridContent
const GridContent: React.FC<GridContentProps>;
This component can support contentWidth so you don't need to calculate the width contentWidth=Fixed, width will is 1200
Parameter props
variable PageContainer
const PageContainer: React.FC<PageContainerProps>;
variable PageHeaderWrapper
const PageHeaderWrapper: any;
variable PageLoading
const PageLoading: React.FC<any>;
variable ProBreadcrumb
const ProBreadcrumb: React.FC<BreadcrumbProps>;
配置与面包屑相同,只是增加了自动根据路由计算面包屑的功能。此功能必须要在 ProLayout 中使用。
Parameter props
Returns
variable ProPageHeader
const ProPageHeader: React.FC< { title?: any; content?: React.ReactNode; extraContent?: React.ReactNode; prefixCls?: string; footer?: ReactNode[]; ghost?: boolean; header?: any; pageHeaderRender?: WithFalse<(props: PageContainerProps) => React.ReactNode>; affixProps?: Omit<AffixProps, 'children'>; loading?: any; breadcrumbRender?: any; waterMarkProps?: WaterMarkProps; breadcrumb?: BreadcrumbProps; children?: React.ReactNode; } & PageHeaderTabConfig & Omit< PageHeaderProps, 'title' | 'footer' | 'breadcrumbRender' | 'breadcrumb' > & { prefixedClassName: string }>;
variable RouteContext
const RouteContext: React.Context<RouteContextType>;
variable SettingDrawer
const SettingDrawer: React.FC<SettingDrawerProps>;
可视化配置组件
Parameter props
variable TopNavHeader
const TopNavHeader: React.FC<TopNavHeaderProps>;
variable WaterMark
const WaterMark: React.FC<WaterMarkProps>;
Functions
function getMenuData
getMenuData: ( routes: Readonly<Route[]>, menu?: { locale?: boolean | undefined } | undefined, formatMessage?: (message: MessageDescriptor) => string, menuDataRender?: (menuData: MenuDataItem[]) => MenuDataItem[]) => { breadcrumb: Record<string, MenuDataItem>; breadcrumbMap: Map<string, MenuDataItem>; menuData: MenuDataItem[];};
function getPageTitle
getPageTitle: ( props: GetPageTitleProps, ignoreTitle?: boolean | undefined) => string;
Classes
class DefaultHeader
class HeaderView extends Component< HeaderViewProps & PrivateSiderMenuProps, HeaderViewState> {}
property renderContent
renderContent: () => | string | number | boolean | React.ReactFragment | JSX.Element | null | undefined;
method render
render: () => React.ReactNode;
Type Aliases
type BasicLayoutProps
type BasicLayoutProps = GlobalTypes & { /** * @name 简约模式,设置了之后不渲染的任何 layout 的东西,但是会有 context,可以获取到当前菜单。 * * @example pure={true} */ pure?: boolean; /** * @name logo 的配置,可以配置url,React 组件 和 false * * @example 设置 logo 为网络地址 logo="https://avatars1.githubusercontent.com/u/8186664?s=460&v=4" * @example 设置 logo 为组件 logo={<img src="https://avatars1.githubusercontent.com/u/8186664?s=460&v=4"/>} * @example 设置 logo 为 false 不显示 logo logo={false} * @example 设置 logo 为 方法 logo={()=> <img src="https://avatars1.githubusercontent.com/u/8186664?s=460&v=4"/> } * */ logo?: | React.ReactNode | JSX.Element | WithFalse<() => React.ReactNode | JSX.Element>; /** * @name 页面切换的时候触发 * * @example 获取切换的页面地址 onPageChange={(location) => { console.log("切换到:"+location.pathname) }} * * */ onPageChange?: (location?: RouterTypes<Route>['location']) => void; /** * @name layout 的 loading 效果,设置完成之后只展示一个 loading * * @example loading={true} */ loading?: boolean; /** * @name layout * * @description "zh-CN" | "zh-TW" | "en-US" | "it-IT" | "ko-KR" * @example 中文 layout="zh-CN" * @example 英文 layout="en-US" */ locale?: LocaleType; /** * @name 是否收起 layout 是严格受控的,可以 设置为 true,一直收起 * * @example collapsed={true} */ collapsed?: boolean; /** * @name 收起和展开的时候触发事件 * * @example onCollapse=(collapsed)=>{ setCollapsed(collapsed) }; */ onCollapse?: (collapsed: boolean) => void; /** * @name 页脚的配置 * * @example 不展示dom footerRender={false} * @example 使用 layout 的 DefaultFooter footerRender={() => (<DefaultFooter copyright="这是一条测试文案"/>} */ footerRender?: WithFalse< (props: HeaderViewProps, defaultDom: React.ReactNode) => React.ReactNode >; /** * @name 设置 PageHeader 的面包屑,只能处理数据 * * @example 手动设置 breadcrumbRender={(routers = []) => [ { path: '/', breadcrumbName: '主页'} ] * @example 增加一项 breadcrumbRender={(routers = []) => { return [{ path: '/', breadcrumbName: '主页'} ,...routers ]} * @example 删除首页 breadcrumbRender={(routers = []) => { return routers.filter(item => item.path !== '/')} * @example 不显示面包屑 breadcrumbRender={false} */ breadcrumbRender?: WithFalse< (routers: AntdBreadcrumbProps['routes']) => AntdBreadcrumbProps['routes'] >; /** * @name 设置页面的标题 * @example 根据页面的路由设置标题 pageTitleRender={(props) => { return props.location.pathname }} * @example 不显示标题 pageTitleRender={false} * @example 根据默认的标题设置 pageTitleRender={(props,defaultPageTitle) => { return defaultPageTitle + '这是一个测试标题' }} * @example 根据 info 来自己组合标题 pageTitleRender={(props,defaultPageTitle,info) => { return info.title + "-" + info.pageName } */ pageTitleRender?: WithFalse< ( props: GetPageTitleProps, defaultPageTitle?: string, info?: { title: string; id: string; pageName: string; } ) => string >; /** * @name 处理 menuData 的数据,可以动态的控制数据 * @see 尽量不要用异步数据来处理,否则可能造成更新不及时,如果异步数据推荐使用 menu.request 和 params。 * * @example 删除一些菜单 menuDataRender=((menuData) => { return menuData.filter(item => item.name !== 'test') }) * @example 增加一些菜单 menuDataRender={(menuData) => { return menuData.concat({ path: '/test', name: '测试', icon: 'smile' }) }} * @example 修改菜单 menuDataRender={(menuData) => { return menuData.map(item => { if (item.name === 'test') { item.name = '测试' } return item }) }} * @example 打平数据 menuDataRender={(menuData) => { return menuData.reduce((pre, item) => { return pre.concat(item.children || []) }, []) }} */ menuDataRender?: (menuData: MenuDataItem[]) => MenuDataItem[]; /** * @name 处理每个面包屑的配置,需要直接返回 dom * @description (route: Route, params: any, routes: Array<Route>, paths: Array<string>) => React.ReactNode * * @example 设置 disabled: itemRender={(route, params, routes, paths) => { return <Button disabled>{route.breadcrumbName}</Button> }} * @example 拼接 path: itemRender={(route, params, routes, paths) => { return <a href={paths.join('/')}>{route.breadcrumbName}</Button> }} */ itemRender?: AntdBreadcrumbProps['itemRender']; formatMessage?: (message: MessageDescriptor) => string; /** @name 是否禁用移动端模式 * * @see 有的管理系统不需要移动端模式,此属性设置为true即可 * @example disableMobile={true} * */ disableMobile?: boolean; /** * content 的样式 * * @example 背景颜色为红色 contentStyle={{ backgroundColor: 'red '}} */ contentStyle?: CSSProperties; className?: string; /** * @name 取消 content的 margin * * @example 取消内容的 margin disableContentMargin={true} * */ disableContentMargin?: boolean; /** PageHeader 的 BreadcrumbProps 配置,会透传下去 */ breadcrumbProps?: AntdBreadcrumbProps & LayoutBreadcrumbProps; /** @name 水印的相关配置 */ waterMarkProps?: WaterMarkProps; /** * @name 操作菜单重新刷新 * * @example 重新获取菜单 actionRef.current.reload(); * */ actionRef?: React.MutableRefObject< | { reload: () => void; } | undefined >; /** * @name 错误处理组件 * * @example ErrorBoundary={<MyErrorBoundary/>} */ ErrorBoundary?: any; isChildrenLayout?: boolean;};
type FooterProps
type FooterProps = { links?: WithFalse< { key?: string; title: React.ReactNode; href: string; blankTarget?: boolean; }[] >; copyright?: WithFalse<string>; style?: CSSProperties; className?: string; prefixCls?: string;};
type HeaderProps
type HeaderViewProps = GlobalHeaderProps & { isMobile?: boolean; logo?: React.ReactNode; headerRender?: WithFalse< (props: HeaderViewProps, defaultDom: React.ReactNode) => React.ReactNode >; headerTitleRender?: WithFalse< ( logo: React.ReactNode, title: React.ReactNode, props: HeaderViewProps ) => React.ReactNode >; headerContentRender?: WithFalse< (props: HeaderViewProps, defaultDom: React.ReactNode) => React.ReactNode >; siderWidth?: number; hasSiderMenu?: boolean;};
type MenuDataItem
type MenuDataItem = { /** @name 子菜单 */ children?: MenuDataItem[]; /** @name 在菜单中隐藏子节点 */ hideChildrenInMenu?: boolean; /** @name 在菜单中隐藏自己和子节点 */ hideInMenu?: boolean; /** @name 菜单的icon */ icon?: React.ReactNode; /** @name 自定义菜单的国际化 key */ locale?: string | false; /** @name 菜单的名字 */ name?: string; /** @name 用于标定选中的值,默认是 path */ key?: string; /** @name disable 菜单选项 */ disabled?: boolean; /** @name 路径,可以设定为网页链接 */ path?: string; /** * 当此节点被选中的时候也会选中 parentKeys 的节点 * * @name 自定义父节点 */ parentKeys?: string[]; /** @name 隐藏自己,并且将子节点提升到与自己平级 */ flatMenu?: boolean; /** @name 指定外链打开形式,同a标签 */ target?: string; [key: string]: any;};
type PageContainerProps
type PageContainerProps = { title?: React.ReactNode | false; content?: React.ReactNode; extraContent?: React.ReactNode; prefixCls?: string; footer?: ReactNode[]; /** @name 是否显示背景色 */ ghost?: boolean; /** * 与 antd 完全相同 * * @name PageHeader 的配置 */ header?: Partial<PageHeaderProps> & { children?: React.ReactNode; }; /** @name 自定义 pageHeader */ pageHeaderRender?: WithFalse<(props: PageContainerProps) => React.ReactNode>; /** * 与 antd 完全相同 * * @name 固钉的配置 */ affixProps?: Omit<AffixProps, 'children'>; /** * 只加载内容区域 * * @name 是否加载 */ loading?: boolean | SpinProps | React.ReactNode; /** 自定义 breadcrumb,返回false不展示 */ breadcrumbRender?: PageHeaderProps['breadcrumbRender'] | false; /** @name 水印的配置 */ waterMarkProps?: WaterMarkProps; /** @name 配置面包屑 */ breadcrumb?: BreadcrumbProps; children?: React.ReactNode;} & PageHeaderTabConfig & Omit<PageHeaderProps, 'title' | 'footer' | 'breadcrumbRender' | 'breadcrumb'>;
type ProSettings
type ProSettings = PureSettings & RenderSetting;
type RouteContextType
type RouteContextType = { breadcrumb?: BreadcrumbListReturn; menuData?: MenuDataItem[]; isMobile?: boolean; prefixCls?: string; collapsed?: boolean; hasSiderMenu?: boolean; hasHeader?: boolean; siderWidth?: number; isChildrenLayout?: boolean; hasFooterToolbar?: boolean; hasFooter?: boolean; setHasFooterToolbar?: React.Dispatch<React.SetStateAction<boolean>>; pageTitleInfo?: { title: string; id: string; pageName: string; }; matchMenus?: MenuDataItem[]; matchMenuKeys?: string[]; currentMenu?: PureSettings & MenuDataItem; /** PageHeader 的 BreadcrumbProps 配置,会透传下去 */ breadcrumbProps?: BreadcrumbProps; waterMarkProps?: WaterMarkProps;} & Partial<PureSettings>;
type SettingDrawerProps
type SettingDrawerProps = { defaultSettings?: MergerSettingsType<ProSettings>; settings?: MergerSettingsType<ProSettings>; collapse?: boolean; onCollapseChange?: (collapse: boolean) => void; getContainer?: any; hideHintAlert?: boolean; hideCopyButton?: boolean; /** 使用实验性质的黑色主题 */ enableDarkTheme?: boolean; prefixCls?: string; colorList?: | false | { key: string; color: string; }[]; onSettingChange?: (settings: MergerSettingsType<ProSettings>) => void; pathname?: string; disableUrlParams?: boolean; themeOnly?: boolean;};
type SettingDrawerState
type SettingDrawerState = { collapse?: boolean; language?: string;} & MergerSettingsType<ProSettings>;
type Settings
type ProSettings = PureSettings & RenderSetting;
type TopNavHeaderProps
type TopNavHeaderProps = SiderMenuProps & GlobalHeaderProps & PrivateSiderMenuProps;
Package Files (16)
- lib/BasicLayout.d.ts
- lib/Footer.d.ts
- lib/Header.d.ts
- lib/RouteContext.d.ts
- lib/components/FooterToolbar/index.d.ts
- lib/components/GridContent/index.d.ts
- lib/components/PageContainer/index.d.ts
- lib/components/PageLoading/index.d.ts
- lib/components/SettingDrawer/index.d.ts
- lib/components/TopNavHeader/index.d.ts
- lib/components/WaterMark/index.d.ts
- lib/defaultSettings.d.ts
- lib/getPageTitle.d.ts
- lib/index.d.ts
- lib/typings.d.ts
- lib/utils/getMenuData.d.ts
Dependencies (18)
Dev Dependencies (0)
No dev dependencies.
Peer Dependencies (2)
Badge
To add a badge like this oneto your package's README, use the codes available below.
You may also use Shields.io to create a custom badge linking to https://www.jsdocs.io/package/@ant-design/pro-layout
.
- Markdown[](https://www.jsdocs.io/package/@ant-design/pro-layout)
- HTML<a href="https://www.jsdocs.io/package/@ant-design/pro-layout"><img src="https://img.shields.io/badge/jsDocs.io-reference-blue" alt="jsDocs.io"></a>
- Updated .
Package analyzed in 1438 ms. - Missing or incorrect documentation? Open an issue for this package.