i have the following tab:
<ion-tab [root]="HomeTab" tabTitle="Home" icon-off="customicon" icon-on="customicon-outline"></ion-tab>
The idea is that whenthe tab is selected, it shows me a icon and when not, it shows me another.
However, when i use icon-off / icon-on, the icon doesnt even appear.
But using tabIcon="customicon" works.
What is my mistake?
tab.html:
<ion-tabs>
<ion-tab [root]="HomeTab" tabTitle="Home" icon-off="customicon" icon-on="customicon-outline"></ion-tab>
<ion-tab [root]="RecentTab" tabTitle="Letzte"></ion-tab>
<ion-tab [root]="FavTab" tabTitle="Favoriten"></ion-tab>
<ion-tab [root]="PersonalTab" tabTitle="Mein"></ion-tab>
<ion-tab [root]="InfoTab" tabTitle="Info"></ion-tab>
</ion-tabs>
tab.scss:
.ion-ios-customicon,
.ion-md-customicon {
content: url(../../assets/fonts/Homeblau.svg);
width: 24px;
height: 32px;
padding: 6px 4px 2px;
opacity: 0.9;
}
.ion-ios-customicon-outline,
.ion-md-customicon-outline {
content: url(../../assets/fonts/Homegrau.svg);
width: 24px;
height: 32px;
padding: 6px 4px 2px;
opacity: 0.9;
}
You can set custom icon please use following code
tab.html
<ion-tabs>
<ion-tab [root]="HomeTab" tabTitle="Home" tabIcon={{homeIcon}}></ion-tab>
</ion-tabs>
tab.ts
set value of homeIcon as per your requirement
this.homeIcon = 'custome-home-on-icon' // < -- here you can put your condition
app.csss
ion-icon {
&[class*="custome-"] {
// Instead of using the font-based icons
// We're applying SVG masks
mask-size: contain;
mask-position: 50% 50%;
mask-repeat: no-repeat;
background: 'black';
width: 1em;
height: 1em;
}
// custom icons
&[class*="custome-home-on-icon"] {
mask-image: url('../assets/fonts/Homegrau.svg');
}
&[class*="custome-home-off-icon"] {
mask-image: url('../assets/fonts/Homeblau.svg');
}
}
i hope its work for you...
Related
I am using Ionic 4.12
I am working with the tab component, and i want to change the color of my ion-icon svg when i activate that tab.
I'm trying to change the shadow dom of the ion-tab-button as the documentation shows with
--color-selected
--background-focused
in the css but it does not change it
tab bar code
<ion-tab-bar slot="bottom">
<ion-tab-button tab="mainview">
<ion-icon src="assets/logo/mainView.svg"></ion-icon>
<ion-label>INDICADORES</ion-label>
</ion-tab-button>
<ion-tab-button tab="profile">
<ion-icon src="assets/logo/profile.svg"></ion-icon>
<ion-label>PERFIL</ion-label>
</ion-tab-button>
<ion-tab-button tab="">
<ion-icon src="assets/logo/phone.svg"></ion-icon>
<ion-label>LLAMAR</ion-label>
</ion-tab-button>
<ion-tab-button tab="caregivers">
<ion-icon src="assets/logo/doc.svg"></ion-icon>
<ion-label>CUIDADORES</ion-label>
</ion-tab-button>
<ion-tab-button tab="help">
<ion-icon src="assets/logo/help.svg"></ion-icon>
<ion-label>AYUDA</ion-label>
</ion-tab-button>
current css of the icons
ion-tab-button{
font-size: 10px;
--padding-end: 0px;
--padding-start: 10px;
--padding-bottom: 0px;
--margin-left:0px;
--margin-right:0px;
max-width:100px;
ion-icon{
font-size: 67.5px;
}
ion-tab-button{
font-size: 10px;
--background-focused: #a0a;
--color-selected: #a0a;
--padding-end: 0px;
--padding-start: 10px;
--padding-bottom: 0px;
--margin-left:0px;
--margin-right:0px;
max-width:100px;
ion-icon{
font-size: 67.5px;
}}
this is the correct ionic way
If you want to give another color when a class is active you can simply do the following:
.class:active {
color: blue;
}
However in your case this would be:
ion-tab-button:active{
color: blue;
}
The color atribute also works with hex and RGB codes
(see https://www.w3schools.com/cssref/css_colors_legal.asp for more)
I also reccomend to check this post out as this is related to the problem you are having at the moment.
Editing Ionic tab icon styles
This is the below CSS, we need to add it in component level CSS if we need to apply the styles only to the specific page.
Use of focus pseudo class, we can apply the style to the selected ion-tab-button
ion-tab-button:focus {
ion-icon, ion-label {
color: var(--ion-color-primary) !important;
--ion-color-base: var(--ion-color-primary) !important;
}
}
This is much more difficult to figure out than it should be but here's what worked for me:
In theme/variables.css
:root {
/*put at the bottom after all other base styles*/
--ion-tab-bar-color: #2a3042;
--ion-tab-bar-color-selected: #556ee6;
}
You can provide the custom css to selected tab. Whenever you select the tab "tab-selected" class is added in ion-tab-button.
.tab-selected {
border-bottom: 5px solid blue;
}
There is one more way to customize your tabs in ionic. (my ionic version 6.12.0)
ion-tab-bar{
background-color: white;
overflow-x: auto;
border:0px;
}
ion-tab-bar > ion-tab-button {
border-radius: 20px 20px 20px 20px;
}
ion-tab-button[aria-selected=true] {
color:white;
background-color: #3689ef;
}
ion-tab-bar ion-tab-button[aria-selected=true]:first-child {
border-radius: 0px 20px 20px 0px;
}
ion-tab-bar ion-tab-button[aria-selected=true]:last-child {
border-radius: 20px 0px 0px 20px;
}
I have a table with a header that is sorted using the Display tag library.
When a header is clicked, I want to remove a background image from the other headers and display an "Up Arrow" image. When the same header is clicked again, I want a "Down Arrow" image to be displayed.
This is the CSS I'm using to do it right now.
CSS
th {
height: 25px;
border: 1px solid #EAEAEA;
}
th.sortable a:ACTIVE {
background: url("../images/integration/downArrow.gif") no-repeat 30%;
}
th.order1 {
background: url("../images/integration/upArrow.gif") no-repeat 30%;
}
I got the solution, and I am extremely sorry those who are still trying to understand the question. Run my solution and you will not only get the question also the answer. I just needed to configure order1 and order2 in my CSS.
th.order1 {
background: url("../images/integration/upArrow.gif") no-repeat 30%;
}
th.order2 {
background: url("../images/integration/downArrow.gif") no-repeat 30%;
}
I'm trying to remove the border from an alt tag text. I'm using a transparent image for a button in a paypal form, linked through css. The paypal button takes the alt tag as it's button text and puts a border around it. I'm not clear on why this happens but it's what I have to work with from paypal. Apparently I have to use an image. So I'm using a transparent image so I can style it in css to look like my other buttons rather than try and get screen shots of each button state.
I paired the code down to focus on just the border around the text 'View Cart'.
CSS
//link to my transparent button with no text on it
#vyc {
background-image: url(http://lakenney.com/kenney_lucille-final/images/vyc.png) no-repeat;
}
//the user agent that is controlling the outer border
user agent stylesheetinput[type="hidden" i], input[type="image" i], input[type="file" i] {
-webkit-appearance: initial;
padding: 20px;
background-color: initial;
border: dotted;
border-top-color: red;
}
//a couple of tags I'm using to try to access the alt tag border not working
#vyc img[alt] {
/*border: 1px dashed #3D8EA5;*/
border: transparent !important;
}
input#vyc img[alt] {
border: transparent !important;
}
HTML
Here is a jsfiddle link to this same code:
http://jsfiddle.net/lakenney/w0zpmutn/
The input(type = "image") expects an src image which missing and hence the border. Is it possible for you to put the transparent image as the src value?
<input type="image" src="http://lakenney.com/kenney_lucille-final/images/vyc.png" id="vyc" border="0" name="submit" value="View Cart" alt="View Cart">
http://jsfiddle.net/w0zpmutn/2/
You can use a transparent image as the source to get rid of the border, but then you have no alt-text, but you could overlay some text.
document.querySelector('#input1').onfocus = function() {
console.log('clicked');
this.blur();
}
label {
position: relative;
width: 100px;
display: inline-block;
line-height: 3rem;
height: 3rem;
background: blue;
border: 0;
border-radius: 5px;
}
input {
width: 100px;
height: 100%;
}
.overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
text-align: center;
color: #FFF;
text-decoration: none;
}
<label for="input1">
<input id="input1" type="image" src="http://upload.wikimedia.org/wikipedia/commons/c/ce/Transparent.gif" />
<a class="overlay" href="#input1">
Some Text
</a>
</label>
But the form action would no longer work. so you would have to submit the form/redirect the page using javascript.
I am using the HTML button tag for my submit buttons as well as buttons that direct to other pages and features I would like to be able to have buttons with different backgrounds (one blue, one grey, one red, one green, etc) but can't seem to get it working by simply adding a class tot he button tag.
Here is what I have so far
HTML
<button class="green_btn" type="submit" name="cnp">News Control</button>
CSS
button {
margin: 0 auto 5px auto;
display: block;
width: 134px;
height: 35px;
background: url('../images/darkgrey_btn_bg.png') no-repeat left;
border: 0 none;
font-weight: bold;
text-align: center;
color: #fff;
cursor: pointer;
}
.grey_btn button {
background: url('../images/darkgrey_btn_bg.png') no-repeat left;
}
.green_btn button {
background: url('../images/green_btn_bg.png') no-repeat left;
}
.ltblue_btn button {
background: url('../images/ltblue_btn_bg.png') no-repeat left;
}
.blue_btn button {
background: url('../images/blue_btn_bg.png') no-repeat left;
}
.red_btn button {
background: url('../images/red_btn_bg.png') no-repeat left;
}
by default I want the button to be the garkgrey_btn_bg.png as the background, but if I want to use the green_btn_bg.png for the background, adding class="green_btn" to the html does nothing.
Anyone have any ideas?
You're targeting your class improperly with .class-name button. That is actually looking for an element with a child button.
Here you go...
button.grey_btn {
background: url('../images/darkgrey_btn_bg.png') no-repeat left;
}
button.green_btn {
background: url('../images/green_btn_bg.png') no-repeat left;
}
button.ltblue_btn {
background: url('../images/ltblue_btn_bg.png') no-repeat left;
}
button.blue_btn {
background: url('../images/blue_btn_bg.png') no-repeat left;
}
button.red_btn {
background: url('../images/red_btn_bg.png') no-repeat left;
}
Your classes are looking for a button inside an element with a colour class. For example:
.red_btn button
...is looking for a button inside a parent element with the class red_btn. It should in fact be:
button.red_btn
...though the button part of the selector is probably redundant unless you have other elements of different types with the same class names.
For anyone that ends up here who, like me, wasn't sure how to change a button's background color...
Instead of this in your CSS file:
#footer_join_button {
background-color: $light_green;
}
... or even:
#footer_join_button {
color: $light_green;
}
... the correct attribute/property to target is simply background:
#footer_join_button {
background: $light_green;
}
Note: I'm using SASS precompiler, hence the potentially strange-looking $light_green variable above.
I understand the basics of CSS.In fragments.
I try to understand how to combine all of what I want together.
I want to create two types of buttons, "view" and "save".
I have 4 images, two for each, where one represents the button, and one when mouse hovers it.
So I want an alternative background when hover.
I want also a tooltip, something "cheap" like "View file", "Save file", that better explains the content of the image if it wasn't clear enough.
I understand that I need to use the hover attribute, background attribute, and somehow to create a tooltip.
Those two buttons are actually images with a link
How do I combine it all together?
you could do something like this:
<div title="View File" class="view-button">
View File
</div>
CSS:
.view-button {
background-image: url("first-view-image");
}
.view-button:hover {
background-image: url("second-view-image");
}
And the same for the save button. The title tag shows a small tooltip. if you want bigger/fancier tooltips, you have to use some javaScript framework.
check this out
HTML
<button>Hello</button>
CSS
button {
background: url(your-image.png) no-repeat;
}
button:hover {
background: url(your-image-hovered.png) no-repeat;
}
button:focus {
background: url(your-image-focused.png) no-repeat;
}
Hi i've created a fiddle for you. When you hover the image/button changes and also you get a small tooltip that says "Click here to Save". Is that all you need? Tell me if this helped you or you have any questions.
EXAMPLE
HTML
CSS
.save {
margin-bottom: 10px;
width: 47px;
height:20px;
display:block;
background:transparent url('http://www.mtsworld.com/images/button_submit.gif') center top no-repeat;
}
.save:hover {
background-image: url('http://www.ecdoe.gov.za/ecdoe/graphics/buttons/submit.png');
}
This is my example, change background value to your image, to use tooltip i used jqueryui
Example
html
<a href='#' class='button savebutton' title='Save form'>Save</a>
<a href='#' class='button cancelbutton' title='Cancel action'>Cancel</a>
css
.button{
background : #999;
padding : 5px 10px;
border-radius : 5px;
color:#fff;
text-decoration : none;
}
.savebutton{
background : blue;
}
.cancelbutton{
background : orange;
}
.savebutton:hover{
background : cyan;
}
.cancelbutton:hover{
background : yellow;
}
.ui-tooltip {
padding: 8px;
position: absolute;
z-index: 9999;
max-width: 300px;
-webkit-box-shadow: 0 0 5px #aaa;
box-shadow: 0 0 5px #aaa;
}
body .ui-tooltip {
border-width: 2px;
}
JS
$('.button').tooltip();