Question

我正在尝试在我的应用程序中实现primeng步骤。我按照文档中的示例创建了自定义样式步骤。相反，我得到标准的样式步骤。 .css文件中的书面样式类。

step1.component.html
------------------------
<div>
<p-steps [model]="items" styleClass="steps-custom" [(activeIndex)]="activeIndex" ></p-steps>
</div>

step1.component.ts
--------------------

@Component({
    selector: 'app-routing',
    templateUrl: './step1.component.html',
    styleUrls: ['./step1.component.css'],
    providers: [RoutingService]
})

export class Step1Component  implements OnInit {

  items: MenuItem[];
  activeIndex: number = 1;

  constructor(private routingService: RoutingService) {
  }

  ngOnInit() {
    this.items = [{
      label: 'Personal',
      command: (event: any) => {
        this.activeIndex = 0;
      }
    },
      {
        label: 'Seat',
        command: (event: any) => {
          this.activeIndex = 1;
        }
      },
      {
        label: 'Payment',
        command: (event: any) => {
          this.activeIndex = 2;
        }
      },
      {
        label: 'Confirmation',
        command: (event: any) => {
          this.activeIndex = 3;

        }
      }
    ];
  }
}

step1.component.css
----------------------
.ui-steps .ui-steps-item {
  width: 25%;
}

.ui-steps.steps-custom {
  margin-bottom: 30px;
}

.ui-steps.steps-custom .ui-steps-item .ui-menuitem-link {
  height: 10px;
  padding: 0 1em;
}

.ui-steps.steps-custom .ui-steps-item .ui-steps-number {
  background-color: #0081c2;
  color: #FFFFFF;
  display: inline-block;
  width: 36px;
  border-radius: 50%;
  margin-top: -14px;
  margin-bottom: 10px;
}

.ui-steps.steps-custom .ui-steps-item .ui-steps-title {
  color: #555555;
}

看起来没有应用styleClass。能告诉我如何将自定义样式应用到primeng步骤吗？

Answer 1

使用primeng组件时要记住一些好的做法。

检查要应用于组件的主题。样式将根据您选择的主题而改变。
：host :: ng-deep用于样式隔离 - 即一个功能的样式开始干扰另一个功能的样式。要避免shadow DOM继承此样式

因此，在您的情况下，如果您想将自己的自定义样式应用于组件

:host::ng-deep .ui-steps .ui-steps-item {
  width: 25%;
}

:host::ng-deep .ui-steps.steps-custom {
  margin-bottom: 30px;
}

:host::ng-deep .ui-steps.steps-custom .ui-steps-item .ui-menuitem-link {
  height: 10px;
  padding: 0 1em;
}

:host::ng-deep .ui-steps.steps-custom .ui-steps-item .ui-steps-number {
  background-color: #0081c2;
  color: #FFFFFF;
  display: inline-block;
  width: 36px;
  border-radius: 50%;
  margin-top: -14px;
  margin-bottom: 10px;
}

:host::ng-deep .ui-steps.steps-custom .ui-steps-item .ui-steps-title {
  color: #555555;
}

或者你可以在下面的css中嵌套：host :: ng-deep 示例

:host::ng-deep {
  //setting height for the honey blending panel properties
  .ui-panel-content.ui-widget-content {
    min-height: 312px;
  }
  .ui-state-default {
    border: 1px solid $color_iron;
  }
  .ui-chkbox-label {
    margin-bottom: 0;
  }
  .ui-radiobutton-label {
    margin-bottom: 0;
  }
}

希望有所帮助

Primeng自定义样式步骤显示为按钮而不是行

1 个答案: