sinouiincubator/tab-group

选项卡组件

tab-group's Issues

bug: 在 TabContent 中使用 position: fixed，没有达到预期效果

现象：

在 TabGroup 中使用 react-beautiful-dnd ，发现拖拽时拖拽元素不见或者错位了。

原因：

TabContent 使用 transform: translate3d() 切换内容页的。transform 会创建新的层叠上下文，这样 position:fxied 就会相对于 TabContent 定位，而不是相对于视口定位。

参考： https://developer.mozilla.org/zh-CN/docs/Web/CSS/position

从 MDN 上摘选的：

position: fixed

不为元素预留空间，而是通过指定元素相对于屏幕视口（viewport）的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。打印时，元素会出现在的每页的固定位置。fixed 属性会创建新的层叠上下文。当元素祖先的 transform 属性非 none 时，容器由视口改为该祖先。

bug: TabGroup 在 React concurrent 模式下不展现默认选中项

const App = () => {
  return <ThemeProvider theme={theme}>
    <TabGroup>
      <Tab title="1">1</Tab>
      <Tab title="2">2</Tab>
    </TabGroup>
   </ThemeProvider>;
}

const root = document.getElementById('root') as HTMLElement;
ReactDOM.unstable_createRoot(root).render(<App />);

从 dependencies 中去掉 lodash 和 lodash-es

bug： 全宽模式在手机端或者有很多选项卡时出现滑动效果

bug: 在 Android Chrome 中点击时出现高亮背景

sinoui/ripple#3 (comment)

feat: 全宽模式

TabHeader中的标签总宽度：100%，且标签平分宽度

bug: 导航按钮的鼠标样式不正确

tab-group中的TabHeader组件使用全宽属性时在ie浏览器中应该不显示滚动按钮；并且在点击滚动按钮时ie浏览器直接bai'ping

优化：实现一个轻量的 debounce，替换掉 3kb 大小的 lodash/debounce

优化：TabHeader 使用了 lodash/debounce，用来做防抖。但是它有 3kb 大小。需要找一个稳定的、但是又非常小的 debounce 实现，放到 @sinoui/utils 中。

- import debounce from 'lodash/debounce';
+ import debounce from '@sinoui/utils/debounce';

bug: 在大屏幕下不显示滚动按钮，在小屏幕上显示滚动按钮

bug: 导航切换按钮在多次快速点击消失后，但是还是留下了 ripple 残影

feat: 定制标签条颜色

TabGroup、TabHeader 组件新增 textColor 和 inkBarColor 两个属性，分别设置标签文本颜色和指示条颜色。

textColor 属性选项：

• primary （默认）
• secondary
• inherit （从父DOM中继承颜色）
• 其他颜色设定（如 success、warning 等）

inkBarColor 属性选项：

• primary （默认）
• secondary
• 其他颜色设定（如 success、warning 等）

有了这两个颜色属性，就可以将 TabHeader 用于类似 AppBar 中。在文档中需要有这个场景的示例。

优化：使用 @sinoui/theme 的 breakpoint，代替 TabHeaderScrollButton 中 @media (max-width: 600px)

等待 @sinoui/theme 的 breakpoint （ sinoui/theme#1 ），结合 styled-components-breakpoint，代替 TabHeaderScrollButton 中 @media (max-width: 600px)，以支持断点的主题定制和标准化。

feat: 页签切换按钮

提供 useTabState，从 Tab 组件的上下文中获取标签状态。

示例：

import { useTabState } from '@sinouiincubator/tab-group';

function PrevTabButton() {
  const { isFirst, prev } = useTabState();

  return isFirst ? null : <Button onClick={prev}>上一页</Button>;
}

function NextTabButton() {
  const { isLast, next } = useTabState();

  return isLast ? null : <Button onClick={next}>下一页</Button>;
}

function Demo() {
  return (
    <TabGroup>
      <Tab title="标签1">
        标签内容1
        <PrevTabButton />
        <NextTabButton />
      </Tab>
      <Tab title="标签2">
        标签内容2
        <PrevTabButton />
        <NextTabButton />
      </Tab>
      <Tab title="标签3">
        标签内容3
        <PrevTabButton />
        <NextTabButton />
      </Tab>
      <Tab title="标签4">
        标签内容4
        <PrevTabButton />
        <NextTabButton />
      </Tab>
    </TabGroup>
  );
}

feat: TabGroup 可以直接与 TabHeader、 TabContent 组合使用

方案一：

<TabGroup simple>
  <TabHeader>
     <TabHeaderItem title="标签1" />
     <TabHeaderItem title="标签2" />
  </TabHeader>
   <TabContent>
     <TabPanel>内容1</TabPanel>
     <TabPanel>内容2</TabPanel>
   </TabContent>
</TabGroup>

方案二：

<Tabs>
  <TabHeader>
     <TabHeaderItem title="标签1" />
     <TabHeaderItem title="标签2" />
  </TabHeader>
   <TabContent>
     <TabPanel>内容1</TabPanel>
     <TabPanel>内容2</TabPanel>
   </TabContent>
</Tabs>

之所以要有这样的处理，是因为这样更容易实现 TabHeader 与其他组件的组合使用，如AppBar。

<Tabs>
  <AppBar>
    <TabHeader>
       <TabHeaderItem title="标签1" />
       <TabHeaderItem title="标签2" />
    </TabHeader>
  </AppBar>
  <TabContent>
     <TabPanel>内容1</TabPanel>
     <TabPanel>内容2</TabPanel>
  </TabContent>
</Tabs>