Tag 标签组件 #

import { Tag, TagLabel, TagLeftIcon, TagRightIcon, TagCloseButton } from '@chakra-ui/react'

function Example() {
  return (
    <Tag>
      <TagLabel>默认标签</TagLabel>
    </Tag>
  )
}

<Tag size="sm"><TagLabel>小标签</TagLabel></Tag>
<Tag size="md"><TagLabel>中等标签</TagLabel></Tag>
<Tag size="lg"><TagLabel>大标签</TagLabel></Tag>

<Tag variant="subtle"><TagLabel>柔和</TagLabel></Tag>
<Tag variant="solid"><TagLabel>实心</TagLabel></Tag>
<Tag variant="outline"><TagLabel>轮廓</TagLabel></Tag>

<Tag colorScheme="green"><TagLabel>成功</TagLabel></Tag>
<Tag colorScheme="red"><TagLabel>错误</TagLabel></Tag>
<Tag colorScheme="blue"><TagLabel>信息</TagLabel></Tag>
<Tag colorScheme="orange"><TagLabel>警告</TagLabel></Tag>

import { AddIcon, CheckIcon } from '@chakra-ui/icons'

<Tag>
  <TagLeftIcon as={AddIcon} />
  <TagLabel>添加</TagLabel>
</Tag>

<Tag>
  <TagLabel>完成</TagLabel>
  <TagRightIcon as={CheckIcon} />
</Tag>

<Tag>
  <TagLabel>可关闭</TagLabel>
  <TagCloseButton />
</Tag>

import { HStack } from '@chakra-ui/react'

<HStack spacing={4}>
  <Tag size="lg" colorScheme="red" borderRadius="full">
    <TagLabel>红色</TagLabel>
  </Tag>
  <Tag size="lg" colorScheme="green" borderRadius="full">
    <TagLabel>绿色</TagLabel>
  </Tag>
  <Tag size="lg" colorScheme="blue" borderRadius="full">
    <TagLabel>蓝色</TagLabel>
  </Tag>
</HStack>

function SkillTags({ skills }) {
  const [selected, setSelected] = useState([])

  const toggleSkill = (skill) => {
    if (selected.includes(skill)) {
      setSelected(selected.filter((s) => s !== skill))
    } else {
      setSelected([...selected, skill])
    }
  }

  return (
    <HStack spacing={2} wrap="wrap">
      {skills.map((skill) => (
        <Tag
          key={skill}
          size="lg"
          variant={selected.includes(skill) ? 'solid' : 'outline'}
          colorScheme="blue"
          cursor="pointer"
          onClick={() => toggleSkill(skill)}
        >
          <TagLabel>{skill}</TagLabel>
        </Tag>
      ))}
    </HStack>
  )
}

function InputTags() {
  const [tags, setTags] = useState(['React', 'Chakra UI'])
  const [input, setInput] = useState('')

  const addTag = () => {
    if (input && !tags.includes(input)) {
      setTags([...tags, input])
      setInput('')
    }
  }

  const removeTag = (tag) => {
    setTags(tags.filter((t) => t !== tag))
  }

  return (
    <Box>
      <HStack spacing={2} wrap="wrap" mb={2}>
        {tags.map((tag) => (
          <Tag key={tag} size="md" borderRadius="full" variant="solid" colorScheme="blue">
            <TagLabel>{tag}</TagLabel>
            <TagCloseButton onClick={() => removeTag(tag)} />
          </Tag>
        ))}
      </HStack>
      <Input
        value={input}
        onChange={(e) => setInput(e.target.value)}
        onKeyDown={(e) => e.key === 'Enter' && addTag()}
        placeholder="添加标签"
        size="sm"
      />
    </Box>
  )
}