如何在 IONIC 3 的 ion-item 部分中显示两个 ion-col 场

Posted 2023-03-13

【中文标题】如何在 IONIC 3 的 ion-item 部分中显示两个 ion-col 场

【英文标题】：how can I show two ion-col field inside ion-item section in IONIC 3

【发布时间】：2018-03-20 08:08:03

【问题描述】：

我需要在 行 中显示两个输入字段，如下所示：

但是当我使用时：

<ion-list>
<ion-item>
  <ion-label stacked> Phone Number</ion-label>
  <ion-grid>
    <ion-row>
      <ion-col>
        <ion-input type="tel" placeholder="Area code"></ion-input>
      </ion-col>
      <ion-col>
        <ion-input type="tel" placeholder="Number"></ion-input>
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-item>

但它没有显示任何类似的屏幕：

请帮帮我。

【参考方案1】：

就个人而言，我不建议在列表中的每个项中创建一个网格...处理起来真的很繁重。

但是查看您的代码，我发现您只想将行分成两部分，因此每个输入将彼此相邻..

所以这对我很有效 (https://ionic-list-items-with-two-inputs-in-row.stackblitz.io/)

<ion-content padding>
  <ion-list>
    <ion-label stacked> Phone Number</ion-label>
    <ion-item>      
      <ion-input type="tel" placeholder="Area code"></ion-input>
      <ion-input type="tel" placeholder="Number"></ion-input>
    </ion-item>
  </ion-list>
</ion-content>

【参考方案2】：

您只需要使用<ion-grid>，如下所示。

这是工作stackblitz

<ion-content>
    <ion-grid>
        <ion-row>
            <ion-col col-4>
                <ion-label stacked> Phone Number</ion-label>
            </ion-col>
            <ion-col col-4>
                <ion-input type="tel" placeholder="Area code"></ion-input>
            </ion-col>
            <ion-col col-4>
                <ion-input type="tel" placeholder="Number"></ion-input>
            </ion-col>
        </ion-row>
    </ion-grid>
</ion-content>

【参考方案3】：

请尝试在 ion-item 之前添加 ion-row。我希望这可以帮助你。谢谢

<ion-list>

  <ion-label stacked> Phone Number</ion-label>

    <ion-row>
    <ion-item col-6>
        <ion-input type="tel" placeholder="Area code"></ion-input>
    </ion-item>
    <ion-item col-6>
        <ion-input type="tel" placeholder="Number"></ion-input>
    </ion-item>
    </ion-row>

</ion-list>