p96170835
/
amis
1
0
Fork 1
Code Issues Pull Requests Releases Wiki Activity

选项卡支持垂直摆放链接

This commit is contained in:
liaoxuezhi 2019-10-29 12:37:20 +08:00
parent 8162ca3e42
commit 66545998e2
3 changed files with 97 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
scss/_variables.scss
View File

@ -407,6 +407,8 @@ $Tabs--card-linkMargin: 0 10px 0 0 !default;
$Tabs--radio-bg: #eaf6fe !default; $Tabs--radio-bg: #eaf6fe !default;
$Tabs--vertical-onActive-borderColor: $primary !default;
// Nav // Nav
$Nav-item-fontSize: $fontSizeBase !default; $Nav-item-fontSize: $fontSizeBase !default;
$Nav-item-borderRadius: $borderRadiusMd !default; $Nav-item-borderRadius: $borderRadiusMd !default;

138
scss/components/_tabs.scss
View File

@ -10,12 +10,12 @@
content: ' '; content: ' ';
} }
> .#{$ns}Tabs-link { >.#{$ns}Tabs-link {
margin-bottom: -$Tabs-borderWidth; margin-bottom: -$Tabs-borderWidth;
display: inline-block; display: inline-block;
position: relative; position: relative;
> a:first-child { >a:first-child {
font-size: $Tabs-linkFontSize; font-size: $Tabs-linkFontSize;
outline: none; outline: none;
border: $Tabs-borderWidth solid transparent; border: $Tabs-borderWidth solid transparent;
@ -29,7 +29,7 @@
display: block; display: block;
} }
> .#{$ns}Combo-toolbarBtn { >.#{$ns}Combo-toolbarBtn {
position: absolute; position: absolute;
right: -10px; right: -10px;
top: -10px; top: -10px;
@ -37,26 +37,26 @@
display: none; display: none;
} }
&:hover > .#{$ns}Combo-toolbarBtn { &:hover>.#{$ns}Combo-toolbarBtn {
display: block; display: block;
} }
&:hover > a:first-child, &:hover>a:first-child,
> a:first-child:focus { >a:first-child:focus {
border-color: $Tabs-onHover-borderColor; border-color: $Tabs-onHover-borderColor;
text-decoration: none; text-decoration: none;
} }
&.disabled > a:first-child, &.disabled>a:first-child,
&.is-disabled > a:first-child { &.is-disabled>a:first-child {
color: $Tabs-onDisabled-color; color: $Tabs-onDisabled-color;
background-color: transparent; background-color: transparent;
border-color: transparent; border-color: transparent;
pointer-events: none; pointer-events: none;
} }
&.active > a:first-child, &.active>a:first-child,
&.is-active > a:first-child { &.is-active>a:first-child {
color: $Tabs-onActive-color; color: $Tabs-onActive-color;
background-color: $Tabs-onActive-bg; background-color: $Tabs-onActive-bg;
border-color: $Tabs-onActive-borderColor; border-color: $Tabs-onActive-borderColor;
@ -88,11 +88,11 @@
} }
&--line { &--line {
> .#{$ns}Tabs-links { >.#{$ns}Tabs-links {
border-bottom-color: $Tabs--line-borderColor; border-bottom-color: $Tabs--line-borderColor;
> li { >li {
> a:first-child { >a:first-child {
border-width: 0 0 $Tabs--line-borderWidth 0; border-width: 0 0 $Tabs--line-borderWidth 0;
padding: $Tabs--line-linkPadding; padding: $Tabs--line-linkPadding;
margin: $Tabs--line-linkMargin; margin: $Tabs--line-linkMargin;
@ -106,15 +106,16 @@
} }
&:last-child { &:last-child {
> a { >a {
margin: 0; margin: 0;
} }
} }
&.is-active { &.is-active {
> a:first-child,
> a:first-child:hover, >a:first-child,
> a:first-child:focus { >a:first-child:hover,
>a:first-child:focus {
border-color: $Tabs--line-onHover-borderColor; border-color: $Tabs--line-onHover-borderColor;
color: $Tabs--line-onHover-color; color: $Tabs--line-onHover-color;
background-color: transparent; background-color: transparent;
@ -123,7 +124,7 @@
} }
} }
> .#{$ns}Tabs-content { >.#{$ns}Tabs-content {
border-width: 0; border-width: 0;
padding: $Tabs--line-content-padding; padding: $Tabs--line-content-padding;
background-color: $Tabs--line-content-bg; background-color: $Tabs--line-content-bg;
@ -131,16 +132,17 @@
} }
&--card { &--card {
> .#{$ns}Tabs-links { >.#{$ns}Tabs-links {
padding: $Tabs--card-padding; padding: $Tabs--card-padding;
background-color: $Tabs--card-bg; background-color: $Tabs--card-bg;
border-top: px2rem(1px) solid $Tabs--card-borderTopColor; border-top: px2rem(1px) solid $Tabs--card-borderTopColor;
> li { >li {
&.is-active { &.is-active {
> a:first-child,
> a:first-child:hover, >a:first-child,
> a:first-child:focus { >a:first-child:hover,
>a:first-child:focus {
border-color: $Tabs--card-onActive-borderColor; border-color: $Tabs--card-onActive-borderColor;
color: $primary; color: $primary;
border-bottom-color: $Tabs--card-onActive-bg; border-bottom-color: $Tabs--card-onActive-bg;
@ -148,7 +150,7 @@
} }
} }
> a:first-child { >a:first-child {
padding: $Tabs--card-linkPadding; padding: $Tabs--card-linkPadding;
margin: $Tabs--card-linkMargin; margin: $Tabs--card-linkMargin;
@ -162,20 +164,20 @@
} }
} }
> .#{$ns}Tabs-content { >.#{$ns}Tabs-content {
border-width: 0; border-width: 0;
} }
} }
&--radio { &--radio {
> .#{$ns}Tabs-links { >.#{$ns}Tabs-links {
border: 0; border: 0;
margin-bottom: px2rem(10px); margin-bottom: px2rem(10px);
> li { >li {
margin: 0; margin: 0;
> a:first-child { >a:first-child {
border-width: px2rem(1px); border-width: px2rem(1px);
border-color: $Tabs-borderColor; border-color: $Tabs-borderColor;
font-size: $fontSizeSm; font-size: $fontSizeSm;
@ -186,21 +188,6 @@
height: px2rem(30px); height: px2rem(30px);
line-height: px2rem(30px); line-height: px2rem(30px);
border-radius: 0; border-radius: 0;
}
&.is-active {
> a:first-child,
> a:first-child:hover,
> a:first-child:focus {
color: $Tabs--radio-bg;
background-color: $primary;
border-color: $primary;
position: relative;
z-index: 1;
}
}
> a:first-child {
background: $Tabs--radio-bg; background: $Tabs--radio-bg;
&:hover, &:hover,
@ -208,15 +195,76 @@
color: $primary; color: $primary;
} }
} }
&.is-active {
>a:first-child,
>a:first-child:hover,
>a:first-child:focus {
color: $Tabs--radio-bg;
background-color: $primary;
border-color: $primary;
position: relative;
z-index: 1;
}
}
} }
> li + li { >li+li {
margin-left: -1px; margin-left: -1px;
} }
} }
> .#{$ns}Tabs-content { >.#{$ns}Tabs-content {
border-top: $Tabs-borderWidth solid $Tabs-borderColor; border-top: $Tabs-borderWidth solid $Tabs-borderColor;
} }
} }
&--vertical {
display: flex;
min-height: px2rem(200px);
border: $Tabs-borderWidth solid $Tabs-borderColor;
border-radius: 0;
>.#{$ns}Tabs-links {
width: px2rem(140px);
background: #F5F5F5;
border: none;
padding-bottom: px2rem(60px);
>li {
margin: 0 0 0 -1px;
display: block;
>a:first-child {
border-color: transparent;
border-radius: 0;
border-width: 0 0 0 px2rem(4px);
margin: 0;
&:hover,
&:focus {
color: $primary;
border-color: transparent;
}
}
&.is-active {
>a:first-child,
>a:first-child:hover,
>a:first-child:focus {
color: $primary;
border-color: $primary;
}
}
}
}
>.#{$ns}Tabs-content {
border: none;
flex-grow: 1;
}
}
} }

4
src/components/Tabs.tsx
View File

@ -31,8 +31,8 @@ export interface TabProps {
} }
export interface TabsProps { export interface TabsProps {
mode?: '' | 'line' | 'card' | 'radio'; mode?: '' | 'line' | 'card' | 'radio' | 'vertical';
tabsMode?: '' | 'line' | 'card' | 'radio'; tabsMode?: '' | 'line' | 'card' | 'radio' | 'vertical';
additionBtns?: React.ReactNode; additionBtns?: React.ReactNode;
handleSelect?: Function; handleSelect?: Function;
classPrefix: string; classPrefix: string;