主页 / coding / 问题 / 79342247
Accepted
Michel
Asked: 2025-01-09 18:25:03 +0800 CST

粘性标题，带有 react-tabs

  • 772

在 Web 应用程序（NextJS/React）中，我使用react-tabs来处理选项卡。

我想知道如何让标签标题保持粘性。这样当我向上滚动页面内容时，它们就不会向上滚动并消失。

在网上搜索后，我尝试使用react-sticky，但似乎不起作用。

我甚至觉得 react-tabs 和 react-sticky 不应该一起工作。如果我错了请告诉我。

以下是相关的当前代码：

import { Tabs,TabList,Tab,TabPanel } from 'react-tabs';
import 'react-tabs/style/react-tabs.css';
.....

return (
  <Tabs defaultIndex={tabInit()}>
    <TabList>
      <Tab>Title-One</Tab>
      <Tab>Title-Two</Tab>
      <Tab>Title-Three</Tab>
      <Tab>Title-Four</Tab>
      <Tab>Title-Five</Tab>
      <Tab>Title-Six</Tab>
    </TabList>
    <TabPanel><Contents-One/></TabPanel>
    <TabPanel><Contents-Two/></TabPanel>
    <TabPanel><Contents-Three/></TabPanel>
    <TabPanel><Contents-Four/></TabPanel>
    <TabPanel><Contents-Five/></TabPanel>
    <TabPanel><Contents-Six/></TabPanel>
  </Tabs>
)

如何使用才能达到我需要的效果react-tabs？

reactjs

2 个回答

  1. Best Answer

    您可以使用纯 CSS 实现这一点。

    1. <Tabs>在组件周围添加一个容器
    2. 为上述容器赋予固定高度
    3. 添加position: sticky;到<TabList>组件。

    这是一个可以尝试的示例代码。

    文件：App.css

    .tab-container {
  max-height: 400px; /* adding height to create scroll */
  overflow-y: auto;
  border: 1px solid #ccc;
  position: relative;
}

.tab-list {
  position: sticky;
  top: 0;
  background-color: white;
  z-index: 10;
  border-bottom: 1px solid #ccc;
  margin: 0;
}

    更新组件如下以应用 CSS 类

    文件：App.js

    import { Tab, Tabs, TabList, TabPanel } from "react-tabs";

import "react-tabs/style/react-tabs.css";
import "./App.css";

function App() {
  return (
    <div className="tab-container">
      <Tabs>
        <TabList className="tab-list">
          <Tab>Title 1</Tab>
          <Tab>Title 2</Tab>
        </TabList>

        <TabPanel>
          <h2>Any content 1</h2>
          <p>
            This will cause scrolling if it's long enough.
            Add more text here to see the scrolling effect, if required.
          </p>
          <p>More content...</p>
          <p>More content...</p>
          <p>More content...</p>
          <p>More content...</p>
          <p>More content...</p>
          <p>More content...</p>
          <p>More content...</p>
          <p>More content...</p>
          <p>More content...</p>
          <p>More content...</p>
          <p>More content...</p>
          <p>More content...</p>
          <p>More content...</p>
          <p>More content...</p>
          <p>More content...</p>
          <p>More content...</p>
          <p>More content...</p>
          <p>More content...</p>
          <p>More content...</p>
          <p>More content...</p>
          <p>More content...</p>
          <p>More content...</p>
          <p>More content...</p>
          <p>More content...</p>
          <p>More content...</p>
          <p>More content...</p>
          <p>More content...</p>
          <p>More content...</p>
          <p>More content...</p>
          <p>More content...</p>
          <p>More content...</p>
          <p>More content...</p>
          <p>More content...</p>
          <p>More content...</p>
          <p>More content...</p>
        </TabPanel>
        <TabPanel>
          <h2>Any content 2</h2>
          <p>
            This is another content section with small content.
          </p>
          <p>More content...</p>
          <p>More content...</p>
          <p>More content...</p>
          <p>More content...</p>
          <p>More content...</p>
        </TabPanel>
      </Tabs>
    </div>
  );
}

export default App;

    这是操场上的代码： https: //playcode.io/2216306

    请告诉我这些更改之后您是否能看到所需的效果或者是否遇到任何错误。

    • 2

  2. 我宁愿看具有类似选项卡行为的导航，而不是强制选项卡组件具有粘性，选项卡组件旨在在内容中使用，因此应随页面滚动。

    您可以查看React Bootstrap 的 Navs 和选项卡或其他导航组件库。

    祝你好运！

    • -1

相关问题