The standard glyph icons are pretty boring
https://www.w3schools.com/bootstrap/bootstrap_ref_comp_glyphs.asp
The following code works, but instead of a filled in star with black, is there a way to make it some other color, e.g., orange?
In addition, is there a more interesting set of icons for download to use for buttons?
const glyphStarEmpty = 'glyphicon glyphicon-star-empty';
const glyphStarFull = 'glyphicon glyphicon-star';
class Checkbox extends React.Component {
constructor(props) {
super(props);
this.state = {
checked: false,
currentGlyph: glyphStarEmpty
};
this.toggleChecked = this.toggleChecked.bind(this);
}
toggleChecked() {
if(this.state.currentGlyph == glyphStarEmpty){
this.setState({
currentGlyph : glyphStarFull
})
}
else{
this.setState({
currentGlyph : glyphStarEmpty
})
}
this.setState({
checked: !this.state.checked
});
}
render() {
return (
<button className={this.state.currentGlyph} onClick={this.toggleChecked}></button>
);
}
}
You can do that with simple css
<span class="icon-some"></span>
.icon-some {
color: orange;
}
Wow, why so complicated? Just add some CSS inside the <head> tag:
<style type="text/css">
.glyphicon { color: orange; }
</style>
Another icons that you can use are from font awesome.They have tons of button icons and i'm sure you'll like it,i've used this icons for a lot of websites,to change the colors simply ad some css as other members told you before me
You could use an inline style:
<button style={{ color: 'orange' }} className={this.state.currentGlyph} onClick={this.toggleChecked}></button>
If you want a black outline in addition, try this:
<button style={{ color: 'orange', textShadow: '0 0 1px black' }} className={this.state.currentGlyph} onClick={this.toggleChecked}></button>
You could add a css color property like this:
HTML
<span class="orange glyphicon glyphicon-envelope"></span>
CSS
.orange {color: orange;}
With the help from surrounding answers, the solution became obvious. This is not perfect since I want a black border with a pure white inside (or maybe even the way stackoverflow color scheme using gray for the up/down triangles) for unchecked state for maximum contrast, but I will fix that on my own:
render() {
if(!this.state.checked)
{
return (
<button className={glyphStarFull} onClick={this.toggleChecked}></button>
);
}
else
{
return (
<button style={{ color: 'orange', textShadow: '0 0 1px black' }} className={this.state.currentGlyph} onClick={this.toggleChecked}></button>
Related
Working on a react/typescript project, I have a div and want to replace the border color and width of a div when it's clicked:
<div
className="showroom-card "
onClick={() => setSelection({ showroom: 'Westchester' })}
>
I know it should be simple but I'm pretty new to this.
in javascript you can make but please describe more
div.style.border="1px solid #000";
With pure html/js it would be look like that:
.showroom-card {
width: 500px;
height: 300px;
background-color: yellow;
border: 2px solid red;
}
.selected {
border: 2px solid black;
}
<div
id="card1"
class="showroom-card"
onClick="(function(divId) {
targetDiv = document.querySelector(`#${divId}`)
targetDiv.classList.toggle('selected')
})('card1');return false;"
></div>
But in react you must use state of component to manipulate div's style. For example, you would use divToggled variable in state of your component to render border and manipulate its color. The handler function, named handleDivClick change state and component will be rerendered:
class YourComponent extends React.Component {
...
handleDivClick = () => {
this.setState(divToggled: !this.state.divToggled)
}
...
render() {
return (
<div
onClick={this.handleDivClick}
className={`showroom-card ${this.state.divToggled ? 'selected' : ''}`}
/>
)
}
}
I'm creating a button with React.createElement:
React.createElement('button', {style: button.key === this.state.customBtnSelected ? customBtnSelected : customBtnUnSelected, onClick: () => {this.handleCustomBtnClick(i)} }, button.label)
So the one of the css styles is in the customBtnUnSelected variable.
But how do I add css classes for the hover state?
So far this isn't working:
const customBtnUnSelected = {
padding: 12,
textAlign: "center",
textDecoration: "none",
display: "inline-block",
fontSize: 12,
cursor: "pointer",
backgroundColor: "#CFD4DA",
border: "1px solid white",
&:hover: {
color: "#fff"
}
};
It's not possible to use the :hover, :after, or :before styling to an element, using inline styling.
The only way to achieve that is to use the <style> tag, or linking an external CSS file to your project.
To insert a style tag, you just place it somewhere in your app. It may be in one of your components, or in the root HTMl file, etc...
return (
<style>{`
.myButton {
padding: 8;
background: black
}
.myButton:hover {
background: grey
}
`}</style>
)
Then, you can just use the myButton class on the className prop of your button.
<button className='myButton'>Click</button>
or
React.createElement('button', {className: 'myButton'})
Regardless of using React.createElement or the JSX syntax, React doesn't support selecting pseudo elements with inline styling.
This question has a few answers with a lot more tips that might help you:
CSS pseudo elements in React
I see that you can create "variables" inside css:
https://www.w3schools.com/cssref/func_var.asp
My files:
(style.css file)
[title~=--myVariable] {
color: red
}
(App.js file)
...
return (
<div className="App">
<h1 title="thisIsTheTitle"> Some text in red color ? </h1>
</div>
)
Is it possible to do so that if my header has a title, then the color is red
otherwise stays at is (black)
UPDATE
I forgot initialize myVariable, so:
(style.css file)
:root {
--myVariable: white;
}
you can set fallbacks with css var().
however please note:
The var() function cannot be used in property names, selectors or anything else besides property values
MDN
update: I saw you're edit, so as the quote above that will not work.
To answer this part:
Is it possible to do so that if my header has a title, then the color is red otherwise stays at is (black)
(style.css file)
.App h1 {
color: black;
}
.red {
color: red;
}
(App.js file)
...
function App({ headerTitle }) {
return (
<div className="App">
<h1 title={ headerTitle }
className={headerTitle ? 'red' : null } >
Some text in red color ? </h1>
</div>
)
}
How can I switch the stylesheets based on the button click in an AngularJS 2.0 application?
As right now I am including stylesheets on the head section of index.html page.
#Component({
selector: ...,
template: ...,
styles: [`
:host(:not(.some-class)) {
border: solid 1px red;
}
:host(.some-class) {
border: solid 3px green;
}
`
]})
export class MyComponent {
#HostBinding('class.some-class') isSomeClass = true;
}
Plunker example
I would leverage the ngStyle directive:
<h1 [ngStyle]="{'font-style': style, 'font-size': size, 'font-weight': weight}">
Change style of this text!
</h1>
<div (click)="changeStyle()">Update style</div>
Updading the style, size values from a method (linked to a click event) will update your style:
export class SomeComponent {
style = 'normal';
weight = 'normal';
size = '20px';
changeStyle($event: any) {
this.style = 'italic';
}
objective
I have a div that I want to make act like a tooltip with reactjs.
HTML
<div>on hover here we will show the tooltip</div>
<div>
<div class="tooltip_custom">this is the tooltip!!</div>
</div>
I am used to angularjs using the ng-show with a condition on the <div> , I was wondering if there is such binding in reactjs , or else how can I do this functionality ?
Thanks
You can make your component to return the following markup
return (
<div>
<div onMouseOver={this.handleMouseIn.bind(this)} onMouseOut={this.handleMouseOut.bind(this)}>on hover here we will show the tooltip</div>
<div>
<div style={tooltipStyle}>this is the tooltip!!</div>
</div>
</div>
);
Where tooltipStyle is assigned like this:
const tooltipStyle = {
display: this.state.hover ? 'block' : 'none'
}
So tooltip depends on component state, now in handleMouseIn and handleMouseOut you need to change component state to make tooltip visible.
handleMouseIn() {
this.setState({ hover: true })
}
handleMouseOut() {
this.setState({ hover: false })
}
Here is working example.
You can start diving in React with this article: Thinking in React.
One option is just to do it in CSS. It's not quite as flexible, but with markup like:
<div className="tooltip-on-hover">Hover here</div>
<div className="tooltip">This is the tooltip</div>
You could do:
.tooltip {
...
visibility: hidden; /* Or display: none, depending on how you want it to behave */
}
.tooltip-on-hover:hover + .tooltip { /* Uses the adjacent sibling selector */
visibility: visible; /* Or display: block */
}
Example:
.tooltip { display: none; }
.tooltip-on-hover:hover + .tooltip { display: block; }
<div class="tooltip-on-hover">Hover here</div>
<div class="tooltip">This is the tooltip</div>
You could also nest the tooltip inside the element so you could use a normal descendant selector like .tooltip-on-hover:hover .tooltip. You could even use a ::before or ::after pseudo-element, there are guides around on how to do this.
I think whatever you want to show as tooltip, just add that to the "title" of the div where you want to show it.
Eg:
<div title="I am the tooltip text">I am the div where you should hover</div>
But if its a custom designed div then go as the answers given before.
Install npm package:
npm install react-tooltip
Usage:
import ReactTooltip from "react-tooltip";
<div data-tip="msg to show" data-for='toolTip1' data-place='top'>Tooltip</div>
<ReactTooltip id="toolTip1" />
You can also use React Mapple ToolTip which is easy to use and customize and also comes with predefined themes.
Disclaimer: I am the author of this library
reactjs-mappletooltip
You can use react-tooltip package. Super easy to use and handy also.
Installation: npm i react-tootip.
Example:
1. import it :
import ReactTooltip from "react-tooltip"
Include it in your component:
<div className="createContent">
**<ReactTooltip />**
<div className="contentPlaceholder">
add tool tip to your button/div or any element: data-tip="add tooltip message"
<button className="addSection" data-tip="add tooltip message" onClick={() => this.onAddChild()}>+</button>
package url: https://www.npmjs.com/package/react-tooltip
import Tooltip from "#material-ui/core/Tooltip";
const HtmlTooltip = withStyles((theme) => ({
tooltip: {
backgroundColor: 'rgba(255,250,228)',
color: 'rgba(0, 0, 0, 0.87)',
maxWidth: 400,
fontSize: theme.typography.pxToRem(12),
border: '1px solid #dadde9',
},
}))(Tooltip);
headerName: 'FEEDBACK',
field: "remarks",
flex: 0.30,
renderCell: (params: GridCellParams) => (
<Grid>
<HtmlTooltip title={params.value} placement="bottom">
<Typography style={{ color: "inherit", cursor: "pointer" }}>{params.value}</Typography>
</HtmlTooltip>
</Grid>
)
In case, if you are using react-bootstrap in your project, then use https://react-bootstrap.github.io/components/overlays/ Overlay with the tooltip.
MouseEnter and MoverLeave need to be used though.
<OverlayTrigger
placement="right"
delay={{ show: 250, hide: 400 }}
overlay={renderTooltip}>
<div>on hover here we will show the tooltip</div>
</OverlayTrigger>