@b-design/ui-layout/lib/typings/ILayoutCommonProps.type.d.ts

React component for Alibaba Cloud.

import React from 'react';
import { IItemDescriptor } from './IItemDescriptor.type';
/**
 * @public
 */
export interface ILayoutCommonProps {
    /**
     * 类名。
     */
    className?: string;
    /**
     * 样式。
     */
    style?: React.CSSProperties;
    /**
    * 内容。
    */
    children?: React.ReactNode;
    /**
    * 页面内的面包屑
    */
    breadcrumb?: React.ReactNode;
    /**
     * 面包屑额外内容
     */
    breadcrumbExtra?: React.ReactNode;
    /**
     * 面包屑额外内容的位置
     */
    breadcrumbExtraAlign?: 'left' | 'right';
    /**
    * 是否展示「返回上级」的图标按钮。
    */
    hasBackArrow?: boolean;
    /**
    * 【默认的「返回上级」按钮】所绑定的`onClick`回调。<br/>
    * 注意，如果用户通过renderBackArrow返回了一个全新的按钮，没有渲染默认的按钮，那么用户需要自己绑定`onClick`回调。
    */
    onBackArrowClick?: (e: React.SyntheticEvent) => void | never;
    /**
    * Header区域的左侧内容
    */
    headerLeftNode?: React.ReactNode;
    /**
    * Header区域的右侧内容
    */
    headerRightNode?: React.ReactNode;
    /**
    * 页面内的标题
    */
    pageTitle?: string | React.ReactNode;
    /**
    * 页面内的额外标题
    */
    subTitle?: string | React.ReactNode;
    /**
     * 页面内的标题右侧内容
     */
    headerExtra?: any;
    /**
     * 菜单栏数据源
     */
    menus?: IItemDescriptor[];
    /**
    * 是否显示菜单栏，默认为true
    */
    menuVisible?: boolean;
    /**
     * 是否显示Header，默认为true
     */
    headerVisible?: boolean;
    /**
     * Header的类名
     */
    headerClassName?: string;
    /**
     * Header的样式
     */
    headerStyle?: React.CSSProperties;
    /**
     * RoutableMenu的props
     */
    menuProps?: {
        /**
        * 当前被选中的菜单项，使用该prop让该组件成为受控组件
        */
        activeKey?: string;
        /**
        * 默认被选中的菜单项
        */
        defaultActiveKey?: string;
        /**
        * 当前展开的SubMenu项，使用该prop让该组件成为受控组件
        */
        openKeys?: string | string[];
        /**
        * 默认展开的SubMenu项
        */
        defaultOpenKeys?: string | string[];
        /**
        * 是否默认展开所有SubMenu项，它的优先级高于defaultOpenKeys
        */
        defaultOpenAll?: boolean;
        /**
        * 菜单项点击回调
        */
        onItemClick?: (key: string, itemInfo: any, event: MouseEvent) => void;
        /**
        * 菜单项展开回调
        */
        onOpen?: (openKeys: string[], openInfo: {
            key: string;
            open: boolean;
        }) => void;
        /**
        * 菜单栏类名
        */
        className?: string;
        /**
       * 菜单栏样式
       */
        style?: React.CSSProperties;
        /**
       * 导航类型
       */
        type?: 'normal' | 'primary' | 'secondary' | 'line';
        /**
         * 设置组件选中状态的 active 边方向
         */
        activeDirection?: null | 'top' | 'bottom' | 'left' | 'right';
        /**
        * 是否开启嵌入模式
        */
        embeddable?: boolean;
    };
    /**
     * 是否开启菜单收起功能
     */
    collapseVisible?: boolean;
}