Notoriously Pedantic Magistrate
    Have ideas to improve npm?Join in the discussion! »

    @gehaijun/pro-layout
    TypeScript icon, indicating that this package has built-in type declarations

    1.1.1 • Public • Published

    English | 简体中文 changelog

    npm package Dependencies DevDependencies Test CI Deploy CI

    Ant Design Pro Layout

    image

    An out-of-box UI solution for enterprise applications as a React boilerplate. This repository is the layout of Ant Design Pro and was developed for quick and easy use of the layout.

    Usage

    npm i @ant-design/pro-layout --save
    // or
    yarn add @ant-design/pro-layout
    import ProLayout from '@ant-design/pro-layout';
     
    render(<ProLayout />, document.getElementById('root'));

    Demo

    site

    API

    ProLayout

    All methods with the suffix Render can prevent rendering by passing in false.

    Property Description Type Default Value
    title layout in the upper left corner title ReactNode 'Ant Design Pro'
    logo layout top left logo url ReactNode | ()=>ReactNode -
    pure Interface that doesn't require extra ui boolean -
    loading layout loading status boolean -
    menuHeaderRender render logo and title ReactNode | (logo,title)=>ReactNode -
    onMenuHeaderClick menu header click event (e: React.MouseEvent<HTMLDivElement>) => void -
    contentStyle layout content style CSSProperties -
    layout layout menu mode, sidemenu: right navigation, topmenu: top navigation 'sidemenu' | 'topmenu' 'sidemenu'
    contentWidth content mode of layout, Fluid: fixed width 1200px, Fixed: adaptive 'Fluid' | 'Fixed' 'Fluid'
    navTheme Navigation menu theme 'light' | 'dark' 'dark'
    fixedHeader whether to fix header to top boolean false
    fixSiderbar Whether to fix navigation menu boolean false
    breakpoint breakpoints of the responsive layout Enum { 'xs', 'sm', 'md', 'lg', 'xl', 'xxl' } lg
    menu About the configuration of the menu, only locale, locale can turn off the globalization of the menu { locale: boolean,defaultOpenAll: boolean } { locale: true }
    iconfontUrl Use IconFont icon configuration string -
    locale The language setting of the layout 'zh-CN' | 'zh-TW' | 'en-US' navigator.language
    settings layout settings Settings Settings
    siderWidth width of sider menu number 256
    collapsed control menu's collapse and expansion boolean true
    onPageChange Triggered when page switching (location: Location) => void -
    onCollapse folding collapse event of menu (collapsed: boolean) => void -
    headerRender custom header render method (props: BasicLayoutProps) => ReactNode -
    rightContentRender header right content render method (props: HeaderViewProps) => ReactNode -
    collapsedButtonRender custom collapsed button method (collapsed: boolean) => ReactNode -
    footerRender custom footer render method (props: BasicLayoutProps) => ReactNode -
    pageTitleRender custom page title render method (props: BasicLayoutProps) => ReactNode -
    menuRender custom menu render method (props: HeaderViewProps) => ReactNode -
    menuDataRender The render method of menuData, with the definition of menuData (menuData: MenuDataItem[]) => MenuDataItem[] -
    postMenuData View the menu data before displaying it. Modification will not trigger re-rendering. (menuData: MenuDataItem[]) => MenuDataItem[] -
    postMenuData
    menuItemRender the render method of a custom menu item (itemProps: MenuDataItem) => ReactNode -
    subMenuItemRender the render method of a custom subMenu item (itemProps: MenuDataItem) => ReactNode -
    breadcrumbRender custom breadcrumbs data (route)=>route -
    route Used to assist in the generation of menu and bread crumbs. Umi will automatically bring route -
    disableMobile Disable automatic switch to mobile mode boolean false
    links Shortcuts displayed in the lower right corner of the menu ReactNode[] -
    menuProps Props passed to ANTD MENU, SEE (https://ant.design/components/menu-cn/) MenuProps undefined

    Layout support for most of Menu by menuProps after 4.5.13.

    SettingDrawer

    import { SettingDrawer } from '@ant-design/pro-layout';

    SettingDrawer provides a graphical interface to set the layout configuration. Not recommended for use in a product environment.

    Property Description Type Default Value
    settings layout settings Settings Settings
    onSettingChange The setting changes event (settings: Settings) => void -
    hideHintAlert remove hint info boolean -

    PageHeaderWrapper

    PageHeaderWrapper encapsulates the PageHeader component of ant design, adds tabList, and content. Fill in the title and breadcrumb based on the current route. It depends on the route property of the Layout. Of course you can pass in parameters to override the default values. PageHeaderWrapper supports all the attributes of Tabs and PageHeader.

    Property Description Type Default Value
    content Content area ReactNode -
    extraContent Extra content area, on the right side of content ReactNode -
    tabList Tabs title list Array<{key: string, tab: ReactNode}> -
    tabActiveKey The currently highlighted tab item string -
    onTabChange Switch panel callback (key) => void -
    tabBarExtraContent Extra elements on the tab bar React.ReactNode -

    PageLoading

    a simple loading page

    Property Description Type Default Value
    tip loading tip ReactNode -

    RouteContext

    RouteContext can provide built-in data for Layout. For example, isMobile and collapsed, you can consume this data to customize some behavior.

    import { RouteContext } from '@ant-design/pro-layout';
     
    const Page = () => (
      <RouteContext.Consumer>
        {(value) => {
          return value.title;
        }}
      </RouteContext.Consumer>
    );

    GridContent

    GridContent encapsulates equal width and streaming The logic of analysis?layout=topmenu). You can see the preview in preview.

    Property Description Type Default Value
    contentWidth Content mode 'Fluid' | 'Fixed' -

    getMenuData

    Generate menuData and breadcrumb based on the router information.

    import { getMenuData } from '@ant-design/pro-layout';
     
    const { breadcrumb, menuData } = getMenuData(
      routes,
      menu,
      formatMessage,
      menuDataRender,
    );
    Property Description Type Default Value
    routes Routing configuration information route[] -
    menu Menu configuration item, default {locale: true} { locale: boolean } -
    menuDataRender The render method of menuData, with the definition of menuData (menuData: MenuDataItem[]) => MenuDataItem[] -
    formatMessage The formatMessage method of react-intl (data: { id: any; defaultMessage?: string }) => string; -

    getPageTitle

    import { getPageTitle } from '@ant-design/pro-layout';
     
    const title = getPageTitle({
      pathname,
      breadcrumb,
      menu,
      title,
      formatMessage,
    });

    getPageTitle encapsulates the logic based on the title generated on menuData.

    Property Description Type Default Value
    pathname Current pathname location.pathname -
    breadcrumb Collection of MenuDataItem { [path: string]: MenuDataItem } -
    menu Menu configuration item, default {locale: true} { locale: boolean } -
    title Type of title string 'Ant Design Pro'
    formatMessage The formatMessage method of react-intl (data: { id: any; defaultMessage?: string }) => string; -

    Data Structure

    For ease of viewing and use, Typescript is used here to write.

    Settings

    // can be done via import { Settings } from '@ant-design/pro-layout/defaultSettings' to get this type
     
    export interface Settings {
      /**
       * theme for nav menu
       */
      navTheme: 'light' | 'dark';
      /**
       * primary color of ant design
       */
      primaryColor: string;
      /**
       * nav menu position: `sidemenu` or `topmenu`
       */
      layout: 'sidemenu' | 'topmenu';
      /**
       * layout of content: `Fluid` or `Fixed`, only works when layout is topmenu
       */
      contentWidth: 'Fluid' | 'Fixed';
      /**
       * sticky header
       */
      fixedHeader: boolean;
      /**
       * sticky siderbar
       */
      fixSiderbar: boolean;
      menu: { locale: boolean };
      title: string;
      pwa: boolean;
      // Your custom iconfont Symbol script Url
      // eg://at.alicdn.com/t/font_1039637_btcrd5co4w.js
      // Usage: https://github.com/ant-design/ant-design-pro/pull/3517
      iconfontUrl: string;
      colorWeak: boolean;
    }

    MenuDataItem

    // can be imported { MenuDataItem } from '@ant-design/pro-layout/typings' to get this type
     
    export interface MenuDataItem {
      authority?: string[] | string;
      children?: MenuDataItem[];
      hideChildrenInMenu?: boolean;
      hideInMenu?: boolean;
      icon?: string;
      locale?: string;
      name?: string;
      path: string;
      [key: string]: any;
    }

    Route

    // can be imported { RouterTypes } from '@ant-design/pro-layout/typings'  to get this type
    export interface Route {
      path: string;
      routes: Array<{
        exact?: boolean;
        icon: string;
        name: string;
        path: string;
        // optional secondary menu
        children?: Route['routes'];
      }>;
    }

    Contributing

    Any type of contribution is welcome, here are some examples of how you may contribute to this project:

    • Use Ant Design Pro in your daily work.
    • Submit issues to report bugs or ask questions.
    • Propose pull requests to improve our code.

    Install

    npm i @gehaijun/pro-layout

    DownloadsWeekly Downloads

    10

    Version

    1.1.1

    License

    MIT

    Unpacked Size

    1.17 MB

    Total Files

    183

    Last publish

    Collaborators

    • avatar