自定义 Ant Design 样式

0
视频
0
完成
0%
进度
0
分钟
0
完成
0%
进度

Ant Design 里面有些元素支持切换不同的主题,比如这个 nz-sider ,可以给它添加一个 nzTheme ,把主题设置成 light,现在这个边栏就会使用 light 这种主题,也就是亮色主题。

边栏上的这个菜单的主题也可以换成 light,修改一下 ul 上面的这个 nzTheme 的值,把 dark 换成 light,现在边栏上的菜单也是会变成明亮风格的。

菜单的上面是应用的标志,这个链接可以改一下,用一下 routerLink,地址是 / 表示应用的根。

下面这个 img 元素是应用的图像标志,可以换成一个 Ant Design 里面提供的小图标,一个小 i 标签,上面加上 nz-icon ,再加上一个 nzType,图标的名字是 align-right,Ant Design 提供了几种不同风格的小图标,用 nzTheme 设置一下,这里用一下 outline 这种风格的小图标。

原本显示应用图像标志这里现在显示的是一个 Ant Design 里的小图标。在这个小 i 标签上添加一个 style 属性设置一下它的颜色,设置成黑色。

图标文字也可以修改一下,换成 Ninghao 。

在项目里找到这个组件的样式表,app.component.css ,找到这个 sidebar-logo,修改一下这块样式里的 background 这个属性,背景颜色换成白色。

文字的颜色需要再调整一下,在 sidebar-logo 下面的 h1 元素里面,设置一下文字的颜色,颜色可以是黑色。 下面再用 text-transform 把文字换成大写的,再用 letter-spacing 添加点字间距,大小是 3px 。

这个边栏元素上,有一个自定义的 css 类是 menu-sidebar,在样式表里可以找到这块儿样式,先去掉边栏上的这个阴影效果。

然后再找到 sidebar-logo, 在元素的底边还有右边添加一个边线样式,颜色都是 #e8e8e8 。

app-header

应用主体内容头部这块元素上面有个 app-header 类,在样式表里找到这个类,去掉这个阴影。 在它的下边,可以添加一条实线的边框,颜色是 #e8e8e8 。

打开 AppComponent 组件的模板文件,找到之前我们在主体内容头部上添加的这行代码,去掉它,再保存一下文件。再回到浏览器预览一下。

ul

这个边栏上的菜单的右边有一条边线,在模板文件里,找到这个 ul 元素,用一个 style 属性,把它的 height 设置成 100vh 。

主题样式

主体内容的下面这个背景颜色我想换一下,可以定制一下 Ant Design 的主题样式,打开项目里的 styles.less,在添加 ng-zorro-antd 的时候,我选择需要自定义主题,所以在这个文件里会出现一些 less 格式的样式。

自定义 Ant Design 的主题样式,主要就是找到对应的变量,然后把它的值换成自己想要的就行了。比如这里我需要修改的是 @layout-body-background 这个变量的值,把这个颜色值换成白色。

保存一下这个文件,会重新编译 Ant Design 的主题样式。

回到浏览器,可以再预览一下我们自定义的界面样式。

自定义 Ant Design 样式《 Angular:Ant Design 》

统计

14696
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点