Segmented 分段控制器

export function SegmentedBasic() {  const [value, setValue] = useState<string>("Mon");  return (    <div style={stack}>      <ElSegmented value={value} onChange={(v) => setValue(v as string)} options={DAY_OPTIONS} size="large" />      <ElSegmented value={value} onChange={(v) => setValue(v as string)} options={DAY_OPTIONS} />      <ElSegmented value={value} onChange={(v) => setValue(v as string)} options={DAY_OPTIONS} size="small" />    </div>  );}

export function SegmentedCustomDirection() {  const [value, setValue] = useState<string>("Apple");  const [direction, setDirection] = useState<"horizontal" | "vertical">("horizontal");  const [size, setSize] = useState<ComponentSize>("default");  const options = FRUIT_OPTIONS.map((item) =>    item.value === "Watermelon" ? { ...item, disabled: true } : item,  );  return (    <div>      <ElSegmented        value={size}        onChange={(v) => setSize(v as ComponentSize)}        options={["large", "default", "small"]}        style={{ marginBottom: 16 }}      />      <br />      <ElSegmented        value={direction}        onChange={(v) => setDirection(v as "horizontal" | "vertical")}        options={[          { label: "Horizontal", value: "horizontal" },          { label: "Vertical", value: "vertical" },        ]}        style={{ marginBottom: 16 }}      />      <br />      <ElSegmented        value={value}        onChange={(v) => setValue(v as string)}        options={options}        direction={direction}        size={size}      >        {(item) => {          const option = item as { label: string; icon: string };          return (            <div              style={{                display: "flex",                flexDirection: "column",                alignItems: "center",                gap: "0.5rem",                padding: direction === "horizontal" ? "0.5rem" : undefined,              }}            >              <ElIcon size={20}>                <FruitIcon name={option.icon} />              </ElIcon>              <div>{option.label}</div>            </div>          );        }}      </ElSegmented>    </div>  );}

export function SegmentedDisabled() {  const [value, setValue] = useState<string>("Mon");  const options = [    { label: "Mon", value: "Mon", disabled: true },    { label: "Tue", value: "Tue" },    { label: "Wed", value: "Wed", disabled: true },    { label: "Thu", value: "Thu" },    { label: "Fri", value: "Fri", disabled: true },    { label: "Sat", value: "Sat" },    { label: "Sun", value: "Sun" },  ];  return (    <div style={stack}>      <ElSegmented value={value} onChange={(v) => setValue(v as string)} options={options} disabled />      <ElSegmented value={value} onChange={(v) => setValue(v as string)} options={options} />    </div>  );}

export function SegmentedAliases() {  const [value, setValue] = useState<string>("Mon");  const optionProps = { label: "myLabel", value: "myValue", disabled: "myDisabled" };  const options = [    { myLabel: "Mon", myValue: "Mon", myDisabled: true },    { myLabel: "Tue", myValue: "Tue" },    { myLabel: "Wed", myValue: "Wed", myDisabled: true },    { myLabel: "Thu", myValue: "Thu" },    { myLabel: "Fri", myValue: "Fri", myDisabled: true },    { myLabel: "Sat", myValue: "Sat" },    { myLabel: "Sun", myValue: "Sun" },  ];  return (    <ElSegmented value={value} onChange={(v) => setValue(v as string)} options={options} optionProps={optionProps} />  );}

export function SegmentedBlock() {  const [value, setValue] = useState<string>("Mon");  const options = [    "Mon",    "Tue",    "Wed",    "Thu",    "Fri",    "Sat",    "Sunday long long long long long long long",  ];  return <ElSegmented value={value} onChange={(v) => setValue(v as string)} options={options} block />;}

export function SegmentedCustomContent() {  const [value, setValue] = useState<string>("Apple");  return (    <ElSegmented value={value} onChange={(v) => setValue(v as string)} options={FRUIT_OPTIONS}>      {(item) => {        const option = item as { label: string; icon: string };        return (          <div            style={{              display: "flex",              flexDirection: "column",              alignItems: "center",              gap: "0.5rem",              padding: "0.5rem",            }}          >            <ElIcon size={20}>              <FruitIcon name={option.icon} />            </ElIcon>            <div>{option.label}</div>          </div>        );      }}    </ElSegmented>  );}

export function SegmentedCustomStyle() {  const [value, setValue] = useState<string>("Delicacy");  const options = ["Delicacy", "Desserts&Drinks", "Fresh foods", "Supermarket"];  const customVars = {    "--el-segmented-item-selected-color": "var(--el-text-color-primary)",    "--el-segmented-item-selected-bg-color": "#ffd100",    "--el-border-radius-base": "16px",  } as CSSProperties;  return (    <ElSegmented      value={value}      onChange={(v) => setValue(v as string)}      options={options}      style={customVars}    />  );}