行政管理部门的主题
主题允许您更改您的管理面板的样式和默认组件 。 每个主题在app中增加了三个要素:
component overrides - 反应组件,以取代可支配组件的子集
theme overrides for @adminjs/design-system - 合并到默认配置中, 然后在顶端应用用户的品牌
custom CSS styles - 一个具有额外主题样式的全球CSS文件
在行政JS中导入主题
设置
您可以添加可用的主题配置选项, 包含一系列主题对象( 例如从 @ adminjs/ toemes 包导入) 或本地捆绑的主题 @adminjs/themes CLI管理主题捆绑。 列表中的第一个主题默认是活动. 默认情况下可以更改 主题选项 - 指定主题的ID - 这些通常与命名的导出相同.
import AdminJS from 'adminjs'
import { light, dark } from '@adminjs/themes'
new AdminJS({
defaultTheme: 'dark', // same as `dark` from id in the theme index file,
availableThemes: [light, dark],
})
组合和样式路径取自 @adminjs/主题, 如果主题得到库的正式支持, 或者可以从本地路径导入, 如:
import path from 'path';
import * as url from 'url';
const __dirname = url.fileURLToPath(new URL('.', import.meta.url));
new AdminJS({
defaultTheme: 'my-custom-theme',
availableThemes: {
id: 'my-custom-theme',
name: 'my custom theme',
overrides: {
colors: {
primary100: '#f00',
},
},
bundlePath: `${path.join(__dirname, `../themes/my-custom-theme`)}/theme.bundle.js`,
stylePath: `${path.join(__dirname, `../themes/my-custom-theme`)}/style.css`,
},
});
@adminjs/ toemes example app中提供了完整的例子 .
用户主题
此外,主题可以通过返回当前Admin对象主题属性中的主题ID来配置每个用户,这应该通过框架插件执行,即认证函数在@adminjs/express中. 由于您完全控制了该对象,返回的主题可以根据用户在数据库中的角色或属性来选择.
改变主题没有UI控制,但你可以自己执行. 一般的想法是将主题ID保留在用户资源中,并添加一个按钮来用所选主题来更新当前用户记录. 或者,您可以让用户编辑自己的记录并提供自定义选择属性。 注意, 对于当前 Admin 对象更新用户最可能需要再次签名 .
国 际
您可以使用 @adminjs/themes 克丽 退出寄存器后,您可以在您的机器上注册 cli yarn register:cli。在此之后,您可以使用 adminjs-themes 在您的命令行中.
行政部门 主题 CLI 提供命令 :
adminjs-themes generate <theme name>- 用推荐的文件结构创建新主题.adminjs-themes bundle- 包覆所有主题组件 您可以通过主题ID作为捆绑 single 主题的参数.
更多信息请使用命令 adminjs-themes bundle --help
使用量
请看 文档。 。 。 .
许可证
AdminJS拥有2023rst.software的版权. 它是一种自由软件,可按下列规定重新分配: 自由主义 文档.
关于 rst. 软件
我们是一个开放、友好的团队.