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

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

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