I want to use content variable with in-line styles in react, but I dont know how to do this ?
CSS3
.right::after, button::after {
content: var(--content);
display: block;
position: absolute;
white-space: nowrap;
padding: 40px 40px;
pointer-events:none;
}
React Component
return (
<Button
{...configButton}
style={{'--content': "Login" }}
>
<div class="left"></div>
Login
<div class="right"></div>
{children}
</Button>
);
Ok the solution to this problem is quite simple, It made me think for a while.
The css variable that you provided works indeed.
But when it comes to the content of a psudo element then you should provide the value with a pair of quotes and it will work fine.
<Button
{...configButton}
style={{'--content': "'Login'" }}
>
change the "Login" into "'Login'" and this should work fine.
thank you.
It should work.
Are you passing style to the actual rendered element in Button component?
Is the CSS aplied?
div:after {
content: var(--test-var);
}
<div style="--test-var: 'Test'"></div>
Related
I wanna ask something about pseudo-element using tailwind, so before going through into my main problem I wanna show my code using CSS
.text-location {
display: flex;
gap: 1.625rem;
}
.text-location::after {
content: url('image/arrow-down-icon.svg'); <= example image
display: inline-block;
width: 100%;
height: 100%;
}
and the result is like this:
it's working and nothing something wrong when I used in CSS, but when I'm going through using tailwind the content is not showing anything, any wrong with my code? Or I must do something different what I have been made? I hope anyone can help and tell me where I made the mistake...Thank you before and have a nice day, bellow my code:
<label class="font-poppins text-sm font-light leading-[0.875rem] text-[#969696] flex gap-[1.625rem] after:content-[url('image/arrow-down-icon.svg')] after:inline-block after:h-full after:w-full">Location</label>
And the result:
You can use item-center class here and use text-black to make them look similar. You have to use custom fonts as popins is not supported by default.
You can refer here
Below is my code
https://play.tailwindcss.com/0wks3noHUe
You can define your content in the tailwind.config.js
theme: {
extend: {
content: {
'arrowDownIcon': 'url("../src/arrow-down-icon.svg")',
'arrowUpIcon': 'url("../src/arrow-up-icon.svg")',
},
fontSize: {
...
You can render it using the following className. Make sure to include an inline-block and width.
<label className="after:content-arrowDownIcon after:inline-block after:w-8">Learn More</label>
You can also apply a hover state like this hover:after:content-arrowUpIcon
<label className="hover:after:content-arrowUpIcon after:content-arrowDownIcon after:content-arrowBlack after:inline-block after:w-8">Learn More</label>
This question has a Stackblitz demo; Given the following Angular Material button
<button md-button>
<span>Foo</span>
<md-icon>keyboard_arrow_down</md-icon>
</button>
How can I increase the gap between Foo and the icon (see below):
I thought this would be easy but Angular Material wraps the contents in <span class="mat-button-wrapper"> so the final markup is more like:
<button>
<span class="mat-button-wrapper">
<span>Foo</span>
<mat-icon>keyboard_arrow_down</mat-icon>
</span>
</button>
So far I've got as far as adding the following CSS to make the wrapper fill the available space but I can't see how to progress:
.mat-button-wrapper {
display: inline-block;
width: 100%;
}
.mat-button-wrapper > span {
margin-right: 2em;
}
Stackblitz :-
https://stackblitz.com/edit/angular-material-6z4j4m
button md-icon {
margin-left: 64px;
}
This is more semantically appropriate.
https://stackblitz.com/edit/angular-material-yvqvhm
I'm currently working on a dating website for a school project, but i'm stuck and not sure if i'm on the right way.
On the user profile, i want a list of the photos the user choose to show, and i want a hover on the photo where the pointer is.
In my state i added a listPhotoHover: [ ], a tab that contains variables true or false. listPhotoHover[0] = true means the first photo of the list has a hover, false means no hover.
I map and add a div for every photo with a onMouseEnter( ) that takes the photo index and set it an hover if fired.
The hover appears if listPhotoHover[index] exists, the hover div has an onMouseLeave( ) that takes the photo index and set the hover of the photo as false.
Everything seems to work but i'm not sure if it's the best way to do it, and when i move very fast on every photo the hover is still there i think the onMouseLeave( ) don't run.
Here's my code
Map of every photo :
photos.map((photo, index) => {
return
<div className={`flex row`} key={index} >
<img
className={classes.userPhotos}
src={photo}
alt={`photo de ${name}`}
onMouseEnter={() => { this.haveHover(index) }}
/>
{
listPhotoHover[index]
? <div
className={`
absolute flex center alignCenter
${classes.userPhotos} ${classes.photoHover}
`}
onMouseLeave={
() => { this.removeHover(index) }
}
/>
: null
}
</div>
})
function when onMouseEnter() or onMouseLeave() is fired:
haveHover (index, value) {
const tab = this.state.listPhotoHover
tab[index] = value
this.setState({listPhotoHover: tab})
}
I would like to know why does the onMouseLeave() don't work when my pointer move very fast and also what is the best way to do an hover on a map.
Thank you for your advices and sorry if i don't write english correctly
ps: i checked previous questions and didn't find any answer yet :(
Josephine
I don't believe you need javascript to achieve your desired effect. If it is simply to show something when the image is hovered, you can uses some advanced CSS selectors to do this. Run the snippet below to
html {
font-family: sans-serif;
font-size: 10px;
}
.wrap {
position: relative;
}
.image {
width: 80px;
height: 80px;
}
.imageinfo {
display: none;
width: 80px;
height: 17px;
background: #cc0000;
color: #efefef;
padding: 3px;
text-align: center;
box-sizing: border-box;
position: absolute;
bottom: -13px;
}
/* here's the magic */
.image:hover+.imageinfo {
display: block;
}
Hover the image to see the effect
<div class="wrap">
<img class="image" src="https://www.fillmurray.com/80/80" />
<div class="imageinfo">
Bill Murray FTW
</div>
</div>
I just realized i did it all wrong, i added a className with a '&:hover' on the div containing one photo, and it works. No need javascript :D
I don't know why i wanted to complicate it haha..
className:
ANSWER: {
'&:hover': {
opacity: '0.4',
cursor: 'pointer'
}
}
div with the photo:
photos.map((photo, index) => {
return <div className={`flex row ${classes.ANSWER}`} key={index} >
<img
className={classes.userPhotos}
src={photo}
alt={`${name}`}
/>
</div>
})
Hope my mistake will help some people
I'm trying to apply a hover effect to all button tags that have the class dialog-btn. I've tried .dialog-btn:hover{background-color:gold} but that doesn't work. I've also tried other suggestions to similar questions but still no luck. Can someone please clarify how I can do this?
Neither of the two examples below works.
button.dialog-btn:hover {
background-color: gold;
}
<div class="dialog-btns">
<button class="dialog-btn" id="yes">Ref Match</button>
<button class="dialog-btn" id="about">About</button>
</div>
.dialog-btn:hover {
background-color: gold;
}
<div class="dialog-btns">
<button class="dialog-btn" id="yes">Ref Match</button>
<button class="dialog-btn" id="about">About</button>
</div>
EDIT 2:
#yes{
background-color:green;
}
#about{
background-color:purple;
}
The code above appears to overwrite the .dialog-btn:hover code above. Why is that?
Reading your comments, i guess you want to have gold color on all of your buttons if you hover over parrent element.
If it is the case, you can do that
.dialog-btns:hover .dialog-btn{
background-color: gold;
}
I've been using Polymer for a website redesign. I want to display an image that is bound to an element as a background-image. A fairly simple task, but unfortunately I'm having some issues.
I made a running sample of the code for easy testing: click me.
<polymer-element name="album-card" attributes="image">
<template>
<style>
:host{
display: block;
position: relative;
background-color: #99182c;
width: 200px;
}
.description{
padding: 10px;
color: white;
}
.circular{
width: 200px;
height: 200px;
background: url({{image}}) no-repeat;
background-color:green;
}
</style><link rel="stylesheet" href="default_styles.css">
<paper-shadow z="{{shadowValue}}" animated="true"></paper-shadow>
<div class="album-header" vertical layout>
<paper-ripple class="recenteringTouch" fit></paper-ripple>
<div class="circular">
<!--<img src="{{image}}" />--><!-- this does work -->
</div>
<div class="description">
<content select="h2"></content>
<content select="h4"></content>
</div>
</div>
</template>
<script>
Polymer('album-card');
</script>
</polymer-element>
The issue is in the css styling. For some reason the image doesn't diplay in the following line: background: url({{image}}) no-repeat;. However, when using {{image}} in the body somewhere else (in the <div class="circular">, the image does display.
Replacing the {{image}} inside the styling with the direct link also works.
What am I doing wrong?
This looks like a bug. The {{}} are being interrupted literally instead of being parsed by the template engine. Replacing them with [[]] one time bindings works: http://jsbin.com/yocokire/4/edit
However, you should avoi using data-binding inside of <style> if possible (see https://github.com/Polymer/polymer/issues/270#issuecomment-24683309). There are perforamnce concerns and issues under the polyfill. Instead, use a style attribute on the element and do your binding there: http://jsbin.com/riqizige/1/edit