Skip to main content

Tab

用于标记和选择。

基本用法​

function App() {
  return (
    <div className="ykui-demo-column">
      <Tabs defaultValue={1}>
        <Tabs.Panel label="tab 1" value={1}>
          Tab 1 Panel
        </Tabs.Panel>
        <Tabs.Panel label="tab 2" value={2}>
          Tab 2 Panel
        </Tabs.Panel>
      </Tabs>
    </div>
  );
}

自定义扩展区​

function App() {
  return (
    <div className="ykui-demo-column">
      <Tabs
        keepNode={true}
        defaultValue={1}
        rightExtraContent={
          <Button>登陆</Button>
        }
      >
        <Tabs.Panel label="tab 1" value={1}>
          Tab 1 Panel
        </Tabs.Panel>
        <Tabs.Panel label="tab 2" value={2}>
          Tab 2 Panel
        </Tabs.Panel>
      </Tabs>

      <Tabs
        defaultValue={1}
        leftExtraContent={
          <Button>登陆</Button>
        }
      >
        <Tabs.Panel label="tab 1" value={1}>
          Tab 1 Panel
        </Tabs.Panel>
        <Tabs.Panel label="tab 2" value={2}>
          Tab 2 Panel
        </Tabs.Panel>
      </Tabs>
    </div>
  );
}

API​

属性说明类型默认值
children内容ReactNode--
className类名string--
style样式CSSProperties--
value当前选中 Tabnumber〡string--
defaultValue默认选中 Tabnumber〡string--
keepNode是否隐藏节点boolean--
leftExtraContent左侧扩展ReactNode--
rightExtraContent右侧扩展ReactNode--
onChange切换时触发Func--