Ant Design Pro

开箱即用的中台前端/设计解决方案。此仓库是 Ant Design Pro 的 layout, 是为了方便快速的使用 layout 而开发。

使用

Install-Package AntDesign.Pro.Layout
// or
dotnet add package AntDesign.Pro.Layout

builder.Services.AddAntDesign();
builder.Services.Configure<ProSettings>(x =>
{
    x.Title = "Ant Design Pro";
    x.NavTheme = "light";
    x.Layout = "mix";
    x.PrimaryColor = "daybreak";
    x.ContentWidth = "Fluid";
    x.HeaderHeight = 64;
});

此外也可以通过appsettings.json来配置

builder.Services.AddAntDesign();
builder.Services.Configure<ProSettings>(builder.Configuration.GetSection("ProSettings"));

{
  "ProSettings": {
    "NavTheme": "light",
    "Layout": "mix",
    "ContentWidth": "Fluid",
    "FixedHeader": false,
    "FixSiderbar": true,
    "Title": "Ant Design Pro",
    "PrimaryColor": "daybreak",
    "ColorWeak": false,
    "SplitMenus": false,
    "HeaderRender": true,
    "FooterRender": true,
    "MenuRender": true,
    "MenuHeaderRender": true,
    "HeaderHeight": 64
  }
}

示例

site

API

所有以 Render 后缀的方法都可以通过传入 false 来使其不渲染。

