Prime p-radioButton - 文本作为锚点

Question

是否可以将单选按钮的文本转换为锚点？

https://www.primefaces.org/primeng/#/radiobutton

在这种情况下，选项 1 可能是 link 用户单击以打开新浏览器 window 以查看页面。

这行不通：

 <p-radioButton name="operation_group"  [(ngModel)]="modelcol" tabindex=2 inputId="opt1">
 <a href="https://www.thesitewizard.com/">Operation</a> </p-radioButton>

Answer 1

没有简单的方法可以在 Primeng 中直接实现它。但是你需要为此做一个技巧。它可能不是最好的解决方案，但它会满足您的目的。这只是一种解决方法。

以Primeng单选按钮为例

我在 html 中添加了自定义 class customeRadio 并且还在选项值中添加了 <a> 标签。

<div class="ui-g-12 customeRadio">
    <p-radioButton name="group1" value="Option 1" label="Option 1" [(ngModel)]="val1" inputId="opt1">
    </p-radioButton><a href="">Option 1</a>
  </div>
  <div class="ui-g-12 customeRadio">
    <p-radioButton name="group1" value="Option 2" label="Option 2" [(ngModel)]="val1" inputId="opt2">
    </p-radioButton><a href="">Option 2</a>
  </div>
  <div class="ui-g-12 customeRadio">
    <p-radioButton name="group1" value="Option 3" label="Option 3" [(ngModel)]="val1" inputId="opt3">
    </p-radioButton><a href="">Option 2</a>
  </div>

现在在 styles.css 文件中或您要为其写入 css 的位置。

只需使用 css 选择器隐藏所有标签内容属性:

.customeRadio label{
    display:none;
}

就这些！

Answer 2

不需要 css，只需将标签设置为空字符串并添加锚点。

Prime p-radioButton - 文本作为锚点

Primeng p-radioButton - text as anchor

radio-button

typescript

primeng