Skip to content

Commit

Permalink
Merge pull request #2652 from XiaoMi/feature/tabs(2646)
Browse files Browse the repository at this point in the history 
chore(tabs): 胶囊样式下标签之间增加竖线展示 (#2646)
  • Loading branch information
@solarjoker
solarjoker authored Nov 2, 2023
2 parents 85dc6cf + 31a7c8d commit e9e8d91
Show file tree
Hide file tree
Showing 14 changed files with 227 additions and 110 deletions.
5 changes: 5 additions & 0 deletions .changeset/little-cherries-dress.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@hi-ui/tabs": patch
---

chore: 胶囊样式下标签之间增加竖线展示
5 changes: 5 additions & 0 deletions .changeset/quick-donuts-mix.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@hi-ui/hiui": patch
---

Tabs chore: 胶囊样式下标签之间增加竖线展示
198 changes: 112 additions & 86 deletions packages/ui/tabs/src/styles/tabs.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,9 +47,10 @@ $prefix: '#{$component-prefix}-tabs' !default;
.#{$prefix}__item {
background-color: use-color('gray', 200);
margin: 0;
padding: use-spacing(4) use-spacing(10);
padding: use-spacing(5) use-spacing(8);
border-radius: 0;
transition: all 0.3s;
line-height: use-text-lineheight('sm');

&--active {
color: use-color-mode('primary');
Expand All @@ -61,28 +62,58 @@ $prefix: '#{$component-prefix}-tabs' !default;

&--button {
.#{$prefix}__item {
position: relative;
margin: use-spacing(2) use-spacing(2) use-spacing(2) 0;
padding: use-spacing(2) use-spacing(10);
padding: use-spacing(2) use-spacing(6);
border-radius: use-border-radius('normal');
transition: all 0.3s;

&:not(:where(.#{$prefix}__item--active, .#{$prefix}__item--disabled)):hover {
background-color: use-color('gray', 200);
color: use-color('gray', 500);
&:not(:where(.#{$prefix}__item--active, .#{$prefix}__item--disabled)) {
&:hover {
background-color: use-color('gray', 200);
color: use-color('gray', 500);

&::after {
display: none;
}

+ .#{$prefix}__item::after {
display: none;
}
}

&::after {
content: '';
position: absolute;
width: 1px;
height: use-height-size(4);
background-color: use-color('gray', 300);
left: 0;
top: 50%;
transform: translateY(-50%);
}

&:first-child::after {
display: none;
}
}

&--active {
color: use-color-mode('primary');
background-color: use-color-mode('primary', 50);

+ .#{$prefix}__item::after {
display: none;
}
}
}
}

&--desc {
padding: 0 use-spacing(10);
.#{$prefix}-item {
&__title {
color: use-color('gray', 700);
line-height: use-text-lineheight('sm');
}

&__desc {
Expand All @@ -91,13 +122,14 @@ $prefix: '#{$component-prefix}-tabs' !default;
line-height: use-text-lineheight('sm');
}
}

.#{$prefix}__item {
background: use-color('gray', 50);
display: flex;
flex-direction: column;
align-items: center;
margin: use-spacing(10) use-spacing(6) use-spacing(10) 0;
padding: use-spacing(8) use-spacing(10);
margin: 0 use-spacing(6) 0 0;
padding: use-spacing(8);
border-radius: use-border-radius('normal');
transition: all 0.3s;

Expand Down Expand Up @@ -176,20 +208,88 @@ $prefix: '#{$component-prefix}-tabs' !default;
// height: 100%;

&.#{$prefix}__list--desc {
.#{$prefix}-item {
&__title {
color: use-color('gray', 700);
line-height: use-text-lineheight('sm');
}

&__desc {
color: use-color('gray', 500);
font-size: use-text-size('sm');
line-height: use-text-lineheight('sm');
}
}

.#{$prefix}__item {
display: flex;
flex-direction: column;
align-items: center;
padding: use-spacing(8);
border-radius: use-border-radius('normal');
transition: all 0.3s;
background: use-color('gray', 50);

&:not(:where(.#{$prefix}__item--active, .#{$prefix}__item--disabled)):hover {
background-color: use-color('gray', 200);
color: use-color('gray', 500);
}

&--active {
color: use-color-mode('primary');
background-color: use-color-mode('primary', 50);
.#{$prefix}-item {
&__title {
color: use-color-mode('primary');
}

&__desc {
color: use-color-mode('primary');
}
}
}
}

