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) }; } |