参数	说明	类型	默认值
title	layout 的左上角的 title	ReactNode	`'Ant Design Pro'`
logo	layout 的左上角 logo 的 url	ReactNode \| ()=>ReactNode	-
pure	是否删除掉所有的自带界面	boolean	-
loading	layout 的加载态	boolean	-
menuHeaderRender	渲染 logo 和 title	ReactNode \| (logo,title)=>ReactNode	-
onMenuHeaderClick	menu 菜单的头部点击事件	`(e: React.MouseEvent<HTMLDivElement>) => void`	-
contentStyle	layout 的内容区 style	CSSProperties	-
layout	layout 的菜单模式,sidemenu：右侧导航，topmenu：顶部导航	'sidemenu' \| 'topmenu'	`'sidemenu'`
contentWidth	layout 的内容模式,Fluid：定宽 1200px，Fixed：自适应	'Fluid' \| 'Fixed'	`'Fluid'`
navTheme	导航的主题	'light' \| 'dark'	`'dark'`
fixedHeader	是否固定 header 到顶部	boolean	`false`
fixSiderbar	是否固定导航	boolean	`false`
breakpoint	触发响应式布局的断点	`Enum { 'xs', 'sm', 'md', 'lg', 'xl', 'xxl' }`	`lg`
menu	关于 menu 的配置，暂时只有 locale,locale 可以关闭 menu 的自带的全球化	{ locale: boolean, defaultOpenAll: boolean }	`{ locale: true }`
iconfontUrl	使用 IconFont 的图标配置	string	-
locale	当前 layout 的语言设置	'zh-CN' \| 'zh-TW' \| 'en-US'	navigator.language
settings	layout 的设置	`Settings`	`Settings`
siderWidth	侧边菜单宽度	number	256
collapsed	控制菜单的收起和展开	boolean	true
onCollapse	菜单的折叠收起事件	(collapsed: boolean) => void	-
onPageChange	页面切换时触发	(location: Location) => void	-
headerRender	自定义头的 render 方法	(props: BasicLayoutProps) => ReactNode	-
headerTitleRender	自定义头标题的方法	(props: BasicLayoutProps) => ReactNode	-
headerContentRender	自定义头内容的方法	(props: BasicLayoutProps) => ReactNode	-
rightContentRender	自定义头右部的 render 方法	(props: HeaderViewProps) => ReactNode	-
collapsedButtonRender	自定义 collapsed button 的方法	(collapsed: boolean) => ReactNode	-
footerRender	自定义页脚的 render 方法	(props: BasicLayoutProps) => ReactNode	-
pageTitleRender	自定义页面标题的显示方法	(props: BasicLayoutProps) => ReactNode	-
menuRender	自定义菜单的 render 方法	(props: HeaderViewProps) => ReactNode	-
postMenuData	在显示前对菜单数据进行查看，修改不会触发重新渲染	`(menuData: MenuDataItem[]) => MenuDataItem[]`	-
menuItemRender	自定义菜单项的 render 方法	(itemProps: MenuDataItem) => ReactNode	-
subMenuItemRender	自定义拥有子菜单菜单项的 render 方法	(itemProps: MenuDataItem) => ReactNode	-
menuDataRender	menuData 的 render 方法，用来自定义 menuData	`(menuData: MenuDataItem[]) => MenuDataItem[]`	-
breadcrumbRender	自定义面包屑的数据	(route)=>route	-
route	用于生成菜单和面包屑。umi 的 Layout 会自动带有	route	-
disableMobile	禁止自动切换到移动页面	boolean	false
links	显示在菜单右下角的快捷操作	ReactNode[]	-
menuProps	传递到 antd menu 组件的 props, 参考 (https://ant.design/components/menu-cn/)	MenuProps	undefined

在 4.5.13 以后 Layout 通过 menuProps 支持 Menu 的大部分 props。

SettingDrawer

SettingDrawer 提供了一个图形界面来设置 layout 的配置。不建议在正式环境中使用。

参数	说明	类型	默认值
settings	layout 的设置	`Settings`	`Settings`
onSettingChange	`Settings` 发生更改事件	(settings: `Settings` ) => void	-
hideHintAlert	删除下方的提示信息	boolean	-

PageContainer

PageContainer 封装了 ant design 的 PageHeader 组件，增加了 tabList，和 content。根据当前的路由填入 title 和 breadcrumb。它依赖 Layout 的 route 属性。当然你可以传入参数来复写默认值。 PageContainer 支持 Tabs 和 PageHeader 的所有属性。

参数	说明	类型	默认值
content	内容区	ReactNode	-
extraContent	额外内容区，位于 content 的右侧	ReactNode	-
tabList	tab 标题列表	`Array<{key: string, tab: ReactNode}>`	-
tabActiveKey	当前高亮的 tab 项	string	-
onTabChange	切换面板的回调	`(key) => void`	-
tabBarExtraContent	tab bar 上额外的元素	React.ReactNode	-

PageLoading

一个简单的加载页面

参数	说明	类型	默认值
tip	加载的小说明	ReactNode	-

RouteContext

RouteContext 可以提供 Layout 的内置的数据。例如 isMobile 和 collapsed，你可以消费这些数据来自定义一些行为。

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

const Page = () => (
  <RouteContext.Consumer>
    {(value) => {
      return value.title;
    }}
  </RouteContext.Consumer>
);

GridContent

GridContent 封装了等宽和流式的逻辑。你可以在 preview 中查看预览效果。

参数	说明	类型	默认值
contentWidth	内容模式	'Fluid' \| 'Fixed'	-

getMenuData

根据 router 信息来生成 menuData 和 breadcrumb。

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

const { breadcrumb, menuData } = getMenuData(
  routes,
  menu,
  formatMessage,
  menuDataRender,
);

参数	说明	类型	默认值
routes	路由的配置信息	route[]	-
menu	menu 的配置项，默认 `{locale: true}`	`{ locale: boolean }`	-
menuDataRender	menuData 的 render 方法，用来自定义 menuData	`(menuData: MenuDataItem[]) => MenuDataItem[]`	-
formatMessage	react-intl 的 formatMessage 方法	`(data: { id: any; defaultMessage?: string }) => string;`	-

getPageTitle

getPageTitle 封装了根据 menuData 上生成的 title 的逻辑。

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

const title = getPageTitle({
  pathname,
  breadcrumb,
  menu,
  title,
  formatMessage,
});

参数	说明	类型	默认值
pathname	当前的 pathname	location.pathname	-
breadcrumb	MenuDataItem 的合集	`{ [path: string]: MenuDataItem }`	-
menu	menu 的配置项，默认 `{locale: true}`	`{ locale: boolean }`	-
title	title 的类型	string	'Ant Design Pro'
formatMessage	react-intl 的 formatMessage 方法	`(data: { id: any; defaultMessage?: string }) => string;`	-

数据结构

为了方便查看和使用，这里使用了 Typescript 的方式来书写。

Settings

// 可以通过 import { Settings } from '@ant-design/pro-layout/defaultSettings'
// 来获取这个类型
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

// 可以通过 import { MenuDataItem } from '@ant-design/pro-layout/typings'
// 来获取这个类型

export interface MenuDataItem {
  authority?: string[] | string;
  children?: MenuDataItem[];
  hideChildrenInMenu?: boolean;
  hideInMenu?: boolean;
  icon?: string;
  locale?: string;
  name?: string;
  path: string;
  [key: string]: any;
}

Route

// 可以通过 import { RouterTypes } from '@ant-design/pro-layout/typings'
// 来获取这个类型
export interface Route {
  path: string;
  routes: Array<{
    exact?: boolean;
    icon: string;
    name: string;
    path: string;
    // 可选二级菜单
    children?: Route['routes'];
  }>;
}

参与贡献

我们非常欢迎你的贡献，你可以通过以下方式和我们一起共建 😃：

在你的公司或个人项目中使用 Ant Design Pro。
通过 Issue 报告 bug 或进行咨询。
提交 Pull Request 改进 Pro 的代码。

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

README.zh-CN.md

README.zh-CN.md

Ant Design Pro

使用

示例

API

SettingDrawer

PageContainer

PageLoading

RouteContext

GridContent

getMenuData

getPageTitle

数据结构

Settings

MenuDataItem

Route

参与贡献

Files

README.zh-CN.md

Latest commit

History

README.zh-CN.md

File metadata and controls

Ant Design Pro

使用

示例

API

SettingDrawer

PageContainer

PageLoading

RouteContext

GridContent

getMenuData

getPageTitle

数据结构

Settings

MenuDataItem

Route

参与贡献