rc-scroll-nav-bar

rc-scroll-nav-bar

介绍

基于react的滚动导航组件

特性

• 支持React
• 支持TypeScript

安装

yarn add rc-scroll-nav-bar -S
or
npm add rc-scroll-nav-bar -S

如何使用

import { ScrollNavbar } from "rc-scroll-nav-bar";

function App() {
    const tabs = [
        {
            lable: '测试',
            value: 0,
        },
        {
            lable: '测试数据2',
            value: 1,
        },
        {
            lable: '测试数据3',
            value: 2,
        },
        {
            lable: '测试4',
            value: 3,
        },
        {
            lable: '测试数据5',
            value: 4,
        },
        {
            lable: '数据6',
            value: 5,
        },
        {
            lable: '数据7',
            value: 6,
        },
    ];

    return (
        <div className="App">
            <ScrollNavbar tabs={tabs}></ScrollNavbar>
        </div>
    );
}

export default App;

配置项

属性名	说明	类型	必填	默认值
fontSize	字体大小	number	false	16
height	高度	number	false	40
activeKey	激活索引	number	false	0
tabs	元素列表	tabsType[]	true	[]
right	右边固定内容	ReactNode	false	-
fixedStart	固定首个元素	boolean	false	true
rightClass	右边盒子类名	string	false	-
tail	尾部内容	ReactNode	false	-
offsetTop	距离顶部偏移距离	number	false	0
isSticky	是否启用粘性布局	boolean	false	true
activeLineOffsetTop	激活元素下方的横线距离文字的距离	number	false	0
scrollOffsetLeft	滚动元素偏移量	number	false	0
itemGap	元素间距	number	false	32
onRightClick	右边盒子点击事件	() => void	false	-
onChange	元素点击事件	(index: number, item: tabsType) => void	false	-

预览

License

MIT