I'm trying to dynamically change the color of Ionic's Ion-Toggle and Ion-Checkbox at runtime. I know I can change it to a pre-defined sass variable like this:
<ion-toggle [color]="somePredefinedColor"></ion-toggle>
where "somePredefindedColor" is the string of the predefined sass variable...but because there is a section in my app that adapts to the corporate design colors of a company (which it gets from server as hex-strings) this is not possible.
The closest I got was to query the document by the component's class ".toggle-icon" and set its background color. This works at the first load but as soon as the page is loaded again it falls back to the sass predefined colors...
Have you tried this:
<ion-toggle [style.color]="colorVariable"></ion-toggle>
Where colorVariable is a variable in your component in .ts file, which you can change it dynamically:
if (this.redCondition)
this.colorVariable = 'red';
else
this.colorVariale = 'black';
Alternatively, you can define two CSS classes in your SCSS file, call it red-toggle, and black-toggle. Then you can:
<ion-toggle [class.red-toggle]="redCondition" [class.black-toggle]="!redCondition"></ion-toggle>
These methods are called style and class binding respectively.
If you want to dynamically change a value in your css style, you can use ngStyle directive:
[ngStyle]="{ 'background-color': hexColorString}"
EDIT:
The problem is that ion-toggle after transpile will have two child nodes, and you want to change the style of those child nodes dynamically. These nodes are toggle-icon, and toggle-inner:
This is not the cleanest way of doing it, but you can use the following typescript code, and modify it so that the colors change dynamically:
var div1 = document.getElementById('mytoggle').getElementsByTagName('div');
if(div1[0]){
div1[0].style.backgroundColor = '#0F0';
var div2 = div1[0].getElementsByTagName('div');
if(div2[0])
div2[0].style.backgroundColor = '#00F';
}
Notice that you have to set "mytoggle" as the id of the ion-toggle element in your html file.
Disclaimer: This code is rather hacky and may not work correctly with future versions of Ionic!
You just need to add square brackets on the dynamic attribute that is receiving the variable.
<ion-toggle [color]="somePredefinedColor"></ion-toggle>
Predefined colors can be setup in the theme/variables.scss file under $colors
$colors: (
primary:#48B0F7,
secondary:#10CFBD,
....
somePredefinedColor:#000
)
Which can then be added to the [color] attribute
<ion-toggle [color]="somePredefinedColor"></ion-toggle>
Related
I have an ant design table. One of its columns is something like this:
which contains three icons and one "AutoComplete" component showing some names. In editing mode, I have put all these four components ( 3 icons and one autocomplete) in a "Form.Item" tag. But the autocomplete component does not work properly in editing mode.( I mean when it is clicked for edit, the name inside it is cleared and the new selected name will not put in autocomplete input). But when I remove the three icons from the code, the autocomplete works fine.
Why this happens? can any body help on this?
As far as I know Form.Item need to have one child element because he implicitly pass to child value and onChange props. You probalby can create wrapper for your Autocomplete component, something like following (it's just idea):
function Autocomplete (props) {
return (
<div>
<Icon1/>
<Icon2/>
<Icon3/>
<AntdAutocomplete value={props.value} onChange={props.onChange}/>
<div/>
);
}
Could you give an example of usage of CSS Custom Properties
--ion-grid-padding
--ion-grid-padding-lg
with Angular.
Specifically, I do not see a thin difference between size-sm and --ion-grid-padding-lg?
I do not understand where and in what file I should use custom CSS properties (also, how to use them properly).
You can define your custom css properties in the file variable.css, for example:
--my-custom-opacity: 0.8;
In the css file associated with your page, or in global.css, you can access this property using:
.my-css-class {
opacity: var(--my-custom-opacity);
}
Your html elements will be attributed an opacity of 0.8.
If you need to update this property to change on a single page (and stay the same elsewhere), you can update it using the host tag:
:host {
--my-custom-opacity: 0.6;
}
In that case, your elements will be attributed an opacity of 0.6 on this page only.
This is an easy way to apply css values at multiple places in your code and update when necessary.
Hope that helps!
How to use CSS customization directly from Vala? Not like in this example with file. Let's say I want the button to turn red by clicking on it, without using an external css file, as this action is too simple to create a css file with a single field.
I mean smth like this:
label.set_styleSheet("font-size: 17px;")
You still have to create a CssProvider, like in the code you linked to:
var screen = this.get_screen ();
var css_provider = new Gtk.CssProvider();
You can call load_from_data () instead of load_from_path () to load it from a string in memory instead of a file:
https://valadoc.org/gtk+-3.0/Gtk.CssProvider.load_from_data.html
css_provider.load_from_data(".my_class { font-size: 17px; }");
Gtk.StyleContext.add_provider_for_screen(screen, css_provider, Gtk.STYLE_PROVIDER_PRIORITY_USER);
When the CSS provider has loaded the custom styles to be used, you can manipulate every Gtk+ widget with get_style_context ().
The style context has methods to add, remove and query a class, etc.
https://valadoc.org/gtk+-3.0/Gtk.StyleContext.html
label.get_style_context().add_class("my_class");
Since you only have to setup the style provider once, I don't think it is too much overhead.
For anyone who is reading this I have posted both examples with and without file to Git https://gitlab.com/gavr123456789/vala-css-examples/tree/master
i want to add more backend colors in Typo3 Gridelements.
Under Typo3 -> List -> CE Backend Layout is an Option "Frame" with 4 colors and i want to add more colors.
Is there a way for it?
Best Regards
You probably want to use something like this in your pageTS:
TCEFORM.tx_gridelements_backend_layout{
frame{
addItems{
10 = unicorn-pink
}
}
}
You can change every field from every table with this method.
See https://docs.typo3.org/typo3cms/TSconfigReference/PageTsconfig/TCEform/Index.html for further information about this.
Just adding the value in TCEFORM might not be enough, since you will need to add CSS to get the colors assigned to those new classes.
So you will at least need to have a small extension providing the items, a basic folder structure as in the usual sitepackages and the CSS embedded via ext_tables.php and/or ext_localconf.php
I want to change stacklayoutpanel header back ground color using css and I tried everything.
.gwt-StackLayoutPanel .gwt-StackLayoutPanelHeader .gwt-StackLayoutPanelContent .gwt-StackLayoutPanelItem {
color: red;
border:red;
border-color: red;
background:red;
background-color:red;
}
But only changed the text color and I don't want that. Please can you explain how can I do that?
StackLayoutPanel wraps hour header widget/text to an internal class named Header, which is not publicly accessible. One approach is to override default clean.css .gwt-StackLayoutPanel .gwt-StackLayoutPanelHeader styles by copying it to your own css file, then appending !important to styles you want to change.
However, better and cleaner solution is to do the following:
// add/insert your item first
myStackLayoutPanel.add(widget, header, size);
// retrieve the Header internal widget (AFTER ADDING!)
Widget internHeader = header.getParent();
// replace default style
internHeader.setStyleName("my_custom_style");
If you don't like using class css styles, you may alternatively do something like:
... same as above
// reset the default style
internHeader.setStyleName("");
// then add your styles programmatically
Style style = internHeader.getElement().getStyle();
style.setBackgroundColor();
etc.
It is important to retrieve the internal header widget after call to add/insert!
Your CSS style is incorrect. It's trying to target classes with the following hierarchy:
.gwt-StackLayoutPanel
.gwt-StackLayoutPanelHeader
.gwt-StackLayoutPanelContent
.gwt-StackLayoutPanelItem
Which is completely incorrect. If you want ALL elements with those classes to have the same background color, you would write your CSS rule like this:
.gwt-StackLayoutPanel,
.gwt-StackLayoutPanelHeader,
.gwt-StackLayoutPanelContent,
.gwt-StackLayoutPanelItem
{
background-color: red;
}
You better create your own css file based on gwt's default and make changes there. You also need to exclude gwt default css from your_module.gwt.xml and put there your newly created