• This repository has been archived on 11/Aug/2020
  • Stars
    star
    998
  • Rank 43,771 (Top 0.9 %)
  • Language
    TypeScript
  • License
    MIT License
  • Created almost 5 years ago
  • Updated over 3 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

🌃 Powerful and easy to use beautiful layout

此仓库已废弃

重要: 此仓库后续不再维护,也不再接受更多的特性更新。ant-design/pro-layout 将会迁移至 ant-design/pro-components 仓库进行后续的维护,访问 https://procomponent.ant.design/layout 了解更多。此变更不影响继续使用 @ant-design/pro-layout 这个 npm 包名安装使用此组件。

English | 简体中文 changelog

npm package

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, side: right navigation, top: top navigation 'side' | 'top' 'side'
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 -
headerTitleRender custom header title render method (props: BasicLayoutProps) => ReactNode -
headerContentRender custom header content 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 -

PageContainer

PageContainer 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. PageContainer 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, RouteContextType } from '../index';

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

GridContent

GridContent encapsulates equal width and streaming The logic of analysis?layout=top). 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: `side` or `top`
   */
  layout: 'side' | 'top';
  /**
   * layout of content: `Fluid` or `Fixed`, only works when layout is top
   */
  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.

More Repositories

1

ant-design

An enterprise-class UI design language and React UI library
TypeScript
89,408
star
2

ant-design-pro

👨🏻‍💻👩🏻‍💻 Use Ant Design like a Pro!
TypeScript
35,593
star
3

ant-design-mobile

Essential UI blocks for building mobile web apps.
TypeScript
11,388
star
4

ant-design-landing

🚵 Landing Pages of Ant Design System
JavaScript
5,871
star
5

ant-motion

🚴 Animate specification and components of Ant Design
JavaScript
4,549
star
6

pro-components

🏆 Use Ant Design like a Pro!
TypeScript
3,941
star
7

ant-design-mobile-rn

Ant Design for React Native
TypeScript
2,925
star
8

ant-design-charts

A React Chart Library
JavaScript
1,771
star
9

antd-mobile-samples

antd-mobile samples
HTML
1,142
star
10

ant-ux

🎸 A sitemap template for ux design
JavaScript
1,136
star
11

ant-design-icons

⭐ Ant Design SVG Icons
TypeScript
901
star
12

antd-init

🔰 Ant Design boilerplate generator.
JavaScript
816
star
13

pro-blocks

Blocks of Ant Design Pro.
TypeScript
710
star
14

ant-design-web3

🥳 Efficient react components for building dapps easier | Connect crypto wallets and more Web3 UI components | Supports Ethereum, Solana and others.
TypeScript
663
star
15

ant-design-colors

🎨 Color Palettes Calculator of Ant Design
TypeScript
612
star
16

create-react-app-antd

Use antd in create-react-app without ejecting ✨
JavaScript
583
star
17

pro-table

🏆 Use Ant Design Table like a Pro!
TypeScript
560
star
18

sunflower

🦹 Process components for antd4 & antd3 by alipay industry technology
TypeScript
499
star
19

ant-design-dark-theme

🌚 Dark theme variables of Ant Design
TypeScript
478
star
20

react-tutorial

基于 umi 的 Ant Design 实战教程配套代码 https://www.yuque.com/ant-design/course
JavaScript
434
star
21

ant-design-pro-site

TypeScript
393
star
22

antd-tools

🔧 Cli Tools for Ant Design React
JavaScript
393
star
23

ant-design-mini

Ant Design for Alipay Mini Program
TypeScript
359
star
24

ant-design-aliyun-theme

⚙ Ant Design Theme for console.aliyun.com
TypeScript
304
star
25

antd-dayjs-webpack-plugin

⏰ Day.js webpack plugin for Ant Design
JavaScript
287
star
26

pro-chat

🤖 Components Library for Quickly Building LLM Chat Interfaces.
TypeScript
283
star
27

ant-design-pro-cli

Cli tool of Ant Design Pro
JavaScript
259
star
28

cssinjs

TypeScript
219
star
29

intl-example

🌏 example about`antd`/`antd-mobile` internationalization
JavaScript
205
star
30

antd-sketchapp

⚛️💎🐜 Render Ant Design components to Sketch.
HTML
201
star
31

html2sketch

parser HTML to Sketch JSON
TypeScript
147
star
32

antd-style

css-in-js library with antd v5 token system
TypeScript
145
star
33

scaffold-market

scaffold market for single page application
JavaScript
127
star
34

kitchen

Powerful sketch plugin for design cooperation 🍳🍳🍳
122
star
35

pro-editor

🕹️ The Ultimate Editor UI Framework and Components
TypeScript
122
star
36

pro-flow

🪢 A React based Flow Framework, include Flow View and Flow Editor
TypeScript
121
star
37

ant-design-mobile-chart

Ant Design Mobile Chart based on F2
JavaScript
103
star
38

codemod-v4

codemod cli for antd v4 upgrade
JavaScript
92
star
39

