如何与右侧对齐,按钮显示在 Headers 的左侧,没有撰写图标 .
这是我正在做的事情:
<ion-toolbar> <ion-title>TODO APP</ion-title> <button class = "button button-icon"> <i class="icon ion-compose"></i> </button> </ion-toolbar>
Ionic 2 / Ionic 3有一些东西,只需看看下面的代码:
<ion-header> <ion-navbar primary> <ion-buttons start> <button menuToggle> <ion-icon name="menu"></ion-icon> </button> </ion-buttons> <ion-title> My Page </ion-title> <ion-buttons end> <button (click)="myFunction()" ion-button icon-only> <ion-icon name="search"></ion-icon> </button> </ion-buttons> </ion-navbar> </ion-header>
以这种方式解决问题的好处是你的导航栏会自动遵守android / ios / windows指南 . 因此,这样可以提高应用的质量 .
有关指南的更多信息:
Android :https://developer.android.com/guide/practices/ui_guidelines/index.html
iOS :https://developer.apple.com/ios/human-interface-guidelines/
Windows :https://developer.microsoft.com/en-us/windows/design
你可以在 Headers 的右侧添加按钮ionic 2.0
<ion-navbar *navbar> <ion-title> TODO APP </ion-title> <ion-buttons end> <button ><ion-icon name="home"></ion-icon></button> </ion-buttons> </ion-navbar>
您可以像这样添加自定义图标的css类
css
.ion-ios-custom:before { background-image: url("image-icon.png"); }
OR
.ion-ios-custom:before { content: "\f439"; /* your font code */ }
.ion-ios-custom:before { content: url("image-icon.png") !important; }
html
<ion-icon name="custom"></ion-icon>
离子4离子导航条被离子后退按钮取代,并且在 Ionic 4 后退按钮就像
<ion-header> <ion-toolbar> <ion-buttons slot="start"> <ion-back-button></ion-back-button> </ion-buttons> <ion-title> Home </ion-title> <ion-button slot="end"> <ion-icon name="search"></ion-icon> </ion-buttons> </ion-toolbar> </ion-header>
我用这个解决了我的问题:
ion-buttons { order: 10 }
尝试将其添加到样式表中
Note: 我在ionic2中使用过它 .
<ion-toolbar color='primary'> <button ion-button menuToggle> <ion-icon name='menu'></ion-icon> </button> <ion-title>TODO APP</ion-title> <ion-buttons start> <button (click)='YOUR_FUNCTION_CALL' ion-button icon-only> <ion-icon name='YOUR_ICON_NAME'></ion-icon> </button> </ion-buttons> </ion-toolbar>
更换:
图标请访问此网站http://ionicframework.com/docs/v2/ionicons/
<ion-view title="home" align-title="center"> <ion-nav-buttons side="right"> <button ng-click="search()" class="button button-icon icon ion-android-search"></button> </ion-nav-buttons> <ion-content has-bouncing="0px"> </ion-content> </ion-view>
这对你有用......
6 回答
Ionic 2 / Ionic 3有一些东西,只需看看下面的代码:
以这种方式解决问题的好处是你的导航栏会自动遵守android / ios / windows指南 . 因此,这样可以提高应用的质量 .
有关指南的更多信息:
Android :https://developer.android.com/guide/practices/ui_guidelines/index.html
iOS :https://developer.apple.com/ios/human-interface-guidelines/
Windows :https://developer.microsoft.com/en-us/windows/design
你可以在 Headers 的右侧添加按钮ionic 2.0
您可以像这样添加自定义图标的css类
css
OR
OR
html
离子4离子导航条被离子后退按钮取代,并且在 Ionic 4 后退按钮就像
我用这个解决了我的问题:
尝试将其添加到样式表中
Note: 我在ionic2中使用过它 .
更换:
带有图标名称的
图标请访问此网站http://ionicframework.com/docs/v2/ionicons/
这对你有用......