开始使用

@delon/theme 是 ng-alain 脚手架唯一必须引入的模块。它包含了非常多主题样式参数,通过覆盖参数数值进而定制一些特别的需求;以及若干通用性服务管道

样式

ng-alain 默认使用 less 作为样式语言,建议在使用前或者遇到疑问时学习一下 less 的相关特性,如果想获取基础的 CSS 知识或查阅属性,可以参考 MDN文档

布局

脚手架提供两种布局:默认布局空白布局,脚手架并不包含两种布局样式文件,它位于 @delon/theme 类库当中。

脚手架样式

在开发过程中,绝大部分情况下可以利用 ng-alain 提供的工具集来调整间距、颜色、大小、边框等,它是一个套类似 bootstrap 风格的工具集。

或通过 theme.less 下定制你的样式,这些样式将会在全局应用中有效,且有两个问题比较突出:

  • 全局污染 —— CSS 文件中的选择器是全局生效的,不同文件中的同名选择器,根据 build 后生成文件中的先后顺序,后面的样式会将前面的覆盖;

  • 选择器复杂 —— 为了避免上面的问题,我们在编写样式的时候不得不小心翼翼,类名里会带上限制范围的标识,变得越来越长,多人开发时还很容易导致命名风格混乱,一个元素上使用的选择器个数也可能越来越多。

因此,除非设计师明确需求以外,我们应该尽可能使用组件 styles 属性创建组件样式,有关如何Angular样式请参考《关于Angular样式封装》。

样式文件类别

在一个项目中,样式文件根据功能不同,可以划分为不同的类别。

theme.less

全局样式文件,在这里你可以进行一些通用设置。

工具集

请参考 工具集样式

页面级

具体页面相关的样式,例如 monitor.component.less,里面的内容仅和本页面的内容相关。一般情况下,如果不是页面内容特别复杂,有了前面全局样式、工具集样式的配合,这里要写的应该不多。

如何覆盖参数

ng-alain 的样式使用了 Less 作为开发语言,并定义了一系列全局/组件的样式变量,你可以根据需求进行相应调整。

要改变的参数统一放在 theme.less LESS文件中,所有参数包括:

如果以上变量不能满足你的定制需求,可以给我们提 issue。

Loading...