FireCMS 用户界面
FireCMS 用户界面 是一套高质量的组件,可以用来构建自己的自定义视图。 你们可以
使用这些组件构建您自己的 FireCMS 视图,或者在任何其他反应应用程序中。 你只需要安装
tailwindcss 编辑 @firecms/ui 软件包.
为什么造这个UI工具箱?
FireCMS一直使用MUI直到3.0版本. MUI提供随时可以使用带有直观API的组件,但它也提供 有很多复杂和昂贵的。 我们想建造一个更简单更灵活的UI工具箱 在任何反应项目, 不只是在FireCMS. 我们还想让从MUI到我们新的UI工具包的过渡变得容易一些,因此我们尽可能保持API的相似. 结果是一套易于使用、易于定制的组件, 表现得更好 并有一个更小的捆绑尺寸.
这些组件主要使用 Radix 用户界面 原始人和 尾风。这意味着你可以轻松地定制它们 使用尾风类或使用 CSS 来覆盖样式.
所有组件均从
@firecms/ui软件包。 这些是内部使用的相同组件 FireCMS 系统。 。 。 .
安装
如果您正在使用FireCMS,您不需要安装此软件包,因为它已经包含在内 为您配置 .
要使用您自己的工程中的组件, 您需要安装 @firecms/ui 软件包 :
yarn add @firecms/ui
或者说
npm install @firecms/ui
您还需要安装 tailwindcss数字 :
yarn add tailwindcss @tailwindcss/typography
在你的项目中初始化:
npx tailwindcss init
然后添加预设的 FireCMS tailwind.config.js数字 :
import fireCMSConfig from "@firecms/ui/tailwind.config.js";
export default {
presets: [fireCMSConfig],
content: [
"./index.html",
"./src/**/*.{js,ts,jsx,tsx}",
"./node_modules/@firecms/**/src/**/*.{js,ts,jsx,tsx}"
]
};
(你可能需要调整 content 匹配工程结构的矩阵)
最后,你需要定义你的初级和二级颜色 index.css 文件 :
@import 'tailwindcss';
@import "@firecms/ui/index.css" layer(base);
@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));
@source "../index.html";
@source "./**/*.{js,ts,jsx,tsx}";
@source "../node_modules/@firecms/**/*.{js,ts,jsx,tsx}";
:root {
--color-primary: #0070F4;
--color-secondary: #FF5B79;
}