ion-col中按钮的右对齐

哈默德

我的Ionic 2应用程序中有此网格。是否有任何特定于离子的属性可以使按钮显示在列(行)的右侧?

<ion-grid>
  <ion-row>
    <ion-col>col 1</ion-col>
    <ion-col>col 2</ion-col>
  </ion-row>
  <ion-row>
    <ion-col>
      <button ion-button>My button</button>
    </ion-col>
  </ion-row>
</ion-grid>
爆炸

在您的情况下,您可以float-right像这样添加属性

<button ion-button float-right>My button</button>

浮子{}修改
文件说,你可以添加属性float-{modifier}来定位它的容器内的元素。

{modifier}可以是以下任意值
right::元素将浮动在其容器的右侧。
left:元素将浮动在其容器的左侧。
start:与float-left方向从左到右相同,以及在方向从右到左时向右浮动。
end:如果方向是从左到右,则与向右浮动相同;如果方向是从右到左,则与向左浮动相同。

例:

<div>
    <button ion-button float-right>My button</button>
</div>

item- {modifier}
ion-item文档中放置元素,可以使用item-{modifier}

在哪里{modifier}可以是任何如下:
start:位于左侧的所有其他元素,内部项目之外。
end:放置在所有其他元素的右侧,在内部项目的内部,在输入包装器的外部。
content:放置在输入包装纸内任何离子标签的右侧。

例:

<ion-item>
    <button ion-button item-end>My button</button>
</ion-item>

弃用
根据文档,这些名称已弃用:

item-rightitem-left

新名称是:

  • item-startitem-end
  • padding-startpadding-end
  • margin-startmargin-end
  • text-starttext-end
  • startend对于晶圆厂

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章