i'd like to add an image as an icon to a navigation button in the header. is this possible? how should i go about it? here is my current code.. it doesnt work:
in the html code:
<ion-nav-bar class="bar-positive custom-dark">
<ion-nav-buttons side="left">
<button class="button" style="background: #1e1e1c;" ng-click="doSomething()">
<i class="icon home"></i>
</button>
in the css code:
.home
{
background: #1e1e1c;
background-repeat: no-repeat;
background-position: left top;
background-size: contain;
background-image: url('img/finalimages/home.png');
display: inline;
}
You could create a custom icon which can be put as your default back button alternative in ionic.
By doing this way you are getting a number of custom icons which can be used throughout your project.
This can be made by following this tutorial:here
Related
Been trying to change footer background but I cant get it right. I have a color for each tag but only the last tag is changed (blue - #0000ff) . How does one do styling in Ionic 4?
<template>
<ion-footer>
<ion-toolbar>
<ion-title v-if="loggedIn">
<a href="https://www.facebook.com/" target="_blank">
<ion-icon name="logo-facebook"></ion-icon>
</a>
<a href="https://www.instagram.com/" target="_blank">
<ion-icon name="logo-instagram"></ion-icon>
</a>
</ion-title>
</ion-toolbar>
</ion-footer>
</template>
<script>
export default {
name: "pageFooter",
computed: {
loggedIn() {
return this.$store.getters.loggedIn;
}
}
};
</script>
<style lang="scss">
ion-footer {
background-color: #ff0000;
ion-toolbar {
background-color: #00FF00;
ion-title {
background-color: #0000ff;
a {
font-size: 25px;
color: #000;
}
}
}
}
</style>
It has something to do with "shadow dom" concept which I dont fully undersrtand yet . This DOM structure for the footer.
Ionic 4 uses web components, so the way to style components in Ionic 4 is to use the CSS variables that Ionic provides.
In your case, set the --background property of the component:
ion-footer {
--background: #ff0000;
}
I am making a rating form where I am suppose to make rating stars but if I use alert then I am not able to make rating stars like empty and then fill by clicking .How to make it in alert
I have following html code
<ion-header>
<ion-navbar>
<ion-title>
Ionic Blank
</ion-title>
</ion-navbar>
</ion-header>
<ion-content>
<ion-card padding>
<rating [(ngModel)]="rate" max="5" emptyStarIconName="star-outline"
halfStarIconName="star-half" starIconName="star" nullable="false"
(ngModelChange)="onModelChange($event)">
</rating>
<h2>{{rate}}</h2>
</ion-card>
</ion-content>
and this is its scss
ul {
padding: 10px;
&.rating li {
padding: 5px 10px !important;
background: none;
color: #ffb400;
ion-icon {
font-size: 40px;
}
}
}
This working fine but it is working in card I want a pop up like alert and I dont know how to integrate it in alert.
Secondly I have tried to make alert itself with stars as buttons but its not working the way I wanted,I need help
Hi put above css under src\theme\variables.scss
On the top of the page, I’ve got a div for which background image has been set. I want to place the fab button on the bottom right edge of this div. Exactly like the following image. How can I do this?
Just use the edge attribute that comes along with fabs:
<ion-fab bottom right edge>
<button ion-fab><ion-icon name="camera"></ion-icon></button>
</ion-fab>
For this to work the div (or any tag) having the fab inside must have position set to relative, absolute or fixed to work, position: inherit may work too depending on parent positioning.
Hope this helps.
Thanks to #Garrett and #Gabriel, I got it working using the following markup and scss. It's important to place the FAB button inside the div to which we want to assign the background image so that we can use relative positioning:
<ion-content>
<div id="header">
<ion-fab bottom right edge>
<button ion-fab><ion-icon name="camera"></ion-icon></button>
</ion-fab>
</div>
</ion-content>
And the scss file:
#header {
background-image: url('../assets/images/anonymous.jpg')!important;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
height: 25vh;
}
ion-fab {
position: relative;
}
ion-fab[bottom][edge] {
bottom: -21vh;
}
.fab {
margin-right: 3vw;
}
Here is what I could get to work.
This works by creating a fab-container that is going to overlay the main container on this page. For this to work you need to know their heights. Then we make the fab-container z-index of 1 to be on top. Then we can use flex to make the fab be in the bottom right. Then we can add a margin-top half the size of the fab to the fab-container to have the fab hover halfway in-between. Lastly we can add margin-right to get the fab off the right side.
This may not be the best way to do it, since it requires knowing the height of your container, but it was the way that I would approach this task.
<ion-content>
<div class="container"></div>
<div class="fab-conatainer">
<ion-fab class="fab">
<button ion-fab>
<ion-icon name="camera"></ion-icon>
</button>
</ion-fab>
</div>
<div class="contacts-container">
<ion-list>
<ion-item>
<ion-input placeholder="Name"></ion-input>
</ion-item>
<ion-item>
<ion-input placeholder="Phone"></ion-input>
</ion-item>
<ion-item>
<ion-input placeholder="Email"></ion-input>
</ion-item>
</ion-list>
</div>
</ion-content>
CSS
.container {
width: 100%;
background: #333;
height: 500px;
}
.fab-conatainer {
display: flex;
justify-content: flex-end;
align-items: flex-end;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 500px;
z-index: 1;
margin-top: 28px;
}
.fab {
margin-right: 14px;
}
i did show hide of subheader. but when i scroll header is going upwards.
<ion-nav-bar class="bar-stable no-tap-scroll">
<ion-nav-back-button>
</ion-nav-back-button>
</ion-nav-bar>
<ion-nav-bar class="has-header">
<div class="bar-stable bar-subheader no-tap-scroll" id="divslide" ng-show="quickViewDisplay"></div>
</ion-nav-bar>
/*-----------------------Quick View---------------------------------------*/
#divslide {
transition: all linear 0.1s;
background-color: lightsalmon;
height: 100px;
}
.ng-hide {
height: 0;
}
#dotsDrawer {
font-size: 30px;
text-align: center;
}
<ion-view view-title="Dashboard">
<ion-content overflow-scroll="false">
<div id="dotsDrawer" class="ion-android-more-horizontal" on-drag- up="slideUp()" on-drag-down="slideDown()"></div>
<h1>Hide the DIV: <input type="checkbox" ng-model="quickViewDisplay"></h1>
{{quickViewDisplay}}
</ion-content>
</ion-view>
showing sub header
scroll problem header bar goes upwords
Just add css to content
ex:
.content{
top:88
}
this css shifts the content 44px below.
In the Ionic app, I need to change the background color for my side menu to become red . By default , when I click or press on one item stable color become the background color but I need to become red .
see this
You can use sass to build your own custumized ionic.css
You can give custom css to set the background color like <ion-content class="dark">
Css
.dark {
background-color: red !important;
color: #ffffff;
}
Sample HTML
<ion-side-menu side="left">
<ion-header-bar class="bar bar-dark">
<h1 class="title">Left Menu</h1>
</ion-header-bar>
<ion-content class="dark">
<ion-list class="list">
<ion-item href="#/event/check-in">Check-in</ion-item>
<ion-item href="#/event/attendees">Attendees</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
You can check the full code/demo on the codpen which have proper comments also : http://codepen.io/mhartington/pen/qafgv
For the other reference you can check this also : http://pointdeveloper.com/ionic-change-side-menu-color/
Try overriding item.active.item-stable and item.activated.item-stable styles in your custom CSS.
Add below styles in your custom CSS:
.item.active.item-stable, .item.activated.item-stable, .item-complex.active .item-content.item-stable, .item-complex.activated .item-content.item-stable, .item .item-content.active.item-stable, .item .item-content.activated.item-stable{
border-color: #B81D22;
background-color: #B81D22;
}