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 41 42 43 44 45 46 47 48 | 1x 1x 1x | import React, { useState } from "react"; import { Segment } from "@tencent/tea-component/lib/segment"; import { Switch } from "@tencent/tea-component/lib/switch"; import { Badge } from "@tencent/tea-component/lib/badge"; export default function SegmentExample() { const [value, setValue] = useState(2); const [rimless, setRimless] = useState(false); return ( <> <Segment rimless={rimless} value={value.toString()} onChange={value => setValue(parseInt(value, 10))} options={[ { text: "1个月", value: "1" }, { text: "2个月", value: "2" }, { text: "3个月", value: "3" }, { text: ( <> 半年 <Badge theme="warning" dark> 8.8折 </Badge> </> ), value: "6", }, { text: "1年", value: "12" }, { text: "2年", value: "24", bubble: "2 年享九折优惠" }, { text: "3年", value: "36", disabled: true, tooltip: "暂时不支持购买 3 年", }, ]} /> <section> 无边框样式: <Switch value={rimless} onChange={setRimless} /> </section> </> ); } |