一个基于 React 的 IndexBar 组件;用于数据的序列号展示,常见应用为右侧索引栏、通讯录字母索引等。文档实例
![image](https://private-user-images.githubusercontent.com/56460015/324039059-7b9bfd48-afba-4613-9c7a-74022659bb9a.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3Mzk5MzI5MDYsIm5iZiI6MTczOTkzMjYwNiwicGF0aCI6Ii81NjQ2MDAxNS8zMjQwMzkwNTktN2I5YmZkNDgtYWZiYS00NjEzLTljN2EtNzQwMjI2NTliYjlhLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNTAyMTklMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjUwMjE5VDAyMzY0NlomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTRjNGVhOTMyZjJkYzk3MTBmNzI0NDE2MGZhMDMxODBhZGJhZTJiODBmZjkyYmFjMjgyMWIzOWE1YzE2M2VmOWEmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0In0.-UlpJLINFX_rZ6X72H_lcwSyPw8v5A4HIaYcc2rC0uA)
npm i indexbar-react -S
# or
yarn add indexbar-react -S
组件外层容器
属性名 | 说明 | 类型 | 默认值 |
---|---|---|---|
indexs | 右侧索引菜单数据 | string[] | [] |
分组标题列表
属性名 | 说明 | 类型 | 默认值 |
---|---|---|---|
index | 该分组属于哪个索引,取上方 indexs 中的每一项,用于列表分类 | string | 无 |
title | 每个分组的标题 | string | 无 |
children | 每一项的列表渲染内容,可根据需要自定义渲染逻辑 | React.ReactNode |
- 需控制组件容器为滚动区域,否则滚动失效;正确做法为下方 demo 中,给
content
元素设置为滚动区域 - 列表内容为业务数据,需要根据需求自己渲染,本组件只提供索引定位能力
MIT