I got the requirement for developing a UI component for teams-info like this.
I have just started using React with React-Bootstrap, but I couldn't find a UI layout which can render this. I have used react-responsive-carousel, but It's a flat icon at the bottom of the image as Thumbnail not like a half-circular option shown in the image.
Update:
On selecting another image the image positions must not change. Like this.
Can anyone guide me how can I achieve this?
Thanks in advance.
Something like this may bring you closer to the result. One way of mapping the user information in the middle would be through utilizing different pieces of content in an array.
function Circle() {
function elementMethod(){
return (
<span onMouseEnter={...} onMouseLeave={...} className='individual--circ'><img src={...}></img> </span>
}
return (
<React.Fragment>
{ circleElement.map((element) => {
<div classname='cir-menu'>
{element}
</div>
}
</React.Fragment>
)
}
I've built something similar before which has a similar appearance (animated, however). The CSS looked like this:
.contact-icon{
background-color: #000000;
border-radius: 50%;
padding: 20px;
box-shadow: 1px 1px 1px 1px rgba(0,0,0,0.1),
2px 2px 2px 2px rgba(0,0,0,0.1),
4px 4px 4px 4px rgba(0,0,0,0.1);
}
.middle-cir{
position: relative;
}
.contact-outer{
background-color: #611427;
color: white;
height: 100vh;
width: 100vw;
position: fixed;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
overflow: hidden;
margin: 0;
opacity: 100;
visibility: visible;
z-index: 4;
transition: visibility .5s, opacity 1s ease;
}
.contact-outer h1{
top: 0;
margin-top: 4em;
position: absolute;
opacity: 100
}
.contact-outer-none h1{
top: 0;
margin-top: 4em;
position: absolute;
}
.contact-outer-none{
background-color: #611427;
color: #F2F2E9;
height: 100vh;
width: 100vw;
position: fixed;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
overflow: hidden;
margin: 0;
opacity: 0;
visibility:hidden;
z-index: 4;
transition: visibility .5s,opacity 1s ease;
}
.cir-menu{
position: relative;
justify-self: center;
display: flex;
justify-content: center;
align-items: center;
transform: rotate(-87deg);
}
.cir-a{
position: absolute;
transform: rotate(72deg) translateX(80px) rotate(10deg);
transition: transform 1s;
}
.cir-a:hover{
position: absolute;
transform: rotate(72deg) translateX(110px) rotate(10deg);
}
.cir-a-min{
position: absolute;
transform: rotate(72-20deg) translateX(0px) rotate(-72deg);
transition: transform 1s;
}
.cir-b{
position: absolute;
transform: rotate(144deg) translateX(80px) rotate(-60deg);
transition: transform 1s;
}
.cir-b:hover{
position: absolute;
transform: rotate(144deg) translateX(110px) rotate(-60deg);
}
.cir-b-min{
position: absolute;
transform: rotate(144-20deg) translateX(0px) rotate(-144deg);
transition: transform 1s;
}
.cir-c{
position: absolute;
transform: rotate(216deg)translateX(80px) rotate(-132deg);
transition: transform 1s;
}
.cir-c:hover{
position: absolute;
transform: rotate(216deg) translateX(110px) rotate(-132deg);
}
.cir-c-min{
position: absolute;
transform: rotate(216-20deg) translateX(0px) rotate(-216deg);
transition: transform 1s;
}
.cir-d{
position: absolute;
transform:rotate(288deg) translateX(80px) rotate(-204deg);
transition: transform 1s;
}
.cir-d:hover{
position: absolute;
transform: rotate(288deg) translateX(110px) rotate(-204deg);
}
.cir-d-min{
position: absolute;
transform:rotate(288-20deg) translateX(0px) rotate(-288deg);
transition: transform 1s;
}
.cir-e{
position: absolute;
transform: rotate(360deg) translateX(80px) rotate(-276deg);
transition: transform 1s;
}
.cir-e:hover{
position: absolute;
transform: rotate(360deg) translateX(110px) rotate(-276deg);
}
.cir-e-min{
position: absolute;
transform: rotate(360-20deg) translateX(0px) rotate(-360deg);
transition: transform 1s;
}
.nav-icon-ctr{
visibility: visible !important;
background-color: #F2F2E9;
position: relative;
justify-self: center;
align-self: center;
z-index: 99;
border-radius: 50%;
color: black;
height: 20px;
width: 20px;
padding: 1rem;
transform: rotate(87deg);
box-shadow: 1px 1px 1px 1px rgba(0,0,0,0.2),
3px 3px 3px 3px rgba(0,0,0,0.2);
}
Related
I found the React CSS modules usefull, but having problem when I tried to reuse the same component with a little modified css I stuck. For example I created Neon glowing button, but now need to change only the width of the Button and some additional small changes in the css.
The only option I see is component without css and for every different case need to rewrite the whole css. Is there a smarter way?
import React from "react";
import styles from "./index.module.css";
import { Link } from "react-router-dom";
const GlowingButton = ({ title, path }) => {
return (
<div className={styles.buttonWrapper}>
<Link className={styles.button} to={path}>
<button className={styles["glow-on-hover"]}>{title}</button>
</Link>
</div>
);
};
export default GlowingButton;
And here is index.module.css
.buttonWrapper {
margin: 0px;
padding: 0px;
display: flex;
justify-content: center;
align-items: center;
background: transparent;
font-family: "consolas";
}
.button {
margin: 0;
padding: 0;
width: 80%;
height: 8vh;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
background: #100f;
text-decoration: none;
}
.glow-on-hover {
width: 400px;
height: 50px;
border: none;
outline: none;
color: #fff;
background: #111;
cursor: pointer;
position: relative;
z-index: 0;
border-radius: 10px;
}
.glow-on-hover:before {
content: "";
background: linear-gradient(
45deg,
#ff0000,
#ff7300,
#fffb00,
#48ff00,
#00ffd5,
#002bff,
#7a00ff,
#ff00c8,
#ff0000
);
position: absolute;
top: -2px;
left: -2px;
background-size: 400%;
z-index: -1;
filter: blur(5px);
width: calc(100% + 4px);
height: calc(100% + 4px);
animation: glowing 20s linear infinite;
opacity: 0;
transition: opacity 0.3s ease-in-out;
border-radius: 10px;
}
.glow-on-hover:active {
color: #000;
}
.glow-on-hover:active:after {
background: transparent;
}
.glow-on-hover:hover:before {
opacity: 1;
}
.glow-on-hover:after {
z-index: -1;
content: "";
position: absolute;
width: 100%;
height: 100%;
background: #111;
left: 0;
top: 0;
border-radius: 10px;
}
#keyframes glowing {
0% {
background-position: 0 0;
}
50% {
background-position: 400% 0;
}
100% {
background-position: 0 0;
}
}
I want to make it so that when you click on one of the icons, a certain strip appears under it, which will mean that the person is on this page (something like this)
At the moment, my navbar looks like this
Here's what I have at the moment (HTML):
let marker = document.querySelector('#marker');
let item = document.querySelectorAll('nav a .MuiSvgIcon-root');
function indicator(e) {
marker.style.left = e.offsetLeft + "px";
marker.style.width = e.offsetWidth + "px";
}
item.forEach(link => {
link.addEventListener('click', (e) => {
indicator(e.target)
})
})
body {
position: fixed;
bottom: 0;
left: 0;
background: #f2f2f2;
width: 100%;
height: 60px;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 40px;
border-top: 1px solid lightgray;
z-index: 100;
}
.MuiSvgIcon-root {
font-size: 35px;
cursor: pointer;
transition: 0.3s cubic-bezier(0.1, 0.1, 0.5, 1.4);
:hover {
transform: translateY(-5px);
}
}
#marker {
position: absolute;
height: 4px;
width: 0;
background: #000;
bottom: 8px;
left: 0;
transition: 0.5s;
border-radius: 4px;
}
<div id="marker"></div>
<HomeIcon/>
<TimelineIcon/>
<AccountCircleIcon/>
<ExploreIcon/>
.MuiSvgIcon-root there is defining all icons.
Your js code is correct. You should check your HTML and CSS. Because their structure is important
how can you achieve somthing like this in emotion
.navBar__Link:not(.noborder)::after{
content: '';
position: absolute;
top: 50%;
left: 10px;
height: 15px;
width: 0;
z-index:-1;
background-color: var(--colorPrimary);
transition: all .3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
You can use Composition and String Styles to achieve this. please refer to the documentation.
css`
&:not(.noborder)::after navBar__Link {
content: '';
position: absolute;
top: 50%;
left: 10px;
height: 15px;
width: 0;
z-index:-1;
background-color: var(--colorPrimary);
transition: all .3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
`;
In order to implement some features in my react app I need to flip an image in a grid horizonaly when the user choose it with onClick event.
I've readed regarding states in react , and noticed that this is what I need.
When onClick event, flip the image.
The follwing code isn't working well.
The isExpanded working fine, but the image in the grid isn't fliping.
What I'm doing wrong ?
I have initiated the isExpanded to false in my constractor.
handleToggle(e){
e.preventDefault();
this.setState({
isExpanded: !this.state.isExpanded,
})
render() {
const {isExpanded } = this.state;
return (
<div
className={`image-root ${isExpanded ? 'image-flip' : ''}`}
style={{
backgroundImage: `url(${this.urlFromDto(this.props.dto)})`,
width: this.state.size + 'px',
height: this.state.size + 'px'
}}
>
<div>
<FontAwesome className="image-icon" onClick={(e)=>
this.handleToggle(e)} name="arrows-alt-h" title="flip"/>
</div>
</div>
);
}
}
The .scss code:
.image-root {
background-size: cover;
background-position: center center;
display: inline-block;
vertical-align: top;
box-sizing: border-box;
position: relative;
border: 1px solid white;
> div {
visibility: hidden;
background: rgba(0, 0, 0, 0.7);
cursor: pointer;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
color: white;
padding: 15px;
text-align: center;
text-align: center;
box-sizing: border-box;
white-space: pre;
display: flex;
align-items: center;
justify-content: center;
}
&:hover > div {
visibility: visible;
}
.image-icon {
font-size: 20px;
vertical-align: middle;
border: 1px solid #ccc;
color: #ccc;
border-radius: 5px;
cursor: pointer;
padding: 12px;
margin: 3px;
&:hover {
color: white;
border-color: white;
}
}
.image-flip {
-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
filter: FlipH;
-ms-filter: "FlipH";
}
The issue was accured due to the image-flip css was in the wrong scope.
I just move the image-flip css out of the image-root scope.
Thanks.
Is there a way to create such an oblique stripe using angularJS and Bootstrap?
You can do that only using css:
HTML:
<div class="rectangle">
<div class="strip-container">
<div class="strip">Sample Text</div>
</div>
</div>
CSS:
.rectangle{
margin: auto;
width: 200px;
height: 300px;
position: relative;
border: 1px solid #4B88CB;
}
.strip-container{
overflow: hidden;
width: 200px;
height: 200px;
position: absolute;
top: 0;
right: 0;
}
.strip{
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
display: block;
position: absolute;
right: -100px;
top: 20px;
padding: 20px 100px;
font-weight: bold;
text-transform: uppercase;
white-space: nowrap;
text-align: center;
background: #4B88CB;
color: #000;
font-size: 12px;
}
CHECK THE DEMO
You could for something like this
This solution has the advantage of having less "magic numbers" by having only the width of the stripe (could probably be fixed) and the top-offset in translate(50%, offset) as set values.
HTML
<div class="container">
<div class="stripe">
<p>
Sample Text
</p>
</div>
</div>
CSS
.container
{
position: relative;
width: 200px;
height: 400px;
border: 1px solid black;
overflow: hidden;
}
.stripe
{
position: absolute;
top: 0px;
right: 0px;
height: 64px;
width: 100%;
background-color: blue;
text-align: center;
transform: rotate(45deg) translate(50%, 32px);
transform-origin: 100% 0px;
}
see https://jsfiddle.net/Aides/58mryy97/