@zstark/index-bar

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	类名	-