Chakra 3.2

发布·

2024年11月21日

Segun Adebayo

@thesegunadebayo

我们很高兴地宣布 Chakra UI v3.2.0 发布！本次发布带来了多项令人兴奋的新功能和改进，以增强您的开发体验。

ColorPicker (预览)

新的ColorPicker 组件允许用户选择多种格式的颜色，包括 HSL、RGB 和 HSB。此组件非常适用于需要复杂颜色选择功能的应用程序。

颜色

"use client"

import { ColorPicker, HStack, Portal, parseColor } from "@chakra-ui/react"

const Demo = () => {
  return (
    <ColorPicker.Root defaultValue={parseColor("#eb5e41")} maxW="200px">
      <ColorPicker.HiddenInput />
      <ColorPicker.Label>Color</ColorPicker.Label>
      <ColorPicker.Control>
        <ColorPicker.Input />
        <ColorPicker.Trigger />
      </ColorPicker.Control>
      <Portal>
        <ColorPicker.Positioner>
          <ColorPicker.Content>
            <ColorPicker.Area />
            <HStack>
              <ColorPicker.EyeDropper size="xs" variant="outline" />
              <ColorPicker.Sliders />
            </HStack>
          </ColorPicker.Content>
        </ColorPicker.Positioner>
      </Portal>
    </ColorPicker.Root>
  )
}

ColorSwatch

除了 ColorPicker，我们还添加了 ColorSwatch 组件用于颜色预览。这个简单而强大的组件让您可以在 UI 中轻松显示颜色样本。

import { HStack } from "@chakra-ui/react"
import { ColorSwatch } from "@chakra-ui/react"
import { For } from "@chakra-ui/react"

const Demo = () => {
  return (
    <HStack>
      <For each={["2xs", "xs", "sm", "md", "lg", "xl", "2xl"]}>
        {(size) => <ColorSwatch key={size} value="#bada55" size={size} />}
      </For>
    </HStack>
  )
}

新示例

输入掩码

我们展示了如何将 use-mask-input 库与 Input 组件结合使用以实现输入值掩码。这对于格式化电话号码和信用卡号特别有用。

"use client"

import { Input } from "@chakra-ui/react"
import { withMask } from "use-mask-input"

const Demo = () => {
  return (
    <Input placeholder="(99) 99999-9999" ref={withMask("(99) 99999-9999")} />
  )
}