I am developing an ionic 2 app for android/iOS. I need to override the content description of a button when talkback feature is enabled in the device. I tried with alt and name options in button but nothing seems to be working.
<button ion-fab color="danger" (click)="share()" name="share" alt="Share" role="presentation">
<ion-icon name="md-share" ></ion-icon>
</button>
In order to override the default content description I specified the aria-label in button as shown below
<button click)="collapseDetails()" aria-label="Collapse">
<ion-icon [name]="icon_collapse" aria-hidden="true" item-left color="primary">
</ion-icon>
{{ displayName }}
</button>
In order to set the aria-label dynamically you can use
<ion-label attr.aria-label="{{display_name}} check the box to receive notifications" >{{display_name}} </ion-label>
Related
I employ an ionic range in my code with two icons at the beginning and the end. But these two icons didn't show up - only the range showed up. I have looked up their offcial document (https://ionicframework.com/docs/api/range) and here's my code (I basically copy their code):
<ion-item>
<ion-range min="0" max="5" steps="1" pin="true" snaps="true" formControlName="rating"></ion-range>
<ion-icon slot="start" size="small" name="sad"></ion-icon>
<ion-icon slot="end" name="happy" ></ion-icon>
</ion-item>
Ionic document sometimes sucks and I really need someone to help me out.
You need to add icons inside ion-range tag and for the left icon add range-left attribute to the ion-icon tag and for the right icon add range-right attribute the icon as below.
<ion-item>
<ion-range min="0" max="5" steps="1" pin="true" snaps="true" formControlName="rating">
<ion-icon range-left size="small" name="sad"></ion-icon>
<ion-icon range-right name="happy" ></ion-icon>
</ion-range>
</ion-item>
StackBlitz
using ionic 3.9.2
Objective:
back button in navbar using ios-arrow-back style and "back" with translate pipe
with setBackButtonText(), manage to set back button text.
But it's tedious to do it for every page with getting reference of nav bar, set text after view init.
Any way to set back button text in template in which can set it like {{ 'back' | translate }}
How to use other icon for back button?
first try: ion-nav-back-button, prompt ion-nav-back-button not known
second try:
<ion-buttons start>
<button ion-button>
<ion-icon name="ios-arrow-back"></ion-icon>
<p>back</p>
</button>
</ion-buttons>
However, it's strange that even with start, the button is on right end.
Playground:
ionic playground
hope to see advice, thanks
Try this. Works well on android and ios
<ion-buttons left>
<button ion-button (click)="dismiss()">
<span ion-text color="primary" showWhen="ios">Back</span>
</button>
<button ion-button (click)="dismiss()">
<ion-icon name="arrow-round-back" showWhen="android,windows"></ion-icon>
</button>
</ion-buttons>
When I minimize my Ionic app and open it after sometime, everything works except top left menu button and Android hardware back button.
I am unable to figure out the reason. I have to kill my app and reopen it then it works. Do I need to write any code or I need to do something else?
Below is my home.html header code:
<ion-header>
<ion-navbar color="headercolor" style="width:100%;">
<ion-title *ngIf="!toggled"><span style="color:orange;font-weight:bold;font-size:20px;">Dash</span><span style="color:#5990AE;font-weight:bold;font-size:20px;">board</span></ion-title>
<button ion-button menuToggle *ngIf="!toggled">
<ion-icon name="menu" class="icon" style="color: #ffffff;font-size:17px;"></ion-icon>
</button>
<ion-searchbar *ngIf="toggled" [showCancelButton]="true" [(ngModel)]="searchTerm" (ionCancel)="togglesearch()" (ionInput)="getItems($event)"></ion-searchbar>
<ion-buttons end *ngIf="!toggled">
<button ion-button icon-only (click)="togglesearch()">
<ion-icon name="search" class="icon" style="font-size:16px;"></ion-icon>
</button>
</ion-buttons>
</ion-navbar>
</ion-header>
Added three icons on my ionic home.html using the below code. Problem is they are looking very dis-aligned and very small in size on IOS.
<ion-header>
<ion-navbar color="headercolor" style="height:25px;">
<ion-title style="text-align:center;font-size:11px;margin-top:20px;">Tags</ion-title>
<button ion-button (click)="back()" style="background-color:transparent;margin-top:-50px;">
<ion-icon name="arrow-back" class="icon" style="color: #ffffff;font-size:20px;"></ion-icon>
</button>
<ion-buttons end>
<button ion-button icon-only (click)="home()">
<ion-icon name="home" class="icon" style="font-size:16px;"></ion-icon>
</button>
<button ion-button icon-only (click)="mailto()">
<ion-icon name="mail" class="icon" style="color: #ffffff;font-size:16px;"></ion-icon>
</button>
<button ion-button icon-only (click)="msg()">
<ion-icon name="chatboxes" class="icon" style="color: #ffffff;font-size:17px;" ></ion-icon>
</button>
<button ion-button icon-only (click)="close()">
<ion-icon name="close" class="icon" style="color: #ffffff;font-size:16px;"></ion-icon>
</button>
</ion-buttons>
</ion-navbar>
</ion-header>
What is the problem in my code and how can I fix this?
Below first screenshot is of Android and second screenshot is of iOS.
Android screenshot
iOS screenshot
this is the default icon for ios and android, so if you want to use same icon for both platform then use this: md-arrow-round-back
Now Android back button will be used for both platforms.
In the Android back button you can see a border. It can be removed by box-shadow:none.
For Alignment use <ion-row> -> all elements will be aligned
To increase the icon size use font-size property in the icon tag. The icon size will be increased too.
i have a few buttons in my app's screen and i want use Icon and below of that, write the title of the button...
in ionic 2 i can't use "< br>" or h1,h2 or even display block for this purpose.
code:
<button primary>
<ion-icon name="calendar"></ion-icon>
Calendar
</button>
i tried like this:
<button primary>
<h1>
<ion-icon name="calendar"></ion-icon>
</h1>
<br />
<h2>
Calendar
</h2>
</button>
thanks
You wont have a choice but to use sass. I'm not answering your question but are you sure you want it this way ??
You can do it this way ?
<button large >
<ion-icon name='home' class="breakme"></ion-icon>
Home
</button>
Or you can have lists with onclicks (click)="calendar" and fake it with a list?
<ion-list no-lines>
<ion-item (click)="getData()">
<ion-icon name="leaf"></ion-icon>
<br />
Herbology
</ion-item>
<ion-item (click)="getData()">
<ion-icon name="add"></ion-icon>
<br />
Calander
</ion-item>
</ion-list>
ok, I found a solution... Thank you Justin Willis
Instead of using extra html inside your button you can actually achieve this with just a touch of css. You can simply change the button-inner class to have a flex-flow of column. So you could just use something like this
.button-inner {
flex-flow: column;
}