在离子中对齐按钮 [英] Align buttons in ionic

问题描述

我正在学习 ionic，我想将我的 3 个按钮在左、中和右对齐.即左侧的第一个按钮，中间的第二个和右侧的第三个.

但我不知道该怎么做?

这是我的代码.

<button ion-button icon-left><ion-icon name="home"></ion-icon>左图标<button ion-button icon-only><ion-icon name="home"></ion-icon><button ion-button icon-right>右图标<ion-icon name="home"></ion-icon>

有人可以指导我吗?因为我是初学者，正在学习 ionic.

解决方案

你可以使用 Grid 来实现，ionic 提供它 网格链接

它基于 12 列布局，根据屏幕大小设置不同的断点.

默认情况下，列将在所有设备和屏幕尺寸的行内占据相同的宽度.

<离子行><ion-col>2 中的 1</ion-col><ion-col>2 的 2</ion-col></ion-row><离子行><ion-col>3 个中的 1 个</ion-col><ion-col>3 个中的 2 个</ion-col><ion-col>3 中的 3</ion-col></ion-row></离子网格>

设置一列的宽度，其他列将自动调整其大小.这可以使用我们预定义的网格属性来完成.在下面的示例中，无论中心列的宽度如何，其他列都会调整大小.

<离子行><ion-col>3 个中的 1 个</ion-col><ion-col col-8>3 个中的 2 个(更宽)</ion-col><ion-col>3 中的 3</ion-col></ion-row><离子行><ion-col>3 个中的 1 个</ion-col><ion-col col-6>3 个中的 2 个(更宽)</ion-col><ion-col>3 中的 3</ion-col></ion-row></离子网格>

所以你也可以在左、中和右三个按钮.即左侧的第一个按钮，中间的第二个和右侧的第三个按钮，使用网格.

 <离子网格><离子行><ion-col col-4><按钮离子按钮>第一的</ion-col><ion-col col-4><按钮离子按钮>第二</ion-col><ion-col col-4><按钮离子按钮>第三</ion-col></ion-row></离子网格>

I am learning ionic and i want to align my 3 buttons in left,center and right. i.e. First button in left, second in center and third one in right.

But I don't know how to do it?

Here is My code.

<div>
    <button ion-button icon-left>
            <ion-icon name="home"></ion-icon>
            Left Icon
        </button>

        <button ion-button icon-only>
            <ion-icon name="home"></ion-icon>
        </button>

        <button ion-button icon-right>
            Right Icon
            <ion-icon name="home"></ion-icon>
        </button>
  </div>

Can Anyone guide me with this? As I am a beginner and learning ionic.

解决方案

You can achieve this using Grid, ionic provide it grid link

It is based on a 12 column layout with different breakpoints based on the screen size.

By default, columns will take up equal width inside of a row for all devices and screen sizes.

<ion-grid>
  <ion-row>
    <ion-col>
      1 of 2
    </ion-col>
    <ion-col>
      2 of 2
    </ion-col>
  </ion-row>
  <ion-row>
    <ion-col>
      1 of 3
    </ion-col>
    <ion-col>
      2 of 3
    </ion-col>
    <ion-col>
      3 of 3
    </ion-col>
  </ion-row>
</ion-grid>

Set the width of one column and the others will automatically resize around it. This can be done using our predefined grid attributes. In the example below, the other columns will resize no matter the width of the center column.

<ion-grid>
  <ion-row>
    <ion-col>
      1 of 3
    </ion-col>
    <ion-col col-8>
      2 of 3 (wider)
    </ion-col>
    <ion-col>
      3 of 3
    </ion-col>
  </ion-row>
  <ion-row>
    <ion-col>
      1 of 3
    </ion-col>
    <ion-col col-6>
      2 of 3 (wider)
    </ion-col>
    <ion-col>
      3 of 3
    </ion-col>
  </ion-row>
</ion-grid>

So you also can 3 buttons in left,center and right. i.e. First button in left, second in center and third one in right using grid.

 <ion-grid>
    <ion-row>
      <ion-col col-4>
        <button ion-button>
          First
        </button>
      </ion-col>

      <ion-col col-4>
        <button ion-button>
          Second
        </button>
      </ion-col>

      <ion-col col-4>
        <button ion-button>
          Third
        </button>
      </ion-col>
    </ion-row>
  </ion-grid>

这篇关于在离子中对齐按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！