css 更改p-inputSwitch标签和样式

wgx48brx 于 2024-01-09 发布在其他

关注(0)|答案(3)|浏览(178)

我会改变Primeng库的p-inputSwitch组件的风格
我会得到这样的东西：
x1c 0d1x的数据
下面是我的代码：

<div class="contner">
    <div class="toggle-area">
        <p>SEARCH BY</p>
        <div >
        <p class ="toggle-inline">Business group</p>
        <div class="toggle-btn toggle-inline">
            <p-inputSwitch [(ngModel)]="checked"
            onLabel=""
            offLabel=""
            styleClass="ui-inputswitch"
            ></p-inputSwitch>
        </div>
        <p class="toggle-inline">Borrower</p>
        </div>
</div>

字符串
我开始删除标签，但宽度的变化也，我不知道如何增加它

的

css

来源：https://stackoverflow.com/questions/49367291/change-p-inputswitch-label-and-style

3条答案

按热度按时间

uujelgoq1#

我开始删除标签，但宽度的变化也，我不知道如何增加它
PrimeNG ui-inputswitch类：

.ui-inputswitch {
  width: 80px !important;
}

字符串
参见Plunker

赞(0）回复(0）举报 2024-01-09

toe950272#

你可以用下面的代码替换div元素

<p-toggleButton onLabel="Business Group(s)" offLabel="Borrower(s)"
    onIcon="fa-toggle-on" offIcon="fa-toggle-off" [(ngModel)]="checked"></p-toggleButton>

字符串

赞(0）回复(0）举报 2024-01-09

wydwbb8l3#

只是输入开关在一个div和调整这个类，以您的需要

.smaller-switch {
        transform: scale(0.8);
    }

个字符

赞(0）回复(0）举报 2024-01-09

我来回答

css 更改p-inputSwitch标签和样式

3条答案

相关问题

热门标签

最新问答