Material UI (Scrollspy) - реагирует - используйте вкладки для перемещения по списку и автоматической прокрутки до индекса

#javascript #reactjs #typescript #tabs #material-ui

#javascript #reactjs #typescript #вкладки #материал-пользовательский интерфейс

Вопрос:

Если бы у меня был большой список элементов, каждый из которых имел категорию,

 const categories: string[] = [0, 1, 2, 3, 4, 5];
const items: {name: string, category: number}[] = [{name: "foo", category: 1}, {name: "bar", category: 1}, {name: "foobar", category: 2}, {name: "barfoo", category: 3}, ... etc.];

..и в material-ui они использовались в качестве заголовка вкладки для категорий:

   <AppBar>
    <Tabs
      value={tabIndex}
      onChange={handleChange}
      indicatorColor="secondary"
      variant="scrollable"
      scrollButtons="auto"
    >
      {categories.map((i) => (
        <Tab
          key={i}
          label={i}
        />
      ))}
    </Tabs>
  </AppBar>

Затем у меня был длинный список элементов под заголовком tabs, которые отсортированы по их категории.

Как я мог бы использовать вкладки для последовательного перемещения по списку путем автоматического перехода к первой категории в позиции на основе выбранной вкладки, а также автоматического обновления позиции вкладки при прокрутке мимо определенного первого индекса в списке.

Для наглядного примера:

Пример изображения для использования вкладок для перемещения по последовательному контенту, который необходимо прочитать в определенном порядке

Как я мог добиться чего-то подобного в material ui amp; react? В итоге,

Прокрутите большой список элементов, которые имеют и отсортированы по категориям
Автоматическая прокрутка до первой категории позиции списка из выбора вкладки
Автоматический выбор вкладки в зависимости от положения прокрутки списка

Ответ №1:

Правильный ответ приведен выше, но есть также этот пример CodeSandbox, который также будет работать.

Ответ №2:

Компонент, который вы ищете, — Scrollspy, и это будущий компонент material ui.

В настоящее время у них есть компонент, реализованный в документе material ui с именем AppTableOfContents. Если вы видите в документе справа, там есть раздел содержимого.

https://github.com/mui-org/material-ui/issues/16359 здесь я нашел два решения

Используйте react-scrollspy
Используйте useScrollspy Hook (попробуйте это)