Skip to content

Commit 1f621d0

Browse files
ElderJamesElderJames
committed
clean up readme
1 parent cdaaf64 commit 1f621d0

File tree

2 files changed

+31
-467
lines changed

2 files changed

+31
-467
lines changed

‎README.md‎

Lines changed: 19 additions & 236 deletions
Original file line numberDiff line numberDiff line change
@@ -39,11 +39,13 @@ builder.Services.Configure<ProSettings>(x =>
3939
});
4040
```
4141

42-
* Or setup with appsettings.json
42+
Or setup with appsettings.json
43+
4344
```CSharp | pure
4445
builder.Services.AddAntDesign();
4546
builder.Services.Configure<ProSettings>(builder.Configuration.GetSection("ProSettings"));
4647
```
48+
4749
```json
4850
{
4951
"ProSettings": {
@@ -66,253 +68,34 @@ builder.Services.Configure<ProSettings>(builder.Configuration.GetSection("ProSet
6668
```
6769

6870
- Link the static files in `wwwroot/index.html` (WebAssembly) or `Pages/_Host.cshtml` (Server)
71+
6972
```html
7073
<link rel="stylesheet" href="_content/AntDesign.ProLayout/css/ant-design-pro-layout-blazor.css" />
7174
```
7275

73-
## Demo
74-
75-
[site](https://ant-design.github.io/ant-design-pro-layout/)
76-
77-
## API
78-
79-
### ProLayout
80-
81-
> All methods with the suffix `Render` can prevent rendering by passing in `false`.
82-
83-
| Property | Description | Type | Default Value |
84-
| --- | --- | --- | --- |
85-
| title | layout in the upper left corner title | ReactNode | `'Ant Design Pro'` |
86-
| logo | layout top left logo url | ReactNode \| ()=>ReactNode | - |
87-
| pure | Interface that doesn't require extra ui | boolean | - |
88-
| loading | layout loading status | boolean | - |
89-
| menuHeaderRender | render logo and title | ReactNode \| (logo,title)=>ReactNode | - |
90-
| onMenuHeaderClick | menu header click event | `(e: React.MouseEvent<HTMLDivElement>) => void` | - |
91-
| contentStyle | layout content style | CSSProperties | - |
92-
| layout | layout menu mode, sidemenu: right navigation, topmenu: top navigation | 'sidemenu' \| 'topmenu' | `'sidemenu'` |
93-
| contentWidth | content mode of layout, Fluid: fixed width 1200px, Fixed: adaptive | 'Fluid' \| 'Fixed' | `'Fluid'` |
94-
| navTheme | Navigation menu theme | 'light' \| 'dark' | `'dark'` |
95-
| fixedHeader | whether to fix header to top | boolean | `false` |
96-
| fixSiderbar | Whether to fix navigation menu | boolean | `false` |
97-
| breakpoint | [breakpoints](https://ant.design/components/grid/#api) of the responsive layout | `Enum { 'xs', 'sm', 'md', 'lg', 'xl', 'xxl' }` | `lg` |
98-
| menu | About the configuration of the menu, only locale, locale can turn off the globalization of the menu | { locale: boolean,defaultOpenAll: boolean } | `{ locale: true }` |
99-
| iconfontUrl | Use [IconFont](https://ant.design/components/icon-cn/#components-icon-demo-iconfont) icon configuration | string | - |
100-
| locale | The language setting of the layout | 'zh-CN' \| 'zh-TW' \| 'en-US' | navigator.language |
101-
| settings | layout settings | [`Settings`](#Settings) | [`Settings`](#Settings) | - |
102-
| siderWidth | width of sider menu | number | 256 |
103-
| collapsed | control menu's collapse and expansion | boolean | true |
104-
| onPageChange | Triggered when page switching | (location: Location) => void | - |
105-
| onCollapse | folding collapse event of menu | (collapsed: boolean) => void | - |
106-
| headerRender | custom header render method | (props: BasicLayoutProps) => ReactNode | - |
107-
| headerTitleRender | custom header title render method | (props: BasicLayoutProps) => ReactNode | - |
108-
| headerContentRender | custom header content render method | (props: BasicLayoutProps) => ReactNode | - |
109-
| rightContentRender | header right content render method | (props: HeaderViewProps) => ReactNode | - |
110-
| collapsedButtonRender | custom collapsed button method | (collapsed: boolean) => ReactNode | - |
111-
| footerRender | custom footer render method | (props: BasicLayoutProps) => ReactNode | - |
112-
| pageTitleRender | custom page title render method | (props: BasicLayoutProps) => ReactNode | - |
113-
| menuRender | custom menu render method | (props: HeaderViewProps) => ReactNode | - |
114-
| menuDataRender | The render method of menuData, with the definition of menuData | `(menuData: MenuDataItem[]) => MenuDataItem[]` | - |
115-
| postMenuData | View the menu data before displaying it. Modification will not trigger re-rendering. | `(menuData: MenuDataItem[]) => MenuDataItem[]` | - |
116-
| postMenuData |
117-
| menuItemRender | the render method of a custom menu item | [(itemProps: MenuDataItem) => ReactNode](#MenuDataItem) | - |
118-
| subMenuItemRender | the render method of a custom subMenu item | [(itemProps: MenuDataItem) => ReactNode](#MenuDataItem) | - |
119-
| breadcrumbRender | custom breadcrumbs data | (route)=>route | - |
120-
| route | Used to assist in the generation of menu and bread crumbs. Umi will automatically bring | [route](#Route) | - |
121-
| disableMobile | Disable automatic switch to mobile mode | boolean | false |
122-
| links | Shortcuts displayed in the lower right corner of the menu | ReactNode[] | - |
123-
| menuProps | Props passed to ANTD MENU, SEE (https://ant.design/components/menu-cn/) | MenuProps | undefined |
124-
125-
Layout support for most of [Menu](https://ant.design/components/menu-cn/#Menu) by `menuProps` after 4.5.13.
126-
127-
### SettingDrawer
128-
129-
```js | pure
130-
import { SettingDrawer } from '@ant-design/pro-layout';
131-
```
132-
133-
> SettingDrawer provides a graphical interface to set the layout configuration. Not recommended for use in a product environment.
76+
## ❓ Community Support
13477

135-
| Property | Description | Type | Default Value |
136-
| --- | --- | --- | --- |
137-
| settings | layout settings | [`Settings`](#Settings) | [`Settings`](#Settings) | - |
138-
| onSettingChange | The setting changes event | (settings: [Settings](#Settings)) => void | - |
139-
| hideHintAlert | remove hint info | boolean | - |
78+
If you encounter any problems in the process, feel free to ask for help via following channels. We also encourage experienced users to help newcomers.
14079

141-
### PageContainer
80+
- [![Discord Server](https://img.shields.io/discord/753358910341251182?color=%237289DA&label=AntBlazor&logo=discord&logoColor=white&style=flat-square)](https://discord.com/invite/jqu3Xeq)
14281

143-
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](https://ant.design/components/tabs-cn/) and [PageHeader](https://ant.design/components/page-header-cn/).
82+
- [![钉钉群](https://img.shields.io/badge/钉钉-AntBlazor-blue.svg?style=flat-square&logo=data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/Pg0KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGNsYXNzPSJpY29uIiB2aWV3Qm94PSIwIDAgMTAyNCAxMDI0IiBmaWxsPSIjZmZmZmZmIj4NCiAgPHBhdGggZD0iTTU3My43IDI1Mi41QzQyMi41IDE5Ny40IDIwMS4zIDk2LjcgMjAxLjMgOTYuN2MtMTUuNy00LjEtMTcuOSAxMS4xLTE3LjkgMTEuMS01IDYxLjEgMzMuNiAxNjAuNSA1My42IDE4Mi44IDE5LjkgMjIuMyAzMTkuMSAxMTMuNyAzMTkuMSAxMTMuN1MzMjYgMzU3LjkgMjcwLjUgMzQxLjljLTU1LjYtMTYtMzcuOSAxNy44LTM3LjkgMTcuOCAxMS40IDYxLjcgNjQuOSAxMzEuOCAxMDcuMiAxMzguNCA0Mi4yIDYuNiAyMjAuMSA0IDIyMC4xIDRzLTM1LjUgNC4xLTkzLjIgMTEuOWMtNDIuNyA1LjgtOTcgMTIuNS0xMTEuMSAxNy44LTMzLjEgMTIuNSAyNCA2Mi42IDI0IDYyLjYgODQuNyA3Ni44IDEyOS43IDUwLjUgMTI5LjcgNTAuNSAzMy4zLTEwLjcgNjEuNC0xOC41IDg1LjItMjQuMkw1NjUgNzQzLjFoODQuNkw2MDMgOTI4bDIwNS4zLTI3MS45SDcwMC44bDIyLjMtMzguN2MuMy41LjQuOC40LjhTNzk5LjggNDk2LjEgODI5IDQzMy44bC42LTFoLS4xYzUtMTAuOCA4LjYtMTkuNyAxMC0yNS44IDE3LTcxLjMtMTE0LjUtOTkuNC0yNjUuOC0xNTQuNXoiLz4NCjwvc3ZnPg0K)](https://h5.dingtalk.com/circle/healthCheckin.html?corpId=dingce91412e5fdea4020aee85826fecb71d&dd651=7b682&cbdbhh=qwertyuiop&origin=11)
14483

145-
| Property | Description | Type | Default Value |
146-
| --- | --- | --- | --- |
147-
| content | Content area | ReactNode | - |
148-
| extraContent | Extra content area, on the right side of content | ReactNode | - |
149-
| tabList | Tabs title list | `Array<{key: string, tab: ReactNode}>` | - |
150-
| tabActiveKey | The currently highlighted tab item | string | - |
151-
| onTabChange | Switch panel callback | `(key) => void` | - |
152-
| tabBarExtraContent | Extra elements on the tab bar | React.ReactNode | - |
84+
<details>
85+
<summary>Scan QR Code with DingTalk</summary>
86+
<img src="https://cdn.jsdelivr.net/gh/ant-design-blazor/ant-design-blazor/docs/assets/dingtalk.jpg" width="300">
87+
</details>
15388

154-
### PageLoading
15589

156-
a simple loading page
90+
## Code of Conduct
15791

158-
| Property | Description | Type | Default Value |
159-
| -------- | ----------- | --------- | ------------- |
160-
| tip | loading tip | ReactNode | - |
92+
This project has adopted the code of conduct defined by the Contributor Covenant to clarify expected behavior in our community.
93+
For more information see the [.NET Foundation Code of Conduct](https://dotnetfoundation.org/code-of-conduct).
16194

162-
### RouteContext
163-
164-
RouteContext can provide built-in data for Layout. For example, isMobile and collapsed, you can consume this data to customize some behavior.
165-
166-
```tsx | pure
167-
import { RouteContext } from '@ant-design/pro-layout';
168-
169-
const Page = () => (
170-
<RouteContext.Consumer>
171-
{(value) => {
172-
return value.title;
173-
}}
174-
</RouteContext.Consumer>
175-
);
176-
```
177-
178-
### GridContent
179-
180-
GridContent encapsulates [equal width](https://preview.pro.ant.design/dashboard/analysis?layout=topmenu&contentWidth=Fixed) and [streaming](https://preview.pro.ant.design/dashboard/) The logic of analysis?layout=topmenu). You can see the preview in [preview](https://preview.pro.ant.design/dashboard/analysis).
181-
182-
| Property | Description | Type | Default Value |
183-
| ------------ | ------------ | ------------------ | ------------- |
184-
| contentWidth | Content mode | 'Fluid' \| 'Fixed' | - |
185-
186-
### getMenuData
187-
188-
Generate menuData and breadcrumb based on the router information.
189-
190-
```js | pure
191-
import { getMenuData } from '@ant-design/pro-layout';
192-
193-
const { breadcrumb, menuData } = getMenuData(
194-
routes,
195-
menu,
196-
formatMessage,
197-
menuDataRender,
198-
);
199-
```
200-
201-
| Property | Description | Type | Default Value |
202-
| --- | --- | --- | --- |
203-
| routes | Routing configuration information | [route[]](#Route) | - |
204-
| menu | Menu configuration item, default `{locale: true}` | `{ locale: boolean }` | - |
205-
| menuDataRender | The render method of menuData, with the definition of menuData | `(menuData: MenuDataItem[]) => MenuDataItem[]` | - |
206-
| formatMessage | The formatMessage method of react-intl | `(data: { id: any; defaultMessage?: string }) => string;` | - |
207-
208-
### getPageTitle
209-
210-
```js | pure
211-
import { getPageTitle } from '@ant-design/pro-layout';
212-
213-
const title = getPageTitle({
214-
pathname,
215-
breadcrumb,
216-
menu,
217-
title,
218-
formatMessage,
219-
});
220-
```
221-
222-
getPageTitle encapsulates the logic based on the title generated on menuData.
223-
224-
| Property | Description | Type | Default Value |
225-
| --- | --- | --- | --- |
226-
| pathname | Current pathname | location.pathname | - |
227-
| breadcrumb | Collection of MenuDataItem | `{ [path: string]: MenuDataItem }` | - |
228-
| menu | Menu configuration item, default `{locale: true}` | `{ locale: boolean }` | - |
229-
| title | Type of title | string | 'Ant Design Pro' |
230-
| formatMessage | The formatMessage method of react-intl | `(data: { id: any; defaultMessage?: string }) => string;` | - |
231-
232-
## Data Structure
233-
234-
> For ease of viewing and use, Typescript is used here to write.
235-
236-
### Settings
237-
238-
```ts | pure
239-
// can be done via import { Settings } from '@ant-design/pro-layout/defaultSettings' to get this type
240-
241-
export interface Settings {
242-
/**
243-
* theme for nav menu
244-
*/
245-
navTheme: 'light' | 'dark';
246-
/**
247-
* primary color of ant design
248-
*/
249-
primaryColor: string;
250-
/**
251-
* nav menu position: `sidemenu` or `topmenu`
252-
*/
253-
layout: 'sidemenu' | 'topmenu';
254-
/**
255-
* layout of content: `Fluid` or `Fixed`, only works when layout is topmenu
256-
*/
257-
contentWidth: 'Fluid' | 'Fixed';
258-
/**
259-
* sticky header
260-
*/
261-
fixedHeader: boolean;
262-
/**
263-
* sticky siderbar
264-
*/
265-
fixSiderbar: boolean;
266-
menu: { locale: boolean };
267-
title: string;
268-
pwa: boolean;
269-
// Your custom iconfont Symbol script Url
270-
// eg：//at.alicdn.com/t/font_1039637_btcrd5co4w.js
271-
// Usage: https://github.com/ant-design/ant-design-pro/pull/3517
272-
iconfontUrl: string;
273-
colorWeak: boolean;
274-
}
275-
```
276-
277-
### MenuDataItem
278-
279-
```ts | pure
280-
// can be imported { MenuDataItem } from '@ant-design/pro-layout/typings' to get this type
281-
282-
export interface MenuDataItem {
283-
authority?: string[] | string;
284-
children?: MenuDataItem[];
285-
hideChildrenInMenu?: boolean;
286-
hideInMenu?: boolean;
287-
icon?: string;
288-
locale?: string;
289-
name?: string;
290-
path: string;
291-
[key: string]: any;
292-
}
293-
```
294-
295-
### Route
296-
297-
```ts | pure
298-
// can be imported { RouterTypes } from '@ant-design/pro-layout/typings' to get this type
299-
export interface Route {
300-
path: string;
301-
routes: Array<{
302-
exact?: boolean;
303-
icon: string;
304-
name: string;
305-
path: string;
306-
// optional secondary menu
307-
children?: Route['routes'];
308-
}>;
309-
}
310-
```
95+
## ☀️ License
31196

312-
## Contributing
97+
[![AntDesign](https://img.shields.io/badge/License-MIT-blue?style=flat-square)](https://github.com/ant-design-blazor/ant-design-blazor/blob/master/LICENSE)
31398

314-
Any type of contribution is welcome, here are some examples of how you may contribute to this project:
99+
## .NET Foundation
315100

316-
- Use Ant Design Pro in your daily work.
317-
- Submit [issues](http://github.com/ant-design/ant-design-pro/issues) to report bugs or ask questions.
318-
- Propose [pull requests](http://github.com/ant-design/ant-design-pro/pulls) to improve our code.
101+
This project is supported by the [.NET Foundation](https://dotnetfoundation.org).

0 commit comments

Comments
 (0)