UNPKG

4.28 kBTypeScriptView Raw
1import type { SiderProps } from 'antd/lib/layout/Sider';
2import type { CSSProperties } from 'react';
3import React from 'react';
4import type { WithFalse } from '../../typings';
5import type { BaseMenuProps } from './BaseMenu';
6import './index.less';
7export declare const defaultRenderLogo: (logo: React.ReactNode | (() => React.ReactNode)) => React.ReactNode;
8export declare const defaultRenderLogoAndTitle: (props: SiderMenuProps, renderKey?: string) => React.ReactNode;
9export declare type SiderMenuProps = {
10 logo?: React.ReactNode;
11 siderWidth?: number;
12 /**
13 * @name 菜单 logo 和 title 区域的渲染
14 *
15 * @example 不要logo : menuHeaderRender={(logo,title)=> title}
16 * @example 不要title : menuHeaderRender={(logo,title)=> logo}
17 * @example 展开的时候显示title,收起显示 logo： menuHeaderRender={(logo,title,props)=> props.collapsed ? logo : title}
18 * @example 不要这个区域了 : menuHeaderRender={false}
19 */
20 menuHeaderRender?: WithFalse<(logo: React.ReactNode, title: React.ReactNode, props?: SiderMenuProps) => React.ReactNode>;
21 /**
22 * @name 侧边菜单底部的配置，可以增加一些底部操作
23 *
24 * @example 底部增加超链接 menuFooterRender={()=><a href="https://pro.ant.design">pro.ant.design</a>}
25 * @example 根据收起展开配置不同的 dom menuFooterRender={()=>collapsed? null :<a href="https://pro.ant.design">pro.ant.design</a>}
26 */
27 menuFooterRender?: WithFalse<(props?: SiderMenuProps) => React.ReactNode>;
28 /**
29 * @name 侧边菜单，菜单区域的处理,可以单独处理菜单的dom
30 *
31 * @example 增加菜单区域的背景颜色 menuContentRender={(props,defaultDom)=><div style={{backgroundColor:"red"}}>{defaultDom}</div>}
32 * @example 某些情况下不显示菜单 menuContentRender={(props)=> return <div>不显示菜单</div>}
33 */
34 menuContentRender?: WithFalse<(props: SiderMenuProps, defaultDom: React.ReactNode) => React.ReactNode>;
35 /**
36 * @name 侧边菜单 title 和 logo 下面区域的渲染，一般会增加个搜索框
37 *
38 * @example 增加一个搜索框 menuExtraRender={()=>(<Search placeholder="请输入" />)}
39 * @example 根据收起展开配置不同的 dom： menuExtraRender={()=>collapsed? null : <Search placeholder="请输入" />}
40 */
41 menuExtraRender?: WithFalse<(props: SiderMenuProps) => React.ReactNode>;
42 /**
43 * @name 自定义展开收起按钮的渲染
44 *
45 * @example 使用文字渲染 collapsedButtonRender={(collapsed)=>collapsed?"展开":"收起"})}
46 * @example 使用icon渲染 collapsedButtonRender={(collapsed)=>collapsed?<MenuUnfoldOutlined />:<MenuFoldOutlined />}
47 * @example 不渲染按钮 collapsedButtonRender={false}
48 */
49 collapsedButtonRender?: WithFalse<(collapsed?: boolean) => React.ReactNode>;
50 /**
51 * @name 菜单是否收起的断点，设置成false 可以禁用
52 *
53 * @example 禁用断点 breakpoint={false}
54 * @example 最小的屏幕再收起 breakpoint={"xs"}
55 */
56 breakpoint?: SiderProps['breakpoint'] | false;
57 /**
58 * @name 菜单顶部logo 和 title 区域的点击事件
59 *
60 * @example 点击跳转到首页 onMenuHeaderClick={()=>{ history.push('/') }}
61 */
62 onMenuHeaderClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
63 /**
64 * @name 侧边菜单底部的一些快捷链接
65 *
66 * @example links={[<a href="ant.design"> 访问官网 </a>,<a href="help.ant.design"> 帮助 </a>]}
67 */
68 links?: React.ReactNode[];
69 onOpenChange?: (openKeys: WithFalse<string[]>) => void;
70 getContainer?: false;
71 /**
72 * @name 侧边菜单的logo的样式，可以调整下大小
73 *
74 * @example 设置logo的大小为 42px logoStyle={{width: '42px', height: '42px'}}
75 */
76 logoStyle?: CSSProperties;
77 hide?: boolean;
78 className?: string;
79 style?: CSSProperties;
80} & Pick<BaseMenuProps, Exclude<keyof BaseMenuProps, ['onCollapse']>>;
81export declare const defaultRenderCollapsedButton: (collapsed?: boolean) => JSX.Element;
82export declare type PrivateSiderMenuProps = {
83 matchMenuKeys: string[];
84};
85declare const SiderMenu: React.FC<SiderMenuProps & PrivateSiderMenuProps>;
86export default SiderMenu;