feat(tabs): 调整滚动示例仅展示卡片型&调整tabBar计算样式逻辑

TDesignOteam · Sep 19, 2024 · 4614b3a · 4614b3a
1 parent 8484929
commit 4614b3a
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 16 deletions.
diff --git a/src/tabs/README.md b/src/tabs/README.md
@@ -18,11 +18,11 @@ spline: base
 
 {{ icon }}
 
-<!-- ### 增删选项卡
+### 增删选项卡
 
 用户可添加、删除选项卡，满足自定义场景。
 
-{{ custom }} -->
+{{ custom }}
 
 ### 不同尺寸的选项卡
 
@@ -40,10 +40,10 @@ spline: base
 提供 上、右、下、左 不同位置的选项卡。
 {{ position }}
 
-<!-- ### 可滑动的选项卡
+### 可滑动的选项卡
 
 当选项卡数量超出最大宽度，可通过滑动展示选项卡。
-{{ combination }} -->
+{{ combination }}
 
 ### 带禁用状态的选项卡
 

diff --git a/src/tabs/TabBar.tsx b/src/tabs/TabBar.tsx
@@ -1,4 +1,4 @@
-import { Component, createRef, tag } from 'omi';
+import { Component, createRef, signal, tag } from 'omi';
 
 import classname, { getClassPrefix } from '../_util/classname';
 import { StyledProps, Styles } from '../common';
@@ -25,7 +25,7 @@ export default class TabBar extends Component<TabBarProps> {
 
  currentActiveIdRef = createRef<TabValue>();
 
- barStyle: Styles = {};
+ barStyle: Omi.SignalValue<Styles> = signal({});
 
  tabsClassPrefix = `${getClassPrefix()}-tabs`;
 
@@ -49,11 +49,11 @@ export default class TabBar extends Component<TabBarProps> {
  });
  const computedItem = itemsRef[this.currentActiveIdRef.current];
  if (!computedItem) {
- this.barStyle = { transform: `${transformPosition}(${0}px)`, [barBorderProp]: 0 };
+ this.barStyle.value = { transform: `${transformPosition}(${0}px)`, [barBorderProp]: 0 };
  return;
  }
  const itemPropValue = getComputedStyle(computedItem)[itemProp];
- this.barStyle = { transform: `${transformPosition}(${offset}px)`, [barBorderProp]: itemPropValue || 0 };
+ this.barStyle.value = { transform: `${transformPosition}(${offset}px)`, [barBorderProp]: itemPropValue || 0 };
  }
  }
  }
@@ -65,10 +65,7 @@ export default class TabBar extends Component<TabBarProps> {
  }
 
  installed(): void {
- setTimeout(() => {
- this.computeStyle();
- this.update();
- }, 0);
+ this.computeStyle();
  }
 
  render() {
@@ -83,7 +80,7 @@ export default class TabBar extends Component<TabBarProps> {
  [`${this.tabsClassPrefix}__bar`]: true,
  [`${getClassPrefix()}-is-${tabPosition}`]: true,
  })}
- style={this.barStyle}
+ style={this.barStyle.value}
  ></div>
  );
  }

diff --git a/src/tabs/_example/combination.tsx b/src/tabs/_example/combination.tsx
@@ -5,7 +5,8 @@ import 'tdesign-web-components/tabs';
 import { Component, signal } from 'omi';
 
 export default class Combination extends Component {
- theme = signal('normal');
+ // 目前常规性滚动存在bug，先固定选择卡片型
+ theme = signal('card');
 
  scrollPosition = signal('auto');
 
@@ -17,7 +18,7 @@ export default class Combination extends Component {
  render() {
  return (
  <t-space direction="vertical" size="large" style={{ width: '100%' }}>
- <t-radio-group
+ {/* <t-radio-group
  variant="default-filled"
  defaultValue="normal"
  onChange={(val) => {
@@ -26,7 +27,7 @@ export default class Combination extends Component {
  >
  <t-radio-button value="normal" content="常规型" />
  <t-radio-button value="card" content="卡片型" />
- </t-radio-group>
+ </t-radio-group> */}
  <t-radio-group
  variant="default-filled"
  defaultValue="auto"