All files / src/segment/_example SegmentGroupExample.jsx

80% Statements 4/5
100% Branches 0/0
50% Functions 1/2
80% Lines 4/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      1x           1x                                 1x   1x                  
import React, { useState } from "react";
import { Segment } from "@tencent/tea-component/lib/segment";
 
const groups = {
  hn: "华南地区",
  hb: "华北地区",
  hd: "华东地区",
};
 
const options = [
  { groupKey: "hn", text: "广州", value: "1" },
  { groupKey: "hn", text: "深圳金融", value: "2" },
  { groupKey: "hb", text: "北京", value: "3" },
  { groupKey: "hb", text: "天津", value: "4" },
  { groupKey: "hd", text: "上海", value: "5" },
  { groupKey: "hd", text: "上海金融", value: "6", bubble: "上海金融" },
  {
    groupKey: "hd",
    text: "南京",
    value: "7",
    disabled: true,
    tooltip: "暂不支持",
  },
];
 
export default function SegmentExample() {
  const [value, setValue] = useState(2);
 
  return (
    <Segment
      value={value.toString()}
      onChange={value => setValue(parseInt(value, 10))}
      options={options}
      groups={groups}
    />
  );
}