Within Ionic, I am trying to customize <ion-toggle> but I face an issue of toggle selection in css.
I have 2 <ion-toggle> and when I design them in css they are both customized : that's correct. Issue coming if I want give both different custom !
I haven't found a way to put any class="xxx" on them allowing me to customize them separately.
Beyond they are <ion-toggle> classes I'd like to design on css
// .toggle : global sensitive toggle area
// .handle : circle above the toggle area
// .toggle input : .handle moving area
// .toggle input+.track : .handle moving area when .handle at left
// .toggle input:checked+.track : .handle moving area when .handle at right
Even if I give a class to <ion-toggle> : <ion-toggle class"xxx">, there is no way to select it in css by : nor .toggle.xxx{border:......}, neither .xxx{.....}.
Please, does somebody knows how to dissociate these <ion-toggle> classes for many <ion-toggle>s ?
Solution found from the ionic documentation
By adding toggle-class="xxx" into :
<ion-toggle toggle-class="MyCustomClass" ng-repeat="item in settingsList" ng-model="item.checked" ng-checked="item.checked"> {{ item.text }} </ion-toggle>
CSS example :
.toggle-search .handle{
height: 13px!important;
width: 13px!important;
}
.toggle-search input+.track {
height: 15px;
width: 35px;
margin-top: 2px;
}
Use this code for ionic toggle
.sign_toggle .toggle .handle{
width: 45px;
height: 47px;
}
.sign_toggle .toggle .track{
width: 97px;
height: 52px;
}
.sign_toggle .toggle input:checked + .track .handle {
-webkit-transform: translate3d(20px, 0, 0);
transform: translate3d(51px, 0, 0);
background-color: #fff;
}
HTML
Add ion-toggle component to the HTML and simply add the attribute class with a class name:
<ion-toggle class="Awesome"></ion-toggle>
SCSS
Since ion-toggle is a native Ionic component in order to be able do customize it you must add the style on a global SCSS file. For example global.scss. If you add the style to a component SCSS file it won't work. So make sure it's a global SCSS file.
ion-toggle {
&.Awesome {
--background: ...;
--background-checked: ...;
--border-radius: ...;
--handle-background: ...;
--handle-background-checked: ...;
--handle-border-radius: ...;
--handle-box-shadow: ...;
--handle-height: ...;
--handle-max-height: ...;
--handle-spacing: ...;
--handle-transition: ...;
--handle-width: ...;
}
}
However not everything can be customized directly with SCSS. Check the official docs to know what can fit your needs. Documentation: Ionic - Ion Toggle - CSS Custom Properties.
Deep Customization
If you want to apply deep customization to the ion-toggle component you can use a trick called HTML & CSS injection with Javascript and/or use browser devtools in your favor to find the names of elements and classes you want to customize.
Ionic & Angular Specifications
This answer was tested on the following Ionic & Angular specifications:
Ionic CLI : 6.17.1
Ionic Framework : #ionic/angular 5.8.4
#angular-devkit/build-angular : 12.1.4
#angular-devkit/schematics : 12.1.4
#angular/cli : 12.1.4
#ionic/angular-toolkit : 4.0.0
Rather than dissociating classes the good practice would be to override those classes with custom css. Inspect DOM to see what specific classes and css properties to override.
Related
I want to make this DateTime picker take up the entire screen and also change the style of some parts such as the size of each time slot and day.
I've got this from https://reactdatepicker.com/#example-default and the github repo for it is https://github.com/Hacker0x01/react-datepicker
Any help would be much appreciated!
You can check in the examples the Custom calendar class name.
It defines a custom class name with the DatePicker property calendarClassName="rasta-stripes". The class-name rasta-stripes is defined as follow:
.rasta-stripes {
.react-datepicker__week:nth-child(3n + 1) {
background-color: #215005;
}
.react-datepicker__week:nth-child(3n + 2) {
background-color: #eea429;
}
.react-datepicker__week:nth-child(3n + 3) {
background-color: #a82a15;
}
}
So, as you can see, to style some parts just make a reference to the classes React DatePicker uses for itself to override it. You can check which classes exist by inspecting the sources with the browser of your preference.
To make it full screen for example just override the react-datepicker-popper class-name by removing transform and adding left: 0; right: 0; top: 0; bottom: 0; and then change every fixed size child to your needs.
I want to add internalization in my app. So I have a JSON file with all my values.
HTML side I manage to retrieve the values but css side I use a before.
In my HTML i use the class "menu-input" available right here :
<div class="header">
<app-game class="menu-input" [gameId]="gameId"></app-game>
<h1>{{'GAME.TITLE' | translate}}</h1>
</div>
This class is called in my scss file where I add a before :
.menu-input {
user-select: none;
display: block;
&::before {
content: 'Partie : ';
}
For the moment the content of my before is not yet translated. The goal is to transform my content with the value {{'GAME.NAME'}}
You can use css variables to solve this.
Working example: https://stackblitz.com/edit/angular-oaxdve?file=src%2Fapp%2Fapp.component.html
Taking in account reusability, you can define variables in your styles.css / scss:
:root {
--custom-text: 'Default';
--custom-text-2: 'Default';
}
And in your local css file you make use of the above variables like:
div::before {
content: var(--custom-text);
}
Then on app load or language change you get your translated text and go over the list of 'custom-text' options and set them using:
document.documentElement.style.setProperty('--custom-text', "'Hello'");
I'm using Hamburgers css animated menu icons from https://jonsuh.com/hamburgers/ via NPM. Like instructed in the customization section I imported a seperate settings file, but the default style is still showing. Earlier it did work using the same method, how could this be resolved?
#import './hamburgers-settings';
#import '~hamburgers/dist/hamburgers.min.css';
// hamburgers-settings.scss
$hamburger-padding-x : 0;
$hamburger-padding-y : 0;
$hamburger-layer-width : 24px;
$hamburger-layer-height : 2px;
$hamburger-layer-spacing : 4px;
$hamburger-layer-color : #000;
$hamburger-layer-border-radius : 4px;
$hamburger-hover-opacity : 0.7;
$hamburger-hover-transition-duration : 0.15s;
$hamburger-hover-transition-timing-function: linear;
// To use CSS filters as the hover effect instead of opacity,
// set $hamburger-hover-use-filter as true and
// change the value of $hamburger-hover-filter accordingly.
$hamburger-hover-use-filter: false;
$hamburger-hover-filter : opacity(50%);
// Remove or comment out the hamburger types you don’t want
// or need, so they get excluded from the compiled CSS.
$hamburger-types: (
arrow,
arrow-r,
arrowalt,
arrowalt-r,
arrowturn,
arrowturn-r,
);
Thank you.
I am currently using the PrimeNG library's accordion component in my angular project. See info here.
The template includes some special css styling for printing the page--something like the following:
#media print {
.profile-progress-bar, .top-template-header-content, .header.profile-header{
display: none !important;
}
html, body {
height: auto;
font-size: 10px !important;
}
p-accordionTab > div {
display: block !important;
selected: true !important;
}
}
What I am trying to do, is automatically expand all accordionTab elements when the #media print rendering is processed for the page to be printed.
From the documentation I see that each accordionTab element has a [selected] property which can be bound to and set to "true" in order to expand the tab.
Selected Visibility of the content is specified with the selected
property that supports one or two-way binding.
However, can this be somehow automatically triggered when the #media print rendering occurs?
Thanks!
media query is the way to go, you can take a css only approach to achieve this; no change in TS or HTML files
relevant css:
#media print {
::ng-deep .ui-accordion-content-wrapper-overflown {
overflow: visible;
height: auto !important;
}
}
complete demo on stackblitz here
This is an interesting one. To keep it inside the realm of Angular, you could use the #angular/cdk/layout library and inject MediaMatcher. You could also, of course, do almost this exact same thing using JavaScript (see here... the cdk/layout method I'll show you really just wraps this).
The MediaMatcher service has a method called matchMedia, and from there you just add a listener:
import { MediaMatcher } from '#angular/cdk/layout';
constructor(private readonly mediaMatcher: MediaMatcher ) { }
ngOnInit() {
mediaMatcher.matchMedia('print').addListener(e => e.matches ?
console.log('printing!') : null);
}
So where I've put the console.log, just perform your logic to get the accordians to expand.
I have a ion-select with few options i gave a header using [selectOptions], is there a way to define a css so that i could able to set background-color to header, button alignment ,and add a icon to the header
<ion-select [selectOptions]="daysOptions" #selectDays="ngModel" required name="selectedDay" [(ngModel)]="selectDay" >
<ion-option *ngFor="let day of Days;" [value]="day.val">{{day.name}}</ion-option>
</ion-select>
could someone help me
You can fix this easily now
Add to ion-select element:
[interfaceOptions]="{cssClass: 'my-class'}"
Add to css:
.my-class .alert-wrapper {
max-width: 94% !important;
}
Yes, you can use cssClass in option like this:
// In your component
daysOptions = {
cssClass: 'my-class',
...,
}
Then in css you can do what you want eg:
.my-class .alert-wrapper {
max-width: 94% !important;
}
Thank's to ionic docs: https://ionicframework.com/docs/api/components/alert/AlertController/#advanced
I needed a color selector couple of months ago but I couldn’t find any.
The only way to do this was using custom CSS. I tried adding CSS classes to ion-select and ion-option but the classes doesn’t get reflected in the generated output. So the only way to apply the custom CSS to ion-select and ion-options is by using the parent element and some JS.
You can check the logic in:
HTML:
https://github.com/ketanyekale/ionic-color-and-image-selector/blob/master/src/pages/home/home.html
TS:
https://github.com/ketanyekale/ionic-color-and-image-selector/blob/master/src/pages/home/home.ts
SCSS:
https://github.com/ketanyekale/ionic-color-and-image-selector/blob/master/src/pages/home/home.scss