分段控制器

用于从一组线性选项中选择一个选项

ReactVueSolid

import { SegmentGroup } from "@chakra-ui/react"

const Demo = () => {
  return (
    <SegmentGroup.Root defaultValue="React">
      <SegmentGroup.Indicator />
      <SegmentGroup.Items items={["React", "Vue", "Solid"]} />
    </SegmentGroup.Root>
  )
}

用法

import { SegmentGroup } from "@chakra-ui/react"

<SegmentGroup.Root>
  <SegmentGroup.Indicator />
  <SegmentGroup.Item>
    <SegmentGroup.ItemText />
    <SegmentGroup.ItemHiddenInput />
  </SegmentGroup.Item>
</SegmentGroup.Root>

快捷方式

SegmentGroup 组件还提供了一组常用用例的快捷方式。

分段组项

SegmentGroupItems 快捷方式根据 items 属性渲染项目列表。

这可行

<>
  {items.map((item) => (
    <SegmentGroup.Item key={item.value} value={item.value}>
      <SegmentGroup.ItemText>{item.label}</SegmentGroup.ItemText>
      <SegmentGroup.ItemHiddenInput />
    </SegmentGroup.Item>
  ))}
</>

如果您不需要自定义项目，这可能更简洁

<SegmentGroup.Items items={items} />

示例

尺寸

使用 size 属性来更改分段控制器的尺寸。

import { For, SegmentGroup, Stack, Text, VStack } from "@chakra-ui/react"

const Demo = () => {
  return (
    <Stack gap="5" align="flex-start">
      <For each={["xs", "sm", "md", "lg"]}>
        {(size) => (
          <VStack key={size} align="flex-start">
            <SegmentGroup.Root size={size} defaultValue="React">
              <SegmentGroup.Indicator />
              <SegmentGroup.Items items={["React", "Vue", "Solid"]} />
            </SegmentGroup.Root>
            <Text>size = {size}</Text>
          </VStack>
        )}
      </For>
    </Stack>
  )
}

受控

使用 value 和 onValueChange 属性来控制选定的项目。

ReactVueSolid

"use client"

import { SegmentGroup } from "@chakra-ui/react"
import { useState } from "react"

const Demo = () => {
  const [value, setValue] = useState<string | null>("React")
  return (
    <SegmentGroup.Root value={value} onValueChange={(e) => setValue(e.value)}>
      <SegmentGroup.Indicator />
      <SegmentGroup.Items items={["React", "Vue", "Solid"]} />
    </SegmentGroup.Root>
  )
}

Hook 表单

这是一个如何将 SegmentedControl 与 react-hook-form 结合使用的示例。

"use client"

import { Button, Field, SegmentGroup, Stack } from "@chakra-ui/react"
import { zodResolver } from "@hookform/resolvers/zod"
import { Controller, useForm } from "react-hook-form"
import { z } from "zod"

const formSchema = z.object({
  fontSize: z.string({ message: "Font size is required" }),
})

type FormValues = z.infer<typeof formSchema>

const Demo = () => {
  const {
    handleSubmit,
    formState: { errors },
    control,
  } = useForm<FormValues>({
    defaultValues: { fontSize: "md" },
    resolver: zodResolver(formSchema),
  })

  const onSubmit = handleSubmit((data) => console.log(data))

  return (
    <form onSubmit={onSubmit}>
      <Stack gap="4" align="flex-start">
        <Controller
          control={control}
          name="fontSize"
          render={({ field }) => (
            <Field.Root invalid={!!errors.fontSize}>
              <Field.Label>Font size</Field.Label>
              <SegmentGroup.Root
                size="sm"
                onBlur={field.onBlur}
                name={field.name}
                value={field.value}
                onValueChange={({ value }) => field.onChange(value)}
              >
                <SegmentGroup.Items items={["sm", "md", "lg"]} />
                <SegmentGroup.Indicator />
              </SegmentGroup.Root>
              <Field.ErrorText>{errors.fontSize?.message}</Field.ErrorText>
            </Field.Root>
          )}
        />

        <Button size="sm" type="submit">
          Submit
        </Button>
      </Stack>
    </form>
  )
}

垂直

默认情况下，分段控制器是水平的。将 orientation 属性设置为 vertical 可以更改分段控制器的方向。

ReactVueSolid

import { SegmentGroup } from "@chakra-ui/react"

const Demo = () => {
  return (
    <SegmentGroup.Root defaultValue="React" orientation="vertical">
      <SegmentGroup.Indicator />
      <SegmentGroup.Items items={["React", "Vue", "Solid"]} />
    </SegmentGroup.Root>
  )
}

禁用

使用 disabled 属性来禁用分段控制器。

ReactVueSolid

import { SegmentGroup } from "@chakra-ui/react"

