反应原生按钮轮 - Javascript

简介

反应原生按钮轮是一个基于Javascript的UI组件，它提供了一种全新的方式来管理多个按钮之间的切换。与传统的按钮组不同， 不需要手动处理每个按钮的状态，而是只需关注当前选中的按钮即可。

功能特点

• 支持自定义样式
• 支持多种切换模式
• 支持动态添加/删除按钮
• 支持事件监听（选中/取消选中）

基本使用

import React, { useState } from 'react';
import ButtonLoop from './ButtonLoop';

function App() {
  const [activeIndex, setActiveIndex] = useState(0);

  const handleButtonSelect = (index) => {
    setActiveIndex(index);
  };

  return (
    <ButtonLoop activeIndex={activeIndex} onSelect={handleButtonSelect}>
      <button>按钮1</button>
      <button>按钮2</button>
      <button>按钮3</button>
    </ButtonLoop>
  );
}

export default App;

API

Props

| PropName | Type | Default | Description | | --------- | -------- | ------- | ------------------------------------------------- | | activeIndex | number | 0 | 当前选中的按钮索引 | | isCycled | boolean | false | 是否循环切换按钮 | | onSelect | function | | 按钮选中时的回调函数，参数为选中的按钮索引 |

方法

import { useRef } from 'react';
import ButtonLoop from './ButtonLoop';

function App() {
  const buttonLoopRef = useRef();

  const handleAddButton = () => {
    const button = document.createElement('button');
    button.innerHTML = `按钮${buttonLoopRef.current.buttons.length + 1}`;
    buttonLoopRef.current.addButton(button);
  };

  const handleRemoveButton = () => {
    buttonLoopRef.current.removeButton(buttonLoopRef.current.buttons.length - 1);
  };

  return (
    <>
      <ButtonLoop ref={buttonLoopRef}>
        <button>按钮1</button>
        <button>按钮2</button>
        <button>按钮3</button>
      </ButtonLoop>
      <button onClick={handleAddButton}>添加按钮</button>
      <button onClick={handleRemoveButton}>删除按钮</button>
    </>
  );
}

addButton(button)

添加一个按钮

removeButton(index)

删除指定索引的按钮

事件

| Event | Type | Description | | --------------- | -------- | ----------------------- | | onSelect | function | 按钮选中时的回调函数，参数为选中的按钮索引 | | onDeselect | function | 按钮取消选中时的回调函数，参数为取消选中的按钮索引 | | onActiveChanged | function | 按钮状态变化时的回调函数，参数为当前选中的按钮索引 |

样式

反应原生按钮轮提供了多个CSS类以供自定义样式：

.rnb-container {
  // 按钮容器样式
}

.rnb-button {
  // 普通按钮样式
}

.rnb-button.active {
  // 选中按钮样式
}

.rnb-button.disabled {
  // 禁用按钮样式
}