PrimeNG - p 面板的样式大小和对齐方式
PrimeNG - styling size and alignment of p-panel
我正在使用 PrimeNG p-panel 组件创建登录页面:
https://www.primefaces.org/primeng/#/panel
面板占据了屏幕的整行,但我想让整个面板的宽度大约为 30% 并且集中,这样我的面板中就不会出现很多空白 space我只有这两个字段和一个按钮。
我有以下页面:
login.componennt.html
<p-panel header="Login">
<div class="ui-g">
<div class="ui-lg-2 ui-md-2 ui-sm-2">
<input type="text" pInputText placeholder="user" [(ngModel)]="user"/>
</div>
</div>
<div class="ui-g">
<div class="ui-lg-2 ui-md-2 ui-sm-2">
<input type="password" pPassword placeholder="password" [(ngModel)]="password"/>
</div>
</div>
<div class="ui-g">
<div class="ui-lg-2 ui-md-2 ui-sm-2">
<button pButton type="button" label="Login" (click)="doLogin()"></button>
</div>
</div>
</p-panel>
所以我尝试了这个:
<p-panel header="Login" styleClass="center-div">
...
login.component.css
.center-div {
width: 30%;
margin: 0 auto;
}
这行不通。
我的画面是这样的:
所以我检查了代码,Chrome 开发工具,我得到了:
<p-panel _ngcontent-c1="" header="Login" styleclass="center-div" ng-reflect-header="Login" ng-reflect-style-class="center-div">
<div class="center-div ui-panel ui-widget ui-widget-content ui-corner-all" ng-reflect-klass="center-div" ng-reflect-ng-class="ui-panel ui-widget ui-widget-c">
<div class="ui-panel-titlebar ui-widget-header ui-helper-clearfix ui-corner-all">
<span class="ui-panel-title">Login</span>
</div>
<div class="ui-panel-content-wrapper" ng-reflect-klass="ui-panel-content-wrapper" ng-reflect-ng-class="[object Object]">
<div class="ui-panel-content ui-widget-content">
<div _ngcontent-c1="" class="ui-g">
<div _ngcontent-c1="" class="ui-lg-2 ui-md-2 ui-sm-2">
<input _ngcontent-c1="" pinputtext="" placeholder="user" type="text" class="ng-untouched ng-pristine ng-valid ui-inputtext ui-corner-all ui-state-default ui-widget">
</div>
</div> ...
所以我可以在正确的位置看到我的cssclass'center-div',就在实际面板内容之前,但为什么它不影响内容样式?
这里:
<div class="center-div ui-panel ui-widget ui-widget-content ui-corner-all" ng-reflect-klass="center-div" ng-reflect-ng-class="ui-panel ui-widget ui-widget-c">
所以在 Chrome 开发工具中,如果我更改 ui-面板 class至
width: 30%;
margin: 0 auto;
它确实有效,然后我得到了我想要的页面:
那么一个问题是,为什么我的center-divclass不影响内容,但是ui-panel呢?
然后我应该 css select ui-panel 并在那里进行更改吗?我一直在努力,但我失败了。
有什么帮助吗?
干杯!
我放弃了试图影响 PrimeNG css classes 的想法,所以我将面板添加到 div 容器中,这样我就可以影响该容器的行为,效果更好。
所以我创建了一个 center-login class 并且我还使用媒体查询来处理宽度和边距,以使其响应...这就是我完成了:
login.component.html
<div class="ui-g">
<div class="ui-lg-12 ui-md-12 ui-sm-12 center-login">
<p-panel header="Login">
<div class="ui-g">
<div class="ui-lg-12 ui-md-12 ui-sm-12">
<h4 class="first in-label">User</h4>
<input type="text" pInputText [(ngModel)]="user"/>
</div>
</div>
...
login.component.css
@media screen and (min-width: 600px) {
.center-login {
width: 600px;
margin: 0 auto;
}
}
因此,当我的屏幕宽度为 600px 或更小时,我只是让它占用 space,但是当屏幕变大时,我将其集中并将宽度固定为 600px。
您应该在 CSS
中使用下一个选择器
.center-div.ui-panel{
width: 30%;
margin: 0 auto;
}
我正在使用 PrimeNG p-panel 组件创建登录页面: https://www.primefaces.org/primeng/#/panel
面板占据了屏幕的整行,但我想让整个面板的宽度大约为 30% 并且集中,这样我的面板中就不会出现很多空白 space我只有这两个字段和一个按钮。
我有以下页面:
login.componennt.html
<p-panel header="Login">
<div class="ui-g">
<div class="ui-lg-2 ui-md-2 ui-sm-2">
<input type="text" pInputText placeholder="user" [(ngModel)]="user"/>
</div>
</div>
<div class="ui-g">
<div class="ui-lg-2 ui-md-2 ui-sm-2">
<input type="password" pPassword placeholder="password" [(ngModel)]="password"/>
</div>
</div>
<div class="ui-g">
<div class="ui-lg-2 ui-md-2 ui-sm-2">
<button pButton type="button" label="Login" (click)="doLogin()"></button>
</div>
</div>
</p-panel>
所以我尝试了这个:
<p-panel header="Login" styleClass="center-div">
...
login.component.css
.center-div {
width: 30%;
margin: 0 auto;
}
这行不通。
我的画面是这样的:
所以我检查了代码,Chrome 开发工具,我得到了:
<p-panel _ngcontent-c1="" header="Login" styleclass="center-div" ng-reflect-header="Login" ng-reflect-style-class="center-div">
<div class="center-div ui-panel ui-widget ui-widget-content ui-corner-all" ng-reflect-klass="center-div" ng-reflect-ng-class="ui-panel ui-widget ui-widget-c">
<div class="ui-panel-titlebar ui-widget-header ui-helper-clearfix ui-corner-all">
<span class="ui-panel-title">Login</span>
</div>
<div class="ui-panel-content-wrapper" ng-reflect-klass="ui-panel-content-wrapper" ng-reflect-ng-class="[object Object]">
<div class="ui-panel-content ui-widget-content">
<div _ngcontent-c1="" class="ui-g">
<div _ngcontent-c1="" class="ui-lg-2 ui-md-2 ui-sm-2">
<input _ngcontent-c1="" pinputtext="" placeholder="user" type="text" class="ng-untouched ng-pristine ng-valid ui-inputtext ui-corner-all ui-state-default ui-widget">
</div>
</div> ...
所以我可以在正确的位置看到我的cssclass'center-div',就在实际面板内容之前,但为什么它不影响内容样式? 这里:
<div class="center-div ui-panel ui-widget ui-widget-content ui-corner-all" ng-reflect-klass="center-div" ng-reflect-ng-class="ui-panel ui-widget ui-widget-c">
所以在 Chrome 开发工具中,如果我更改 ui-面板 class至
width: 30%;
margin: 0 auto;
它确实有效,然后我得到了我想要的页面:
那么一个问题是,为什么我的center-divclass不影响内容,但是ui-panel呢?
然后我应该 css select ui-panel 并在那里进行更改吗?我一直在努力,但我失败了。
有什么帮助吗?
干杯!
我放弃了试图影响 PrimeNG css classes 的想法,所以我将面板添加到 div 容器中,这样我就可以影响该容器的行为,效果更好。
所以我创建了一个 center-login class 并且我还使用媒体查询来处理宽度和边距,以使其响应...这就是我完成了:
login.component.html
<div class="ui-g">
<div class="ui-lg-12 ui-md-12 ui-sm-12 center-login">
<p-panel header="Login">
<div class="ui-g">
<div class="ui-lg-12 ui-md-12 ui-sm-12">
<h4 class="first in-label">User</h4>
<input type="text" pInputText [(ngModel)]="user"/>
</div>
</div>
...
login.component.css
@media screen and (min-width: 600px) {
.center-login {
width: 600px;
margin: 0 auto;
}
}
因此,当我的屏幕宽度为 600px 或更小时,我只是让它占用 space,但是当屏幕变大时,我将其集中并将宽度固定为 600px。
您应该在 CSS
中使用下一个选择器.center-div.ui-panel{
width: 30%;
margin: 0 auto;
}