问题:
I need to show ion-button and ion-title same line in ion-navbar in ion-header. Below is my code.
<ion-header>
<ion-navbar>
<button ion-button icon-on...
可以将文章内容翻译成中文,广告屏蔽插件会导致该功能失效:
问题:
I need to show ion-button
and ion-title
same line in ion-navbar
in ion-header. Below is my code.
<ion-header>
<ion-navbar>
<button ion-button icon-only>
<ion-icon name="arrow-back"></ion-icon>
</button>
<ion-title>Home</ion-title>
</ion-navbar>
</ion-header>
How to show ion-button
and ion-title
inline in ion-navbar
?
回答1:
Try this:
<ion-header>
<ion-navbar>
<ion-buttons left>
<button ion-button icon-only >
<ion-icon name="arrow-back"></ion-icon>
</button>
</ion-buttons>
<ion-title text-left>Home</ion-title>
</ion-navbar>
</ion-header>
It is working properly.
回答2:
you should use <ion-row>
and <ion-col>
labels. Use this:
<ion-header>
<ion-navbar>
<ion-row>
<ion-col col-5>
<ion-buttons left>
<button ion-button icon-only >
<ion-icon name="arrow-back"></ion-icon>
</button>
</ion-buttons>
</ion-col>
<ion-col col-5>
<ion-title text-left>Home</ion-title>
</ion-col>
</ion-row>
</ion-navbar>
It is really important use that to do your app responsive.