AutoSliderList 自动滑块

一个按钮列表组件，点击某个按钮滑块会自动滑到对应的位置。

前置条件

在react项目入口文件中引入样式，默认为src/main.tsx。

import 'ono-react-element/dist/style/AutoSliderList.css'

基础用法

import React, { useState } from'react'
import { AutoSliderList } from 'ono-react-element'

function App() {
    const list = [
        'html',
        'css',
        'javascript',
        'typescript',
        'vue',
        'angular',
        'react'
    ]

    return <div>
        <AutoSliderList
            style={{ gap: 8, padding: 8, border: '2px dashed #ccc' }}
            sliderStyle={{ background: 'pink', borderRadius: 8 }}
            list={list}
            sliderTransitionTimingFunction="linear"
        >
        {({ item, isActive }) => (
            <li
                key={item}
                style={{
                    width: '100%',
                    height: 'fit-content',
                    padding: '4px 8px',
                    display: 'flex',
                    justifyContent: 'center',
                    alignItems: 'center',
                    cursor: 'pointer',
                    color: isActive ? '#fff' : '#333'
                }}
            >   
                {item}
            </li>
        )}
      </AutoSliderList>
    </div>
}

export default App;

使用当前下标属性

import React, { useState } from'react'
import { AutoSliderList } from 'ono-react-element'

function App() {
    const list = [
        'html',
        'css',
        'javascript',
        'typescript',
        'vue',
        'angular',
        'react'
    ]

    return (
        <AutoSliderList
            list={list}
            style={{ gap: 8, padding: 8, border: '2px dashed #ccc' }}
            sliderStyle={{ background: 'pink', borderRadius: 8 }}
            currentIndex={list.findIndex(item => item === 'javascript')}
            sliderTransitionTimingFunction="linear"
        >
            {({ item, isActive }) => (
                <li
                    key={item}
                    style={{
                        width: '100%',
                        height: 'fit-content',
                        padding: '4px 8px',
                        display: 'flex',
                        justifyContent: 'center',
                        alignItems: 'center',
                        cursor: 'pointer',
                        color: isActive ? '#fff' : '#333'
                    }}
                >
                    {item}
                </li>
            )}
        </AutoSliderList>
    )
}

export default App;

API

通用属性参考：通用属性

参数	说明	类型	默认值	是否必填
list	列表	T[]	-	是
disable	是否禁止	boolean	false	否
children	子元素	({item, index, isActive}: {item: T; index: number; isActive: boolean}) => JSX.Element	-	是
className	自定义样式类名	string	-	否
style	自定义样式对象	CSSProperties	-	否
sliderClassName	自定义滑块样式类名	string	-	否
sliderStyle	自定义滑块样式对象	CSSProperties	-	否
sliderBox	滑块	JSX.Element	JSX.Element	否
currentIndex	当前下标	number	0	否
duration	滑块滑动动画时长	number	300	否
direction	方向	Horizontal|Vertical	Horizontal	否
sliderTransitionTimingFunction	滑块动画效果	string	ease-in-out	否