import type { SiderProps } from 'antd/lib/layout/Sider'; import type { CSSProperties } from 'react'; import React from 'react'; import type { WithFalse } from '../../typings'; import type { BaseMenuProps } from './BaseMenu'; import './index.less'; export declare const defaultRenderLogo: (logo: React.ReactNode | (() => React.ReactNode)) => React.ReactNode; export declare const defaultRenderLogoAndTitle: (props: SiderMenuProps, renderKey?: string) => React.ReactNode; export declare type SiderMenuProps = { logo?: React.ReactNode; siderWidth?: number; /** * @name 菜单 logo 和 title 区域的渲染 * * @example 不要logo : menuHeaderRender={(logo,title)=> title} * @example 不要title : menuHeaderRender={(logo,title)=> logo} * @example 展开的时候显示title,收起显示 logo: menuHeaderRender={(logo,title,props)=> props.collapsed ? logo : title} * @example 不要这个区域了 : menuHeaderRender={false} */ menuHeaderRender?: WithFalse<(logo: React.ReactNode, title: React.ReactNode, props?: SiderMenuProps) => React.ReactNode>; /** * @name 侧边菜单底部的配置,可以增加一些底部操作 * * @example 底部增加超链接 menuFooterRender={()=>pro.ant.design} * @example 根据收起展开配置不同的 dom menuFooterRender={()=>collapsed? null :pro.ant.design} */ menuFooterRender?: WithFalse<(props?: SiderMenuProps) => React.ReactNode>; /** * @name 侧边菜单,菜单区域的处理,可以单独处理菜单的dom * * @example 增加菜单区域的背景颜色 menuContentRender={(props,defaultDom)=>
{defaultDom}
} * @example 某些情况下不显示菜单 menuContentRender={(props)=> return
不显示菜单
} */ menuContentRender?: WithFalse<(props: SiderMenuProps, defaultDom: React.ReactNode) => React.ReactNode>; /** * @name 侧边菜单 title 和 logo 下面区域的渲染,一般会增加个搜索框 * * @example 增加一个搜索框 menuExtraRender={()=>()} * @example 根据收起展开配置不同的 dom: menuExtraRender={()=>collapsed? null : } */ menuExtraRender?: WithFalse<(props: SiderMenuProps) => React.ReactNode>; /** * @name 自定义展开收起按钮的渲染 * * @example 使用文字渲染 collapsedButtonRender={(collapsed)=>collapsed?"展开":"收起"})} * @example 使用icon渲染 collapsedButtonRender={(collapsed)=>collapsed?:} * @example 不渲染按钮 collapsedButtonRender={false} */ collapsedButtonRender?: WithFalse<(collapsed?: boolean) => React.ReactNode>; /** * @name 菜单是否收起的断点,设置成false 可以禁用 * * @example 禁用断点 breakpoint={false} * @example 最小的屏幕再收起 breakpoint={"xs"} */ breakpoint?: SiderProps['breakpoint'] | false; /** * @name 菜单顶部logo 和 title 区域的点击事件 * * @example 点击跳转到首页 onMenuHeaderClick={()=>{ history.push('/') }} */ onMenuHeaderClick?: (e: React.MouseEvent) => void; /** * @name 侧边菜单底部的一些快捷链接 * * @example links={[ 访问官网 , 帮助 ]} */ links?: React.ReactNode[]; onOpenChange?: (openKeys: WithFalse) => void; getContainer?: false; /** * @name 侧边菜单的logo的样式,可以调整下大小 * * @example 设置logo的大小为 42px logoStyle={{width: '42px', height: '42px'}} */ logoStyle?: CSSProperties; hide?: boolean; className?: string; style?: CSSProperties; } & Pick>; export declare const defaultRenderCollapsedButton: (collapsed?: boolean) => JSX.Element; export declare type PrivateSiderMenuProps = { matchMenuKeys: string[]; }; declare const SiderMenu: React.FC; export default SiderMenu;