I want to change ion-menu background different for every page but it's not working:
app.component.html:
<ion-split-pane contentId="main-content">
<ion-menu contentId="main-content" type="overlay">
<ion-content class="app-content" part="placeholder">
<ion-list id="inbox-list">
<ion-list-header lines="full">
<ion-avatar >
<ion-img [src]="'./assets/logo.png'"></ion-img>
</ion-avatar>
Pyramid to True Love
</ion-list-header>
<ion-menu-toggle auto-hide="false" *ngFor="let p of appPages; let i = index">
<ion-item (click)="selectedIndex = i" routerDirection="forword" [routerLink]="[p.url]" lines="none" detail="false" >
<ion-icon slot="start" [ios]="p.icon + '-outline'" [md]="p.icon + '-sharp'"></ion-icon>
<ion-label>{{ p.title }}</ion-label>
</ion-item>
</ion-menu-toggle>
</ion-list>
</ion-app>
app.component.scss(Working):
ion-menu ion-content{
--background: #59d36d;
}
any.page.scss(Not working):
ion-menu ion-content{
--background: #59d36d;
}
Is it possible or not?
You can use like this,
Ref : Sidemenu background-color in Ionic-v4
ion-menu {
--ion-background-color: var(--ion-color-primary);
--ion-text-color: var(--ion-color-primary-contrast);
}
Related
I have an ion-list which have a button and card inside it, now I want to change the color of the button and card on hover but can't find a way to do it.
Here is my code. Thanks in advance
Html
<div [hidden] = hidden >
<ion-list>
<ion-card >
<button inset = true *ngFor="let item of items" (click)="open($event, item.name)" >
<ion-card>
<h2> <b>{{ item.name }} </b> </h2>
<p> Recommended for</p>
{{item.Description}}
</ion-card>
<br>
<br>
</button>
</ion-card>
</ion-list>
</div>
CSS
ion-card{
display: flex;
flex-direction: column;
width: 100% !important;
margin: 0 !important;
background-color:white;
box-shadow: none;
}
button.item:hover a{
background-color: slategray;
box-shadow: inset 0px 0px 0px 1px red;
}
First of all u can't hover on device but u can attach click events for that u need to use ngStyle in ur components to change color or show if its clicked.
<div [hidden] = hidden >
<ion-list *ngFor="let item of items">
<ion-card >
<ion-button (click)="open($event, item.name)" fill="clear" >
<ion-icon slot="icon-only" [name]="buttonIcon" [ngStyle]="{'color':color1}"></ion-icon>
</ion-button>
<ion-card>
<h2> <b>{{ item.name }} </b> </h2>
<p> Recommended for</p>
{{item.Description}}
</ion-card>
<br>
<br>
</button>
</ion-card>
</ion-list>
</div>
inside ur TS
buttonIcon: string = "md-add";
color1: string = "black";
open(event,item){
this.buttonIcon = "done-all"; // icon change name if u want to change icon too
this.color1 ="red"; // any color u want it to change to
//rest of your code
}
U can use the same ngstyle on ur ion card as well to change color.
U can also use ion-ripple-effect to show some sort of click feedback on cards.
I'm getting an issue with ion-item background color.
What I want :
Set the background color to transparent.
What I have :
<ion-item class="custom-ion-toggle">
<ion-label>Remember me!</ion-label>
<ion-toggle formControlName="remember" slot="start" color="secondary" mode="ios"></ion-toggle>
</ion-item>
This generate a <div class="item-native"> with a white background.
What I've tried to do :
app.component.scss :
.item-native {
background: transparent !important;
}
So this is what I get :
try this in your css page :
ion-item {
--ion-background-color: transparent !important
}
try this in login.scss
.custom-ion-toggle{
background-color: transparent !important;
}
i have tried it in my app and it's working completely fine.
Use the ion-item CSS custom property supplied by Ionic:
.custom-ion-toggle {
--background-color: transparent;
}
Use this on your css style:
ion-item {
--background: transparent !important;
}
In Ionic 6:
Set color property to item:
<ion-item color="primary">
In global.scss override the color:
ion-item {
--ion-color-primary: transparent;
}
I had the same problem, I just set the property color to "undefined" in the ion-item tag and it works, give it a try.
(Also I set lines to none in ion-list to remove lines at the bottom of each item)
<ion-list lines="none">
<ion-item color="undefined">
<ion-avatar slot="start">
<img [src]="student.photo" />
</ion-avatar>
<ion-label>
<p>{{student.name}}</p>
</ion-label>
</ion-item>
</ion-list>
use ion-list instead of ion-item it will solve the problem
im having troubles trying to customize the sidemenu which ionic generates automatically.
The sidemenu is located at "app.component.html" and it looks like it follows:
<ion-app>
<ion-menu contentId="content1" side="start" >
<ion-header >
<ion-toolbar >
<ion-avatar>
<img [src]="image">
</ion-avatar>
<ion-title>Menu</ion-title>
</ion-toolbar>
</ion-header>
<ion-content >
<ion-list >
<ion-menu-toggle auto-hide="false" *ngFor="let p of appPages" >
<ion-item [routerDirection]="'root'" [routerLink]="[p.url]" (click)="dembow(p)" >
<ion-icon slot="start" [name]="p.icon"></ion-icon>
<ion-label>
{{p.title}}
</ion-label>
</ion-item>
</ion-menu-toggle>
</ion-list>
</ion-content>
</ion-menu>
<ion-router-outlet id="content1" main ></ion-router-outlet>
</ion-app>
i've tried to use the attribute "style:background-color:#000000" etc to change the style and it works if i put it on every element , but i would like to know if there is some easier and efficient way to customize the sidemenu.
Thank you team!
The first thing you need to know is in ionic '<ion-content>', '<ion-list>' is directives. You can manipulate these directive's template design using css.
for Eg.
In HTML-
<div class="side-nav-menu"> <!--wrap side menu in div tag and give class to it-->
<ion-content >
<ion-list >
<ion-menu-toggle auto-hide="false" *ngFor="let p of appPages" >
<ion-item [routerDirection]="'root'" [routerLink]="[p.url]" (click)="dembow(p)" >
<ion-icon slot="start" [name]="p.icon"></ion-icon>
<ion-label>
{{p.title}}
</ion-label>
</ion-item>
</ion-menu-toggle>
</ion-list>
</ion-content>
</div>
In Your Application's Global css file which is app.scss
.side-nav-menu{
//add style if you want any...for eg border, shadow.etc
}
.side-nav-menu .ion-item{
//style for ion-item
}
NOTE:- Remember the directives(attributes) name is also the class name of the same directive. for eg. if the directive name is ion-item and you want to add custom css to this directive than you have to add css using .ion-item class in global scss file
<ion-content class="abc">
</ion-content>
use content class to change background this way
.abc {
--background: var(--ion-background-color,linear-gradient(to left,#E67D22, #1C4577)) !important;
}
or use only color instead of gradient
.abc {
--background: var(--ion-background-color,red) !important;
}
I have this below code for ion navbar, where I am having one menu icon on the right side. And I want to change the color of that menu header.But when i am changing color of ion-navbar , it is changing for menu header also.I want separate color for both ion-navbar and ion-menu.
<ion-menu [content]="content" side="right" id="menu2">
<ion-header>
<ion-toolbar class="menu_header">
<ion-title>MyApp</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list no-lines>
<button ion-item menuClose="menu2" detail-none>
Item1
</button>
<button ion-item menuClose="menu2" detail-none>
Item2
</button>
</ion-list>
</ion-content>
</ion-menu>
<ion-header>
<ion-navbar primary>
<ion-title class="header-title" text-center>
Home
</ion-title>
<button ion-button icon-only menuToggle="right" end >
<ion-icon name="menu"></ion-icon>
</button>
</ion-navbar>
</ion-header>
And for changing the color of ion-navbar I am adding the below line in variable.scss
$toolbar-background: #EF473A;
Can anyone please help me how to keep the separate color for both?
If you want to change the color only for the titles, you could use the classes
.header-title {
color: blue;
}
.menu_header {
color: #EF473A;
}
If you'd like to change the color for the whole header You can either do it on the element:
body > ion-header {
color: blue;
}
ion-menu > ion-header {
color: #EF473A;
}
or alternatively add a class to the elements you want to modify, but that potentially mean editing a third party component...
I have an Ionic >=2 application where I would like to have 2 or 3 fixed rows at the top of the page, and then have the rest of the page as a scrollable list (and later I want it to be virtual, but just want to get the simple list working forst).
As a simplified example, I have the following plunk. The markup repeated here is..
<ion-header>
<ion-navbar>
<ion-title>{{ appName }}</ion-title>
</ion-navbar>
</ion-header>
<ion-content scroll=false>
<ion-grid>
<!-- Row 1 fixed at top -->
<ion-row>
<ion-col>
<ion-searchbar></ion-searchbar>
</ion-col>
<!-- Other cols -->
</ion-row>
<!-- Row 2 Scrollable list -->
<ion-row>
<ion-col>
<ion-list>
<ion-item *ngFor="let item of data">
<div>{{item}}</div>
</ion-item>
</ion-list >
</ion-col>
</ion-row>
</ion-grid>
</ion-content>
The problem is the search bar also scrolls with the list, whereas I would like this to always remain visible at the top of the page.
Does anyone know why I have the search bar also scrolling when this is in a completely separate row to the ion-list? Should I be using an ion-grid in this way?
Thanks in advance for any help!
ion-content does not have scroll input property to disable it.
If you need to have searchbar always visible, I suggest you place it in a toolbar.
<ion-header>
<ion-navbar>
<ion-title>{{ appName }}</ion-title>
</ion-navbar>
<ion-toolbar>
<ion-searchbar></ion-searchbar>
</ion-toolbar>
</ion-header>
Or use ion-scroll with a fixed height.
<ion-grid>
<!-- Row 2 Scrollable list -->
<ion-row>
<ion-col>
<ion-searchbar></ion-searchbar>
</ion-col>
</ion-row>
<ion-row>
<ion-col>
<ion-scroll style="width:100%;height:100vh" scrollY="true">
<ion-list scroll="true">
<ion-item *ngFor="let item of data">
<div>{{item}}</div>
</ion-item>
</ion-list>
</ion-scroll>
</ion-col>
</ion-row>
</ion-grid>
Sample Plunkr
Update: To answer #JohnDoe's comment.. in order to get scroll list to take the height of rest of the screen use Viewport percentage height to set the height of ion-scroll.
This is how I managed to have a list at the bottom of the page scroll without scrolling the whole page:
HTML
<ion-content>
<div class="table">
<div class="table-row">
<ion-searchbar></ion-searchbar>
</div>
<div class="table-row last-row">
<div class="table-cell cell-content-outer-wrapper">
<div class="cell-content-inner-wrapper">
<div class="cell-content">
<ion-list>
<ion-item *ngFor="let item of data">
<div>{{item}}</div>
</ion-item>
</ion-list>
</div>
</div>
</div>
</div>
</div>
</ion-content>
CSS
.table {
display: table;
width: 100%;
height: 100%;
}
.table-row {
display: table-row;
}
.table-cell {
display: table-cell;
}
.last-row {
height: 100%;
}
.cell-content-outer-wrapper {
height: 100%;
}
.cell-content-inner-wrapper {
height: 100%;
position: relative;
overflow: auto;
}
.cell-content {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
Makes use of lots of divs but it worked for me in ionic 2 and in onsen-ui as well when I was facing the same problem.
I'm using Ionic 5 with Vue. I wanted to have a fixed content at the top of the page with a scrollable list below. This is all I had to do:
<ion-page>
<ion-header :translucent="true">
<ion-toolbar>
<ion-buttons slot="start">
<ion-back-button defaultHref="/"></ion-back-button>
</ion-buttons>
<ion-title>Page title</ion-title>
</ion-toolbar>
</ion-header>
<ion-card>
<ion-card-content>
<!-- Here is the fixed content -->
</ion-card-content>
</ion-card>
<ion-content>
<!-- This content will scroll -->
<ion-list>
<ion-item>
<ion-label>Pokémon Yellow</ion-label>
</ion-item>
<ion-item>
<ion-label>Mega Man X</ion-label>
</ion-item>
<ion-item>
<ion-label>The Legend of Zelda</ion-label>
</ion-item>
<ion-item>
<ion-label>Pac-Man</ion-label>
</ion-item>
<ion-item>
<ion-label>Super Mario World</ion-label>
</ion-item>
</ion-list>
</ion-content>
</ion-page>
The trick was in putting the fixed content between <ion-header> and <ion-content> components.
I've made an npm packge that create this fixed scroll.
You need to install and use the npm package on your project (ionic3)
npm install --save ionic2-fixedscroll-directive
Import the ngFixedScrollDirective module on your page or AppModule
import { NgFixedScrollModule } from 'ionic2-fixedscroll-directive';
#NgModule({
declarations: [
MyPage
],
imports: [
IonicPageModule.forChild(MyPage),
NgFixedScrollModule
],
entryComponents: [
MyPage
]
})
export class MyPageModule {}
Create the SASS CSS to fix the element
your-page {
ion-searchbar {
&.fixed {
#extend .toolbar; //optional
position: fixed;
top: 0;
transition: all 0.5s ease;
&.searchbar-ios {
transform: translateY(calc(#{$navbar-ios-height} + #{$cordova-ios-statusbar-padding}));
}
&.searchbar-md {
transform: translateY(#{$navbar-md-height});
}
&.searchbar-wp {
transform: translateY(#{$navbar-md-height});
}
z-index: 3; //zindex to put it on top of some ionic components
}
}
}
And add the directive to the component or element that you need to fix on top of the page (outside the toolbar)
<YourComponent fixed-scroll></YourComponent>
More info on the directive git repo: https://github.com/joao-gsneto/ionic2-fixedscroll-directive