github
/
ant-design-vue
mirror of https://github.com/vueComponent/ant-design-vue
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

refactor: pageHeader

pull/4134/head
tangjinzhou 2021-05-26 23:14:00 +08:00
parent ad2b447866
commit d2a1c422a7
5 changed files with 140 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
components/_util/hooks/useConfigInject.ts
View File

@ -16,6 +16,7 @@ export default (
size: ComputedRef<SizeType>;
getTargetContainer: ComputedRef<() => HTMLElement>;
space: ComputedRef<{ size: SizeType | number }>;
pageHeader: ComputedRef<{ ghost: boolean }>;
} => {
const configProvider = inject<UnwrapRef<ConfigProviderProps>>(
'configProvider',
@ -24,7 +25,8 @@ export default (
const prefixCls = computed(() => configProvider.getPrefixCls(name, props.prefixCls));
const direction = computed(() => configProvider.direction);
const space = computed(() => configProvider.space);
const pageHeader = computed(() => configProvider.pageHeader);
const size = computed(() => props.size || configProvider.componentSize);
const getTargetContainer = computed(() => props.getTargetContainer);
return { configProvider, prefixCls, direction, size, getTargetContainer, space };
return { configProvider, prefixCls, direction, size, getTargetContainer, space, pageHeader };
};

2
components/page-header/index.tsx
View File

@ -52,7 +52,7 @@ const renderBack = (
);
};
const renderBreadcrumb = breadcrumb => {
const renderBreadcrumb = (breadcrumb: any) => {
return <Breadcrumb {...breadcrumb} />;
};

97
components/page-header/style/index.less
View File

@ -10,7 +10,7 @@
background-color: @component-background;
&-ghost {
background-color: inherit;
background-color: @page-header-ghost-bg;
}
&.has-breadcrumb {
@ -22,11 +22,10 @@
}
&-back {
float: left;
margin: 8px 0;
margin-right: 16px;
margin-right: @margin-md;
font-size: 16px;
line-height: 1;
&-button {
.operation-unit();
color: @page-header-back-color;
@ -36,51 +35,60 @@
.@{ant-prefix}-divider-vertical {
height: 14px;
margin: 0 12px;
margin: 0 @margin-sm;
vertical-align: middle;
}
.@{ant-prefix}-breadcrumb + &-heading {
margin-top: 8px;
margin-top: @margin-xs;
}
.text-overflow-ellipsis() {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
&-heading {
width: 100%;
overflow: hidden;
display: flex;
justify-content: space-between;
&-left {
display: flex;
align-items: center;
margin: (@margin-xs / 2) 0;
overflow: hidden;
}
&-title {
display: block;
float: left;
margin-right: @margin-sm;
margin-bottom: 0;
padding-right: 12px;
color: @heading-color;
font-weight: 600;
font-size: @heading-4-size;
font-size: @page-header-heading-title;
line-height: 32px;
.text-overflow-ellipsis();
}
.@{ant-prefix}-avatar {
float: left;
margin-right: 12px;
margin-right: @margin-sm;
}
&-sub-title {
float: left;
margin: 5px 0;
margin-right: 12px;
margin-right: @margin-sm;
color: @text-color-secondary;
font-size: 14px;
line-height: 22px;
}
&-tags {
float: left;
margin: 4px 0;
font-size: @page-header-heading-sub-title;
line-height: @line-height-base;
.text-overflow-ellipsis();
}
&-extra {
float: right;
margin: (@margin-xs / 2) 0;
white-space: nowrap;
> * {
margin-left: 8px;
margin-left: @margin-sm;
white-space: unset;
}
> *:first-child {
margin-left: 0;
@ -89,31 +97,30 @@
}
&-content {
padding-top: 12px;
overflow: hidden;
padding-top: @page-header-content-padding-vertical;
}
&-footer {
margin-top: 16px;
.@{ant-prefix}-tabs-bar {
margin-bottom: 1px;
border-bottom: 0;
.@{ant-prefix}-tabs-nav .@{ant-prefix}-tabs-tab {
padding: 8px;
font-size: 16px;
margin-top: @margin-md;
.@{ant-prefix}-tabs {
> .@{ant-prefix}-tabs-nav {
margin: 0;
&::before {
border: none;
}
}
.@{ant-prefix}-tabs-tab {
padding-top: @padding-xs;
padding-bottom: @padding-xs;
font-size: @page-header-tabs-tab-font-size;
}
}
}
@media (max-width: @screen-sm) {
&-heading {
&-extra {
display: block;
float: unset;
width: 100%;
padding-top: 12px;
overflow: hidden;
}
}
&-compact &-heading {
flex-wrap: wrap;
}
}
@import './rtl';

76
components/page-header/style/rtl.less Normal file
View File

@ -0,0 +1,76 @@
@import '../../style/themes/index';
@import '../../style/mixins/index';
@pageheader-prefix-cls: ~'@{ant-prefix}-page-header';
.@{pageheader-prefix-cls} {
&-rtl {
direction: rtl;
}
&-back {
.@{pageheader-prefix-cls}-rtl & {
float: right;
margin-right: 0;
margin-left: 16px;
}
}
&-heading {
&-title {
.@{pageheader-prefix-cls}-rtl & {
margin-right: 0;
margin-left: @margin-sm;
}
}
.@{ant-prefix}-avatar {
.@{pageheader-prefix-cls}-rtl & {
margin-right: 0;
margin-left: @margin-sm;
}
}
&-sub-title {
.@{pageheader-prefix-cls}-rtl & {
float: right;
margin-right: 0;
margin-left: 12px;
}
}
&-tags {
.@{pageheader-prefix-cls}-rtl & {
float: right;
}
}
&-extra {
.@{pageheader-prefix-cls}-rtl & {
float: left;
}
> * {
.@{pageheader-prefix-cls}-rtl & {
margin-right: @margin-sm;
margin-left: 0;
}
}
> *:first-child {
.@{pageheader-prefix-cls}-rtl & {
margin-right: 0;
}
}
}
}
&-footer {
.@{ant-prefix}-tabs-bar {
.@{ant-prefix}-tabs-nav {
.@{pageheader-prefix-cls}-rtl & {
float: right;
}
}
}
}
}

11
components/style/themes/default.less
View File

@ -695,10 +695,15 @@
// PageHeader
// ---
@page-header-padding: 24px;
@page-header-padding-vertical: 16px;
@page-header-padding-breadcrumb: 12px;
@page-header-padding: @padding-lg;
@page-header-padding-vertical: @padding-md;
@page-header-padding-breadcrumb: @padding-sm;
@page-header-content-padding-vertical: @padding-sm;
@page-header-back-color: #000;
@page-header-ghost-bg: inherit;
@page-header-heading-title: @heading-4-size;
@page-header-heading-sub-title: 14px;
@page-header-tabs-tab-font-size: 16px;
// Breadcrumb
// ---