I referred to my button to align left and right start and end key as per the above link. But i am not able to set my button as per the view in the link here is my output image
Here is my code
<ion-header class="home">
<ion-navbar primary padding>
<ion-row>
<ion-buttons start>
<button menuToggle >
<ion-icon name="menu"></ion-icon>
</button>
</ion-buttons>
<ion-title>Auto Parts</ion-title>
<ion-buttons end>
<button> <ion-icon name="document"></ion-icon></button>
<button><ion-icon name="heart"></ion-icon></button>
<button><ion-icon name="cart"></ion-icon></button>
</ion-buttons>
</ion-row>
<ion-row>
<ion-searchbar (ionInput)="getItems($event)"></ion-searchbar>
</ion-row>
</ion-navbar>
</ion-header>
What I have tried so far is:
float: right; and float: left;
algin: right
but not able to get my button to left
You can achieve that layout by using an <ion-toolbar> to place the search bar like you can see in this plunker
<ion-header class="home">
<ion-navbar primary padding>
<button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>Auto Parts</ion-title>
<ion-buttons end>
<button> <ion-icon name="document"></ion-icon></button>
<button><ion-icon name="heart"></ion-icon></button>
<button><ion-icon name="cart"></ion-icon></button>
</ion-buttons>
</ion-navbar>
<ion-toolbar primary>
<ion-searchbar (ionInput)="getItems($event)"></ion-searchbar>
</ion-toolbar>
</ion-header>
EDIT:
To hide both borders, the no-border attribute should be used on the
ion-toolbar. To hide the top or bottom border, the no-border-top and
no-border-bottom attribute should be used.
Related
I am using ionic angular,ion-button is not working in some parts of code,but it is working in some parts of code.The button is not getting clicked.
<div class="ion-page" id="main">
<ion-header>
<ion-toolbar>
<ion-button slot="start" expand="block" >
<ion-menu-button ></ion-menu-button>
<!-- <ion-menu-button (onclick)="gotoLogin()"></ion-menu-button> -->
</ion-button>
<ion-title>Capture Image</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<ion-button (click)="goToProfile()">Profile Page</ion-button>
</ion-list>
</ion-content>
</div>
<ion-menu side="start" menuId="first" contentId="main">
<ion-header>
<ion-toolbar color="primary">
<ion-title>Menu</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<ion-button (click)="goToProfile()">Profile Page</ion-button>
<ion-button>Capture Image</ion-button>
<ion-item>Community</ion-item>
</ion-list>
</ion-content>
</ion-menu>
The button in div is not working where as button in ion-menu is working.
What is the problem with this?
You can try like this, according to https://ionicframework.com/docs/api/item
<ion-list>
<!-- Item as a Button -->
<ion-item button (click)="buttonClick()">
<ion-label>
Button Item
</ion-label>
</ion-item>
</ion-list>
I need to remove hamburger default icon menu on ionic menu. I've added custom menu and I need to remove default icon.
So my code:
<ion-menu side="start">
<ion-header>
<ion-toolbar>
<ion-title>Menu</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<ion-item>
<ion-icon name="home" slot="start"></ion-icon>
<ion-label>Home</ion-label>
</ion-item>
<ion-item>
<ion-icon name="person" slot="start"></ion-icon>
<ion-label>Profile</ion-label>
</ion-item>
<ion-item>
<ion-icon name="chatbubbles" slot="start"></ion-icon>
<ion-label>Messages</ion-label>
</ion-item>
<ion-item>
<ion-icon name="settings" slot="start"></ion-icon>
<ion-label>Settings</ion-label>
</ion-item>
</ion-list>
</ion-content>
</ion-menu>
My layout menu:
Html button code:
<ion-header _ngcontent-yjt-c1="" role="banner" class="ios header-ios hydrated">
<ion-toolbar _ngcontent-yjt-c1="" class="ios hydrated">
<ion-buttons _ngcontent-yjt-c1="" slot="start" class="buttons-first-slot sc-ion-buttons-ios-h sc-ion-buttons-ios-s ios hydrated">
<ion-menu-button _ngcontent-yjt-c1="" class="hydrated ios button ion-activatable ion-focusable"></ion-menu-button>
</ion-buttons>
<ion-title _ngcontent-yjt-c1="" class="ios title-ios hydrated"></ion-title>
</ion-toolbar>
</ion-header>
I need to remove default icon inside circle. How to do to remove?
Can you please try the following css rules?
Can you please check if they don't work if they get added to the css of the page you are viewing?
ion-menu-button {
display: none !important;
}
or
ion-buttons {
display: none !important;
}
or
.button.ion-activatable.ion-focusable {
display: none !important;
}
Add the below styles in your app.scss file to hide the default menu button
.bar-button-menutoggle {
display: none !important;
}
I hope you can help me with this problem. Since yesterday I’ve been trying to position this green button on the right side. And things like margin don’t work:(
HTML
<ion-header>
<ion-toolbar color="rank">
<ion-searchbar (input)="getItems($event)"></ion-searchbar>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list-header>
Friends
</ion-list-header>
<ion-list>
<ion-item>
<ion-avatar item-start>
<img src="img/fri.jpg">
</ion-avatar>
<h1>JanePrincess</h1>
<h3>Iceland, Reykjavik </h3>
<button ion-button color="rank" round>Add</button>
</ion-item>
</ion-list>
</ion-content>
Here the button
Just like you can see in the docs, you can achieve that by using the item-end attribute in the button:
<ion-list>
<ion-item>
<ion-avatar item-start>
<img src="img/fri.jpg">
</ion-avatar>
<h1>JanePrincess</h1>
<h3>Iceland, Reykjavik </h3>
<button ion-button color="rank" round item-end>Add</button>
</ion-item>
<!-- ... -->
</ion-list>
Use ion-item padding.
<ion-item padding>
<button default ion-button item-right color="rank" round >Add</button>
</ion-item>
You can use css as well.
I hope you made the CSS file for the above problem, so try putting the following code into it:
button {
color:green;
position:relative;
top:-43px;
left: 410px;
}
To adjust the position of the button horizontally, just adjust left position accordingly.
<ion-header no-border style="border-bottom: 1px solid #EDEDED;">
<ion-navbar no-border-bottom>
<ion-title>
Nova Mensagem
</ion-title>
<ion-buttons end>
<button ion-button icon-only>
<span style="color:#5D5A56">Seguinte</span>
</button>
</ion-buttons>
</ion-navbar>
</ion-header>
<ion-content class="contentbg">
<div style="padding:15px;background-color:white;" class="customborder2">
<span style="font-size:16px;color:#5D5A56;margin-right:5px;margin-top:10px">Para:</span>
<ion-chip *ngFor="let lista of selecionados; let i = index" #chip1 style="background-color:#F0F0F0;color:#5D5A56;margin-right:5px">
<ion-label>{{lista}}</ion-label>
<button ion-button clear (click)="delete(chip1, listaIds[i], lista, check[i])">
<ion-icon name="close-circle"></ion-icon>
</button>
</ion-chip>
</div>
<div style="border-bottom: 1px solid #F3F3F3;background-color:white">
<ion-searchbar mode="md"
[(ngModel)]="searchQuery"
[showCancelButton]="shouldShowCancel"
placeholder="Pesquisar utilizadores"
(ionInput)="onInput($event)"
(ionCancel)="onCancel($event)">
</ion-searchbar>
</div>
<ion-label style="margin-left:15px;margin-top:30px;">
<span class="strong" style="text-transform:uppercase;font-size:13px;color:#999999">{{titulo}}</span>
</ion-label>
<ion-list>
<ion-item *ngFor="let sugestao of sugeridos" class="customborder customborder2 animacao" >
<ion-label>
<ion-avatar style="float:left">
<div style="border-radius:50%;width:40px;height:40px;background-position:center;background-size:cover" [style.background-image]="'url(http://bacotaco.web.ua.pt/img/' + sugestao.foto + ')'"></div>
</ion-avatar>
<div style="float:left;position:relative;top:3px;left:10px">
<div style="text-overflow:ellipsis;overflow: hidden;"><p style="font-size:16px;color:black">{{sugestao.nomeC}}</p></div>
<p class="sub" style="color:#AAAAAA;font-size:14px;">{{sugestao.tipo}}</p>
</div>
</ion-label>
<ion-checkbox item-right color="tint" (click)="selecionado(sugestao.id, sugestao.nome, sugestao.index)" [(ngModel)]="sugestao.selecionado"></ion-checkbox>
</ion-item>
</ion-list>
</ion-content>
You can select people via a list created from a database, by searching.
_
The structure is the following:
A div with "To:", where the names are added after (To: Mike e.g.);
The search bar;
An ion-list with the searched people with a checkbox each.
Here's a screenshot.
_
When you check someone, the name is added as a span to the div where "To:" is. Deselecting removes the name. People can be searched via the search bar, updating the list.
My question is: how can I simply add the names into the search bar, instead of having a separate div, moving the cursor to the right.
Like what it is on Facebook's Messenger or Instagram - check picture.
How can I align with the right side, the button is showing on the left of the header without compose icon.
Here is what I'm doing:
<ion-toolbar>
<ion-title>TODO APP</ion-title>
<button class = "button button-icon">
<i class="icon ion-compose"></i>
</button>
</ion-toolbar>
Ionic 2 / Ionic 3 has something for that, just look at the following code :
<ion-header>
<ion-navbar primary>
<ion-buttons start>
<button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
</ion-buttons>
<ion-title>
My Page
</ion-title>
<ion-buttons end>
<button (click)="myFunction()" ion-button icon-only>
<ion-icon name="search"></ion-icon>
</button>
</ion-buttons>
</ion-navbar>
</ion-header>
The advantage of solving your problem this way is that your navbar will automatically respect the android/ios/windows guidelines. So this way you improve the quality of your app.
More informations about the guidelines :
Android :
https://developer.android.com/guide/practices/ui_guidelines/index.html
iOS :
https://developer.apple.com/ios/human-interface-guidelines/
Windows :
https://developer.microsoft.com/en-us/windows/design
ionic 4 ion-navbar is replaced by ion-back-button and in Ionic 4 back button be like
<ion-header>
<ion-toolbar>
<ion-buttons slot="start">
<ion-back-button></ion-back-button>
</ion-buttons>
<ion-title>
Home
</ion-title>
<ion-button slot="secondary">
<ion-icon name="search"></ion-icon>
</ion-buttons>
</ion-toolbar>
</ion-header>
You can add button in right side in header in ionic 2.0
<ion-navbar *navbar>
<ion-title>
TODO APP
</ion-title>
<ion-buttons end>
<button ><ion-icon name="home"></ion-icon></button>
</ion-buttons>
</ion-navbar>
You can add your custom icon's css class like this
css
.ion-ios-custom:before {
background-image: url("image-icon.png");
}
OR
.ion-ios-custom:before {
content: "\f439"; /* your font code */
}
OR
.ion-ios-custom:before {
content: url("image-icon.png") !important;
}
html
<ion-icon name="custom"></ion-icon>
It's work for me.
Ionic 4 - Header
<ion-header>
<ion-toolbar color="primary">
<ion-title class="titleHeader">User Detail</ion-title>
<ion-buttons slot="end">
<ion-back-button defaultHref="/"></ion-back-button>
</ion-buttons>
</ion-toolbar>
</ion-header>
I solved my problem with this:
ion-buttons {
order: 10
}
Try adding it to your stylesheet
Note: I used this in ionic2.
<ion-toolbar color='primary'>
<button ion-button menuToggle>
<ion-icon name='menu'></ion-icon>
</button>
<ion-title>TODO APP</ion-title>
<ion-buttons start>
<button (click)='YOUR_FUNCTION_CALL' ion-button icon-only>
<ion-icon name='YOUR_ICON_NAME'></ion-icon>
</button>
</ion-buttons>
</ion-toolbar>
Replace:
YOUR_FUNCTION_CALL with the function call you need to call when click
YOUR_ICON_NAME with icon name
for icons please visit this website http://ionicframework.com/docs/v2/ionicons/
It can be done as follow:
<ion-header class="ion-no-border">
<ion-toolbar>
<ion-button slot="start">
<ion-icon name="search"></ion-icon>
</ion-button>
<ion-title>
utenze
</ion-title>
<ion-button slot="end">
<ion-icon name="menu"></ion-icon>
</ion-button>
</ion-toolbar>
</ion-header>
<ion-view title="home" align-title="center">
<ion-nav-buttons side="right">
<button ng-click="search()" class="button button-icon icon ion-android-search"></button>
</ion-nav-buttons>
<ion-content has-bouncing="0px">
</ion-content>
</ion-view>
this should work for you ......