Actually my alert controller "Title" is too lengthy , so i want to resize the text and i added Css class then tried to change the style in SASS by giving font size to it unfortunately didn't worked and the buttons text are uppercase.So is there anyway to change font size of text ,buttons color and size and changing button text to lowercase?
My typescript file
import { IonicPage,AlertController} from 'ionic-angular';
import { Component,ViewChild } from '#angular/core';
import 'rxjs/add/operator/toPromise';
#IonicPage()
#Component({
selector: 'page-kpi',
templateUrl: 'kpi.html',
})
export class KpiPage {
#ViewChild(Nav) nav: Nav;
temp2:any;
lastUpdate:any;
constructor(
private alertCtrl: AlertController,
public menuCtrl : MenuController,
) {
this.platform.ready().then(() => {
this.refreshbutton();
}
});
refreshbutton(){
this.getSession();
if(this.offline == true)
{
this.offlineRefreshAlert();
}
else{
let alert = this.alertCtrl.create({
title: 'Do you really want to refresh the widgets?',
message: 'Refresh process will take time to complete.',
cssClass: 'alertLogCss',
buttons: [
{
text: 'Cancel',
role: 'cancel',
handler: () => {
alert = null;
}
},
{
text: 'Refresh now',
handler: () => {
if(this.online == true){
this.refreshdata(this.result.sid);
this.loadingrefreshdashboard();
}
if(this.offline == true){
this.offlineRefreshAlert();
}
}
}
]
});
alert.present();
}
}
}
My SASS(CSS) file
.alertLogCss{
background-color: white;
color: red;
font-size: 4px;
button{
color: red;
font-size: 5px;
}
}
You have to add css out of that's page scss block
.alertLogCss{
background-color: white;
color: red;
font-size: 4px;
button{
color: red !important;
font-size: 10px;
text-transform: lowercase !important;
}
}
Put in app.scss
Related
I want the button's style to change when I click on them.
I want the option 1 button to be selected and background color to change to by default. If I click on the option 2 button, I want the option 2 button to change and unchanged option 1.
I already used the method found in this post
However, the method doesn't seems to be working correctly since the color of my buttons is the default HTML button color.
My code:
import React, {Component} from 'react';
import './OptionButtons.css'
export class OptionButtons extends Component{
constructor() {
super();
this.state = {
selected: "btn1"
};
}
changeColor = (btn) => {
this.setState({ selected: btn });
};
addClass = (btn) => {
if (this.state.selected === btn) return "selected";
else return "notSelect";
};
render() {
return (
<div class = "option">
<h2> Options </h2>
<div class = "buttons">
<button id = "option1Btn" className = {this.addClass("btn1")} onClick = {this.changeColor.bind(this, "btn1")}> Option 1 </button>
<button className = {this.addClass("btn2")} onClick = {this.changeColor.bind(this, "btn2")}> Option 2 </button>
</div>
</div>
);
}
}
OptionButtons.css
.option {
box-sizing: border-box;
position: relative;
margin-top: 655px;
margin-left: auto;
margin-right: auto;
width: 80%;
max-width: 650px;
}
.option .buttons {
flex: 20%;
display: flex;
justify-content: center;
align-items: center;
}
.option .buttons button {
flex-direction: row;
border-radius: 5px;
padding: 0 1.3rem;
font-family: 'Nunito';
font-style: normal;
font-weight: 700;
font-size: 1.2rem;
line-height: 27px;
text-align: center;
width: 320px;
height: 40px;
left: 50px;
cursor: pointer;
}
#option1Btn{
margin-right: 10px;
}
.selected {
color: "#fff";
background-color: "#00867D";
border: 1px solid "#00867D";
}
.notSelected {
color: "#00867D";
background-color: "#F2F2F2";
border: 1px solid "#F2F2F2";
}
Result of my code
I am not sure. did you say that when you click button 2, Its color will be changed and button 1 will be unchanged(active always)? or button 1 will be inactive?
https://codesandbox.io/s/priceless-tamas-yjr1lw?file=/src/Some.js
check it, do you want like this?
You can easily change colors on button clicks in react:
const [backgroundColor, setBackgroundColor] = useState("white");
const [buttonColors, setButtonColors] = useState({
color1: "red",
color2: "green"
});
const button1Clicked = () => {
setBackgroundColor("gray");
setButtonColors({
...buttonColors,
color1: "green"
});
};
const button2Clicked = () => {
setBackgroundColor("green");
setButtonColors({
...buttonColors,
color2: "red"
});
};
return (
<div
className="App"
style={{
backgroundColor
}}
>
<button
style={{ backgroundColor: buttonColors.color1 }}
onClick={button1Clicked}
>
Button 1
</button>
<button
style={{ backgroundColor: buttonColors.color2 }}
onClick={button2Clicked}
>
Button 2
</button>
</div>
);
You can find a working example here.
There are a couple things that are not ok with your react code and CSS.
Number one you have elements with the property class instead of className.
Second, the color codes you are trying to attribute are strings ("#000"), so your browser doesn't know what to do with them. They should either be clear hexadecimals or using the rgb function.
I'll leave a Codesandbox using your component/CSS so you can take a look.
I think what you are doing is just wrong and very confusing as there is a very elegant way to do it.
import React, {
Component
} from 'react';
import './OptionButtons.css'
export class OptionButtons extends Component {
constructor() {
super();
this.state = {
selected: "btn1" //make this state a boolean so that it will turn true when you press button 1 and false when you press button 2 or vice versa
};
}
changeColor = (btn) => {
this.setState({
selected: btn
});
};
//I have read it many times but I still don't understand what this function does in the code. In my opinion, it has no value to the action you are trying to achieve.
addClass = (btn) => {
if (this.state.selected === btn) return "selected";
else return "notSelect";
};
render() {
return ( <
div class = "option" >
<
h2 > Options < /h2> <
div class = "buttons" >
//it its better and easy to use a turnery operator rather than a function
<
button id = "option1Btn"
className = {
this.addClass("btn1")
}
onClick = {
this.changeColor.bind(this, "btn1")
} > Option 1 < /button> <
button className = {
this.addClass("btn2")
}
onClick = {
this.changeColor.bind(this, "btn2")
} > Option 2 < /button> <
/div> <
/div>
);
}
Instead, you can do like this
import React, {
Component
} from 'react';
import './OptionButtons.css'
export class OptionButtons extends Component {
constructor() {
super();
this.state = {
selected: null //null so that when you click, you can assign a boolean value
};
}
changeColorBtn1 = () => {
this.setState({
selected: true
})
}
changeColorBtn2 = () => {
this.setState({
selected: false
})
}
render() {
return ( <
div class = "option" >
<
h2 > Options < /h2> <
div class = "buttons" >
//I'm using turnery expression which means if selected: true then classname will be btn1
<
button id = "option1Btn"
className = {
this.state.selected && 'btn1'
}
onClick = {
this.changeColorBtn2.bind(this, "btn1")
} > Option 1 < /button>
//same as I did in the previous button but it's vice-versa
<
button className = {!this.state.selected && 'btn2'
}
onClick = {
this.changeColorBtn2.bind(this)
} > Option 2 < /button> <
/div> <
/div>
);
}
I hope it answers your question
I want to design a button component with Vue.
When I get main props, how can I get in css --mainColor variable without setting inline-style? thanks.
<script>
import Vue from "vue";
export default Vue.extend({
name: "Button",
props: {
text: {
type: String,
default: ""
},
main: {
type: String,
default: "#10b981"
}
}
});
</script>
<style lang="scss" scoped>
.btn {
--mainColor: #10b981;
display: inline-block;
border: 1px solid var(--mainColor);
color: var(--mainColor);
&:hover {
background-color: var(--mainColor);
color: #fff;
}
}
</style>
I doubt that's possible. But you can run conditional logic in sass, like their official example:
$light-background: #f2ece4;
$light-text: #036;
$dark-background: #6b717f;
$dark-text: #d2e1dd;
#mixin theme-colors($light-theme: true) {
#if $light-theme {
background-color: $light-background;
color: $light-text;
} #else {
background-color: $dark-background;
color: $dark-text;
}
}
.banner {
#include theme-colors($light-theme: true);
body.dark & {
#include theme-colors($light-theme: false);
}
}
https://sass-lang.com/documentation/at-rules/control/if
This is super easy if using Vue3:
<template>
<h1>HELLO</h1>
</template>
<script>
export default {
data() {
return {
h1Color: "red",
};
},
};
</script>
<style>
h1 {
color: v-bind(h1Color);
}
</style>
For a more extensive guide - here
If using Vue2 I would suggest using the same approach as in Steven B's answer, here the ref
Try to change styling on focus of the host element. While the following construction works fine in combination with /deep/, it does not work for the host element itself. What's wrong with the CSS code?
:host {
background-color: white;
border: 1px solid lightgray;
padding: 1px 0;
display: inline-block;
}
:host:focus {
border: 2px solid lightskyblue;
}
Thanks for any help.
You could do it programmatically, with a HostListener, Renderer2 and ElementRef:
import { Component, ElementRef, HostListener, Renderer2 } from '#angular/core';
#Component({
selector: 'button[app-button]',
template: '<ng-content></ng-content>',
styleUrls: ['./button.component.css']
})
export class ButtonComponent {
constructor(
private el: ElementRef,
private renderer: Renderer2
) {}
#HostListener('focus', ['$event.target'])
onFocus() {
this.renderer.setStyle(this.el.nativeElement, 'background-color', 'red');
}
#HostListener('blur', ['$event.target'])
onBlur() {
this.renderer.setStyle(this.el.nativeElement, 'background-color', 'buttonface');
}
}
Or you could just use the :host pseudo selector and wrap the :focus in brackets in your component's stylesheet:
:host(:focus) {
background-color: red;
}
Here's an example: stackblitz.
Instead of using the renderer, you can just use hostlistener and hostbinding.
#HostBinding('class.focus') public focus: boolean = false;
#HostListener('focus', ['$event.target']) public onFocus(): void {
this.focus = true;
}
#HostListener('blur', ['$event.target']) public onBlur(): void {
this.focus = false;
}
I want to change the color of the custom icons (generated with IcoMoon) embedded in the following Action Sheet. I am working with Ionic Framework Version: 3.1.1
This is how look the three files related with the view:
groups.html
.
.
.
<ion-card>
<img src="../../assets/img/groups/acoustics group.jpg"/>
<ion-card-content>
<ion-card-title>
<ion-row>
<ion-col class="settitle">
Acoustics
</ion-col>
<ion-col class="rightcol">
<button class="iconmore" ion-button clear icon-only small (click)="openMenuGroup()" round>
<ion-icon name="more" ></ion-icon>
</button>
</ion-col>
</ion-row>
</ion-card-title>
<p class="content">
22 Bookings <br>
Since December 23th 2016
</p>
</ion-card-content>
</ion-card>
.
.
.
groups.ts
.
.
.
openMenuGroup() {
let actionSheet = this.actionsheetCtrl.create({
title: 'More',
cssClass: 'action-sheets-groups-page',
buttons: [
{
text: 'Edit',
icon: 'icon-edition',
handler: () => {
console.log('Edit clicked');
}
},
{
text: 'Delete',
role: 'destructive',
icon: 'icon-erase',
handler: () => {
console.log('Delete clicked');
}
},
{
text: 'Cancel',
role: 'cancel', // will always sort to be on the bottom
icon: 'close',
handler: () => {
console.log('Cancel clicked');
}
}
]
});
actionSheet.present();
}
.
.
.
groups.css
page-groups {
ion-content{
.settitle{
font-size: 70%;
color: grey;
}
button.iconmore{
font-size: 80%;
color: grey;
}
ion-col.rightcol{
direction: rtl;
}
p.content{
font-size: 90%;
color: grey;
}
}
.action-sheets-groups-page {
.icon-edition {
color: grey;
}
.icon-erase {
color: grey;
}
.action-sheet-cancel ion-icon,
.action-sheet-destructive {
color: grey;
}
}
}
thanks in advance!! I tried to follow the documentation but I couldn't how to do that.
The key is set the styles in global.scss, because this action sheet is loading from out of the page.
Try to add styles in app.scss:
app.scss:
.ion-logo-whatsapp:before {
color: green;
}
Ionic 4 Solution Action Sheet Button Text Color Change
You Have to add CSS-class to button like below example in your example.page.ts
buttons: [{
text: "Price : High to Low",
icon: "arrow-round-up",
cssClass: "dark", // css name can be anything
handler: () => {
this.getSortProducts("High to Low");
}
}]
Put your CSS into global.scss
.dark {
color: black !important;
}
It is working only on from global.scss because this action sheet is loading from out of the page.
Thank You
Try updating this class in ionic.css
.action-sheet-has-icons .icon {
color:/*whatever you want*/
}
.ion-logo-whatsapp:before {
color: green;
}
.ion-md-share:before {
color: color($colors,favorite);
}
.ion-md-close:before {
color: red;
}
image
In your scss file, you must move ".action-sheets-groups-page" class out of page-groups{} because your action sheet is not in your page
You should have instead
groups.scss
page-groups {
ion-content{
.settitle{
font-size: 70%;
color: grey;
}
button.iconmore{
font-size: 80%;
color: grey;
}
ion-col.rightcol{
direction: rtl;
}
p.content{
font-size: 90%;
color: grey;
}
}
}
.action-sheets-groups-page {
.icon-edition {
color: grey;
}
.icon-erase {
color: grey;
}
.action-sheet-cancel ion-icon,
.action-sheet-destructive {
color: grey;
}
}
// in component ts
async presentActionSheet(body) {
const actionSheet = await this.actionSheetController.create({
header: "Options",
buttons: [
{
text: "Add More Item",
icon: "add",
cssClass: 'example', // <- add css class here only
handler: () => {
this.OpenTopupModal(body);
},
},
{
text: "Update Use Item",
icon: "pencil",
cssClass: 'example', // <- add css class here only
handler: () => {
this.openUsedItemModal(body);
},
},
...
in global.scss
.example .action-sheet-icon {
color: #1e3d6e !important;
}
This is my code logic, When user click the box , I will set the state active to true
and getCssStyle() will return drag-and-resize-box-text clicked
and then the background image(T) should disappear
class Box extends Component {
constructor(props) {
super(props);
this.state = {
active: false,
}
}
// decide which style to be used
getCssStyle = (type) => {
switch (type) {
case 'text':
if (this.state.active) {
console.log("AAA")
return 'drag-and-resize-box-text clicked'
} else {
console.log("BBB")
return 'drag-and-resize-box-text';
}
// break;
default:
return '';
}
}
onClick = () => {
this.setState({active: true});
}
render() {
return (
<div className={this.getCssStyle(boxType)} >
{this.boxFillContent()}
</div>
</div>
);
}
}
The dev tools show the background image is delete, but the page is still show the image
What's wrong with this??
css
.drag-and-resize-box-text{
border: dashed 3px LightSeaGreen;
background: url(../images/bottom/text_normal.png) no-repeat;
background-position:center;
width: inherit;
height: inherit;
}
.drag-and-resize-box-text.clicked{
border: dashed 3px LightSeaGreen;
/*background: url(../images/bottom/text_normal.png) no-repeat;*/
background-position:center;
width: inherit;
height: inherit;
}
.drag-and-resize-box-text.clicked should have background: none.
Also your code could be made much simpler by using
<div className={this.state.active ? 'drag-and-resize-box-text clicked' : 'drag-and-resize-box-text'} >
{this.boxFillContent()}
</div>