.#{$prefix}__list--scroll {
row-gap: use-spacing(6);
}
}

&.#{$prefix}__list--card {
.#{$prefix}__item {
margin: 0;
padding: use-spacing(5) use-spacing(8);
background-color: use-color('gray', 200);
border-radius: 0;
transition: all 0.3s;
line-height: use-text-lineheight('sm');

&--active {
color: use-color-mode('primary');
background-color: use-color-static('white');
border-radius: use-border-radius('normal') 0 0 use-border-radius('normal');
}
}
}

&.#{$prefix}__list--button {
.#{$prefix}__item {
margin: 0 0 use-spacing(2) 0;
padding: use-spacing(2) use-spacing(6);
border-radius: use-border-radius('normal');
transition: all 0.3s;

&:not(:where(.#{$prefix}__item--active, .#{$prefix}__item--disabled)):hover {
background-color: use-color('gray', 200);
color: use-color('gray', 500);
}

&--active {
color: use-color-mode('primary');
background-color: use-color-mode('primary', 50);
}
}

.#{$prefix}__list--scroll {
row-gap: use-spacing(2);
}
Expand All @@ -212,6 +312,10 @@ $prefix: '#{$component-prefix}-tabs' !default;
margin: 0;
transition: all 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);

&::after {
display: none;
}

&--prev {
border-top: 1px dashed use-color-mode('primary');
border-left: none;
Expand All @@ -231,84 +335,6 @@ $prefix: '#{$component-prefix}-tabs' !default;
background-color: use-color-mode('primary');
transition: top 0.2s cubic-bezier(0.34, 0.69, 0.1, 1), height 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);
}

.#{$prefix}__list--card {
.#{$prefix}__item {
margin: 0;
padding: use-spacing(4) use-spacing(10);
background-color: use-color('gray', 200);
border-radius: 0;
transition: all 0.3s;

&--active {
color: use-color-mode('primary');
background-color: use-color-static('white');
border-radius: use-border-radius('normal') 0 0 use-border-radius('normal');
}
}
}

.#{$prefix}__list--button {
.#{$prefix}__item {
margin: 0 0 use-spacing(2) 0;
padding: use-spacing(2) use-spacing(10);
border-radius: use-border-radius('normal');
transition: all 0.3s;

&:not(:where(.#{$prefix}__item--active, .#{$prefix}__item--disabled)):hover {
background-color: use-color('gray', 200);
color: use-color('gray', 500);
}

&--active {
color: use-color-mode('primary');
background-color: use-color-mode('primary', 50);
}
}
}

.#{$prefix}__list--desc {
.#{$prefix}-item {
&__title {
color: use-color('gray', 700);
}

&__desc {
color: use-color('gray', 500);
font-size: use-text-size('sm');
line-height: use-text-lineheight('sm');
}
}
.#{$prefix}__item {
display: flex;
flex-direction: column;
align-items: center;
margin: 0 0 use-spacing(6) 0;
padding: use-spacing(8) use-spacing(10);
border-radius: use-border-radius('normal');
transition: all 0.3s;
background: use-color('gray', 50);

&:not(:where(.#{$prefix}__item--active, .#{$prefix}__item--disabled)):hover {
background-color: use-color('gray', 200);
color: use-color('gray', 500);
}

&--active {
color: use-color-mode('primary');
background-color: use-color-mode('primary', 50);
.#{$prefix}-item {
&__title {
color: use-color-mode('primary');
}

&__desc {
color: use-color-mode('primary');
}
}
}
}
}
}
}

