Menu
I am using Ionic's 2/3 auto button when using NavController.
On one of the pages I want to add button to the header, which will change something, so I've added it:
<ion-header>
<ion-navbar color="orange">
<ion-title>Test</ion-title>
<ion-buttons end>
<button ion-button icon-right clear (click)="openModal()">
Next <ion-icon name="arrow-forward"></ion-icon>
</button>
</ion-buttons>
</ion-navbar>
</ion-header>
Unfortunately, size of the icon is slightly different (smaller) then Back button added automatically by the Ionic. I know that I can style it with CSS but I am afraid to break something (I can't test all the devices).
Screenshot (both Android & iOS):
Maybe should I use different button classes or components? How can I make size of all buttons & icons in header the same?
328
To define a custom asset for our ion-icon is as easy as just passing the path of our file in the src property. Now copy and paste the XML below into the custom-menu. svg . The cool part is that using this technique it's possible to customize the theme by just adding the color attribute in the ion-menu-button .
The back button navigates back in the app's history upon click. It is smart enough to know what to render based on the mode and when to show based on the navigation stack. To change what is displayed in the back button, use the text and icon properties.
Check your variables. css file there is should be @media (prefers-color-scheme: dark) section that relates to dark theme colors. Also you need set color light to ion-back-button.
The hardware back button is found on most Android devices. In native applications it can be used to close modals, navigate to the previous view, exit an app, and more. By default in Ionic, when the back button is pressed, the current view will be popped off the navigation stack, and the previous view will be displayed.
You can use icon-only directive and that's all. This way is back-button.
<ion-buttons end>
<button ion-button icon-right icon-only clear (click)="openModal()">
Next <ion-icon name="arrow-forward"></ion-icon>
</button>
</ion-buttons>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
