我正在构建一些Primeng按钮,但对于我的项目来说太大了。我在文档中看到了我可以使用

问题描述 投票:0回答:2
<button>


<p-button>

我尝试使用样式(宽度和高度),但是按钮内的文本不会改变其大小。有办法实现这一目标吗?我附加了按钮的代码:
<span class="p-buttonset">
        <button pButton pRipple label="Mapa" class="p-button-outlined p-button-secondary"
            style="background-color: rgba(255, 255, 255, .65); color:darkslategray ;" (click)="cambiarTipo(0)" ></button>
        <button pButton pRipple label="Satélite" class="p-button-outlined p-button-secondary"
            style="background-color: rgba(255, 255, 255, .65); color: darkslategray;" (click)="cambiarTipo(1)"></button>

    </span>
    &nbsp;

    <button pButton pRipple label="Zonas prohibidas" class="p-button-outlined p-button-secondary"
        style="background-color: rgba(255, 255, 255, .65); color:darkslategray ;" (click)="prohibidas()"></button>
    &nbsp;<button pButton pRipple label="Ver puntos" class="p-button-outlined p-button-secondary"
        style="background-color: rgba(255, 255, 255, .65); color:darkslategray ;" (click)="mostrarTabla()">
    </button>
    &nbsp;

    <div class="p-inputgroup" >
    <p-inputNumber inputStyleClass="black" [(ngModel)]="tiempoIsocronas" mode="decimal" placeholder="Tiempo isocronas"
        [useGrouping]="false" [disabled]="lista.length!=1" [inputStyle]="{border:'1px solid darkslategray',background:'rgba(255, 255, 255, .65)'}">
    </p-inputNumber> <button pButton pRipple type="button" icon="pi pi-search"
        class="p-button-outlined p-button-secondary" (click)="llamarServicio(listaMetodos.isocronas)"
        [disabled]="lista.length!=1" style="background-color: rgba(255, 255, 255, .65); color:darkslategray ;">
    </button> </div>


使用此css

angular button size primeng
2个回答
7
投票
  • :host ::ng-deep .p-button{ font-size:30px; //your font size here }

我经历了类似的问题。官方网站上的文档的答案
https://primeng.org/theming
推荐对我有用的内容,在您的主要CSS文件中:

html{ font-size: <your desired font size> }


0
投票

.p-button{ font-size: <your desired font size> }

Just Just wrap p.selectbutton在一个div内带有flex-column
    <div class"flex-column">
     <p-selectbutton></p-selectbutton>
    </div>


最新问题
© www.soinside.com 2019 - 2025. All rights reserved.