I would like to create ion-fab-list from a list item, instead from the main fab icon, in a way I could show extra options...
Is there any way I could do that correctly?
When i tried, the sublist is positioned incorrectly.
Here is a non working example...
<ion-fab slot="fixed" vertical="bottom" horizontal="end">
<ion-fab-button>
<ion-icon :icon="add"></ion-icon>
</ion-fab-button>
<ion-fab-list side="top">
<ion-fab-button>
<ion-icon :icon="text" #click=""></ion-icon>
</ion-fab-button>
<ion-fab-list side="start">
<ion-fab-button color="danger">
<ion-icon name="chevron-back"></ion-icon>
</ion-fab-button>
<ion-fab-button color="dark">
<ion-icon name="chevron-back"></ion-icon>
</ion-fab-button>
</ion-fab-list>
<ion-fab-button>
<ion-icon :icon="image"></ion-icon>
</ion-fab-button>
<ion-fab-button>
<ion-icon :icon="shapes"></ion-icon>
</ion-fab-button>
</ion-fab-list>
</ion-fab>
Any ideas of how I can acchieve this?
Thanks in advance...
Related
all working fine before adding ion-tab-button, I have buttons ionic with routing to another page
when i have added ion-tabs , the router link not work in button after click
where is my error ?! i need a solution .
this is my home.page.html
<ion-header translucent>
<ion-toolbar>
<ion-buttons slot="start">
<ion-menu-button></ion-menu-button>
</ion-buttons>
<ion-title>SERVER STORE</ion-title>
</ion-toolbar>
</ion-header>
<ion-content fullscreen>
<ion-grid>
<ion-row>
<ion-col size="12">
<ion-slides pager="true" [options]="slideOptsOne" #slideWithNav
(ionSlideDidChange)="SlideDidChange(sliderOne,slideWithNav)">
<ion-slide *ngFor="let s of sliderOne.slidesItems">
<img src="assets/{{s.id}}.png">
</ion-slide>
</ion-slides>
</ion-col>
</ion-row>
</ion-grid>
<ion-grid>
<ion-row>
<ion-col>
<ion-button expand="block" [routerLink]="['/iptv-list']" >IPTV List </ion-button>
</ion-col>
</ion-row>
<ion-row>
<ion-col>
<ion-button expand="block" [routerLink]="['/sharing']" >Sharing List </ion-button>
</ion-col> </ion-row>
</ion-grid>
</ion-content>
<ion-tabs>
<ion-tab-bar slot="bottom">
<ion-tab-button >
<ion-icon name="speedometer"></ion-icon>
<ion-label>مباريات اليوم</ion-label>
</ion-tab-button>
<ion-tab-button >
<ion-icon name="play-circle"></ion-icon>
<ion-label>WATCH</ion-label>
</ion-tab-button>
</ion-tab-bar>
</ion-tabs>
i find the solution :
adding <ion-toolbar> as parent of ion-tabs
solve my problem
I have a requirement where in i need to wrap ionic chips within ion-item of ion-list.
Below is the code for it.
<ion-content>
<ion-list>
<ion-item *ngIf="showLayout" class="wrapname">
<ion-chip color="danger" item-content>
<ion-label >Secondary Label</ion-label>
<ion-icon name="close"></ion-icon>
</ion-chip>
<ion-chip color="danger" item-content>
<ion-label >Secondary Label</ion-label>
<ion-icon name="close"></ion-icon>
</ion-chip>
<ion-chip color="danger" item-content>
<ion-label >Secondary Label</ion-label>
<ion-icon name="close"></ion-icon>
</ion-chip>
</ion-item>
</ion-list>
</ion-content>
Below is the scss code for it.
.wrapname{
word-wrap: break-word;
white-space: pre-wrap;
width:100%;
}
I have used word-wrap,but still its not working.
Am i going wrong somewhere??
In Ionic 4 to get <ion-chip> items to wrap inside of <ion-item>, you need to put them inside of a <ion-label text-wrap class="ion-text-wrap">. So in your example, you'd do the following:
<ion-content>
<ion-list>
<ion-item *ngIf="showLayout">
<ion-label text-wrap class="ion-text-wrap">
<ion-chip color="danger">
<ion-label>Secondary Label</ion-label>
<ion-icon name="close"></ion-icon>
</ion-chip>
<ion-chip color="danger">
<ion-label>Secondary Label</ion-label>
<ion-icon name="close"></ion-icon>
</ion-chip>
<ion-chip color="danger">
<ion-label>Secondary Label</ion-label>
<ion-icon name="close"></ion-icon>
</ion-chip>
</ion-label>
</ion-item>
</ion-list>
</ion-content>
I ran into this same problem and wrapping the ion-chip inside ion-label resolved the issue for me. 👍
You can simply achieve this with the help of *ngFor
Check below code :
.ts:
items = ["Test","Test1","Test12","Test123", "Test1234", "Test12345", "Test123456", "Test1234567", "Test123456", "Test12345", "Test1234", "Test123", "Test12", "Test1", "Test"];
.html:
<ion-content padding>
<ion-chip *ngFor="let item of items;" color="danger" item-content style="margin-left: 10px;">
<ion-label > {{ item }}</ion-label>
<ion-icon name="close"></ion-icon>
</ion-chip>
</ion-content>
Will create a list of chips as below :
StackBiz Demo: https://stackblitz.com/edit/ionic-vscljq
Hope this will helps.
Example on android/Browser
Works Fine on Android
Example On Ios
Not work as well
page.html
<ion-header [scrollHide]="headerScrollConfig" [scrollContent]="pageContent" >
<ion-navbar color="ticket-blue-rainbow" >
<ion-row>
<ion-title> {{ evento.descricao }}</ion-title>
<ion-icon class="padding-icon" name="thumbs-up" color="light" item-right icon-right (click)="likeEvento()"></ion-icon>
<ion-icon class="padding-icon" name="ios-heart" item-right color="danger" (click)="onClickFavorit()"></ion-icon>
<ion-icon class="padding-icon" name="share" item-right (click)="onClickOpenModal()" color="light" style="padding-right: 10px !important;"></ion-icon>
</ion-row>
</ion-navbar>
</ion-header>
page.scss
.padding-icon {
padding-right: 15px;
font-size: 20px;
}
To overcome above issue you need to use below option with <ion-buttons> tag
<ion-buttons right>
<ion-icon class="padding-icon" name="thumbs-up" color="light" item-right icon-right
(click)="likeEvento()"></ion-icon>
</ion-buttons>
It will work and show your buttons on right side.
<ion-header>
<ion-navbar>
<ion-title> {{ evento.descricao }}</ion-title>
<ion-buttons right>
<ion-icon class="padding-icon" name="thumbs-up" color="light" item-right icon-right (click)="likeEvento()"></ion-icon>
<ion-icon class="padding-icon" name="ios-heart" item-right color="danger" (click)="onClickFavorit()"></ion-icon>
<ion-icon class="padding-icon" name="share" item-right (click)="onClickOpenModal()" color="light" style="padding-right: 10px !important;"></ion-icon>
</ion-buttons>
</ion-navbar>
</ion-header>
I don’t no if this method is the most correctly, but in this situation i use this class on ios
.ios {
page-event
{
.padding-ios{
padding-left:70%!important;
}
}
}
and on html i used
<ion-buttons right class="padding-ios">
</ion-buttons>
I want to set menuToggle button in the left side of input text I used this code:
<div id="searchDiv">
<ion-item>
<button item-start ion-button icon-only color="dark" menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<input type="text" placeholder="I'm Searching For .." [(ngModel)]="searchInput" />
</ion-item>
</div>
and I get this output:
If I remove menuToggle from tag button to be:
<button item-start ion-button icon-only color="dark" menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
It align to left correctly, I don't know what is the problem with menuToggle, what should i do?
In src\app\app.html set this:
<ion-menu [content]="content" side='right'>
This will work correctly.
if you want menu toggle at right side then do it and this will be at your page
<div class="bar bar-header"> <h1 class="title">Header Buttons</h1> <button item-start ion-button icon-only color="dark" menuToggle> <ion-icon name="menu"></ion-icon> </button> </div>
use this code for buttons
I'm having trouble with dynamic button in navbar. Here's the code:
<ion-header>
<ion-navbar>
<button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>{{action.name}}</ion-title>
<ion-buttons end>
<button *ngIf="view.searchable">
<ion-icon name="search"></ion-icon>
</button>
<button *ngIf="view.creatable">
<ion-icon name="create"></ion-icon>
</button>
<button (click)="showMenu($event)">
<ion-icon name="more"></ion-icon>
</button>
</ion-buttons>
</ion-navbar>
</ion-header>
Output:
Please help. Thanks!
For some reason, the *ngIfis causing that issue (you can try by removing it, and the button is properly displayed). In order to solve it, you can change it like this:
<ion-header>
<ion-navbar>
<button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>{{action.name}}</ion-title>
<ion-buttons *ngIf="view.searchable" end>
<button>
<ion-icon name="search"></ion-icon>
</button>
</ion-buttons>
<ion-buttons *ngIf="view.creatable" end>
<button>
<ion-icon name="create"></ion-icon>
</button>
</ion-buttons>
<ion-buttons end>
<button (click)="showMenu($event)">
<ion-icon name="more"></ion-icon>
</button>
</ion-buttons>
</ion-navbar>
</ion-header>
Notice that I bind the *ngIfto the ion-buttons element instead of the button directly. Please take a look at this working plunker.