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.
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 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>
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 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
In a Ionic2 component I use the [hidden] directive in the HTML template. The #Component definition is:
#Component({
selector: 'login-button',
template:
`<button ion-button round (click)="openLogin()" [hidden]="loggedIn">
Login
<ion-icon name="arrow-up"></ion-icon>
</button>
<button ion-button icon-only menuToggle [hidden]="!loggedIn">
<ion-icon name="menu"></ion-icon>
</button>
`
})
I declare a component variable:
export class LoginButton {
loggedIn: boolean = false;
The [hidden]="loggedIn" is working. The [hidden]="!loggedIn" shows the button no matter of the value of loggedIn variable.
How do I write that?
You can use *ngIf declaration. Example :
<div *ngIf = "loggedIn">
<button ion-button round (click)="openLogin()">
Login
<ion-icon name="arrow-up"></ion-icon>
</button>
</div>
<div *ngIf = "!loggedIn">
<button ion-button icon-only menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
</div>
--------------> Edit
<button ion-button round (click)="openLogin()" [hidden]="hideLogin1()">
Login
<ion-icon name="arrow-up"></ion-icon>
</button>
<button ion-button icon-only menuToggle [hidden]="hideLogin2()">
<ion-icon name="menu"></ion-icon>
</button>
-----------------------------
export class LoginButton {
hideLogin1(){
return true;
}
hideLogin2(){
return false;
}
}
May I suggest that you are experimenting the first mistake explained here?
Moreover, in Ionic2 you can also use showWhen and hideWhen (documentation here), could it fit your need?