In my project I have some tabs and I want to update Badge's style when my value is 0. But I don't know how to change dynamically my tab's style. Moreover I don't know how to change the opacity of my badge in the style.
I want to have this result :
Thank you for your help ! :)
There is my code :
<ion-tabs color="secondary" (ionChange)="changeTabs()">
<ion-tab [root]="tab1" tabTitle="tab1" tabBadge="{{this.session.getToDoCount()}}" tabBadgeStyle="notif"></ion-tab>
<ion-tab [root]="tab2" tabTitle="tab2" tabBadge="{{this.session.getToComeCount()}}" tabBadgeStyle="notif"></ion-tab>
<ion-tab [root]="tab3" tabTitle="tab3"></ion-tab>
</ion-tabs>
You have to do with ngClass directive if your badge value is zero apply a custom style.
HTML:
<ion-item class="messages">
<ion-icon name="logo-twitter" item-left></ion-icon>
Followers
<ion-badge class="message" item-right [ngClass]="{'me': badgeValue === 0}">260k</ion-badge>
</ion-item>
styles:
.messages {
.message {
background: #387ef5;
color: #fff;
}
.message.me {
background: #fff;
}
}
Related
How can I remove the black outline from my mat-menu-item?
Like this one.
<button mat-icon-button [matMenuTriggerFor]="menu4" style="margin-left:10px;" [disableRipple]="true">
<mat-icon>more_vert</mat-icon>
</button>
<mat-menu #menu4="matMenu">
<button id="deactvateBtn" [disableRipple]="true" mat-menu-item>
<i [class]="!row['isActive'] ? 'fas fa-user-check' : 'fas fa-user-slash'"></i>
<span>{{ (!row['isActive'] ? 'Activate' : 'Deactivate') | titlecase }}</span>
</button>
</mat-menu>
I tried overriding the .mat-button-focus-overlay class with this:
.mat-button-focus-overlay {
background-color: whitesmoke!important;
}
But the outline is still there.
Other options I tried:
.mat-button-focus-overlay .cdk-program-focused {
background-color: transparent!important;
}
.mat-focus-indicator mat-menu-item ng-tns-c98-13 {
background-color: yellow!important;
}
Use ::ng-deep to re-style the mat buttons.
::ng-deep .mat-button-focus-overlay {
background-color: whitesmoke!important;
}
Use ::ng-deep to re-style the mat buttons.
::ng-deep .mat-button-focus-overlay {
border: none !important;
}
use this css, what you are trying to hide is not background but border color so you need to disable the border.
or try this css
::ng-deep .mat-button {
border: none !important;
}
I know it's late but in case someone else runs into this in the future, the class that I had to override was button:focus for .mat-menu-item and it was not the border but the outline that I had to get rid off, I added this to my css and it worked:
button.mat-menu-item:focus{
outline: none;
}
I know this is even later - but what worked for me today was
.mat-focus-indicator::before {
border: none;
}
in your global styles.css.
In chrome you can inspect the button and play around with the CSS. That's how I found it.
This is very very late but I think I found a solution that works for Angular 15 with all Angular Material components.
//In src/styles.scss
body {
--mat-focus-indicator-border-width: 0;
--mat-mdc-focus-indicator-border-width: 0;
}
In my Ionic 5 app, I am displaying a text-area with a floating label like so:
Then when the user clicks on the <ion-text-area>, it appears like this:
Can someone please tell me how I can initially display the floating label nicely inside the text-area?
The label should be within the radius of the text-area when the page loads up.
Here is my current HTML & CSS:
<ion-item lines="none">
<ion-label position="floating">
Please describe your issue to {{ mechanicToContact.name }} here
</ion-label>
<ion-textarea
style="border-radius:30px;
background: #6E73AA;
padding: 5px";
color="primary"
rows="6"
cols="20"
required
minlength="15">
</ion-textarea>
</ion-item>
Just place your ion-label in "front" of your ion-textarea using z-index css attribute.
I suggest you do something like this to achieve relatively what you are looking for.
component.html
<ion-item lines="none">
<ion-label position="floating" class="position-label-inside">
Please describe your issue to {{ mechanicToContact.name }} here
</ion-label>
<ion-textarea
style="border-radius:30px;
background: #6E73AA;
padding: 5px;"
color="primary"
rows="6"
cols="20"
required
minlength="15">
</ion-textarea>
</ion-item>
component.scss
#keyframes slide-out {
from {padding-left: 15px}
to {padding-left: 0}
}
.position-label-inside {
padding-left: 15px;
z-index: 1;
}
ion-item.item-has-focus {
.position-label-inside {
animation-name: slide-out;
animation-duration: 1s;
padding-left: 0!important;
}
}
ion-textarea {
z-index: 0;
}
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
I want to apply different button styles in my view from my declared global button styles in theme/variables.scss
button_green{}
button_red{}
in my login.html
<button>Login</button> //should be green
<button>Logout</button> //should be red
How to assign different global styles to buttons without having individual component specific styles like
<button color='primary' font='xyz' size='n'>Login</button>
<button color='danger' hint='something'>Logout</button>
and more like this
<button style='button_green'>Login</button>
<button style='button_red'>Logout</button>
To use custom button style, You can follow my instruction below:
1- As you want to create global style, you need to add your style class in /theme/variables.scss as below:
Note: You need to add !important to overwrite default ionic style.
.button_green{
background-color: green !important;
}
.button_red{
background-color: red !important;
}
.button_blue{
background-color: blue !important;
}
.button_yellow{
background-color: yellow !important;
}
.button_pink{
background-color: pink !important;
}
.button_purple{
background-color: purple !important;
}
2- Then in *.html, you can call your css class like this:
<button ion-button class='button_green'>button_green</button>
<button ion-button class='button_red'>button_red</button>
<button ion-button class='button_blue'>button_blue</button>
<button ion-button class='button_yellow'>button_yellow</button>
<button ion-button class='button_pink'>button_pink</button>
<button ion-button class='button_purple'>button_purple</button>
3: As result you can see:
You can find full source code with this repository: Ionic Button Custom Collor.
I hope this will help you :)
If you want a custom button colors you can use below code -
1 - Declare below code in your CSS class
.font-size{
font-size : 2vw;
}
.red{
background-color: red ;
}
.blue{
background-color: blue ;
}
.green{
background-color: green ;
}
.yellow{
background-color: yellow ;
}
2.
<button ion-button class="font-size red">red</button>
<button ion-button class="font-size blue">blue</button>
<button ion-button class="font-size green">green</button>
<button ion-button class="font-size yellow">yellow</button>
Note - You can also use one class with another class
How to remove transparent style from ion-select which is disabled ?
Please help.
<ion-item (click)="goToProducts()">
<ion-label stacked>product</ion-label>
<ion-select [(ngModel)]="product" disabled class="disabled">
<ion-option value="1">Product 01</ion-option>
</ion-select>
</ion-item>
on scss file
.disabled{ ?
}
I add this:
.select-disabled, .item-select-disabled ion-label {
opacity: 1;
}
it works for me
create a class example class="select" then on scss add this?
select { --placeholder-opacity: 100% ; }