How does one display an ion-searchbar and an ion-segment inline in the same ion-toolbar? I'm using Ionic 3.
(in case you're curious, this is landscape-mode-only thing because in landscape mode vertical space is at a premium).
I'm (mostly) able to get this to work with ion-col, as seen below. Everything looks good in Chrome via Ionic Serve. But when running on a real device, the ion-segment gets pushed down and doesn't look right.
Example code below:
<ion-toolbar color="primary">
<ion-row>
<ion-col no-padding>
<ion-segment [(ngModel)]="joined" (ionChange)="switchView($event)" color="light">
<ion-segment-button [value]="true">
{{'PROJECT_JOINED_BUTTON' | translate}}
</ion-segment-button>
<ion-segment-button [value]="false">
{{'PROJECT_LIST_BUTTON' | translate}}
</ion-segment-button>
</ion-segment>
</ion-col>
<ion-col no-padding>
<ion-searchbar [(ngModel)]="query" (ionInput)="load()" color="light" debounce="500" showCancelButton="true" placeholder="Search projects"></ion-searchbar>
</ion-col>
</ion-row>
</ion-toolbar>
How it looks in Chrome via Ionic Serve when spoofing iPhone mode
How it looks on a real iOS device:
What works:
I am able to get buttons to align to the end using ion-buttons end. However, when I wrap the ion-segment inside an ion-buttons, the segment doesn't appear at all. When I try applying the end attribute to the ion-segment, the segment overlays the search bar.
<ion-toolbar color="primary">
<ion-searchbar [(ngModel)]="query" (ionInput)="load()" color="light" debounce="500" showCancelButton="true" placeholder="Search projects"></ion-searchbar>
<ion-buttons end>
<button ion-button clear>
Test Button
</button>
</ion-buttons>
</ion-toolbar>
Is there a way to reliably display an ion-segment inline with other content inside an ion-toolbar? Thanks!
Try using align-items-center and col-6 like:
<ion-toolbar color="primary">
<ion-grid>
<ion-row align-items-center>
<ion-col no-padding col-6>
<ion-segment [(ngModel)]="joined" (ionChange)="switchView($event)" color="light">
<ion-segment-button [value]="true">
{{'PROJECT_JOINED_BUTTON' | translate}}
</ion-segment-button>
<ion-segment-button [value]="false">
{{'PROJECT_LIST_BUTTON' | translate}}
</ion-segment-button>
</ion-segment>
</ion-col>
<ion-col no-padding col-6>
<ion-searchbar [(ngModel)]="query" (ionInput)="load()" color="light" debounce="500" showCancelButton="true" placeholder="Search projects"></ion-searchbar>
</ion-col>
</ion-row>
</ion-grid>
</ion-toolbar>
documentation: https://ionicframework.com/docs/api/components/grid/Grid/
Related
I have created three ion segment buttons. How to fix the buttons fit to the screen? As you can see in the image below, the segment buttons are automatically placed in the center. I'm unable to make the buttons stretch.
<ion-segment>
<div>
<ion-segment-button value="p1" >
<ion-label><b>Person 1</b></ion-label>
</ion-segment-button>
</div>
<div>
<ion-segment-button value="p2">
<ion-label><b>Person 2</b></ion-label>
</ion-segment-button>
</div>
<div>
<ion-segment-button value="p3">
<ion-label><b>Person 3</b></ion-label>
</ion-segment-button>
</div>
</ion-segment>
You can use ion-row and ion-col like this:
<ion-row>
<ion-segment>
<ion-col>
<ion-segment-button value="p1" >
<ion-label><b>Person 1</b></ion-label>
</ion-segment-button>
</ion-col>
<ion-col>
<ion-segment-button value="p2">
<ion-label><b>Person 2</b></ion-label>
</ion-segment-button>
</ion-col>
<ion-col>
<ion-segment-button value="p3">
<ion-label><b>Person 3</b></ion-label>
</ion-segment-button>
</ion-col>
</ion-segment>
</ion-row>
I'm using Ionic 4 and tab layout.
I have one tab page with QR Code Scanner. Hence the the page is set to transparent as below
<ion-content padding color="transparent">
<ion-item lines="none" class="top-content">
<ion-grid>
<ion-row>
<ion-col>
<ion-label text-center no-margin>
Scan QR Code to start
</ion-label>
</ion-col>
</ion-row>
</ion-grid>
</ion-item>
</ion-content>
and have following interface
The second tab displays a list of items and thus have pull-to-refresh on the page. The code is
<ion-header>
<ion-toolbar color="primary">
<ion-title>Item List</ion-title>
</ion-toolbar>
</ion-header>
<ion-content padding>
<ion-refresher slot="fixed" (ionRefresh)="refreshList($event)">
<ion-refresher-content>
</ion-refresher-content>
</ion-refresher>
<ion-card color="primary" (click)="showAction(1)">
<ion-card-content>
<!-- item content -->
</ion-card-content>
</ion-card>
</ion-content>
But on pulling the page, it shows transparent background from the first page where the QR Code scanner has opened the camera and thus on pulling it shows camera output.
How can I close or hide page before opening a new page?
I am using ionic framework. The following code make the buttons align left. I would like to make the buttons align center. How can I do that ? Thanks
<ion-list>
<ion-item><button ion-button (click)="gotoPage1();">Go page 1</button></ion-item>
<ion-item><button ion-button (click)="gotoPage2()">Go page 2</button></ion-item>
<ion-item><button ion-button (click)="gotoPage3()">Go page 3</button></ion-item>
</ion-list>
The current answer (Ionic 4) requires that in addition to using text-center, your wrap the buttons in a label. This works correctly:
<ion-list>
<ion-item text-center>
<ion-label>
<ion-button (click)="gotoPage1();">Go page 1</ion-button>
</ion-label>
</ion-item>
<ion-item text-center>
<ion-label>
<ion-button (click)="gotoPage2();">Go page 2</ion-button>
</ion-label>
</ion-item>
<ion-item text-center>
<ion-label>
<ion-button (click)="gotoPage3();">Go page 3</ion-button>
</ion-label>
</ion-item>
</ion-list>
Ionic provides a set of utility attributes that can be used on any element in order to modify the text or adjust the padding or margin.
Read - Ionic CSS Utilities
you can use text-center
The inline contents are centered within the line box.
Try like this'
<ion-list >
<ion-item text-center ><button ion-button (click)="gotoPage1(); ">Go page 1</button></ion-item>
<ion-item text-center><button ion-button (click)="gotoPage2()">Go page 2</button></ion-item>
<ion-item text-center><button ion-button (click)="gotoPage3()">Go page 3</button></ion-item>
</ion-list>
stackblitz - code
You can use ionic's text-center CSS Utility. See https://ionicframework.com/docs/theming/css-utilities/
Example Usage:
<ion-item text-center>
<button ion-button>click me</button>
</ion-item>
If you don't want the whole item content to be centered you can use css to center just the button.
e.g. wrapping the button with a text-center wrapper div inside the ion-item
Ionic Framework Center button within ionic item
I used this method
<ion-grid>
<ion-row>
<ion-col size="12" class="ion-text-center">
<ion-button>
Login
</ion-button>
</ion-col>
</ion-row>
</ion-grid>
On my homepage I have a set of tabs. When I click on the + icon, a new page (AddReportPage) is being pushed (this.navCtrl.push(AddReportPage)).
On this new page I want to display a new set of tabs with different icons and different functions(see image 2).
But when I use the ion-tabs, they're not being displayed...
These tabs have to execute functions with ionSelect.
Do you have a solution?
1.
2.
You could try to use the tabsHideOnSubPages property in your tab tag: Ionic Docs - Tab.
<ion-tabs>
<ion-tab tabsHideOnSubPages="true" [root]="AddReportPage"></ion-tab>
</ion-tabs>
Then in your pushed page you'll be able to see the tabs from there.
I managed to get pretty much the same result with an ion-toolbar in a ion-footer.
Thanks for the help!
<ion-footer>
<ion-toolbar>
<ion-row>
<ion-col no-padding>
<button ion-button icon-only clear (click)="getPicture()">
<ion-icon name="images"></ion-icon>
</button>
</ion-col>
<ion-col no-padding>
<button ion-button icon-only clear (click)="takePicture()">
<ion-icon name="camera"></ion-icon>
</button>
</ion-col>
<ion-col no-padding>
<button ion-button icon-only clear>
<ion-icon name="paper-plane"></ion-icon>
</button>
</ion-col>
</ion-row>
</ion-toolbar>
</ion-footer>
Is there a simple way to make ion-cards swipe rather than stack vertically one above the other?
I currently have the cards stacking vertically using this code:
<ion-content class="outer-content speaker-list">
<ion-card *ngFor="#speaker of speakers" class="speaker">
<ion-card-header>
<ion-item>
<ion-avatar item-left>
<img [src]="speaker.profilePic">
</ion-avatar>
{{speaker.name}}
</ion-item>
</ion-card-header>
<ion-card-content class="outer-content">
<ion-list>
<button ion-item *ngFor="#session of speaker.sessions" (click)="goToSessionDetail(session)">
<h3>{{session.name}}</h3>
</button>
<button ion-item (click)="goToSpeakerDetail(speaker)">
<h3>About {{speaker.name}}</h3>
</button>
</ion-list>
</ion-card-content>
<ion-item>
<button (click)="goToSpeakerTwitter(speaker)" clear item-left>
<ion-icon name="logo-twitter"></ion-icon>
Tweet
</button>
<button (click)="openSpeakerShare(speaker)" clear item-right>
<ion-icon name="share"></ion-icon>
Share
</button>
</ion-item>
</ion-card>
</ion-content>
I am looking for a simple way to get them to swipe rather than stack. There are various plugins that do Tinder like swiping cards but I was wondering if there is a setting that can be given to ion-card to make the cards do a simple swipe (I am not looking for the Tinder visual effect) like a carousel.
I am using ionic V2.