diff --git a/components/anchor/AnchorLink.tsx b/components/anchor/AnchorLink.tsx index a1c553bc6a12..dab6ec2015af 100644 --- a/components/anchor/AnchorLink.tsx +++ b/components/anchor/AnchorLink.tsx @@ -8,6 +8,7 @@ import { ConfigConsumer, ConfigConsumerProps } from '../config-provider'; export interface AnchorLinkProps { prefixCls?: string; href: string; + target: string; title: React.ReactNode; children?: React.ReactNode; className?: string; @@ -52,7 +53,7 @@ class AnchorLink extends React.Component { }; renderAnchorLink = ({ getPrefixCls }: ConfigConsumerProps) => { - const { prefixCls: customizePrefixCls, href, title, children, className } = this.props; + const { prefixCls: customizePrefixCls, href, title, children, className, target } = this.props; const prefixCls = getPrefixCls('anchor', customizePrefixCls); const active = this.context.antAnchor.activeLink === href; const wrapperClassName = classNames(className, `${prefixCls}-link`, { @@ -67,6 +68,7 @@ class AnchorLink extends React.Component { className={titleClassName} href={href} title={typeof title === 'string' ? title : ''} + target={target} onClick={this.handleClick} > {title} diff --git a/components/anchor/__tests__/__snapshots__/demo.test.js.snap b/components/anchor/__tests__/__snapshots__/demo.test.js.snap index 4f5e30d5aedb..d1cce5bd52e1 100644 --- a/components/anchor/__tests__/__snapshots__/demo.test.js.snap +++ b/components/anchor/__tests__/__snapshots__/demo.test.js.snap @@ -41,6 +41,18 @@ exports[`renders ./components/anchor/demo/basic.md correctly 1`] = ` Static demo +
+ + Basic demo with Target + +
diff --git a/components/anchor/demo/basic.md b/components/anchor/demo/basic.md index 33cb4b3cd942..ce559a4ae17b 100644 --- a/components/anchor/demo/basic.md +++ b/components/anchor/demo/basic.md @@ -22,6 +22,7 @@ ReactDOM.render( + diff --git a/components/anchor/index.en-US.md b/components/anchor/index.en-US.md index 10fd0b4a67cf..92ff201f7e37 100644 --- a/components/anchor/index.en-US.md +++ b/components/anchor/index.en-US.md @@ -29,7 +29,8 @@ For displaying anchor hyperlinks on page and jumping between them. ### Link Props -| Property | Description | Type | Default | Version | -| -------- | -------------------- | ----------------- | ------- | ------- | -| href | target of hyperlink | string | | | -| title | content of hyperlink | string\|ReactNode | | | +| Property | Description | Type | Default | Version | +| -------- | ----------------------------------------- | ----------------- | ------- | ------- | +| href | target of hyperlink | string | | | +| title | content of hyperlink | string\|ReactNode | | | +| target | Specifies where to display the linked URL | string | | | diff --git a/components/anchor/index.zh-CN.md b/components/anchor/index.zh-CN.md index 1d49fd1c70c6..2b1b385cc993 100644 --- a/components/anchor/index.zh-CN.md +++ b/components/anchor/index.zh-CN.md @@ -30,7 +30,8 @@ title: Anchor ### Link Props -| 成员 | 说明 | 类型 | 默认值 | 版本 | -| ----- | -------- | ----------------- | ------ | ---- | -| href | 锚点链接 | string | | | -| title | 文字内容 | string\|ReactNode | | | +| 成员 | 说明 | 类型 | 默认值 | 版本 | +| ------ | -------------------------------- | ----------------- | ------ | ---- | +| href | 锚点链接 | string | | | +| title | 文字内容 | string\|ReactNode | | | +| target | 该属性指定在何处显示链接的资源。 | string | | | diff --git a/components/breadcrumb/Breadcrumb.tsx b/components/breadcrumb/Breadcrumb.tsx index dc68a374759b..7e16436b9035 100755 --- a/components/breadcrumb/Breadcrumb.tsx +++ b/components/breadcrumb/Breadcrumb.tsx @@ -1,6 +1,7 @@ import * as React from 'react'; import * as PropTypes from 'prop-types'; import classNames from 'classnames'; +import toArray from 'rc-util/lib/Children/toArray'; import BreadcrumbItem from './BreadcrumbItem'; import BreadcrumbSeparator from './BreadcrumbSeparator'; import Menu from '../menu'; @@ -47,6 +48,16 @@ function defaultItemRender(route: Route, params: any, routes: Route[], paths: st return isLastItem ? {name} : {name}; } +function filterFragment(children: any) { + return toArray(children).map((element: any) => { + if (React.isValidElement(element) && element.type === React.Fragment) { + const props: any = element.props; + return props.children; + } + return element; + }); +} + export default class Breadcrumb extends React.Component { static Item: typeof BreadcrumbItem; @@ -139,7 +150,7 @@ export default class Breadcrumb extends React.Component { // generated by route crumbs = this.genForRoutes(this.props); } else if (children) { - crumbs = React.Children.map(children, (element: any, index) => { + crumbs = React.Children.map(filterFragment(children), (element: any, index) => { if (!element) { return element; } diff --git a/components/breadcrumb/__tests__/Breadcrumb.test.js b/components/breadcrumb/__tests__/Breadcrumb.test.js index 7275530ab215..e70a53b99b1d 100644 --- a/components/breadcrumb/__tests__/Breadcrumb.test.js +++ b/components/breadcrumb/__tests__/Breadcrumb.test.js @@ -55,6 +55,21 @@ describe('Breadcrumb', () => { expect(wrapper).toMatchSnapshot(); }); + // https://github.com/ant-design/ant-design/issues/18260 + it('filter React.Fragment', () => { + const wrapper = render( + + Location + : + <> + Application Center + + + , + ); + expect(wrapper).toMatchSnapshot(); + }); + it('should render a menu', () => { const routes = [ { diff --git a/components/breadcrumb/__tests__/__snapshots__/Breadcrumb.test.js.snap b/components/breadcrumb/__tests__/__snapshots__/Breadcrumb.test.js.snap index c5cb3931ccbd..ae829f58a4dd 100644 --- a/components/breadcrumb/__tests__/__snapshots__/Breadcrumb.test.js.snap +++ b/components/breadcrumb/__tests__/__snapshots__/Breadcrumb.test.js.snap @@ -1,5 +1,37 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP +exports[`Breadcrumb filter React.Fragment 1`] = ` +
+ + + Location + + + + : + + + + Application Center + + + + / + +
+`; + exports[`Breadcrumb should allow Breadcrumb.Item is null or undefined 1`] = `
+
+ + More + +
diff --git a/components/card/demo/tabs.md b/components/card/demo/tabs.md index d35f025e2ca0..1fb4a5dd3f12 100644 --- a/components/card/demo/tabs.md +++ b/components/card/demo/tabs.md @@ -85,6 +85,7 @@ class TabsCard extends React.Component { style={{ width: '100%' }} tabList={tabListNoTitle} activeTabKey={this.state.noTitleKey} + tabBarExtraContent={More} onTabChange={key => { this.onTabChange(key, 'noTitleKey'); }} diff --git a/components/card/index.en-US.md b/components/card/index.en-US.md index 85f69a50d17a..732c2f3c9525 100644 --- a/components/card/index.en-US.md +++ b/components/card/index.en-US.md @@ -32,6 +32,7 @@ A card can be used to display content related to a single subject. The content c | hoverable | Lift up when hovering card | boolean | false | | | loading | Shows a loading indicator while the contents of the card are being fetched | boolean | false | | | tabList | List of TabPane's head. | Array<{key: string, tab: ReactNode}> | - | | +| tabBarExtraContent | Extra content in tab bar | React.ReactNode | - | | | size | Size of card | `default` \| `small` | `default` | 3.12.0 | | title | Card title | string\|ReactNode | - | | | type | Card style type, can be set to `inner` or not set | string | - | | diff --git a/components/card/index.tsx b/components/card/index.tsx index 9e03ef75c728..38718f839d50 100644 --- a/components/card/index.tsx +++ b/components/card/index.tsx @@ -51,6 +51,7 @@ export interface CardProps extends Omit, 't cover?: React.ReactNode; actions?: React.ReactNode[]; tabList?: CardTabListType[]; + tabBarExtraContent?: React.ReactNode | null; onTabChange?: (key: string) => void; activeTabKey?: string; defaultActiveTabKey?: string; @@ -119,6 +120,7 @@ export default class Card extends React.Component { children, activeTabKey, defaultActiveTabKey, + tabBarExtraContent, ...others } = this.props; @@ -186,6 +188,7 @@ export default class Card extends React.Component { [hasActiveTabKey ? 'activeKey' : 'defaultActiveKey']: hasActiveTabKey ? activeTabKey : defaultActiveTabKey, + tabBarExtraContent, }; let head; diff --git a/components/card/index.zh-CN.md b/components/card/index.zh-CN.md index 340472b1978f..73e8b4c1ac77 100644 --- a/components/card/index.zh-CN.md +++ b/components/card/index.zh-CN.md @@ -33,6 +33,7 @@ cols: 1 | hoverable | 鼠标移过时可浮起 | boolean | false | | | loading | 当卡片内容还在加载中时，可以用 loading 展示一个占位 | boolean | false | | | tabList | 页签标题列表 | Array<{key: string, tab: ReactNode}> | - | | +| tabBarExtraContent | tab bar 上额外的元素 | React.ReactNode | 无 | | | size | card 的尺寸 | `default` \| `small` | `default` | 3.12.0 | | title | 卡片标题 | string\|ReactNode | - | | | type | 卡片类型，可设置为 `inner` 或 不设置 | string | - | | @@ -40,17 +41,17 @@ cols: 1 ### Card.Grid -| 参数 | 说明 | 类型 | 默认值 | 版本 | -| --------- | ---------------------- | ------ | ------- | ---- | -| className | 网格容器类名 | string | - | | -| style | 定义网格容器类名的样式 | object | - | | +| 参数 | 说明 | 类型 | 默认值 | 版本 | +| --------- | ---------------------- | ------ | ------ | ---- | +| className | 网格容器类名 | string | - | | +| style | 定义网格容器类名的样式 | object | - | | ### Card.Meta -| 参数 | 说明 | 类型 | 默认值 | 版本 | -| ----------- | ------------------ | --------- | ------- | ---- | -| avatar | 头像/图标 | ReactNode | - | | -| className | 容器类名 | string | - | | -| description | 描述内容 | ReactNode | - | | -| style | 定义容器类名的样式 | object | - | | -| title | 标题内容 | ReactNode | - | | +| 参数 | 说明 | 类型 | 默认值 | 版本 | +| ----------- | ------------------ | --------- | ------ | ---- | +| avatar | 头像/图标 | ReactNode | - | | +| className | 容器类名 | string | - | | +| description | 描述内容 | ReactNode | - | | +| style | 定义容器类名的样式 | object | - | | +| title | 标题内容 | ReactNode | - | | diff --git a/components/input-number/index.en-US.md b/components/input-number/index.en-US.md index 7b956e683b9f..290768899631 100644 --- a/components/input-number/index.en-US.md +++ b/components/input-number/index.en-US.md @@ -27,6 +27,7 @@ When a numeric value needs to be provided. | step | The number to which the current value is increased or decreased. It can be an integer or decimal. | number\|string | 1 | | | value | current value | number | | | | onChange | The callback triggered when the value is changed. | function(value: number \| string) | | | +| onPressEnter | The callback function that is triggered when Enter key is pressed. | function(e) | | | ## Methods diff --git a/components/input-number/index.tsx b/components/input-number/index.tsx index 358aaf569f7a..2cfc45099912 100644 --- a/components/input-number/index.tsx +++ b/components/input-number/index.tsx @@ -29,6 +29,7 @@ export interface InputNumberProps name?: string; id?: string; precision?: number; + onPressEnter?: React.KeyboardEventHandler; } export default class InputNumber extends React.Component { diff --git a/components/input-number/index.zh-CN.md b/components/input-number/index.zh-CN.md index 238971aca957..babb3d3f29d0 100644 --- a/components/input-number/index.zh-CN.md +++ b/components/input-number/index.zh-CN.md @@ -30,6 +30,7 @@ title: InputNumber | step | 每次改变步数，可以为小数 | number\|string | 1 | | | value | 当前值 | number | | | | onChange | 变化回调 | Function(value: number \| string) | | | +| onPressEnter | 按下回车的回调 | function(e) | | | ## 方法 diff --git a/components/page-header/__tests__/__snapshots__/demo.test.js.snap b/components/page-header/__tests__/__snapshots__/demo.test.js.snap index d61840b8916f..680e2981ba72 100644 --- a/components/page-header/__tests__/__snapshots__/demo.test.js.snap +++ b/components/page-header/__tests__/__snapshots__/demo.test.js.snap @@ -1,410 +1,361 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`renders ./components/page-header/demo/actions.md correctly 1`] = ` -
+
- -
- - - -
- -
- - Title - - - This is a subtitle - - + + + +
+
- Warning + Title - - - - - - -
-
+ + + + +
-
-
-
- Created -
-
- Lili Qu -
-
-
-
-
-
- Association -
-
- - 421421 - -
-
-
-
-
-
- Creation Time -
-
+ + - 2017-01-10 -
-
-
-
-
-
- Effective Time -
-
- 2017-10-10 -
-
-
-
-
-
- Remarks -
-
- Gonghu Road, Xihu District, Hangzhou, Zhejiang, China -
-
-
-
-
-
-
-
-
-
- Status -
-
- - Pending - -
-
-
-
-
-
- Price -
-
+ Created + + + Lili Qu + + + + + Association + + + + 421421 + + + + + + Creation Time + + + 2017-01-10 + + + + - - $ - - + Effective Time + + + 2017-10-10 + + + - 568 + Remarks - .08 + Gonghu Road, Xihu District, Hangzhou, Zhejiang, China - -
-
-
+ + + +
+
- - + + + +
+
+ + Title + + + This is a subtitle + + + + Running + + + + + + +
+
+
+
+
+ Status +
+
- - - + Pending - +
+
+
-
+
+ -
+ + -
- - -
-
-
-
-
-
-
-
-
+ 568 + + + .08 + + +
+
+ class="ant-statistic-title" + > + Balance +
+ class="ant-statistic-content" + > + + $ + + + + 3,345 + + + .08 + + +
- -
@@ -415,43 +366,39 @@ exports[`renders ./components/page-header/demo/basic.md correctly 1`] = ` class="ant-page-header" >
- - - - - + + +
- -
@@ -468,7 +415,7 @@ exports[`renders ./components/page-header/demo/basic.md correctly 1`] = ` exports[`renders ./components/page-header/demo/breadcrumb.md correctly 1`] = `
Title + + This is a subtitle +
`; exports[`renders ./components/page-header/demo/content.md correctly 1`] = `
+ + + Title + + This is a subtitle + + + + Running + + + + + + + +
Ant Design's design team preferred to design with the HSB color model, which makes it easier for designers to have a clear psychological expectation of color when adjusting colors, as well as facilitate communication in teams.
-

- + start Quick Start - + info - Product Info + Product Info - + doc Product Doc -

+
content
`; + +exports[`renders ./components/page-header/demo/responsive.md correctly 1`] = ` +
+
+
+
+
+ + + +
+
+ + Title + + + This is a subtitle + + + + + + +
+
+
+
+
+
+ + + + + + + + + + + + + + +
+ + Created + + + Lili Qu + + + + Association + + + + 421421 + + +
+ + Creation Time + + + 2017-01-10 + + + + Effective Time + + + 2017-10-10 + +
+ + Remarks + + + Gonghu Road, Xihu District, Hangzhou, Zhejiang, China + +
+
+
+
+
+
+
+
+ Status +
+
+ + Pending + +
+
+
+
+ Price +
+
+ + $ + + + + 568 + + + .08 + + +
+
+
+
+
+
+
+
+
+
+ + + + + + + + + + + + + + +
+
+
+
+ + +
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+`; diff --git a/components/page-header/__tests__/index.test.js b/components/page-header/__tests__/index.test.js index daf030a1ba67..8484c7ef2111 100644 --- a/components/page-header/__tests__/index.test.js +++ b/components/page-header/__tests__/index.test.js @@ -66,4 +66,26 @@ describe('PageHeader', () => { const wrapper = render(); expect(wrapper).toMatchSnapshot(); }); + + it('breadcrumbs and back icon can only have one', () => { + const routes = [ + { + path: 'index', + breadcrumbName: 'First-level Menu', + }, + { + path: 'first', + breadcrumbName: 'Second-level Menu', + }, + { + path: 'second', + breadcrumbName: 'Third-level Menu', + }, + ]; + const wrapper = mount( true} breadcrumb={{ routes }} />); + expect(wrapper.find('.ant-breadcrumb')).toHaveLength(0); + + wrapper.setProps({ onBack: undefined }); + expect(wrapper.find('.ant-breadcrumb')).toHaveLength(1); + }); }); diff --git a/components/page-header/demo/actions.md b/components/page-header/demo/actions.md index b0cf6641ce2f..a1d6087fd371 100644 --- a/components/page-header/demo/actions.md +++ b/components/page-header/demo/actions.md @@ -1,8 +1,8 @@ --- -order: 5 +order: 4 title: - zh-CN: 复杂的例子 - en-US: Complex example + zh-CN: 多种形态的 PageHeader + en-US: Various forms of PageHeader --- ## zh-CN @@ -14,107 +14,68 @@ title: Use the operating area and customize the sub-nodes, suitable for use in the need to display some complex information to help users quickly understand the information and operations of this page. ```jsx -import { PageHeader, Tag, Tabs, Button, Statistic, Row, Col } from 'antd'; - -const { TabPane } = Tabs; - -const Description = ({ term, children, span = 12 }) => ( - -
-
{term}
-
{children}
-
- -); - -const content = ( - - Lili Qu - - 421421 - - 2017-01-10 - 2017-10-10 - - Gonghu Road, Xihu District, Hangzhou, Zhejiang, China - - -); - -const extraContent = ( - - - - - - - - -); +import { PageHeader, Tag, Button, Statistic, Descriptions, Row } from 'antd'; ReactDOM.render( - window.history.back()} - title="Title" - subTitle="This is a subtitle" - tags={Warning} - extra={[ - , - , - , - ]} - footer={ - - - - - } - > -
-
{content}
-
{extraContent}
-
- , +
+ window.history.back()} + title="Title" + subTitle="This is a subtitle" + extra={[ + , + , + , + ]} + > + + Lili Qu + + 421421 + + 2017-01-10 + 2017-10-10 + + Gonghu Road, Xihu District, Hangzhou, Zhejiang, China + + + +
+ window.history.back()} + title="Title" + tags={Running} + subTitle="This is a subtitle" + extra={[ + , + , + , + ]} + > + + + + + + +
, mountNode, ); ``` diff --git a/components/page-header/demo/breadcrumb.md b/components/page-header/demo/breadcrumb.md index 75ee348eebc8..ffa32e2a8e3d 100644 --- a/components/page-header/demo/breadcrumb.md +++ b/components/page-header/demo/breadcrumb.md @@ -31,5 +31,8 @@ const routes = [ }, ]; -ReactDOM.render(, mountNode); +ReactDOM.render( + , + mountNode, +); ``` diff --git a/components/page-header/demo/content.md b/components/page-header/demo/content.md index d6660396b024..f00377604fa2 100644 --- a/components/page-header/demo/content.md +++ b/components/page-header/demo/content.md @@ -1,23 +1,64 @@ --- order: 3 title: - zh-CN: 带内容的例子 - en-US: Example with content + zh-CN: 组合示例 + en-US: Complete example --- ## zh-CN -带内容的例子,可以优先展示页面的主要信息。 +使用了 pageHeader 提供的所有能力。 ## en-US -An example with content that gives priority to the main information of the page. +Show all props.Used all the capabilities provided by pageHeader. ```jsx -import { PageHeader, Typography } from 'antd'; +import { PageHeader, Menu, Dropdown, Icon, Button, Tag, Typography, Row } from 'antd'; const { Paragraph } = Typography; +const menu = ( + + + + 1st menu item + + + + + 2nd menu item + + + + + 3rd menu item + + + +); + +const DropdownMenu = () => { + return ( + + + + ); +}; + const routes = [ { path: 'index', @@ -33,6 +74,25 @@ const routes = [ }, ]; +const IconLink = ({ src, text }) => ( + + start + {text} + +); + const content = (
@@ -44,64 +104,74 @@ const content = ( easier for designers to have a clear psychological expectation of color when adjusting colors, as well as facilitate communication in teams. -

- - start - Quick Start - - - info - Product Info - - - doc - Product Doc - -

+ + + + +
); -const extraContent = ( - content -); +const Content = ({ children, extraContent }) => { + return ( + +
+ {children} +
+
+ {extraContent} +
+ + ); +}; ReactDOM.render( - -
-
{content}
-
{extraContent}
-
+ Running} + extra={[ + , + , + , + , + ]} + avatar={{ src: 'https://avatars1.githubusercontent.com/u/8186664?s=460&v=4' }} + breadcrumb={{ routes }} + > + + } + > + {content} + , mountNode, ); ``` + diff --git a/components/page-header/index.en-US.md b/components/page-header/index.en-US.md index 1f8e51c7eb32..20bccfc6c62c 100644 --- a/components/page-header/index.en-US.md +++ b/components/page-header/index.en-US.md @@ -18,9 +18,12 @@ It can also be used as inter-page navigation when it is needed to make the user | --- | --- | --- | --- | --- | | title | custom title text | ReactNode | - | 3.14.0 | | subTitle | custom subTitle text | ReactNode | - | 3.14.0 | +| avatar | Avatar next to the title bar | [avatar props](/components/avatar/) | - | 3.22.0 | | backIcon | custom back icon, if false the back icon will not be displayed | ReactNode | `` | 3.14.0 | | tags | Tag list next to title | [Tag](https://ant.design/components/tag-cn/)[] \| [Tag](https://ant.design/components/tag-cn/) | - | 3.14.0 | | extra | Operating area, at the end of the line of the title line | ReactNode | - | 3.14.0 | | breadcrumb | breadcrumb config | [breadcrumb](https://ant.design/components/breadcrumb-cn/) | - | 3.14.0 | | footer | PageHeader's footer, generally used to render TabBar | ReactNode | - | 3.14.0 | | onBack | back icon click event | `()=>void` | `()=>history.back()` | 3.14.0 | + +> breadcrumbs will automatically disappear when configuring back icon. diff --git a/components/page-header/index.tsx b/components/page-header/index.tsx index a560b02fa499..346043f0d469 100644 --- a/components/page-header/index.tsx +++ b/components/page-header/index.tsx @@ -3,11 +3,12 @@ import classnames from 'classnames'; import { ConfigConsumer, ConfigConsumerProps } from '../config-provider'; import Icon from '../icon'; -import Divider from '../divider'; import Tag from '../tag'; import Breadcrumb, { BreadcrumbProps } from '../breadcrumb'; +import Avatar, { AvatarProps } from '../avatar'; import TransButton from '../_util/transButton'; import LocaleReceiver from '../locale-provider/LocaleReceiver'; +import warning from '../_util/warning'; export interface PageHeaderProps { backIcon?: React.ReactNode; @@ -19,6 +20,7 @@ export interface PageHeaderProps { tags?: React.ReactElement | React.ReactElement[]; footer?: React.ReactNode; extra?: React.ReactNode; + avatar?: AvatarProps; onBack?: (e: React.MouseEvent) => void; className?: string; } @@ -46,7 +48,6 @@ const renderBack = ( > {backIcon} -
)} @@ -57,20 +58,32 @@ const renderBreadcrumb = (breadcrumb: BreadcrumbProps) => { return ; }; -const renderHeader = (prefixCls: string, props: PageHeaderProps) => { - const { breadcrumb, backIcon, onBack } = props; +const renderHeader = ( + breadcrumb: PageHeaderProps['breadcrumb'], + { backIcon, onBack }: PageHeaderProps, +) => { + // by design,Bread crumbs and back icon can only have one + if (backIcon && onBack) { + if (breadcrumb && breadcrumb.routes) { + warning(false, 'page-header', 'breadcrumbs and back icon can only have one'); + } + return null; + } if (breadcrumb && breadcrumb.routes) { return renderBreadcrumb(breadcrumb); } - return renderBack(prefixCls, backIcon, onBack); + return null; }; const renderTitle = (prefixCls: string, props: PageHeaderProps) => { - const { title, subTitle, tags, extra } = props; + const { title, avatar, subTitle, tags, extra, backIcon, onBack } = props; const headingPrefixCls = `${prefixCls}-heading`; if (title || subTitle || tags || extra) { + const backIconDom = renderBack(prefixCls, backIcon, onBack); return (
+ {backIconDom} + {avatar && } {title && {title}} {subTitle && {subTitle}} {tags && {tags}} @@ -88,6 +101,10 @@ const renderFooter = (prefixCls: string, footer: React.ReactNode) => { return null; }; +const renderChildren = (prefixCls: string, children: React.ReactNode) => { + return
{children}
; +}; + const PageHeader: React.SFC = props => ( {({ getPrefixCls }: ConfigConsumerProps) => { @@ -96,23 +113,22 @@ const PageHeader: React.SFC = props => ( style, footer, children, + breadcrumb, className: customizeClassName, } = props; const prefixCls = getPrefixCls('page-header', customizePrefixCls); - const className = classnames( - prefixCls, - { - [`${prefixCls}-has-footer`]: footer, - }, - customizeClassName, - ); + const breadcrumbDom = renderHeader(breadcrumb, props); + const className = classnames(prefixCls, customizeClassName, { + 'has-breadcrumb': breadcrumbDom, + 'has-footer': footer, + }); return (
- {renderHeader(prefixCls, props)} + {breadcrumbDom} {renderTitle(prefixCls, props)} - {children &&
{children}
} + {children && renderChildren(prefixCls, children)} {renderFooter(prefixCls, footer)}
); diff --git a/components/page-header/index.zh-CN.md b/components/page-header/index.zh-CN.md index 2bdd95ad82a8..6ccb625d6c71 100644 --- a/components/page-header/index.zh-CN.md +++ b/components/page-header/index.zh-CN.md @@ -6,7 +6,7 @@ cols: 1 subtitle: 页头 --- -页头可用于声明页面主题、展示用户所关注的页面重要信息，以及承载与当前页相关的操作项（包含页面级操作，页面间导航等） +页头位于页容器中，页容器顶部，起到了内容概览和引导页级操作的作用。包括由面包屑、标题、页面内容简介、页面级操作等、页面级导航组成。 ## 何时使用 @@ -18,9 +18,12 @@ subtitle: 页头 | --- | --- | --- | --- | --- | | title | 自定义标题文字 | ReactNode | - | 3.14.0 | | subTitle | 自定义的二级标题文字 | ReactNode | - | 3.14.0 | +| avatar | 标题栏旁的头像 | [avatar props](/components/avatar-cn/) | - | 3.22.0 | | backIcon | 自定义 back icon ，如果为 false 不渲染 back icon | ReactNode | `` | 3.14.0 | | tags | title 旁的 tag 列表 | [Tag](https://ant.design/components/tag-cn/)[] \| [Tag](https://ant.design/components/tag-cn/) | - | 3.14.0 | | extra | 操作区，位于 title 行的行尾 | ReactNode | - | 3.14.0 | | breadcrumb | 面包屑的配置 | [breadcrumb](https://ant.design/components/breadcrumb-cn/) | - | 3.14.0 | | footer | PageHeader 的页脚，一般用于渲染 TabBar | ReactNode | - | 3.14.0 | | onBack | 返回按钮的点击事件 | `()=>void` | `()=>history.back()` | 3.14.0 | + +> 配置返回按钮时，breadcrumb 会自动隐藏。 diff --git a/components/page-header/style/index.less b/components/page-header/style/index.less index 0bcd081fa7d7..ab5c1dd5274d 100644 --- a/components/page-header/style/index.less +++ b/components/page-header/style/index.less @@ -7,21 +7,25 @@ .reset-component; position: relative; - padding: @page-header-padding-vertical @page-header-padding-horizontal; - background: @component-background; + padding: @page-header-padding; - &.@{pageheader-prefix-cls}-has-footer { - padding-bottom: 0; + &.has-breadcrumb { + padding-top: @page-header-padding-breadcrumb; + } + + &.has-footer { + padding-bottom: @page-header-padding-vertical; } &-back { - display: inline-block; - padding: 4px 0; - font-size: 16px; - line-height: 100%; + float: left; + margin: 6px 0; + margin-right: 16px; + font-size: 20px; + line-height: 1; &-button { .operation-unit(); - color: @text-color; + color: #000; cursor: pointer; } } @@ -29,40 +33,48 @@ .@{ant-prefix}-divider-vertical { height: 14px; margin: 0 12px; + vertical-align: middle; } .@{ant-prefix}-breadcrumb + &-heading { - margin-top: 12px; + margin-top: 8px; } &-heading { - display: inline-block; + width: 100%; + overflow: hidden; &-title { - display: inline-block; + display: block; + float: left; + margin-bottom: 0; padding-right: 12px; color: @heading-color; - font-weight: bold; - font-size: 16px; - line-height: 1.4; + font-weight: 600; + font-size: @heading-3-size; + line-height: 32px; + } + + .@{ant-prefix}-avatar { + float: left; + margin-right: 12px; } &-sub-title { - display: inline-block; - padding-right: 12px; + float: left; + margin: 5px 0; + margin-right: 12px; color: @text-color-secondary; font-size: 14px; - line-height: 1.8; + line-height: 22px; } &-tags { - display: inline-block; - vertical-align: top; + float: left; + margin: 4px 0; } &-extra { - position: absolute; - top: 16px; - right: @page-header-padding-horizontal; + float: right; > * { margin-left: 8px; } @@ -73,18 +85,30 @@ } &-content { - padding-top: 12px; + padding-top: 16px; + overflow: hidden; } &-footer { - margin: 0 -8px; - padding-top: 24px; + margin-top: 16px; .@{ant-prefix}-tabs-bar { margin-bottom: 1px; border-bottom: 0; .@{ant-prefix}-tabs-nav .@{ant-prefix}-tabs-tab { - padding: 12px 8px; - padding-top: 0; + padding: 8px; + font-size: 16px; + } + } + } + + @media (max-width: @screen-sm) { + &-heading { + &-extra { + display: block; + float: unset; + width: 100%; + padding-top: 12px; + overflow: hidden; } } } diff --git a/components/page-header/style/index.tsx b/components/page-header/style/index.tsx index abbb262478df..8ca5d47ad6ac 100644 --- a/components/page-header/style/index.tsx +++ b/components/page-header/style/index.tsx @@ -1,5 +1,5 @@ import './index.less'; // style dependencies -import '../../divider/style'; import '../../breadcrumb/style'; +import '../../avatar/style'; diff --git a/components/style/themes/default.less b/components/style/themes/default.less index 6d534c8bd538..692d065793fc 100644 --- a/components/style/themes/default.less +++ b/components/style/themes/default.less @@ -558,8 +558,9 @@ // PageHeader // --- -@page-header-padding-horizontal: 24px; +@page-header-padding: 24px; @page-header-padding-vertical: 16px; +@page-header-padding-breadcrumb: 12px; // Breadcrumb // --- @@ -669,3 +670,7 @@ @timeline-dot-border-width: 2px; @timeline-dot-color: @primary-color; @timeline-dot-bg: @component-background; + +// Typography +// --- +@typography-title-font-weight: 600; diff --git a/components/typography/style/index.less b/components/typography/style/index.less index 47c691b9b912..89c01139b97f 100644 --- a/components/typography/style/index.less +++ b/components/typography/style/index.less @@ -12,7 +12,7 @@ .typography-title(@fontSize; @lineHeight) { margin-bottom: 0.5em; color: @heading-color; - font-weight: 600; + font-weight: @typography-title-font-weight; font-size: @fontSize; line-height: @lineHeight; } diff --git a/package.json b/package.json index 701910655f65..e04bf3713d60 100644 --- a/package.json +++ b/package.json @@ -68,7 +68,7 @@ "rc-dropdown": "~2.4.1", "rc-editor-mention": "^1.1.13", "rc-form": "^2.4.5", - "rc-input-number": "~4.4.5", + "rc-input-number": "~4.5.0", "rc-mentions": "~0.4.0", "rc-menu": "~7.4.23", "rc-notification": "~3.3.1",