PrimeNG - p-panel 的样式大小和对齐方式

Posted 2023-03-06

【中文标题】PrimeNG - p-panel 的样式大小和对齐方式

【英文标题】：PrimeNG - styling size and alignment of p-panel

【发布时间】：2017-10-24 04:33:10

【问题描述】：

我正在使用 PrimeNG p-panel 组件创建登录页面： https://www.primefaces.org/primeng/#/panel

面板占据了屏幕的整行，但我想让整个面板大约 30% 宽并且集中，所以我的面板中没有太多空白空间，因为我只有这两个字段和一个按钮。

我有以下页面：

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> ...

所以我可以在正确的位置看到我的 css 类 '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">

如果我将 ui-panel 类更改为

，那么在 Chrome 开发工具中

  width: 30%;
  margin: 0 auto;

它确实有效，然后我得到了我想要的页面：

所以一个问题是，为什么我的 center-div 类不会影响内容，而 ui-panel 会？

然后我应该 css 选择 ui-panel 并在那里进行更改吗？我一直在努力，但我失败了。

有什么帮助吗？

干杯！

【参考方案1】：

我放弃了尝试影响 PrimeNG css 类的想法，因此我将面板添加到 div 容器中，这样我就可以影响该容器的行为，这样效果会更好。

所以我创建了一个 center-login 类，并且我还使用媒体查询来处理宽度和边距，使其具有响应性......这是我所做的：

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;
  

因此，当我的屏幕宽度为 600 像素或更少时，我只是让它占据空间，但当屏幕变大时，我将其集中并将宽度固定为 600 像素。

【参考方案2】：

你应该在 CSS 中使用下一个选择器

.center-div.ui-panel
  width: 30%;
  margin: 0 auto;