All files / src/tabs/_example TabsExample.jsx

83.33% Statements 5/6
66.67% Branches 2/3
66.67% Functions 2/3
100% Lines 5/5

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40          1x               1x   1x                                         1x 1x    
import React, { useState } from "react";
import { Tabs, TabPanel } from "@tencent/tea-component/lib/tabs";
import { Switch } from "@tencent/tea-component/lib/switch";
 
export default function TabsExample() {
  const tabs = [
    { id: "basic", label: "基本信息" },
    { id: "network", label: "弹性网卡" },
    { id: "monitor", label: "监控信息" },
    { id: "sg", label: "安全组", disabled: true },
    { id: "oplog", label: "操作日志" },
  ];
 
  const verticalSwitch = useSwitch();
 
  return (
    <>
      <section>
        <Tabs tabs={tabs} placement={verticalSwitch.value ? "left" : "top"}>
          <p>当前选项卡:</p>
          <TabPanel id="basic">基本信息</TabPanel>
          <TabPanel id="network">性网卡</TabPanel>
          <TabPanel id="monitor">基本信息</TabPanel>
          <TabPanel id="sg">安全组</TabPanel>
          <TabPanel id="oplog">操作日志</TabPanel>
        </Tabs>
      </section>
      <hr />
      <section>
        <Switch {...verticalSwitch}>垂直布局</Switch>
      </section>
    </>
  );
}
 
function useSwitch(defaultChecked = false) {
  const [value, onChange] = useState(defaultChecked);
  return { value, onChange: value => onChange(value) };
}