I have this grid in my Ionic 2 application. Is there any ionic-specific attribute to make the button shown on the right side of the column (row)?
<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>
In your case you can add the attribute float-right
like so:
<button ion-button float-right>My button</button>
float-{modifier}
The documentation says you can add the attribute float-{modifier}
to position an element inside its container.
{modifier}
can be any of the following:
right
: The element will float on the right side of its container.
left
: The element will float on the left side of its container.
start
: The same as float-left
if direction is left-to-right and float-right if direction is right-to-left.
end
: The same as float-right if direction is left-to-right and float-left if direction is right-to-left.
Example:
<div>
<button ion-button float-right>My button</button>
</div>
item-{modifier}
To position an element inside an ion-item
the documentation says you can use item-{modifier}
.
Where {modifier}
can be any of the following:
start
: Placed to the left of all other elements, outside of the inner item.
end
: Placed to the right of all other elements, inside of the inner item, outside of the input wrapper.
content
: Placed to the right of any ion-label, inside of the input wrapper.
Example:
<ion-item>
<button ion-button item-end>My button</button>
</ion-item>
Deprecation
According to the documentation these names are deprecated:
item-right
& item-left
The new names are :
item-start
& item-end
padding-start
& padding-end
margin-start
& margin-end
text-start
& text-end
start
and end
for FABs