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 | 1x 1x 3x | import React, { useState } from "react"; import { Tabs, TabPanel } from "@tencent/tea-component/lib/tabs"; import { Button } from "@tencent/tea-component/lib/button"; export default function TabsExample() { const [tabs, setTabs] = useState([ { id: "1", label: "Tab-1", onClose: remove }, { id: "2", label: "Tab-2", onClose: remove }, { id: "3", label: "Tab-3", onClose: remove }, ]); function add() { setTabs(tabs => [ ...tabs, { id: String(Date.now()), label: "New Tab", onClose: remove }, ]); } function remove({ id }) { setTabs(tabs => tabs.filter(tab => tab.id !== id)); } return ( <Tabs tabs={tabs} addon={<Button type="icon" icon="plus" onClick={add} />}> {tabs.map(tab => ( <TabPanel id={tab.id} key={tab.id}> {tab.label} </TabPanel> ))} </Tabs> ); } |