| 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950 |
- import { PackageManagerTabs } from '@theme';
- # 快速上手
- ## 如何使用？
- ### 通过包引用使用
- 官方表单物料可以直接通过包引用使用：
- <PackageManagerTabs command="install @flowgram.ai/form-materials" />
- ```tsx
- import { JsonSchemaEditor } from '@flowgram.ai/form-materials'
- ```
- ### 通过 CLI 添加物料源代码使用
- 如果业务对组件有定制诉求（如：更改文案、样式、业务逻辑），推荐 **通过 CLI 将物料源代码添加到项目中进行定制**：
- ```bash
- npx @flowgram.ai/cli@latest materials
- ```
- 运行后 CLI 会提示用户选择要添加到项目中的物料:
- ```console
- ? Select one material to add: (Use arrow keys)
- ❯ components/json-schema-editor
- components/type-selector
- components/variable-selector
- ```
- 使用者也可以直接在 CLI 中添加指定物料的源代码:
- ```bash
- npx @flowgram.ai/cli@latest materials components/json-schema-editor
- ```
- CLI 运行成功后，相关物料会自动添加到当前项目下的 `src/form-materials` 目录下
- :::warning 注意事项
- 1. 官方物料目前底层基于 [Semi Design](https://semi.design/) 实现，业务如果有底层组件库的诉求，可以通过 CLI 复制源码进行替换
- 2. 一些物料会依赖一些第三方 npm 库，这些库会在 CLI 运行时自动安装
- 3. 一些物料会依赖另外一些官方物料，这些被依赖的物料源代码在 CLI 运行时会一起被添加到项目中去
- :::
|
