indexBar

PC 端 indexBar 插件.

Example

Live Demo

🚀 Quick Start

npm install @zstark/index-bar --prod

import IndexBar, { scrollIntoView } from '@zstark/index-bar';

const Demo = () => {
  const onChange = useCallback((letter) => {
    const container = containerRef.current;
    const target = document.querySelector(`.${letter}`);
    if (target) {
      scrollIntoView(container, document.querySelector(`.${letter}`), -12);
    }
  }, []);

  return;
  <IndexBar letters={letters} onChange={onChange} right={10}>
    {/* you content */}
  </IndexBar>;
};

props

| 属性 | 描述 | 默认值 | | ------------------------------------------------- | -------------- | ---------------------------- | | letters: string|string[] | 右侧字母索引 | 'ABCDEFGHIJKLMNOPQRSTUVWXYZ' | | onChange: (letter: string, index: number) => void | | - | | right: number | 样式. right 值 | - | | left: number | 样式. left 值 | - | | className: string | 类名 | - |