I am very new to react and animate.css. I am hoping the user can click on the panel and have a new link open, but for now it only works when the underlying image is clicked before the slideInUp animation (in this case it is the green panel with the text). Once the animation happens, it no longer works. The image is what it looks like after the animation.[the animation is the green background + text sliding down onto the image](https://i.stack.imgur.com/HlLuV.png
export const Card = ({ title, description, imgUrl, link}) => { return (
<Col size={12} sm={6} md={4}>
<div className="proj-imgbx">
<a href={link} target="_blank">
<img src={imgUrl} href={link}/>
</a>
<div className="proj-txtx">
<h4>{title}</h4>
<span>{description}</span>
</div>
</div>
</Col>
) }
Related
I have a demo here
Its a super simple app with four buttons and a text area.
When you click a buttons it loads different text
The text is different lengths so the grey container gets taller and shorter
Is it possible to animate the grey box when the text gets taller and shorter
const [text, setText] = useState(textArr[3])
return (
<div>
<div className="nav">
<button onClick={() => setText(textArr[0])}>
One
</button>
<button onClick={() => setText(textArr[1])}>
Two
</button>
<button onClick={() => setText(textArr[2])}>
Three
</button>
<button onClick={() => setText(textArr[3])}>
Four
</button>
</div>
<div className="text">
{text}
</div>
</div>
);
I put a parent div with overflow: hidden applied to it then I used a useEffect to calculate the height of the text div when the text changes and then I set the height of the parent div to this height.
With transition on the parent div, it animates.
See demo here : https://stackblitz.com/edit/react-t7ctuf?file=src%2FApp.js
I am trying a simple popover and have added a close button, code as follows:
import React from 'react';
import OverlayTrigger from 'react-bootstrap/OverlayTrigger';
import Button from 'react-bootstrap/Button';
import Popover from 'react-bootstrap/Popover';
const popover = (
<Popover className="mt-2" id="popover-basic">
<Popover.Title as="h3">
Popover right
<button type="button" class="close" style={{ width: '20', height: '20'}} aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</Popover.Title>
<Popover.Content>
And here's some <strong>amazing</strong> content. It's very engaging.
right?
</Popover.Content>
</Popover>
);
const PopoverTest = () => {
return (
<div className="text-center">
{/* Wrap in the trigger to get the target */}
<OverlayTrigger trigger="click" placement="bottom" overlay={popover}>
<Button className="mt-3 text-center">Click me to see</Button>
</OverlayTrigger>
</div>
);
};
export default PopoverTest;
However the button is not centered vertically:
How can I fix this?
Remove the mt-3 className in the Button component. It adds margin on the top by 1rem. If you still want to align the button at the center of its container or the page, consider styling the div that wraps the OverlayTrigger with flex.
Anyone, please help, I am trying to display the full image of a small image which are in the gallery.
When I scale the display Modal is auto-resize and the image is not able to resize according to Modal even I use the image inside the Modal. Image overlapping while scaling.
Even I remove width also not workin
function Modalcenter(props) {
return (
<Modal
{...props}
size="lg"
aria-labelledby="contained-modal-title-vcenter"
centered
>
<Modal.Header closeButton>
<Modal.Title id="contained-modal-title-vcenter">
Decoration
</Modal.Title>
</Modal.Header>
<Modal.Body>
<img src={G1s} alt="G1s" width="1080" />
</Modal.Body>
<Modal.Footer>
<Button onClick={props.onHide}>Close</Button>
</Modal.Footer>
</Modal>
);
}
function Example() {
const [modalShow, setModalShow] = React.useState(false);
return (
<>
<img src={G1} alt="G1" width="200" onClick={() => setModalShow(true)} />
<Modalcenter
show={modalShow}
onHide={() => setModalShow(false)}
/>
</>
);
}
Apply this class to the image
<img src="..." className="img-fluid" >
which is the default class, provided by Bootstrap for making it responsive.
I have a div that has some text and then a component that displays some more text:
<div className="text-center">
Sign-in or <SignUpLink />
</div>
I want it to display the text inline like so:
Sign in or Create an account
But instead it is displaying like so:
Sign-in or
Create an account
How can I fix this?
Give SignUpLink a display: inline style.
const SignUpLink = () => {
<div style={{ display: 'inline' }}>
// rest of component
</div>
}
I have looked everywhere on the docs, and nothing. Im looking for a similar navbar collapse function that's used in bootstrap with the hamburger(I can click on) to side and menu items inside of it. Please help.
Semantic UI looks good but can be a pain to use
This is a pretty good (and simple) implementation (credit: https://codepen.io/designosis/pen/LbMgya)
HTML
<div class="ui grid">
<div class="computer only row">
<div class="column">
<div class="ui menu">
<a class="item">Menu Item A</a>
<a class="item">Menu Item B</a>
<a class="item">Menu Item C</a>
<a class="item">Menu Item D</a>
</div>
</div>
</div>
<div class="tablet mobile only row">
<div class="column">
<div class="ui menu">
<a id="mobile_item" class="item"><i class="bars icon"></i></a>
</div>
</div>
</div>
</div>
<div class="ui pushable segment">
<div class="ui sidebar vertical menu">
<a class="item">Menu Item A</a>
<a class="item">Menu Item B</a>
<a class="item">Menu Item C</a>
<a class="item">Menu Item D</a>
</div>
<div class="pusher">
<div id="content" class="ui segment">
Content here
</div>
</div>
</div>
CSS
#content {
min-height: 100px;
}
.ui.grid{
padding: 0 !important;
}
.pushable.segment{
margin: 0 !important;
}
JavaScript
$('.ui.sidebar').sidebar({
context: $('.ui.pushable.segment'),
transition: 'overlay'
}).sidebar('attach events', '#mobile_item');
Here is a collapsable NavMenu component I've made using the Responsive component available in Semantic-UI-React:
import React, { useState } from 'react';
import { Menu, Responsive, Dropdown, DropdownMenu } from 'semantic-ui-react';
import { withRouter } from 'react-router-dom';
import LogoutModal from './LogoutModal';
function NavMenu(props) {
const [activeItem, setActiveItem] = useState('Laptop Item')
const [showModal, setShowModal] = useState(false)
return (
<div>
<Menu pointing secondary>
<Responsive as={Menu.Item} minWidth={790}
name='Laptop Item'
active={activeItem === 'Laptop Item'}
onClick={() => setActiveItem('Test Item')}
/>
<Responsive as={Menu.Item} minWidth={790}
name='Laptop Item 2'
active={activeItem === 'Laptop Item 2'}
onClick={() => setActiveItem('Test Item 2')}
/>
<Responsive as={Menu.Item} minWidth={790}
name='Laptop Item 3'
active={activeItem === 'Laptop Item 3'}
onClick={() => setActiveItem('Test Item 3')}
/>
<Menu.Menu position = 'right'>
<Responsive as ={Menu.Item} minWidth={790}
name = "Sign Out"
onClick={() => setShowModal(true)}
/>
</Menu.Menu>
<Responsive as ={Menu.Menu} maxWidth={789} position='right'>
<Dropdown
item
icon ='bars'
>
<Dropdown.Menu>
<Dropdown.Item text='Mobile/Tablet Item 1'/>
<Dropdown.Item text='Mobile/Tablet Item 2'/>
<Dropdown.Item text='Mobile/Tablet Item 3'/>
<Dropdown.Item text='Sign Out'/>
</Dropdown.Menu>
</Dropdown>
</Responsive>
</Menu>
</div>
)
}
export default withRouter(NavMenu);
I'm going for a traditional looking navigation bar with links on the left side and a Logout button on the right side. Although the width in pixels of an iPad (as shown in Chrome dev tools) is 768px, for some reason the breakpoint is 790px for me (appreciate if someone can tell me why this is). That is why min width for 'Laptop Items' is 790 and maxWidth for 'Mobile/Tablet Items' is 789.
I did not find the responsive component in the Semantic-UI docs. It is listed under "Addons" in Semantic-UI-React.
If you're not using React an alternative is to implement the side bar for mobile users.
if you are counting towards the semantics the most correct is you use the tags list as navbar and hide it or not with javascript.
Really html semantics is very bad, very complex code to do something simple