Expand Down
2 changes: 1 addition & 1 deletion packages/ui/tabs/stories/basic.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ export const Basic = () => {
Content of Tab Panel 1
</div>
</TabPane>
<TabPane tabId="2" tabTitle="Tab 2" disabled>
<TabPane tabId="2" tabTitle="Tab 2">
<div
style={{
backgroundColor: '#f5f7fa',
Expand Down
38 changes: 31 additions & 7 deletions packages/ui/tabs/stories/button.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,8 @@ export const Button = () => {
<>
<h1>胶囊式</h1>
<div className="tabs-basic__wrap">
<Tabs type="button" placement="vertical" style={{ marginBottom: 40 }}>
<TabPane tabId="1" tabTitle="Tab 1">
<Tabs type="button" placement="vertical" style={{ marginBottom: 40 }} draggable>
<TabPane tabId="1" tabTitle={<div style={{ padding: '0 10px' }}>Tab1</div>}>
<div
style={{
backgroundColor: '#f5f7fa',
Expand All @@ -23,7 +23,7 @@ export const Button = () => {
Content of Tab Panel 1
</div>
</TabPane>
<TabPane tabId="2" tabTitle="Tab 2" disabled>
<TabPane tabId="2" tabTitle={<div style={{ padding: '0 10px' }}>Tab2</div>}>
<div
style={{
backgroundColor: '#f5f7fa',
Expand All @@ -35,7 +35,7 @@ export const Button = () => {
Content of Tab Panel 2
</div>
</TabPane>
<TabPane tabId="3" tabTitle="Tab 3">
<TabPane tabId="3" tabTitle={<div style={{ padding: '0 10px' }}>Tab3</div>}>
<div
style={{
backgroundColor: '#f5f7fa',
Expand All @@ -49,7 +49,7 @@ export const Button = () => {
</TabPane>
</Tabs>
<Tabs type="button" placement="horizontal" draggable>
<TabPane tabId="1" tabTitle="Tab 1">
<TabPane tabId="1" tabTitle={<div style={{ padding: '0 10px' }}>Tab1</div>}>
<div
style={{
backgroundColor: '#f5f7fa',
Expand All @@ -61,7 +61,7 @@ export const Button = () => {
Content of Tab Panel 1
</div>
</TabPane>
<TabPane tabId="2" tabTitle="Tab 2" disabled>
<TabPane tabId="2" tabTitle={<div style={{ padding: '0 10px' }}>Tab2</div>}>
<div
style={{
backgroundColor: '#f5f7fa',
Expand All @@ -73,7 +73,7 @@ export const Button = () => {
Content of Tab Panel 2
</div>
</TabPane>
<TabPane tabId="3" tabTitle="Tab 3">
<TabPane tabId="3" tabTitle={<div style={{ padding: '0 10px' }}>Tab3</div>}>
<div
style={{
backgroundColor: '#f5f7fa',
Expand All @@ -85,6 +85,30 @@ export const Button = () => {
Content of Tab Panel 3
</div>
</TabPane>
<TabPane tabId="4" tabTitle={<div style={{ padding: '0 10px' }}>Tab4</div>}>
<div
style={{
backgroundColor: '#f5f7fa',
textAlign: 'center',
padding: 32,
color: '#1f2733',
}}
>
Content of Tab Panel 4
</div>
</TabPane>
<TabPane tabId="5" tabTitle={<div style={{ padding: '0 10px' }}>Tab5</div>}>
<div
style={{
backgroundColor: '#f5f7fa',
textAlign: 'center',
padding: 32,
color: '#1f2733',
}}
>
Content of Tab Panel 5
</div>
</TabPane>
</Tabs>
</div>
</>
Expand Down
Loading

0 comments on commit e9e8d91

Please sign in to comment.