Shadcn Admin Kit表单组件全攻略：TextInput到RichTextInput实战

Shadcn Admin Kit表单组件全攻略：TextInput到RichTextInput实战

【免费下载链接】shadcn-admin-kitComponent kit to build your Admin app with shadcn/ui项目地址: https://gitcode.com/gh_mirrors/sh/shadcn-admin-kit

Shadcn Admin Kit是基于shadcn/ui构建的强大组件套件，提供了从基础文本输入到富文本编辑的完整表单解决方案。本文将带您全面掌握TextInput、RichTextInput等核心表单组件的使用方法，帮助您快速构建专业级管理应用界面。

表单组件基础：SimpleForm容器

所有表单组件都需要在<SimpleForm>容器中使用，它提供了表单布局、验证、提交等核心功能。SimpleForm默认采用每行一个输入组件的布局，并在底部显示取消和保存按钮。

基本用法示例：

import { Edit, SimpleForm, TextInput, BooleanInput } from '@/components/admin'; export const ProductEdit = () => ( <Edit> <SimpleForm> <TextInput source="name" /> <BooleanInput source="available" /> </SimpleForm> </Edit> );

SimpleForm支持自定义验证、默认值和工具栏，满足各种复杂表单需求。详细文档请参考SimpleForm.md。

基础文本输入：TextInput组件

单行长文本输入

<TextInput>是最常用的表单组件，用于接收单行文本输入。它包装了Shadcn的<Input>组件，提供了表单绑定、验证等增强功能。

基本用法：

import { TextInput } from '@/components/admin'; <TextInput source="title" />

多行文本输入

通过设置multiline属性，TextInput可以转换为文本区域（textarea）：

<TextInput source="description" multiline rows={4} />

核心属性

⚠️ 注意：不要使用type="number"，这会导致值以字符串形式返回。应使用专门的NumberInput组件处理数字输入。

高级富文本编辑：RichTextInput组件

对于需要格式化文本的场景，Shadcn Admin Kit提供了功能强大的<RichTextInput>组件，基于TipTap编辑器实现，支持富文本编辑并以HTML格式存储内容。

安装

RichTextInput是可选组件，默认不包含在admin注册表中，需要单独安装：

npx shadcn@latest add https://marmelab.com/shadcn-admin-kit/r/rich-text-input.json

基本用法

import { Edit, SimpleForm } from '@/components/admin'; import { RichTextInput } from '@/components/rich-text-input'; const PostEdit = () => ( <Edit> <SimpleForm> <RichTextInput source="body" /> </SimpleForm> </Edit> );

自定义工具栏

默认工具栏包含丰富的格式化选项：撤销/重做、粗体/斜体/下划线、标题、文本颜色、列表、引用、链接和图片操作等。您也可以自定义工具栏：

import { RichTextInput, RichTextInputToolbar } from '@/components/rich-text-input'; import { Button } from '@/components/ui/button'; <RichTextInput source="body" toolbar={ <RichTextInputToolbar> <Button type="button" onClick={() => editor.chain().focus().toggleBold().run()}> 粗体 </Button> {/* 其他自定义按钮 */} </RichTextInputToolbar> } />

性能优化

RichTextInput依赖TipTap和ProseMirror库，会增加JavaScript包体积。对于不常用该组件的页面，建议使用懒加载：

const RichTextInput = React.lazy(() => import('@/components/rich-text-input').then((module) => ({ default: module.RichTextInput, })), );

实用表单组件推荐

除了TextInput和RichTextInput，Shadcn Admin Kit还提供了多种实用表单组件：

数组输入：ArrayInput

用于输入数组类型的数据，如标签列表、多值选择等。

用法示例：

import { ArrayInput, SimpleFormIterator, TextInput } from '@/components/admin'; <ArrayInput source="tags"> <SimpleFormIterator> <TextInput source="." /> </SimpleFormIterator> </ArrayInput>

自动完成输入：AutocompleteInput

提供搜索建议功能的高级输入组件，适合从大量选项中选择。

日期时间选择：DateTimeInput

用于选择日期和时间的专用组件，提供直观的日历界面。

表单验证最佳实践

Shadcn Admin Kit集成了react-hook-form，支持多种验证方式：

输入级验证

在Input组件上直接定义验证规则：

import { required, email, minLength } from 'ra-core'; <TextInput source="email" validate={[required(), email()]} /> <TextInput source="password" validate={[required(), minLength(8)]} />

表单级验证

在SimpleForm上定义整体验证规则：

const validateUser = (values) => { const errors = {}; if (!values.firstName) errors.firstName = '名字不能为空'; if (values.password !== values.confirmPassword) { errors.confirmPassword = '两次密码不一致'; } return errors; }; <SimpleForm validate={validateUser}> {/* 表单字段 */} </SimpleForm>

总结

Shadcn Admin Kit提供了从基础到高级的完整表单解决方案，TextInput满足日常文本输入需求，RichTextInput则处理复杂的富文本编辑场景。配合SimpleForm容器和其他专用输入组件，您可以轻松构建出功能完善、用户体验出色的管理应用表单界面。

所有组件都遵循shadcn/ui的设计理念，确保视觉一致性和交互体验。通过合理使用这些表单组件，您可以显著提高管理应用的开发效率和质量。

要开始使用Shadcn Admin Kit，只需克隆仓库并按照文档进行安装：

git clone https://gitcode.com/gh_mirrors/sh/shadcn-admin-kit

更多组件详情和高级用法，请参考项目文档。

【免费下载链接】shadcn-admin-kitComponent kit to build your Admin app with shadcn/ui项目地址: https://gitcode.com/gh_mirrors/sh/shadcn-admin-kit