It's a "simple" request but I'm not able to achieve this result...
In my app I have these two components:
<ion-refresher (ionRefresh)="doRefresh($event)">
<ion-refresher-content
pullingIcon="ios-arrow-down-outline"
pullingText="Scorri per aggiornare"
refreshingSpinner="circles"
refreshingText="Aggiornamento...">>
</ion-refresher-content>
</ion-refresher>
and
<ion-infinite-scroll [enabled]="morePagesAvailable" (ionInfinite)="doInfinite($event)">
<ion-infinite-scroll-content
loadingSpinner="bubbles"
loadingText="Caricando più post ...">
</ion-infinite-scroll-content>
</ion-infinite-scroll>
And they works fine with a white background. Now I need to change the background color to black but now the text of the two components it's not visible anymore because it's black by default.
How can I change che color of the two components?
I tried with a CSS class but the color it's not applied.
How is it possible to customize these components?
Thank you
As docs suggest (at least for version 1 of ionic):
The ionSpinner icon to display after user lets go of the refresher.
The SVG ionSpinner is now the default, replacing rotating font icons.
Set to none to disable both the spinner and the icon.
Closes thing in SVG to color is fill property. so you may use it instead of color.
Hope this helps
HTML Code
<ion-infinite-scroll threshold="100px" (ionInfinite)="loadData($event)">
<ion-infinite-scroll-content class="loadingspinner"
loadingSpinner="crescent"
loadingText="Loading...">
</ion-infinite-scroll-content>
</ion-infinite-scroll>
Respective CSS
.loadingspinner{
--color : #adadad;
}
.spinner-crescent{
color: #adadad;
}
If this helps someone. You have to add a class to the infinite scroll content or just use the tag selector.
<ion-infinite-scroll [enabled]="morePagesAvailable" (ionInfinite)="doInfinite($event)">
<ion-infinite-scroll-content
class="infinite-scroll-color"
loadingSpinner="bubbles"
loadingText="Caricando più post ...">
</ion-infinite-scroll-content>
</ion-infinite-scroll>
And then change the stroke property of the tag line, to change the spinner svg color.
.infinite-scroll-color {
line {
stroke: #YOURCOLOR;
}
//If you want to change the text color too, just add this css
.infinite-loading-text {
color: #YOURCOLOR;
}
}
Cheers!
Related
How do I change icon color for <md-icon>?
In Vue template I use it like this:
<md-icon>list_alt</md-icon>
If I look in css rendered on the page I see the default color is grey defined in css as:
.md-icon.md-theme-default.md-icon-font {
color: var(--md-theme-default-icon-on-background, rgba(0,0,0,0.54));
}
Ok, the solution is pretty simple:
<md-icon style="color:red">list_alt</md-icon>
I am trying to change the ion-item background to a white background with opacity to make the text more legible, however when I test out changing the colors in the variables css, i am unsuccessful.
this is the outcome when I change the color = "primary" in the html
However when I customise the color with the following code, I get no change in the view.
global CSS
--ion-color-test: #1d8f9e;
HTML
<ion-item color="test" class="item item-trns text-center">
<ion-label style="color:black!important"position="floating" >Email</ion-label>
<ion-input type="text" formControlName="email"></ion-input>
</ion-item>
I get this result
What am I doing wrong?
You need to follow this guide here:
https://ionicframework.com/docs/theming/colors#adding-colors
In short:
Create your color inside "root" selector:
:root {
// other base colors above:
// you new color below:
--ion-color-favorite: #69bb7b;
--ion-color-favorite-rgb: 105,187,123;
--ion-color-favorite-contrast: #ffffff;
--ion-color-favorite-contrast-rgb: 255,255,255;
--ion-color-favorite-shade: #5ca56c;
--ion-color-favorite-tint: #78c288;
}
Then add the class inside the variables.scss and its very important to keep the naming of the class here:
.ion-color-favorite {
--ion-color-base: var(--ion-color-favorite);
--ion-color-base-rgb: var(--ion-color-favorite-rgb);
--ion-color-contrast: var(--ion-color-favorite-contrast);
--ion-color-contrast-rgb: var(--ion-color-favorite-contrast-rgb);
--ion-color-shade: var(--ion-color-favorite-shade);
--ion-color-tint: var(--ion-color-favorite-tint);
}
The class must be written in the format .ion-color-{COLOR} where
{COLOR} is the name of the color to add
Now you can do color="favorite" in your template code.
To make it all easier Ionic team did this color creation tool:
https://ionicframework.com/docs/theming/colors#new-color-creator
I know, there are plenty of topics like this out there, but unfortunately no approch works for me, where I can set the background color of an ion-item transparent.
sidemenu.component.ts
<ion-menu side="start" menuId="first" contentId="main" class="custom-bg">
<ion-header>
<ion-toolbar>
<ion-title>{{env.appName}}</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<ion-menu-toggle auto-hide="true">
<ion-item *ngFor="let item of navItems" [routerLink]="item.url" routerDirection="forward">
<ion-icon [name]="item.icon" slot="start"></ion-icon>
<ion-label>{{item.title}}</ion-label>
</ion-item>
</ion-menu-toggle>
</ion-list>
</ion-content>
</ion-menu>
sidemenu.component.scss
ion-toolbar,
ion-content,
ion-item {
--background: transparent;
--color: var(--ion-color-primary-contrast);
}
.custom-bg {
--background: red;
}
The result:
I'm out of ideas, what to try. Notice, that if I set the --background property for the ion-item to a regular color, everything works as expected. To me it looks like there is there is another element with a white background, not just the ion-item.
Note: I can reproduce this strange behaviour via DevTools on the official Ionic 4 docs, where adding a background on that examples ion-content won't shine through if you set an ion-items background to transparent there as well.
Anyone here has an idea, what's going on there?
Update:
Finally found the cause for that weird behaviour. Looks like the .list-ios on ion-list was the malefactor.
This did the trick for me:
ion-list {
background: transparent;
ion-item {
--background: inherit;
}
}
According to ionic official documentation : [https://ionicframework.com/docs/theming/colors][1]
Each color consists of the following properties: a base, contrast, shade, and tint. The base and contrast colors also require a rgb property which is the same color, just in rgb format. See The Alpha Problem for an explanation of why the rgb property is also needed.
To add a new color, first define the CSS variables for all of the variations of the color at the root. For example, to add a new color called favorite, we can define the following variables:
:root {
--ion-color-favorite: #69bb7b;
--ion-color-favorite-rgb: 105,187,123;
--ion-color-favorite-contrast: #ffffff;
--ion-color-favorite-contrast-rgb: 255,255,255;
--ion-color-favorite-shade: #5ca56c;
--ion-color-favorite-tint: #78c288;
}
Then, create a new class that uses these CSS variables. The class must be written in the format .ion-color-{COLOR} where {COLOR} is the name of the color to add:
.ion-color-favorite {
--ion-color-base: var(--ion-color-favorite);
--ion-color-base-rgb: var(--ion-color-favorite-rgb);
--ion-color-contrast: var(--ion-color-favorite-contrast);
--ion-color-contrast-rgb: var(--ion-color-favorite-contrast-rgb);
--ion-color-shade: var(--ion-color-favorite-shade);
--ion-color-tint: var(--ion-color-favorite-tint);
}
After the class is added, the color can be used on any Ionic component that supports the color property. An example of using the favorite color on an Ionic button is below.
<ion-button color="favorite">Favorite</ion-button>
You can create similar custom color for transparent
I'm using Vuetify's v-btn button component with a variety of colors set via the color prop. Once a user clicks the button, I set disabled to true so they can't click it again, but the button loses its color and gets greyed out.
Is there any way to disable the button without changing its color to grey?
Instead of disabled prop you could use your custom class with pointer-events: none, e.g.
.disable-events {
pointer-events: none
}
<v-btn :class="{'disable-events': customCondition}">
Then add additional styling to that class if needed.
I do it by removing v-btn--disabled and playing with vuetify's css classes.
Still grey but with colored text solution
The button will still be grey, but text will be colored, like that you have a visual effect showing that the button is disabled but still have a colored part.
I, personally, also had some custom opacity to disabled buttons.
HTML
<v-btn id="btnA" :disabled="true" color="success">Success</v-btn>
CSS
button.v-btn[disabled] {
opacity: 0.6;
}
JS
created(){
// Trick to remove class after initialising form
this.$nextTick(() => {
document.getElementById('btnA').classList.remove('v-btn--disabled')
})
}
CodePen
Same display solution
If you really want, the same display you will have to remove [color]--text and add [color] class (and sometimes add white--text class for readability).
JS
created(){
// Trick to remove class after initialising form
this.$nextTick(() => {
document.getElementById('btnA').classList.remove('v-btn--disabled')
document.getElementById('btnA').classList.remove('success--text')
document.getElementById('btnA').classList.add('success')
})
}
CodePen
As Vuetify allready use important! in .v-btn--disabled it's not possible to just override this class. But with the use of a higher level selector like id (example: #custom-disabled which selects id="custom-disabled") you can. This doesen't keep the original colors but you are at least able to override the class to your liking.
<v-btn :disabled="true" id="custom-disabled">
Button
</v-btn>
<style>
#custom-disabled.v-btn--disabled {
background-color: red !important;
}
</style>
For light and dark theme:
<style>
#custom-disabled.v-btn--disabled.theme--light {
background-color: red !important;
}
#custom-disabled.v-btn--disabled.theme--dark {
background-color: brown !important;
}
</style>
Okay so you can do it by disabling the pointer events as mentioned in other comments but if someone is using a keyboard they can still tab to the control and if you are writing automated tests the button can still be clicked.
You can manually override the style and change the disabled button colour in the css however this will potentially be a problem if you are manually setting the color through the color="" property on v-btn based off a theme (because your application supports branding for different clients for example) because Vuetify doesn't just override the color, it stops adding the color altogether.
So my solution was to simply set the button color via a style attribute and set the important flag (to override the disabled important flag) note that you will need to change the text color as well.
<v-btn
:style="{
color: `${getTxtColor()} !important`,
backgroundColor: `${getBtnColor()} !important`
}"
:disabled="status"
#click="doSomething"
>
Click Here
</v-btn>
This approach should play nice with testing, themeing, and will not allow users to tab to the button accidentally.
Newbie question, I'm working on a simple scenario: Changing the background color and the text of a giving element on my page using Tritium. My page looks like this:
<div class="hero" id="hero">
<div id="heroContentShort">
<div class="heroContentShort">
<h1 style="text-transform:capitalize;">My Text<span style="text-decoration:underline;font-weight:bold;">- on Moovweb</span></h1>
</div>
</div>
On my .TS file I have the following:
insert("div", class:"cus_title"){
insert("div", class:"cus_row1"){
move_here("//div[#id='hero']/div/div/h1")
attribute("background", "red")
text("My New Text")
}
}
The above is successfully changing the text, although is not preserving any format nor is changing the background color to red.
What I'm doing wrong?
Thanks
First and foremost, I highly recommend you not do the coloring in tritium. The DOM and the style should be separate. I would recommend you put this at the bottom of your main.scss file if you do not want to create your own page. Then you would do:
.cus_row1 {
background-color: red;
}
That would get the background color to work perfectly, and correctly.
However, if (for some reason) you HAD to do this in tritium, I would instead do this:
insert("div", class:"cus_title"){
insert("div", class:"cus_row1"){
move_here("//div[#id='hero']/div/div/h1")
attribute("style", "background-color: red")
text("My New Text")
}
}
The first reason, is that the background attribute is deprecated. Second, the user agent stylesheet can overwrite it. I hope this works for you!