I was just wondering that how can we create a button in center of tab menu like:
Tried few tests but couldn't get same or similar to this. Is there any help to do this?
You need to use ion-fab setting the vertical alignment to bottom and the horizontal alignment to center. With some extra css rules you can get exactly the same as the image you show.
<ion-tabs>
<ion-tab-bar slot="bottom">
<ion-tab-button tab="tab1">
<ion-icon name="albums-outline"></ion-icon>
<ion-label>Albums</ion-label>
</ion-tab-button>
<ion-tab-button tab="tab2">
<ion-icon name="people-outline"></ion-icon>
<ion-label>Accounts</ion-label>
</ion-tab-button>
<ion-tab-button></ion-tab-button>
<ion-tab-button tab="tab3">
<ion-icon name="card-outline"></ion-icon>
<ion-label>Card</ion-label>
</ion-tab-button>
<ion-tab-button tab="tab4">
<ion-icon name="settings-outline"></ion-icon>
<ion-label>Settings</ion-label>
</ion-tab-button>
</ion-tab-bar>
</ion-tabs>
<ion-fab vertical="bottom" horizontal="center" slot="fixed">
<ion-fab-button>
<ion-icon name="add-outline"></ion-icon>
</ion-fab-button>
</ion-fab>
Related
i added an icon in a text input, the icon is supposed to be clickable but after adding inside the text input it's no more clickable
<ion-input (ionChange)="inputChanged($event)" [formControlName]="formCtrlName">
<ion-icon [name]='eye-outline' (click)="togglePassword()" class="suffix-icon" </ion-icon>
</ion-input>
You need to place the <icon> element inside the <button> element.
<ion-input (ionChange)="inputChanged($event)" [formControlName]="formCtrlName">
<!-- In Ionic 4 version it is used as follows. -->
<ion-button (click)="clickEventFunction($event, item.id)">
<ion-icon [name]='eye-outline' (click)="togglePassword()" class="suffix-icon"</ion-icon>
</ion-button>
<!-- Used as below before "Ionic 4" release. -->
<button (click)="clickEventFunction($event, item.id)">
<ion-icon [name]='eye-outline' (click)="togglePassword()" class="suffix-icon"</ion-icon>
</button>
</ion-input>
clickEventFunction(event: Event, id: any){
/* Something */
}
References
ion-button
Ionic API Documentation
inside you ts file take a boolean:
showPass: boolean = false;
in html:
<ion-item lines="none">
<ion-input type="{{showPass ? 'text' : 'password'}}" placeholder="Password" (ionChange)="inputChanged($event)" [formControlName]="formCtrlName"></ion-input>
<ion-icon name="eye-outline" slot="end" *ngIf="!showPass" (click)="showPass = !showPass"></ion-icon>
<ion-icon name="eye-off-outline" slot="end" *ngIf="showPass" (click)="showPass = !showPass"></ion-icon>
</ion-item>
A simple way of making a clickable icon in an ion input.
I have Tabs like so: Just an example.
Doc: https://ionicframework.com/docs/api/tabs
<ion-tabs>
<ion-tab-bar slot="bottom">
<ion-tab-button tab="schedule">
<ion-icon name="calendar"></ion-icon>
<ion-label>Schedule</ion-label>
<ion-badge>6</ion-badge>
</ion-tab-button>
<ion-tab-button tab="speakers">
<ion-icon name="person-circle"></ion-icon>
<ion-label>Speakers</ion-label>
</ion-tab-button>
<ion-tab-button tab="about">
<ion-icon name="information-circle"></ion-icon>
<ion-label>About</ion-label>
</ion-tab-button>
</ion-tab-bar>
</ion-tabs>
Do you know how to create a bigger and rounded top tab like so on the 3rd one? i.e. middle one.
I have tried to change the height and border-radius. But none of them worked. Any clue, please?
Extracted from Adobe XD:
You could create a blank ion-tab-button and then create a custom element and stylize as you need to match your UI design.
<ion-tabs>
<ion-tab-bar slot="bottom">
<ion-tab-button tab="schedule">
<ion-icon name="calendar"></ion-icon>
</ion-tab-button>
<ion-tab-button tab="speakers">
<ion-icon name="person-circle"></ion-icon>
</ion-tab-button>
<ion-tab-button></ion-tab-button>
<ion-tab-button tab="about">
<ion-icon name="information-circle"></ion-icon>
</ion-tab-button>
<ion-tab-button tab="more">
<ion-icon name="add"></ion-icon>
</ion-tab-button>
</ion-tab-bar>
</ion-tabs>
<ion-fab vertical="bottom" horizontal="center" slot="fixed" edge="false">
<ion-fab-button type="button">
<ion-icon name="add"></ion-icon>
</ion-fab-button>
</ion-fab>
If you didn't want to use a ion-fab, you could create your own custom markup or component to manage the custom layout and style for middle button.
I'm having issues moving the '+' button to the right of the words 'Popular'.
Here's the code:
<ion-header>
<ion-navbar color="navbar">
<ion-buttons left>
</ion-buttons>
<ion-title text-center>Popular Itineraries</ion-title>
<div right>
<img src="assets/img/ic-add.png" (click)="openModal()"/>
</div>
</ion-navbar>
I notice in Ionic framework, you can not use things like right in a div and expect it to float right, Simple set a class name or an id name for your div or img and in the style, you can simple do something like this: assume the id for our div is img, then we can have something like this:
#img{
float: right;
}
Another thing you can do if the above method did not work is
#img{
right: 0;
position: absolute; //This one usually work in most case
}
If you follow docs you should use “start” and “end” with ion-buttons to place buttons and a like elements within toolbar or navbar:
Example:
<ion-buttons end>
<button ion-button clear icon-start>
<ion-icon name="aperture"></ion-icon>
Snip!
</button>
</ion-buttons>
Here is an example from production app:
<ion-header>
<ion-navbar>
<ion-buttons start>
<button [disabled]="false" ion-button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
</ion-buttons>
<ion-title>
<ion-col>
Publisher<br>
<ion-icon *ngIf="!foundation.appIsOnline || foundation.offGridMode" name="warning" isActive="false" color="danger" >
<small>Offgrid</small>
</ion-icon>
</ion-col>
</ion-title>
<ion-buttons end>
<button (click)="loadProfilePage()" ion-button clear item-end icon-right>100
<ion-icon name="contact"></ion-icon>
</button>
</ion-buttons>
</ion-navbar>
<ion-toolbar>
<ion-buttons start>
<button ion-button clear icon-start (click)="matrix3d()">
<ion-icon name="glasses"></ion-icon>
Matrix3D
</button>
</ion-buttons>
<ion-title class="centrify">
<button (click)="loadTutorialsPage()" ion-button clear icon-start>
<ion-icon name="school"></ion-icon>
Learn
</button>
</ion-title>
<ion-buttons end>
<button ion-button clear icon-start (click)="saveSceneAsPNG()">
<ion-icon name="share"></ion-icon>
Share
</button>
</ion-buttons>
</ion-toolbar>
</ion-header>
In your case if you want users to see only icon as button you can use “icon-only” as attribute for button. Check official docs for more details
I have the following html
<ion-item>
<ion-range min="5" max="300" pin="true" [(ngModel)]="contrast" color="secondary" ionChange=“changeRange(contrast)”>
<ion-icon range-left small name="contrast"></ion-icon>
<ion-icon range-right name="contrast"></ion-icon>
</ion-range>
</ion-item>
the result is:
and this is the triggered method :
changeRange(valor){
console.log(valor.value);
}
Where, as you can see, I use the ionChange to execute the changeRange method. But when I run it, I get the following error.
what am I doing wrong?
I could not find the solution for this way of using the range.
But I was able to achieve the goal by changing in this way.
<ion-range min="20" max="300" color="secondary" (ionChange)="changeRange($event)">
<ion-icon range-left small name="contrast">20</ion-icon>
<ion-icon range-right name="contrast">300</ion-icon>
</ion-range>
and
changeRange(valor){
console.log(valor.value);
}
This is only a warning & it doesn't affect your application. You can just ignore it or you can try another plugin for the range component
I need to apply the sliding effect with these buttons. I have the following html:
<ion-row class="row-two-button">
<ion-col class="button-group">
<button ion-button round color="secondary" [ngClass]="{dark: travelDestinationA, light: travelDestinationB}" (click)="changeDirectionTravel()">
<ion-icon name="md-bus"></ion-icon>
Centro
</button>
<button ion-button round color="secondary" [ngClass]="{dark: travelDestinationB, light: travelDestinationA}" (click)="changeDirectionTravel()">
<ion-icon name="md-bus"></ion-icon>
Bairro
</button>
</ion-col>
</ion-row>
I need to make the slide effect in scss. I'm using ionic 3. If it does not work with my html code how can I do it with another type, a div or something like
When sliding it is also necessary to perform a function in angular 2 or angular 4