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
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;
}
Well, I want to standardize the width equal to the above, but I'm not getting any way ... I've tried margin's, width and others, but none if you want to change the size of the card. I want to leave default, do you recommend me some command or am I doing wrong? all the css commands I did was in home.scss, thank you all.
Watch the print of my app here
page-home {
.bg{
background: linear-gradient(to bottom, #00A399 0%, #fafafa 400%);
}
.bg-ions{
background:#000;
opacity:0.2;
}
.btn{
background:#000;
opacity:0.2;
color:white;
}
ion-input{
color:#FAFAFA;
}
ion-textarea{
color:#FAFAFA;
}
ion-card{
display: flex;
flex-direction: column;
width: 100%;
}
ion-card-content{
margin-left:-2%;
}
ion-item{
width:50%;
}
.summ{
color:#000;
}
::placeholder {
color: white;
opacity: 1; /* Firefox */
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
color: white;
}
::-ms-input-placeholder { /* Microsoft Edge */
color: white;
}
}
<br>
<ion-header>
<ion-navbar>
<ion-title>
HybridSumm
</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding class="bg">
<ion-item class="bg-ions">
<ion-label class="div-pai" color="primary" stacked>Title</ion-label>
<ion-input placeholder="Ex: The Bio-informatics" style="color:white;"></ion-input>
</ion-item>
<br>
<ion-item class="bg-ions">
<ion-label color="primary" stacked >Text</ion-label>
<ion-textarea placeholder="Place the text that you want to summarize." ngDefaultControl [(ngModel)]="test"></ion-textarea>
</ion-item>
<br>
<button ion-button outline style="background: white">Summarize</button>
<button ion-button>Test</button>
<br><br>
<ion-card>
<ion-card-header>
Card Header
</ion-card-header>
<ion-card-content>
{{test}}
</ion-card-content>
</ion-card>
</ion-content>
Ionic set some properties by default, and the only way to override them, is by giving them the !important rule.
It is maybe not the best practice, but it works, and ionic gives us not very much sass variables to overwrite some things.
It works for me adding this in the following SCSS rules in your code:
ion-card{
display: flex;
flex-direction: column;
width: 100% !important;
margin: 0 !important;
}
I hope it works for you.
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
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;
}
I'm trying to align text in Html but it doesn't work and I do not know why. I'm using Ionic Framework.
My code is:
<ion-list>
<ion-item>
<b>Name</b> <p align="right"> {{paciente.name}}</p>
</ion-item>
....
</ion-list>
and it looks like this:
but I want all text int the same line, and I do not know how to get that.
See this demo: http://play.ionic.io/app/b477ea2f5623
In ionic items, if you write any text within span with item-note class then it will be aligned to right.This is built in class by ionic, your code will be like this :
<ion-item>
<b>Name</b> <span class="item-note"> {{paciente.name}}</span>
</ion-item>
See more tricks with ionic items provide by built in classes, see this Documentation
Add a css class as
.item {
position: absolute;
right: 0px;
width: 300px;
padding: 10px;
}
The p tag creates a paragraph on a new line, so you need an other element. You could use a span element which is floated right:
Html:
<ion-list>
<ion-item>
<b>Name</b> <span class="right"> {{paciente.name}}</span>
</ion-item>
....
</ion-list>
Css:
.right {
float: right;
}
Apply the ckass to all items you want to be on the right.