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;

66
scss/components/_tabs.scss
View File

@ -112,6 +112,7 @@
}
&.is-active {
>a:first-child,
>a:first-child:hover,
>a:first-child:focus {
@ -138,6 +139,7 @@
>li {
&.is-active {
>a:first-child,
>a:first-child:hover,
>a:first-child:focus {
@ -186,9 +188,16 @@
height: px2rem(30px);
line-height: px2rem(30px);
border-radius: 0;
background: $Tabs--radio-bg;
&:hover,
&:focus {
color: $primary;
}
}
&.is-active {
>a:first-child,
>a:first-child:hover,
>a:first-child:focus {
@ -199,15 +208,6 @@
z-index: 1;
}
}
> a:first-child {
background: $Tabs--radio-bg;
&:hover,
&:focus {
color: $primary;
}
}
}
>li+li {
@ -219,4 +219,52 @@
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;