Início / coding / Perguntas / 79342247
Accepted
Michel
Asked: 2025-01-09 18:25:03 +0800 CST

Cabeçalhos fixos, com react-tabs

  • 772

Em um aplicativo web (NextJS/React), estou usando react-tabs para manipular guias.

Gostaria de saber como manter os cabeçalhos das abas fixos. Isso está impedindo que eles rolem para cima e desapareçam quando eu rolar para cima o conteúdo da página.

Depois de pesquisar na internet, tentei usar react-sticky, mas parece que não funciona.

Eu até tenho a impressão de que react-tabs e react-sticky não devem funcionar juntos. Diga-me se estou errado.

Aqui está o código atual relevante:

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>
)

Como posso obter o efeito que preciso ao usar react-tabs?

reactjs

2 respostas

  1. Best Answer

    Você pode conseguir isso usando CSS simples.

    1. Adicione um contêiner ao redor do <Tabs>componente
    2. Dê altura fixa ao recipiente acima
    3. Adicionar position: sticky;ao <TabList>componente.

    Aqui está um código de exemplo para você testar.

    Arquivo: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;
}

    Atualize o componente conforme abaixo para aplicar as classes CSS

    Arquivo: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;

    Aqui está o código em um playground: https://playcode.io/2216306

    Avise-me se você consegue ver o efeito desejado após essas alterações ou se encontrar algum erro.

    • 2

  2. Eu preferiria olhar para navegações que tenham um comportamento semelhante ao de uma guia em vez de forçar a fixação em um componente de guia, que deve ser usado dentro do conteúdo e, portanto, deve rolar com a página.

    Você pode dar uma olhada nas Navegações e guias do React Bootstrap ou em outras bibliotecas para componentes de navegação.

    Boa sorte!

    • -1

relate perguntas