时间戳

首页 > 解决方案 > 在 primeNg 单选按钮上设置样式

css - 在 primeNg 单选按钮上设置样式

问题描述

我正在尝试使用 primeNg 样式类在所选单选按钮及其标签周围设置边框。我的 HTML 代码如下：

<div class="p-d-flex p-flex-column">
  <p-radioButton
    styleClass="radio-style"
    class="p-col"
    [(ngModel)]="form"
    [value]="true"
    label="true"
  ></p-radioButton>
  <p-radioButton
    styleClass="radio-style"
    class="p-col"
    [(ngModel)]="form"
    [value]="false"
    label="false"
  ></p-radioButton>
</div>

我的 SCSS 就像：

:host ::ng-deep .radio-style.p-radiobutton {
  border: thin solid green;
}

然而，最终的结果只是看起来像这样： 单选按钮。

我希望绿色围绕整个事物，而不仅仅是盒子本身，而且只围绕选定的盒子。（对于我尝试使用的第二个问题，p-label-active但我认为我做得不对，因为它没有用）

我怎样才能实现标签周围的边框，以及如何只在选定的单选按钮上拥有它？

问题的stackblitz

编辑： 澄清一下，我想要的效果是 想要的影响

编辑 2： 我找到了一种解决方法。如果存在，仍在寻找更好的答案。解决方法：使用自定义类和 ngClass，如 stackblitz 更新中所示。

HTML：

<div class="p-d-flex p-flex-column">
    <p-radioButton [ngClass]="{'selected':form===true}" styleClass="radio-style" class="p-col" [(ngModel)]="form"
        [value]="true" label="true"></p-radioButton>
    <p-radioButton [ngClass]="{'selected':form===false}" styleClass="radio-style" class="p-col" [(ngModel)]="form"
        [value]="false" label="false">
    </p-radioButton>
</div>

CSS：

.selected {
  border: thin solid green;
}

标签： cssangularradio-buttonprimeng

解决方案

解决方案最终变得更加简单 - 课程需要更进一步。

所以，HTML：

<div class="p-d-flex p-flex-column">
  <p-radioButton
    styleClass="radio-style"
    class="p-col" [ngClass]="{'selected':form}"
    [(ngModel)]="form"
    [value]="true"
    label="true"
  ></p-radioButton>
  <p-radioButton
    styleClass="radio-style"
    class="p-col" [ngClass]="{'selected':!form}"
    [(ngModel)]="form"
    [value]="false"
    label="false"
  ></p-radioButton>
</div>

然后是scss：

.selected {
     border: 2px solid green ;
}

推荐阅读