I have a button which when clicked , should change the background colour and the fint colours.Back to default when clicked again.So should change from light to dark mode.
The CSS classes are .bgdark and .textlight. These needs to added to the 'mainbody' for dark mode.
HTML
<div class="mainbody">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
TS
export class AppComponent {
title = 'salesapp';
ngOnInit(){
}
}
You can use binding to class names in order to dynamically add or remove them. You would implement the markup like so:
<div class="mainbody" [class.bgnight]="haveClass">
<button (click)="haveClass = !haveClass">Submit</button>
</div>
And your component would be like so:
export class AppComponent {
haveClass = false;
}
Your button will toggle the haveClass boolean each time you click on it, which will add and remove the class from your div as expected.
Related
How can I create a Button with hover effect I can't really get it and I have used bootstrap
Button Component:
import React from "react";
import "./button.css";
const Button = ({ title, colorStyle }) => {
return (
<>
<button type="submit" className={colorStyle}>
{title}
</button>
</> );
};
export default Button;
And import line is::
<Button title="Shop" colorStyle="bg-dark text-white" />
in your button.css add
button::hover {
css declarations;
}
Just use react-bootstrap components. The button of it already has a hover effect in default state: https://react-bootstrap.github.io/components/buttons/
Well, the hover effect has nothing to do with react. What you can do is rely on plain old CSS for this. The class that you have added on the button can use used to do this. Your code would look something like this if you wanted a background-changing effect.
bg-dark {
background: black;
}
bg-dark:hover {
background: red;
}
In the above example, your button's background colour will switch to red on hover.
Let me know if you have any follow up questions.
I am facing some difficulty effecting a styling with the ternary operator in an element's className.
I created three buttons to render to a particular component when any of them are clicked, and I also intend to use a background color change on the buttons when each component assigned to it is rendered to denote which button was clicked.
The issue I face is that while the components are successfully rendering, the background color for the button doesn't change.
<div className="App">
<div className ="App-btns">
<button onClick = {fPro} className = {`${styles[{pro ? "active" : null}]}`}>Profile</button>
<button onClick = {fSec} className = {`${styles[{sec ? "active" : null}]}`}>Security</button>
<button onClick = {fVer} className = {`${styles[{ver ? "active" : null}]}`}>Verification</button>
</div>
<div className = "App-render">
{pro && <Profile/>}
{sec && <Security/>}
{ver && <Verification/>}
</div>
</div>
I created three variables; pro, sec and ver. I set all to false except pro which was set to true, which renders the component, Profile as the default. Then, I created three functions also, which sets its corresponding variables to true and others to false and they are activated when a button Is clicked.
I also used the variables in the ternary operator to assign a classname, when a particular variable is true. The class name should be set to active and a corresponding styling change should come with it, but this doesn't seem to work.
.active{
background-color: purple;
border: 1px solid purple;
}
When pro is truthy, styles[{pro ? "active" : null}] gets resolved to styles[{"active"}] which makes no sense.
Instead conditionally add className like this
<button onClick = {fPro} {...(pro && { className: "active" })}>Profile</button>
OR
<button onClick = {fPro} className= {pro?"active":null}>Profile</button>
Do the same for other buttons.
<div className="App">
<div className ="App-btns">
<button onClick = {fPro} className = {`${pro ? styles.active : null}`}>Profile</button>
<button onClick = {fSec} className = {`${sec ? styles.active : null}`}>Security</button>
<button onClick = {fVer} className = {`${ver ? styles.active : null}`}>Verification</button>
</div>
<div className = "App-render">
{pro && <Profile/>}
{sec && <Security/>}
{ver && <Verification/>}
</div>
</div>
I'm very new to Svelte and I want to build a theme for a website.
When I want buttons to have a certain look and animations, do I create a new Button component and use that every time with slots or do I just create a class for this button that has some css code and use the standard html button?
Of course I can do it both ways, but which one is preferred in svelte?
You could use this strategy for theming your application. You can use $$restProps to capture your classes and in your components, you can also set up the events for the buttons.
App.svelte
<script>
import Button from "./Button.svelte"
</script>
<Button class="primary">
My Button
</Button>
<Button class="danger">
My Button
</Button>
Button.svelte
<script>
let buttonProps = {
class:[$$restProps.class]
}
</script>
<button on:click
on:mouseover
on:mouseenter
on:mouseleave
{...buttonProps}>
<slot/>
</button>
<style>
.primary{
color:green;
}
.danger {
color:red;
}
</style>
Example REPL. Components are the right way to go for build large applications.
I'm designing Ionic 4 plus angular app, I create 3 buttons with 3 different colour to each other (suppose all buttons is in the first page), in the second page I'm using HTML fieldset. Now I want when I click on the first button then second-page fieldset border colour should be blue,
when I click on second button fieldset border colour should be red etc.
Below image shows what exactly I want.
You can use add class and remove class.Create a function that will remove class which border color is black and add class which border color is red and e.t.
function myFunction() {
var element = document.getElementById("myDIV");
element.classList.add("mystyle");//add class
}
function myFunction() {
var element = document.getElementById("myDIV");
element.classList.remove("mystyle");//remove class
}
For better understanding read this: https://www.w3schools.com/howto/howto_js_add_class.asp
And this: https://www.w3schools.com/howto/howto_js_remove_class.asp
Good Luck :)
You can refer the following code sample in your code. It is not a complete working example but this has the basic idea about that.
page1.html
<button ion-button (click)="gotoPage2('blue')" color="blue">First button</button>
<button ion-button (click)="gotoPage2('red')" color="red">Second button</button>
<button ion-button (click)="gotoPage2('green')" color="green">Third button</button>
page1.ts
public gotoPage2(event ,color ){
this.navCtrl.push(page2,{
color:color
});
}
page2.ts
export class Page2 {
value:any;
constructor(public navParams: NavParams) {
this.color = navParams.get('color');
}
ionViewDidLoad() {
console.log('ionViewDidLoad EmiCalPage');
}
}
page2.html
<div [ngClass]="color" >
</div>
so here is my question:
lets say I have a page with 3 buttons. each contains a unique pattern as as background. I want to change the entire page background image once I click/ hover on one of the buttons.
what I need is something similar to http://subtlepatterns.com/
I dont need a stop preview option, as long as the background image change again when I select a different button.
how can I do that?
also, if its not possible, this will also work for me:
change the color of a DIV (instead of the entire page background) whenever I click/ hover on one of the buttons.
have 3 different body class in ur CSS sheet:
body.class1 {
background: ...;
}
body.class2 {
background: ...;
}
body.class3 {
background: ...;
}
use jQuery to dynamic change body class
$("#btn1").click(function() {
$('body').removeClass();
$('body').addClass('class1');
});
$("#btn2").click(function() {
$('body').removeClass();
$('body').addClass('class2');
});
$("#btn3").click(function() {
$('body').removeClass();
$('body').addClass('class3');
});
then finally put a id in each button to jQuery find this in DOM:
<a id="btn1">bg1</a>
<a id="btn2">bg2</a>
<a id="btn3">bg3</a>
Using just javascript you could do something like this
function changeBg(color) {
var color = '#' + color;
document.body.style.background = color;
}
http://jsfiddle.net/62SXu/
You can also change this to pass it the path to whatever your image is
does have to be done with CSS? it seems alot easier method to do with jQuery. something like this would work:
<style>
.button1 {background:url(url to PIC);}
</style>
$(document).ready(function (){
$(".onClick").click(function (){
var ID = $(this).attr("id");
$(body).removeClass();
$(body).addClass(ID);
})
})
<div class = "onClick" id="button1"> ... </div>
<div class = "onClick" id="button2"> ... </div>
<div class = "onClick" id="button3"> ... </div>