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--vertical-onActive-borderColor: $primary !default;
// Nav
$Nav-item-fontSize: $fontSizeBase !default;
$Nav-item-borderRadius: $borderRadiusMd !default;

138
scss/components/_tabs.scss
View File

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