Skip to content

Commit

Permalink
refactor: 💡 Tabs - use css variable to control UI style
Browse files Browse the repository at this point in the history
  • Loading branch information
@wushuxuan
wushuxuan committed Jan 30, 2025
1 parent 2e81ae4 commit 4d0b371
Show file tree
Hide file tree
Showing 4 changed files with 68 additions and 76 deletions.
18 changes: 9 additions & 9 deletions packages/bui-core/src/Tabs/Tab.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,21 +6,21 @@
justify-content: center;
white-space: nowrap;
width: min-content;
height: var(--tab-height);
height: var(--bui-tab-height);
box-sizing: border-box;
position: relative;
cursor: pointer;
font-size: var(--font-size);
font-size: var(--bui-tab-font-size);
line-height: var(--bui-line-height);
color: var(--color);
padding: var(--tab-padding);
color: var(--bui-tabs-color);
padding: var(--bui-tab-padding);
font-family: var(--bui-font-family);

&-active {
font-size: var(--active-font-size);
font-size: var(--bui-tab-active-font-size);
line-height: var(--bui-line-height);
font-weight: var(--active-font-weight);
color: var(--active-color);
font-weight: var(--bui-tabs-active-font-weight);
color: var(--bui-tabs-active-color);
}

&-center {
Expand All @@ -29,10 +29,10 @@
}

