【问题标题】:Customization of a Stepper component (Nebular / Angular)Stepper 组件的自定义(Nebular / Angular)
【发布时间】:2022-01-19 13:55:18
【问题描述】:

我想知道是否可以自定义 Nebular Stepper component 的 scss/html 模板。我发现您可以使用 Nebular Custom theming 自定义一些 scss,但我需要更改没有主题变量的东西,例如 Stepper Header(已完成步骤图标,数字外观..等)和步进连接器(外观、尺寸..等)..

我对angular/nebular组件有点陌生,所以我不知道如何自定义预制组件的scss/html模板,有人可以帮我吗?

【问题讨论】:

    标签: angular nebular stepper


    【解决方案1】:

    更好的方法是在 nebular 中创建自己的主题,而不是根据需要更改单个元素,但也有一种方法可以实现您正在尝试的目标。

    为此,您需要找到与步进器相关的类,然后在全局样式文件中应用您的样式

    不在组件样式中。这不起作用,因为 nebular 设置了全局样式,并且它会覆盖您的样式,即使您使用 !important

    您可以使用以下类来更新步进器:

    1. .nb-theme-corporate nb-stepper .header .step.selected .label-index

      这用于更新所选步骤的边框/背景颜色

    2. .nb-theme-corporate nb-stepper .header .step.selected

      这是用于更改所选步骤的字体样式

    对于所有其他步骤,您只需删除 .step.selected 即可应用

    【讨论】:

    • 您好,@Adnan 感谢您的回复,我会试一试.. 但是,如果是全局样式文件,您的意思是“styles.scss”和/或“themes.scss”?有任何帮助,我正在使用 ngx-admin -> (akveo.github.io/ngx-admin) 模板。
    • @AldimarJ 是的,这就是我的意思。在 angular.json 中定义的任何样式文件
    • 感谢您的帮助,使用您的提示让它工作了!
    • 不客气 :)
    猜你喜欢
    • 2019-06-13
    • 2018-08-08
    • 1970-01-01
    • 2021-10-22
    • 2018-07-08
    • 1970-01-01
    • 2016-02-06
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多