Question

<ion-grid>
      <ion-item>
        <ion-label col-5 inline>Building Type</ion-label>
        <ion-select type="text" formControlName="ml_build_type">
          <ion-option value="VILLA">Villa</ion-option>
          <ion-option value="BLGD">Building</ion-option>
        </ion-select>
      </ion-item>

      <ion-row>
      <ion-item col-6 inline>
        <ion-label >Name/Number</ion-label>
        <ion-input type="text" formControlName="ml_build"  ></ion-input>
      </ion-item>
      <ion-item col-6 inline >
        <ion-label >Flat No</ion-label>
        <ion-input type="number" formControlName="ml_flat"  ></ion-input>
      </ion-item>
    </ion-row>

      <ion-row>
        <ion-item col-6>
          <ion-label inline> Floor No</ion-label>
          <ion-input type="number" min="0" formControlName="ml_floor"  ></ion-input>
        </ion-item>
        <ion-item col-6>
          <ion-label inline>Room No</ion-label>
          <ion-input type="number" min="0" formControlName="ml_room_no"  ></ion-input>
        </ion-item>
      </ion-row>

      <ion-row>
        <ion-item col-6>
          <ion-label inline>Room Type</ion-label>
          <ion-select type="text" formControlName="ml_unit"  >
            <ion-option *ngFor="let room of room_type" let i=i ndex [value]="room.code">{{room.room_type}}</ion-option>
          </ion-select>
        </ion-item>

        <ion-item col-6>
          <ion-label inline> Wall Number</ion-label>
          <ion-input type="number" min="0" formControlName="ml_wall_no"  ></ion-input>
        </ion-item>
      </ion-row>

      <ion-row>
        <ion-item col-6>
          <ion-label inline> Wall Width</ion-label>
          <ion-input  type="number" formControlName="ml_width"  ></ion-input>
        </ion-item>
        <ion-item col-6>
          <ion-label inline> Wall Height</ion-label>
          <ion-input  type="number" formControlName="ml_height"  ></ion-input>
        </ion-item>
      </ion-row>

      <ion-item>
        <ion-label col-5 inline>Window Exists</ion-label>
        <ion-select formControlName="window_exists" type="text">
          <ion-option value="Y">Yes</ion-option>
          <ion-option value="N">No</ion-option>
        </ion-select>
      </ion-item>

    </ion-grid>

这个HTML代码，数据根据标签大小显示，我希望它们看起来很好并排成一行，所有数据必须以水平对齐方式显示。我试图使用离子组件，使其看起来很完美，但数据显示在这里和那里。

Answer 1

在页面的.scss文件中，您可以覆盖Ionic标签样式，从而使标签的宽度相同：

.item-input ion-label {
    width: 150px;
}

您只需选择适合您布局的宽度，并适应所有标签宽度。

Answer 2

Ionic提供了几个属性，允许您控制输入的样式。您可能想要使用Fixed Inline Labels。

摘自输入组件文档强调添加

使用fixed将标签放在input元素的左侧。输入文本时标签不会隐藏。 无论标签长度如何，输入都将在同一位置对齐。占位符文本可与固定标签结合使用。

将代码中的内联替换为fixed。

<ion-item col-6>
  <ion-label fixed> Wall Width</ion-label>
  <ion-input type="number" formControlName="ml_width"></ion-input>
</ion-item>

修改

如果您的标签很长而且无法缩短标签，则可以选择：

<强> 1。覆盖标签宽度：

如果您有静态标签，则可以覆盖固定宽度标签的标签宽度。固定宽度标签默认为100px宽。例如，要将它们设置为200px，请将以下内容添加到scss文件中：

ion-label[fixed] {
  width: 200px;
  flex: 0 0 200px;
  //max-width defaults to 200px
  //if you're setting your label width wider than 200px
  //remember to adjust the max-width as well.
}

<强> 2。切换离子标签的溢出属性。

ion-label的溢出属性设置为overflow: hidden。您可以将值设置为visible，然后在相应输入处于焦点或具有非空值时以编程方式将其更改为hidden。这样，只有输入输入并给出值后，标签的省略号才会出现。

一种简单的方法是使用ngStyle。要确定输入是否为焦点，您可以向类添加属性，将其初始值设置为false，然后通过将焦点/模糊事件添加到相应的输入来切换值，如下所示：

<ion-input (focus)="inFocus = true" (blur)="inFocus = false" ...>...</input>

然后，您可以使用ngStyle来切换溢出值，方法是确定inFocus属性是否为真或输入不为空（通过观察输入的ngModel）。所以，你有类似的东西：

<ion-label [ngStyle]="{'overflow': inFocus || myForm.myinputvalue != '' ? 'hidden' : 'visible' }">

第3。请改用浮动标签。

浮动标签将填充输入的整个宽度。当用户触摸/点击输入内部时，标签“浮动”，但仍然可见以供参考。

同样，“堆叠”标签将放置在输入上方，但固定到位：

Answer 3

除了AndrWeisR的回答之外，如果没有以下内容（离子4），我将无法使其正常工作。

.item-input ion-label {
  width: 150px;
  flex: 0 0 150px;
}

如何正确显示这些离子输入字段值？

3 个答案: