#TabSelect 页签选择

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

const options = [
  { value: "general", children: "常规" },
  { value: "advanced", children: "高级" },
  { value: "about", children: "关于" },
];

function App() {
  const [tab, setTab] = useState<string | number>("general");

  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
      <TabSelect options={options} value={tab} onChange={setTab} aria-label="视图" />
      <div>当前页签：{String(tab)}</div>
    </div>
  );
}

export default App;

import { TabSelect } from "ooui-react";

const options = [
  { value: "a", children: "甲" },
  { value: "b", children: "乙" },
  { value: "c", children: "丙", disabled: true },
];

function App() {
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
      <TabSelect options={options} defaultValue="a" />
      <TabSelect options={options} defaultValue="a" framed={false} />
    </div>
  );
}

export default App;