I want to change the color of the selected label. I'm using --color-selected in CSS, but it doesn't work.
Html
<ng-container *ngFor="let item of daily">
<ion-label id="daysName" class="favorites-label" (click)="dayName($event)">{{item.day}}</ion-label>
</ng-container>
TS
dayName($event) {
console.log('dayName', $event.target.innerHTML)
}
CSS
#daysName {
color: white;
--color-selected: red;
}
ion-label.favorites-label {
--color-selected: red;
}
You can use ngClass:
[ngClass]="{'favorites-label': step === 'step1'}"
Or
[class.favorites-labels] = "step === 'step1'"
Related
I'm using Ionic5 Angular and I would like to create a highlight around ion-avatar when the user clicked on it and will be disappeared if the user clicked on it again.
Users can click on each image (one at a time) and there will be a highlight around the image.
HTML:
<ion-card class="scrolling-wrapper">
<div class="item" *ngFor="let item of list">
<ion-avatar>
<img [src]= "source to image" >
</ion-avatar>
</div>
</ion-card>
SCSS:
.scrolling-wrapper {
white-space: nowrap;
overflow-x: scroll;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
.item {
display: inline-block;
margin: 4px;
}
}
You have to proceed like this:
Declare an empty variable (example: highlightedAvatar = "";)
Capture the id of the clicked item from the .html
If your variable has a value, you empty it, otherwise you assign the id
create the styles you want to add to the .css (e.g. brightness...)
Load the css class with a condition
You seriously need to provide some code so you can understand exactly the procedure
Edit:
HTML:
<ion-card class="scrolling-wrapper">
<div class="item" *ngFor="let item of list">
<ion-avatar [class.highlighted]="highlighted == item.id" (click)="selectAvatar(item.id)">
<img [src]= "source to image" >
</ion-avatar>
</div>
</ion-card>
TS:
export class AppComponent{
highlighted = "";
...
selectAvatar(id){
if (this.highlighted === "") {
this.highlighted = id;
} else {
this.highlighted = "";
}
}
SCSS:
.highlighted{
filter: brightness(120%);
}
Of course you can toy around with the css to style your way of highlighting
Been trying to change footer background but I cant get it right. I have a color for each tag but only the last tag is changed (blue - #0000ff) . How does one do styling in Ionic 4?
<template>
<ion-footer>
<ion-toolbar>
<ion-title v-if="loggedIn">
<a href="https://www.facebook.com/" target="_blank">
<ion-icon name="logo-facebook"></ion-icon>
</a>
<a href="https://www.instagram.com/" target="_blank">
<ion-icon name="logo-instagram"></ion-icon>
</a>
</ion-title>
</ion-toolbar>
</ion-footer>
</template>
<script>
export default {
name: "pageFooter",
computed: {
loggedIn() {
return this.$store.getters.loggedIn;
}
}
};
</script>
<style lang="scss">
ion-footer {
background-color: #ff0000;
ion-toolbar {
background-color: #00FF00;
ion-title {
background-color: #0000ff;
a {
font-size: 25px;
color: #000;
}
}
}
}
</style>
It has something to do with "shadow dom" concept which I dont fully undersrtand yet . This DOM structure for the footer.
Ionic 4 uses web components, so the way to style components in Ionic 4 is to use the CSS variables that Ionic provides.
In your case, set the --background property of the component:
ion-footer {
--background: #ff0000;
}
I use the following code to allow me change the color of button when I click the button. It works fine. But when I try to add CSS to change the width and height of the buttons. The color change were working but the button size didn't change. Here is my code :
html code
<ion-content padding>
<ion-row>
<ion-col width-50 style="text-align: right" no-padding >
<button ion-button full no-margin class="bsize" (click)="addEvent('b1');" [ngStyle]="{'background-color': buttonColorb1}">button 1</button>
</ion-col>
<ion-col width-50 style="text-align: left" no-padding>
<button ion-button full no-margin class="bsize" (click)="addEvent('b2');" [ngStyle]="{'background-color': buttonColorb2}">button 2</button>
</ion-col>
</ion-row>
</ion-content>
scss code :
.bsize {
--width: 100px;
--height: 40px;
}
ts code :
export class TestButtonPage implements OnInit {
buttonColorb1: string = '#D3D3D3'; //Default Color
buttonColorb2: string = '#D3D3D3'; //Default Color
constructor() { }
addEvent(btn){
if (btn == "b1") {
this.buttonColorb1 = '#add8e6'; //desired Color
this.buttonColorb2 = '#D3D3D3'; //desired Color
}
else {
this.buttonColorb1 = '#add8e6'; //desired Color
this.buttonColorb2 = '#D3D3D3'; //desired Color
}
}
ngOnInit() {
this.buttonColorb1 = '#add8e6'; //desired Color
this.buttonColorb2 = '#D3D3D3'; //desired Color
}
}
Use below CSS,
.bsize {
width: 100px;
height: 40px;
}
StackBlitz Example
As per question, how can I change the color of the text inside ion-button? Here's the code for my button
<button ion-button block (click) = "submitForm()">Submit</button>
I've tried various methods like below
<button ion-button block (click) = "submitForm()"><sub ion-text color = "light">Submit</sub></button>
<button ion-button block (click) = "submitForm()" ion-text color = "light">Submit</button>
<button ion-button block (click) = "submitForm()"><span ion-text color = "light">Submit</span></button>
<button ion-button block (click) = "submitForm()" class= "font-white">Submit</button>
where in the last example above I put in .font-white{color: #fff !important;} inside app.scss
but nothing works.
Just replace the style attribute from button give class name and then in your app.scss but below code(assume u give class name as font-white)
.font-white
{
color : #fff !important;
}
Modify your component.html and component.scss file in following way,
<button ion-button block (click)="submitForm()" class="custom-button">Submit</button>
In your component.scss,
.custom-button{
color: #000;
}
This is working fine in ionic-4:-
<button ion-button block class="font-white">Submit</button>
In appcomponent.scss
.font-white {
color: #fff;
}
For Ionic-5:-
<ion-button class="font-white">Submit</ion-button>
in scss file
.font-white {
--color: #fff;
}
if you want white color only then do not create any of scss class
just write
<ion-button fill="clear" class="text-white" (click)="btnClickFN()">
save
</ion-button>
else if you want to give custom color then please make class in .scss
it will apply on all the tag where you wrote <ion-button></ion-button> tag
ion-button{
color: #00FF00; // green color
}
else you can give color only in specific one button then please create customclass like below in file of
.sccs
.btnColor{
color: #00FF00; // Green color
}
in .html file::
just put class inside <ion-button> tag and give name as u give in .scss file
<ion-button fill="clear" class="btnColor" (click)="btnClickFN()">
save
</ion-button>
I use ionic 3 and trying to change background-color ion-select.
html file :
<ion-select [class.disabledField]="disabledVar" disabled="{{disabledVar}}" [(ngModel)]="dataModel">
<ion-option *ngFor="let item of lists" value="{{item.id_str}}">{{item.text}}</ion-option>
</ion-select>
scss file:
.disabledField {
background-color:#d7d7d7;
}
The background-color can't change. but somehow this code no issue with ion-input and ion-datetime. this problem only with ion-select.
I really appreciate if someone can help me.
Thank you.
Problem solve
.item-select-disabled ion-label,ion-datetime {
opacity: 100;
color:#000;
font-size: $font-size-field;
}
.disabledField {
opacity: 100;
background-color:#d7d7d7;
}
.select-disabled {
opacity: 100;
background-color:#d7d7d7 !important;
/*you can optionally add !important*/
}
<ion-select [class.disabledField]="disabledVar" disabled="{{disabledVar}}" [(ngModel)]="dataModel">
<ion-option *ngFor="let item of lists" value="{{item.id_str}}">{{item.text}}</ion-option>
</ion-select