Emblor 使用教程

Emblor 使用教程

emblor A fully-featured tag input component built with shadcn/ui 项目地址: https://gitcode.com/gh_mirrors/em/emblor

1. 项目介绍

Emblor 是一个功能齐全、可高度自定义且易于访问的标签输入组件，基于 Shadcn UI 构建。它提供了自动完成、验证、标签数量限制、重复标签处理、字符限制、排序、截断、弹出提示、键盘导航、自定义渲染、可访问性、拖放排序、只读模式、自定义分隔符和粘贴添加等特性。

2. 项目快速启动

要使用 Emblor，首先需要安装它。在您的项目中运行以下命令：

pnpm add emblor

以下是一个简单的示例，展示了如何初始化组件并设置初始标签和建议列表：

import { useState } from 'react';
import { TagInput } from 'emblor';

function App() {
  const [tags, setTags] = useState([]);

  return (
    <div>
      <TagInput
        placeholder="输入标签"
        tags={tags}
        setTags={setTags}
      />
    </div>
  );
}

export default App;

在这个例子中，TagInput 组件接受 tags 和 setTags 来管理和更新标签列表。

3. 应用案例和最佳实践

应用案例

假设我们正在构建一个允许用户输入兴趣话题的表单，我们可以使用 Emblor 来收集用户输入的话题标签。

import { useForm, Controller } from 'react-hook-form';
import { TagInput } from 'emblor';

function InterestForm() {
  const { control } = useForm();
  const [tags, setTags] = useState([]);

  return (
    <form onSubmit={handleSubmit}>
      <Controller
        name="topics"
        control={control}
        render={({ field }) => (
          <TagInput
            {...field}
            placeholder="输入您感兴趣的话题"
            tags={tags}
            setTags={setTags}
          />
        )}
      />
      <button type="submit">提交</button>
    </form>
  );
}

最佳实践

• 确保在使用组件前已经定义了所有必要的 props。
• 对于表单验证，使用 react-hook-form 或类似的库来简化流程。
• 在生产环境中，确保禁用或隐藏不必要的开发工具提示和日志。

4. 典型生态项目

目前，Emblor 可以与 Shadcn UI 的其他组件无缝集成，创建一个统一和一致的用户界面。随着开源社区的发展，可能会有更多的项目和组件与 Emblor 集成，形成一个生态系统，例如：

• 一个论坛软件，使用 Emblor 来标记帖子的话题。
• 一个任务管理应用，使用 Emblor 来分配和跟踪标签化的任务。

Emblor 的开源性质鼓励开发者根据需求进行定制和扩展，从而推动生态系统的成长和多样性。

emblor A fully-featured tag input component built with shadcn/ui 项目地址: https://gitcode.com/gh_mirrors/em/emblor