compatible

TypeScript
89
star
40

ant-bot

JavaScript
78
star
41

parcel-antd

Use antd with parcel
TypeScript
75
star
42

antd-library

Axure library for Ant Design
HTML
75
star
43

v2.preview.pro.ant.design

v2.preview.pro.ant.design
JavaScript
72
star
44

antd-token-previewer

TypeScript
64
star
45

antd-mobile-pro

👨🏻‍💻👩🏻‍💻 Use Antd Mobile like a Pro!
TypeScript
53
star
46

ant-design-blocks

umi blocks of Ant Design.
TypeScript
50
star
47

antd-mobile-icons-v2

svg icons for ant-design-mobile
45
star
48

antd-issue-helper

TypeScript
43
star
49

antd-migration-helper

CLI tool to aid in migrate antd from old version to newer version.
JavaScript
41
star
50

u.ant.design

URL shortener.
JavaScript
35
star
51

editable-table

JavaScript
33
star
52

bisheng-plugin-antd

To support ant.design-like websites.
JavaScript
33
star
53

pro-list

梦想被 antd 内置的基于 antd 修改的 list
TypeScript
30
star
54

antd-mobile-template

umijs@4 and antd-mobile@5 quick start project, You can click the `use template` to quickly create your own app.
TypeScript
29
star
55

functional-mini

TypeScript
25
star
56

examples

More complex demo using antd
JavaScript
25
star
57

HiTu

TypeScript
25
star
58

sketch-json-api

💎🔧 Node.js Library for Editing Sketch Files.
TypeScript
24
star
59

antd-color-editor

🎨 an open-source color editor for designing color system
TypeScript
23
star
60

static-style-extract

TypeScript
21
star
61

antd-codemod

antd codemod scripts.
JavaScript
20
star
62

happy-work-theme

TypeScript
16
star
63

use-emotion-css

A gadget that combines emotion and antd token
TypeScript
16
star
64

codemod-v5

codemod cli for antd v5 upgrade
JavaScript
16
star
65

ant-design-landing-build

JavaScript
16
star
66

antd-changelog-editor

Ant Design Changelog Editor
TypeScript
13
star
67

next-pro-components

下一个版本的 pro-components
HTML
12
star
68

antd-theme

CSS
10
star
69

antd-adapter

An adapter which makes newer antd works like old one. DIRTY HACK \ T^T /
JavaScript
9
star
70

sketch-assistant-ant-design

TypeScript
9
star
71

ant-design-analysis

bundle size analysis of ant-design-mobile
HTML
8
star
72

antd-mobile-icons

The icon set for antd-mobile.
JavaScript
7
star
73

.github

6
star
74

beta.pro.ant.design

beta for pro scaffold
HTML
6
star
75

2x.ant.design

[email protected] site
HTML
6
star
76

010x.ant.design

[email protected] site
HTML
5
star
77

1x.ant.design

[email protected] site http://1x.ant.design
HTML
5
star
78

v2.pro.ant.design

https://v2-pro.ant.design/index-cn v2 version
HTML
4
star
79

next.mobile.ant.design

This is the documentation site for antd-mobile v5.
4
star
80

beta.preview.pro.ant.design

ant.design.pro 的 beta 预览
JavaScript
4
star
81

3x.ant.design

HTML
4
star
82

doc

antd 技术栈的所有文档,用于做 AI 功能
JavaScript
4
star
83

1x.mobile.ant.design

[email protected] site, http://1x.mobile.ant.design
HTML
4
star
84

012x.ant.design

[email protected] site http://012x.ant.design
HTML
3
star
85

v1.pro.ant.design

ant design pro document
CSS
3
star
86

011x.ant.design

[email protected] site http://011x.ant.design
HTML
3
star
87

07x.mobile.ant.design

[email protected] site
3
star
88

08x.mobile.ant.design

[email protected] site
HTML
3
star
89

03x.pro.ant.design

Document for ant design pro 0.3.x
HTML
3
star
90

09x.mobile.ant.design

[email protected] site
HTML
3
star
91

2x.rn.mobile.ant.design

http://2x.rn.mobile.ant.design/
HTML
3
star
92

ant-design-web3-demo

A demo for Ant Design Web3 course.
TypeScript
3
star
93

09x.ant.design

document of [email protected]
JavaScript
2
star
94

v1.preview.pro.ant.design

ant design pro v1 preview
JavaScript
2
star
95

beta.mobile.ant.design

No longer use, please visitor:
HTML
2
star
96

v5.ant-design-pro-site

TypeScript
2
star
97

test-antd-locale

JavaScript
1
star
98

cssinjs-benchmark

Benchmark for ant design cssinjs
TypeScript
1
star
99

babel-plugin-antd-style

为 antd-style 生成的 classname 增加文件名,方便 debug
TypeScript
1
star
100

antd-moment-webpack-plugin

⏰ Replace Day.js to Moment.js webpack plugin for Ant Design
JavaScript
1
star