&-miniapp-active {
font-size: var(--font-size);
font-size: var(--bui-tab-font-size);
line-height: 1.5;
font-weight: var(--bui-font-weight-medium);
color: var(--active-color);
color: var(--bui-tabs-active-color);
position: relative;

&-line {
Expand Down
58 changes: 25 additions & 33 deletions packages/bui-core/src/Tabs/Tabs.less
View file
Original file line number Diff line number Diff line change
@@ -1,36 +1,28 @@
@class-prefix-tabs: ~'bui-tabs';

.@{class-prefix-tabs} {
--height: var(--bui-tabs-height, 39px);
--color: var(--bui-tabs-color, var(--bui-color-fg-subtle));
--active-color: var(--bui-tabs-active-color, var(--bui-color-fg-default));
--line-color: var(--bui-tabs-line-color, var(--bui-color-primary));

/* prettier-ignore */
--line-height: var(--bui-tabs-line-height, 3PX);
--line-width: var(--bui-tabs-line-width, 18px);
--line-border-radius: var(--bui-tabs-line-border-radius, 3px);
--line-bottom: var(--bui-tabs-line-bottom, 0);
--line-box-shadow: var(--bui-tabs-line-box-shadow, none);
--mask-width: var(--bui-tabs-mask-width, 12px);
--mask-height: var(--bui-tabs-mask-height, 100%);
--tab-height: var(--bui-tab-height, 100%);
--tab-padding: var(
--bui-tab-padding,
var(--bui-spacing-lg) var(--bui-spacing-lg) 10px
);
--font-size: var(--bui-tab-font-size, var(--bui-text-size-1));
--active-font-size: var(--bui-tab-active-font-size, var(--bui-text-size-1));
--active-font-weight: var(
--bui-tabs-active-font-weight,
var(--bui-font-weight-medium)
);
--bui-tabs-height: 39px;
--bui-tabs-color: var(--bui-color-fg-subtle);
--bui-tabs-active-color: var(--bui-color-fg-default);
--bui-tabs-line-color: var(--bui-color-primary);
--bui-tabs-line-height: 3px;
--bui-tabs-line-width: 18px;
--bui-tabs-line-border-radius: 3px;
--bui-tabs-line-bottom: 0;
--bui-tabs-line-box-shadow: none;
--bui-tabs-mask-width: 12px;
--bui-tabs-mask-height: 100%;
--bui-tab-height: 100%;
--bui-tab-padding: var(--bui-spacing-lg) var(--bui-spacing-lg) 10px;
--bui-tab-font-size: var(--bui-text-size-1);
--bui-tab-active-font-size: var(--bui-text-size-1);
--bui-tabs-active-font-weight: var(--bui-font-weight-medium);

position: relative;
font-family: var(--bui-font-family);

&-tabs {
height: var(--height);
height: var(--bui-tabs-height);
display: flex;
flex-wrap: nowrap;
justify-content: flex-start;
Expand All @@ -46,14 +38,14 @@

&-tabline {
position: absolute;
width: var(--line-width);
bottom: var(--line-bottom);
width: var(--bui-tabs-line-width);
bottom: var(--bui-tabs-line-bottom);

height: var(--line-height);
height: var(--bui-tabs-line-height);
color: var(--bui-color-primary);
background: var(--line-color);
border-radius: var(--line-border-radius);
box-shadow: var(--line-box-shadow);
background: var(--bui-tabs-line-color);
border-radius: var(--bui-tabs-line-border-radius);
box-shadow: var(--bui-tabs-line-box-shadow);
}

&-content {
Expand All @@ -65,8 +57,8 @@
top: 0;
bottom: 0;
z-index: 1;
width: var(--mask-width);
height: var(--mask-height);
width: var(--bui-tabs-mask-width);
height: var(--bui-tabs-mask-height);
pointer-events: none;
}

Expand Down
34 changes: 17 additions & 17 deletions packages/bui-core/src/Tabs/index.en-US.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -465,25 +465,25 @@ export default () => {
| index | Corresponding to the index in the data of the tab switching panel | string | - |
| keepMounted | Whether to render DOM structure when TabPanel is hidden | boolean | false |

## Style variables
<!-- ## Style variables
### Tabs
| attribute | explain | Default value | global variable |
| -------------------- | ------------------------------------------------------------ | ------------------------------------------------ | ----------------------------- |
| --height | Tabs height | 39px | --bui-tabs-height |
| --color | Font color | --bui-color-fg-subtle | --bui-tabs-color |
| --active-color | Activate Tab font color | --bui-color-fg-default | --bui-tabs-active-color |
| --active-font-weight | Activate Tab font weight | --bui-font-weight-medium | --bui-tabs-active-font-weight |
| --line-width | Width of the lower marking line | 18px | --bui-tabs-line-width |
| --line-border-radius | Rounded corner of lower marking line | 3px | --bui-tabs-line-border-radius |
| --line-bottom | Positioning position at the bottom of the lower marking line | 0 | --bui-tabs-line-bottom |
| --line-height | Height of the lower marking line | 3PX | --bui-tabs-line-height |
| --line-color | Index line color | --bui-color-primary | --bui-tabs-line-color |
| --line-box-shadow | Index line shadow | none | --bui-tabs-line-box-shadow |
| --mask-width | Mask width | 12px | --bui-tabs-mask-width |
| --mask-height | Mask height | 100% | --bui-tabs-mask-height |
| --tab-height | Tab height | 100% | --bui-tab-height |
| --tab-padding | Tab inner margin | var(--bui-spacing-lg) var(--bui-spacing-lg) 10px | --bui-tab-padding |
| --font-size | Tab font size | --bui-text-size-1 | --bui-tab-font-size |
| --active-font-size | Activate Tab font size | --bui-text-size-1 | --bui-tab-active-font-size |
| --bui-tabs-height | Tabs height | 39px | --bui-tabs-height |
| --bui-tabs-color | Font color | --bui-color-fg-subtle | --bui-tabs-color |
| --bui-tabs-active-color | Activate Tab font color | --bui-color-fg-default | --bui-tabs-active-color |
| --bui-tabs-active-font-weight | Activate Tab font weight | --bui-font-weight-medium | --bui-tabs-active-font-weight |
| --bui-tabs-line-width | Width of the lower marking line | 18px | --bui-tabs-line-width |
| --bui-tabs-line-border-radius | Rounded corner of lower marking line | 3px | --bui-tabs-line-border-radius |
| --bui-tabs-line-bottom | Positioning position at the bottom of the lower marking line | 0 | --bui-tabs-line-bottom |
| --bui-tabs-active-color | Height of the lower marking line | 3PX | --bui-tabs-line-height |
| --bui-tabs-line-color | Index line color | --bui-color-primary | --bui-tabs-line-color |
| --bui-tabs-line-box-shadow | Index line shadow | none | --bui-tabs-line-box-shadow |
| --bui-tabs-mask-width | Mask width | 12px | --bui-tabs-mask-width |
| --bui-tabs-mask-height | Mask height | 100% | --bui-tabs-mask-height |
| --bui-tab-height | Tab height | 100% | --bui-tab-height |
| --bui-tab-padding | Tab inner margin | var(--bui-spacing-lg) var(--bui-spacing-lg) 10px | --bui-tab-padding |
| --bui-tab-font-size | Tab font size | --bui-text-size-1 | --bui-tab-font-size |
| --bui-tab-active-font-size | Activate Tab font size | --bui-text-size-1 | --bui-tab-active-font-size | -->
34 changes: 17 additions & 17 deletions packages/bui-core/src/Tabs/index.zh-CN.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -465,25 +465,25 @@ export default () => {
| index | 对应 tabs 切换面板的数据中的 index | string | - |
| keepMounted | 当 TabPanel 被隐藏时是否渲染 DOM 结构 | boolean | false |

## 样式变量
<!-- ## 样式变量
### Tabs
| 属性 | 说明 | 默认值 | 全局变量 |
| -------------------- | ------------------ | ------------------------------------------------ | ----------------------------- |
| --height | Tabs 高度 | 39px | --bui-tabs-height |
| --color | 字体颜色 | --bui-color-fg-subtle | --bui-tabs-color |
| --active-color | 激活 Tab 字体颜色 | --bui-color-fg-default | --bui-tabs-active-color |
| --active-font-weight | 激活 Tab 字重 | --bui-font-weight-medium | --bui-tabs-active-font-weight |
| --line-width | 下标线宽度 | 18px | --bui-tabs-line-width |
| --line-border-radius | 下标线圆角 | 3px | --bui-tabs-line-border-radius |
| --line-bottom | 下标线底部定位位置 | 0 | --bui-tabs-line-bottom |
| --line-height | 下标线高度 | 3PX | --bui-tabs-line-height |
| --line-color | 下标线颜色 | --bui-color-primary | --bui-tabs-line-color |
| --line-box-shadow | 下标线阴影 | none | --bui-tabs-line-box-shadow |
| --mask-width | 蒙层宽度 | 12px | --bui-tabs-mask-width |
| --mask-height | 蒙层高度 | 100% | --bui-tabs-mask-height |
| --tab-height | Tab 高度 | 100% | --bui-tab-height |
| --tab-padding | Tab内边距 | var(--bui-spacing-lg) var(--bui-spacing-lg) 10px | --bui-tab-padding |
| --font-size | Tab字体大小 | --bui-text-size-1 | --bui-tab-font-size |
| --active-font-size | 激活Tab字体大小 | --bui-text-size-1 | --bui-tab-active-font-size |
| --bui-tabs-height | Tabs 高度 | 39px | --bui-tabs-height |
| --bui-tabs-color | 字体颜色 | --bui-color-fg-subtle | --bui-tabs-color |
| --bui-tabs-active-color | 激活 Tab 字体颜色 | --bui-color-fg-default | --bui-tabs-active-color |
| --bui-tabs-active-font-weight | 激活 Tab 字重 | --bui-font-weight-medium | --bui-tabs-active-font-weight |
| --bui-tabs-line-width | 下标线宽度 | 18px | --bui-tabs-line-width |
| --bui-tabs-line-border-radius | 下标线圆角 | 3px | --bui-tabs-line-border-radius |
| --bui-tabs-line-bottom | 下标线底部定位位置 | 0 | --bui-tabs-line-bottom |
| --bui-tabs-active-color | 下标线高度 | 3PX | --bui-tabs-line-height |
| --bui-tabs-line-color | 下标线颜色 | --bui-color-primary | --bui-tabs-line-color |
| --bui-tabs-line-box-shadow | 下标线阴影 | none | --bui-tabs-line-box-shadow |
| --bui-tabs-mask-width | 蒙层宽度 | 12px | --bui-tabs-mask-width |
| --bui-tabs-mask-height | 蒙层高度 | 100% | --bui-tabs-mask-height |
| --bui-tab-height | Tab 高度 | 100% | --bui-tab-height |
| --bui-tab-padding | Tab内边距 | var(--bui-spacing-lg) var(--bui-spacing-lg) 10px | --bui-tab-padding |
| --bui-tab-font-size | Tab字体大小 | --bui-text-size-1 | --bui-tab-font-size |
| --bui-tab-active-font-size | 激活Tab字体大小 | --bui-text-size-1 | --bui-tab-active-font-size | -->

0 comments on commit 4d0b371

Please sign in to comment.