#ButtonSelect 按钮选择

import { useState } from "react";
import { ButtonSelect } from "ooui-react";

const options = [
  { value: "left", icon: "alignLeft", children: "左对齐" },
  { value: "center", icon: "alignCenter", children: "居中" },
  { value: "right", icon: "alignRight", children: "右对齐" },
];

function App() {
  const [align, setAlign] = useState<string | number>("left");

  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
      <ButtonSelect options={options} value={align} onChange={setAlign} aria-label="对齐" />
      <div>当前对齐：{String(align)}</div>
    </div>
  );
}

export default App;

import { ButtonSelect } from "ooui-react";

function App() {
  return (
    <ButtonSelect
      defaultValue="a"
      options={[
        { value: "a", children: "可用" },
        { value: "b", children: "无边框", framed: false },
        { value: "c", children: "被禁用", disabled: true },
        { value: "d", children: "也可用" },
      ]}
    />
  );
}

export default App;