标签输入

允许用户向输入字段添加标签的组件。

演示

React

Vue

import { TagsInput, TagsInputInput } from "@resolid/react-ui";

export default function App() {
  return (
    <TagsInput className={"max-w-80"} defaultValue={["React", "Vue"]}>
      <TagsInputInput placeholder={"请输入标签"} />
    </TagsInput>
  );
}

用法

import { TagsInput, TagsInputInput } from "@resolid/react-ui";

TagsInput: 标签输入的根容器。
TagsInputInput: 标签输入的输入框。

特点

可以是受控的，也可以是不受控的。
完整的键盘导航。
限制标签的数量。
接受剪贴板中的值。

举例

可控值

使用 value 和 onChange 属性来控制输入的值。

你输入了标签: React, Vue

React

Vue

import { TagsInput, TagsInputInput } from "@resolid/react-ui";
import { useState } from "react";

export default function App() {
  const [value, setValue] = useState(["React", "Vue"]);

  return (
    <div className={"flex flex-col gap-2"}>
      <p>你输入了标签: {value.join(", ")}</p>
      <TagsInput className={"max-w-80"} value={value} onChange={setValue}>
        <TagsInputInput placeholder={"请输入标签"} />
      </TagsInput>
    </div>
  );
}

限制数量

使用 max 属性可以限制标签输入的数量

React

Vue

import { TagsInput, TagsInputInput } from "@resolid/react-ui";

export default function App() {
  return (
    <TagsInput max={3} className={"max-w-80"} defaultValue={["React", "Vue"]}>
      <TagsInputInput placeholder={"请输入标签"} />
    </TagsInput>
  );
}

限制长度

TagsInputInput 的 maxLength 属性可以限制标签输入的长度

React

Vue

import { TagsInput, TagsInputInput } from "@resolid/react-ui";

export default function App() {
  return (
    <TagsInput className={"max-w-80"} defaultValue={["React", "Vue"]}>
      <TagsInputInput maxLength={6} placeholder={"请输入标签"} />
    </TagsInput>
  );
}

失去焦点增加

使用 addOnBlur 属性可以允许输入框失去焦点时添加标签

React

Vue

import { TagsInput, TagsInputInput } from "@resolid/react-ui";

export default function App() {
  return (
    <TagsInput addOnBlur className={"max-w-80"} defaultValue={["React", "Vue"]}>
      <TagsInputInput placeholder={"请输入标签"} />
    </TagsInput>
  );
}

允许粘贴

使用 addOnPaste 属性可以允许接受剪贴板中的值

React

Vue

import { TagsInput, TagsInputInput } from "@resolid/react-ui";

export default function App() {
  return (
    <TagsInput addOnPaste className={"max-w-80"} defaultValue={["React", "Vue"]}>
      <TagsInputInput placeholder={"请输入标签"} />
    </TagsInput>
  );
}

属性

TagsInput

属性	类型	默认值	必须
属性delimiter	简介触发新标签添加的字符或者正则	类型string \| RegExp	默认值","	必须false
属性addOnBlur	简介输入框失去焦点时是否添加标签	类型boolean	默认值false	必须false
属性addOnPaste	简介粘贴到输入框时是否添加标签	类型boolean	默认值false	必须false
属性size	简介大小	类型"xs" \| "sm" \| "md" \| "lg" \| "xl"	默认值"md"	必须false
属性max	简介最大标签数量	类型number	默认值Infinity	必须false
属性value	简介可控值	类型string[]	默认值-	必须false
属性defaultValue	简介默认值	类型string[]	默认值[]	必须false
属性onChange	简介 onChange 回调	类型(value: string[]) => void	默认值-	必须false
属性name	简介字段的名称, 提交表单时使用	类型string	默认值-	必须false
属性disabled	简介是否禁用	类型boolean	默认值false	必须false
属性required	简介是否必需	类型boolean	默认值false	必须false
属性readOnly	简介是否只读	类型boolean	默认值false	必须false
属性invalid	简介是否无效	类型boolean	默认值false	必须false

TagsInputInput

属性	类型	默认值	必须
属性placeholder	简介占位符文本	类型string	默认值-	必须false
属性maxLength	简介允许的最大字符数	类型number	默认值-	必须false
属性value	简介可控值	类型string	默认值-	必须false
属性defaultValue	简介输入框值	类型string	默认值""	必须false
属性onChange	简介 onChange 回调	类型(value: string) => void	默认值-	必须false

建议更改此页面