Primeng p-radioButton - текст в качестве якоря - PullRequest
Новая
       17

Primeng p-radioButton - текст в качестве якоря

0 голосов
/ 28 марта 2019

Можно ли преобразовать текст радиокнопки в якорь?

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

В этом случае вариант 1 может быть ссылкой, по которой пользователь щелкает, чтобы открыть новое окно браузера для просмотра страницы.

Это не будет работать: 

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

Ответы [ 2 ]

0 голосов
/ 31 марта 2019

CSS не требуется, просто установите метку в пустую строку и добавьте привязку.

0 голосов
/ 28 марта 2019

Нет простого способа реализовать это непосредственно в Primeng.Но вы должны сделать трюк для этого.Возможно, это будет не лучшим решением, но оно послужит вашей цели.Это только обходной путь.

На примере радио кнопки Primeng.

Я добавил пользовательский класс customeRadio в html, а также добавил тег <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;
}

Вот и все!

...