# 前端皮肤使用说明

XManager 提供了皮肤机制,用户可以按照定好的规则来开发自己的皮肤,同时也可以通过 npm 来安装第三方的皮肤组件。

# 关键术语

为了更好的理解皮肤机制,大家需要搞清楚一些本框架中的术语

皮肤:布局相关的内容,如菜单栏的宽度、是否有顶部导航栏等

主题:色彩有关的内容,如顶部导航栏的背景色、菜单栏的背景色、激活菜单的背景色等等

字号:大小有关的内容,比如按钮大小、表单控件的大小、文字大小等等

# 使用方法

皮肤使用有两种方式:

如果直接使用前端框架库XManager.UI,那么可以按照如下方式使用

import XManagerUI from 'xmanager-ui'
import NetmodularSkinsClassics from 'xmanager-skins-classics'

// 使用皮肤
XManagerUI.registerSkin(NetmodularSkinsClassics)
1
2
3
4
5

如果使用了 Admin 模块,那么可以按照如下方式使用

import WebHost from 'xmanager-module-admin'
import NetmodularSkinsClassics from 'xmanager-skins-classics'
import config from './config'

// 使用皮肤
WebHost.registerSkin(NetmodularSkinsClassics)
WebHost.start(config)
1
2
3
4
5
6
7

# 自定义皮肤

为了方便大家自定义皮肤,本框架提供了一个例子作为参考[XManager.Skins.Classics],大家可直接在此代码上做修改然后发布~

至于自定义皮肤的教程,等我结婚了再写~😜

# 第三方皮肤

XManager.Skins.Pithy (opens new window)