I've create a side menu.
and button inside it
<ion-content style="background-image: url(assets/imgs/background.jpg)" >
<div id="sideBody">
<ion-list>
<button menuClose ion-item *ngFor="let p of Func.getPages()" (click)="openPage(p, p.title)">
{{p.title}}
</button>
</ion-list>
</div>
</ion-content>
</ion-menu>
how to make underline inside menu not showing and how change color text menu?
<ion-list no-lines>
<button menuClose ion-item *ngFor="let p of Func.getPages()" (click)="openPage(p, p.title)">
{{p.title}}
</button>
</ion-list>
Simply by putting no-lines property in like above i had edited your code.
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'm trying to implement the ion-item-sliding option to create an ion-card that can slide within a flex-box grid. Unfortunately, it doesn't seem to work very well.
To be specific, nothing actually happens! No matter what direction I swipe from, there is no indication of a swipe taking place.
Here is what I have so far:
<ion-content padding>
<ion-grid>
<ion-row>
<ion-col col-6 offset-sm-3 *ngFor = "let list of listRef | async">
<ion-item-sliding>
<ion-item>
<ion-card>
<img *ngIf="list.color=='#f55f7c'" src="data:image/png;base64,iVBORw0dsfladj=">
<img *ngIf="list.color=='#ffcb53'" src="data:image/png;base64,iVB5CYII=">
<img *ngIf="list.color=='#85dec8'" src="data:image/png;base64,iVBORw0KGgoAAAANSU=">
</ion-card>
</ion-item>
</ion-item-sliding>
<ion-item-options side="left">
<button ion-button>Favorite</button>
<button ion-button color="danger">Share</button>
</ion-item-options>
</ion-col>
<button id="add-bttn" ion-button [navPush]="goNew"><ion-icon name="add"></ion-icon></button>
</ion-row>
</ion-grid>
</ion-content>
I've tried it with the *ngFor statement placed within the tag and in the tag. No go.
Any help would be enlightening!
Just like you can see in the Docs, the ion-item-options should be within the ion-item-sliding element. Besides, the items should be placed inside of an ion-list container.
So something like this should work:
<ion-content padding>
<ion-list> <!-- Here I've added the ion-list -->
<ion-row>
<ion-col col-6 offset-sm-3 *ngFor = "let list of listRef | async">
<ion-item-sliding>
<!-- Item -->
<ion-item>
<ion-card>
<img src="https://randomuser.me/api/portraits/men/51.jpg">
</ion-card>
</ion-item>
<!-- Options -->
<ion-item-options side="left">
<button ion-button>Favorite</button>
<button ion-button color="danger">Share</button>
</ion-item-options>
</ion-item-sliding> <!-- This includes the options-->
</ion-col>
<button id="add-bttn" ion-button [navPush]="goNew">
<ion-icon name="add"></ion-icon>
</button>
</ion-row>
</ion-list>
</ion-content>
Stackblitz project
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.
I am trying to apply some CSS to the background of an ionic side menu. My CSS is very simple:
.my-menu-item {
background-color: blue !important;
color: white !important
}
I have applied this style to ion-content, ion-list, ion-item, and ion-side-menu. And never do any of the menu items get a blue background.
Is there a way to do this? If so how?
Here is my html code:
<ion-side-menus enable-menu-with-back-views="false">
<ion-side-menu-content>
<ion-nav-bar class="header-text"> <!-- removed bar-stable -->
<ion-nav-back-button>
</ion-nav-back-button>
<ion-nav-buttons side="left">
<button class="button button-icon button-clear" menu-toggle="left">
<i class="icon header-bar-icon ion-navicon"></i>
</button>
</ion-nav-buttons>
<ion-nav-buttons side="right">
<button class="button button-icon button-clear" ng-click="shareAnywhere()">
<i class="icon header-bar-icon ion-ios-upload-outline"></i>
</button>
</ion-nav-buttons>
</ion-nav-bar>
<ion-nav-view name="menuContent"></ion-nav-view>
</ion-side-menu-content>
<ion-side-menu class="my-menu-item" side="left">
<ion-header-bar class="bar-stable">
<h1 id="menu-heading">MENU</h1>
</ion-header-bar>
<ion-content class="my-menu-item">
<ion-list class="my-menu-item">
<ion-item class="my-menu-item" menu-close href="#/app/discover">
<span class="menu-style">DISCOVER MOVIES</span>
</ion-item>
<ion-item class="my-menu-item" menu-close href="#/app/watchlist">
WATCH LIST
</ion-item>
<ion-item class="my-menu-item" menu-close href="#/app/home">
TUTORIAL
</ion-item>
<ion-item class="my-menu-item" menu-close href="#/app/friends">
FRIENDS
</ion-item>
<!--
<ion-item class="item-icon-right" nav-clear menu-close href="#/app/test">
TEST
</ion-item>
-->
<ion-item class="my-menu-item" menu-close href="#/app/news">
NEWS
</ion-item>
<ion-item class="my-menu-item" menu-close href="#/app/settings">
SETTINGS
</ion-item>
<ion-item class="my-menu-item" menu-close ng-click="logoutUser()">
SIGN OUT
</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
</ion-side-menus>
You don't need to use some "span"s inside ion-item elements.
But you need to apply your styles to the ion-item > a elements.
Here's some pieces of code from one of my projects:
<ion-content>
<ion-list>
<ion-item ui-sref=".c1" ui-sref-active="active">1. Y</ion-item>
<ion-item ui-sref=".c2" ui-sref-active="active">2. O</ion-item>
<ion-item ui-sref=".c3" ui-sref-active="active">3. D</ion-item>
<ion-item ui-sref=".c4" ui-sref-active="active">4. N</ion-item>
</ion-list>
</ion-content>
And the SASS (here I'm overriding the background-color of the "active" ion-item's child (a element))
ion-list {
ion-item {
&.active a {
background-color: $darkYellow !important;
color: #fff;
}
}
}
Or in CSS: (assuming that you added the class coloredList to your ion-list)
ion-list.coloredList ion-item.active a {
background-color: red !important;
}
With the modified HTML, in order not to color ALL the ion-lists.
<ion-list class="coloredList"> ... </ion-list>