const Demo = () => {
  return (
    <SegmentGroup.Root disabled defaultValue="React">
      <SegmentGroup.Indicator />
      <SegmentGroup.Items items={["React", "Vue", "Solid"]} />
    </SegmentGroup.Root>
  )
}

禁用项

在项目上使用 disabled 属性来禁用它。

ReactVueSolid

import { SegmentGroup } from "@chakra-ui/react"

const Demo = () => {
  return (
    <SegmentGroup.Root defaultValue="React">
      <SegmentGroup.Indicator />
      <SegmentGroup.Items
        items={[
          { label: "React", value: "React" },
          { label: "Vue", value: "Vue", disabled: true },
          { label: "Solid", value: "Solid" },
        ]}
      />
    </SegmentGroup.Root>
  )
}

图标

将 label 渲染为 ReactNode 以渲染图标。

表格

看板

列表

import { HStack, SegmentGroup } from "@chakra-ui/react"
import { LuGrid2X2, LuList, LuTable } from "react-icons/lu"

const Demo = () => {
  return (
    <SegmentGroup.Root defaultValue="table">
      <SegmentGroup.Indicator />
      <SegmentGroup.Items
        items={[
          {
            value: "table",
            label: (
              <HStack>
                <LuTable />
                Table
              </HStack>
            ),
          },
          {
            value: "board",
            label: (
              <HStack>
                <LuGrid2X2 />
                Board
              </HStack>
            ),
          },
          {
            value: "list",
            label: (
              <HStack>
                <LuList />
                List
              </HStack>
            ),
          },
        ]}
      />
    </SegmentGroup.Root>
  )
}

卡片

这是一个在 Card 中使用 SegmentedControl 的示例。

import { Button, Card, Field, Heading, SegmentGroup } from "@chakra-ui/react"
import { LuSearch } from "react-icons/lu"

const Demo = () => {
  return (
    <Card.Root width="320px">
      <Card.Header>
        <Heading size="lg">Find your dream home</Heading>
      </Card.Header>
      <Card.Body gap="6">
        <Field.Root>
          <Field.Label>Bedrooms</Field.Label>
          <SegmentGroup.Root defaultValue="Any">
            <SegmentGroup.Indicator />
            <SegmentGroup.Items items={["Any", "1", "2", "3", "3+"]} />
          </SegmentGroup.Root>
        </Field.Root>
        <Field.Root>
          <Field.Label>Beds</Field.Label>
          <SegmentGroup.Root defaultValue="1">
            <SegmentGroup.Indicator />
            <SegmentGroup.Items items={["Any", "1", "2", "2+"]} />
          </SegmentGroup.Root>
        </Field.Root>
        <Field.Root>
          <Field.Label>Bathrooms</Field.Label>
          <SegmentGroup.Root defaultValue="3">
            <SegmentGroup.Indicator />
            <SegmentGroup.Items items={["Any", "1", "2", "3"]} />
          </SegmentGroup.Root>
        </Field.Root>
      </Card.Body>
      <Card.Footer justifyContent="space-between" mt="3">
        <Button variant="surface">Reset</Button>
        <Button>
          <LuSearch /> 20 results
        </Button>
      </Card.Footer>
    </Card.Root>
  )
}

属性

根

属性	默认值	类型
`colorPalette`	`'灰色'`	`'灰色' \| '红色' \| '橙色' \| '黄色' \| '绿色' \| '青色' \| '蓝色' \| '深青色' \| '紫色' \| '粉色'` 组件的调色板
`size`	`'中'`	`'超小' \| '小' \| '中' \| '大'` 组件的尺寸
`asChild`		`布尔值` 使用提供的子元素作为默认渲染元素，结合它们的属性和行为。欲了解更多详情，请阅读我们的组合指南。
`defaultValue`		`字符串` 分段组首次渲染时的初始值。当您不需要控制分段组的状态时使用。
`disabled`		`布尔值` 如果为 `true`，则单选组将被禁用
`form`		`字符串` 底层输入的关联表单。
`id`		`字符串` 机器的唯一标识符。
`ids`		`Partial<{ root: string label: string indicator: string item(value: string): string itemLabel(value: string): string itemControl(value: string): string itemHiddenInput(value: string): string }>` 单选框中元素的ID。对于组合很有用。
`name`		`字符串` 单选框中输入字段的名称（用于表单提交）。
`onValueChange`		`(details: ValueChangeDetails) => void` 单选框被选中时调用的函数
`orientation`		`'水平' \| '垂直'` 单选组的方向
`readOnly`		`布尔值` 复选框是否只读
`value`		`字符串` 选定单选框的值

评分

选择器 (原生)

分段控制器

.css-vfo6uh{color:var(--chakra-colors-fg);-webkit-text-decoration:underline;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:2px;text-decoration-color:var(--chakra-colors-border-emphasized);font-weight:500;}用法

找到您的梦想家园

用法