Just looking for input, how can I input an image into the icon section of verticalTimelineElement for icon = {<FaBeer/>}
i have tried icon = {<img src={imageLogo} alt="About" className='w-75 mt-5' />} and running into errors
<VerticalTimeline >
<VerticalTimelineElement
className="vertical-timeline-element--work"
contentStyle={{ background: 'rgb(33, 150, 243)', color: '#131414' }}
contentArrowStyle={{ borderRight: '7px solid rgb(33, 150, 243)' }}
date="2011 - present"
iconStyle={{ background: 'rgb(33, 150, 243)', color: '#fff' }}
icon={<FaBeer />}
>
....
</VerticalTimelineElement>
</VerticalTimeline>
Related
I've been using an outdated version of react-spring to animate a programmatic scroll.
The code used to be:
import { Spring } from "react-spring/renderprops";
// (...)
<Spring from={{ top: 0 }} to={{ top: LINE_HEIGHT * (page.from - 1) }}>
{(props) => (
<List
width={1}
height={LINE_HEIGHT * limit}
rowCount={sortedGauges.length}
rowHeight={LINE_HEIGHT}
rowRenderer={rowRenderer}
containerStyle={{
width: "100%",
maxWidth: "100%",
}}
style={{
width: "100%",
overflow: "hidden",
}}
scrollTop={props.top}
/>
)}
</Spring>
So the Spring component was updating a child with props.top each time the user clicked a button to get a smooth scroll. But I can't reproduce this result with the new useSpring API. What is the correct syntax?
how can i set a border radius in dialogue material ui? this image is pop up dialogue that represent a button. i want to set border radius on this pop up dialogue for styling.
i try to insert borderRadius in sx, but it doesn`t work
here`s my code
<Dialog
open={Boolean(open)}
sx={{
backdropFilter: "blur(5px) sepia(5%)",
}}
//onMouseOutCapture={()=> setOpen(false)}
>
<Popover
open={Boolean(open)}
anchorEl={open}
anchorOrigin={{
vertical: 'center',
horizontal: 'left',
}}
transformOrigin={{
vertical : 'center',
horizontal : 'left',
}}
>
<BoxContainer2
onMouseLeave={() => setOpen(null)}
>
<Button
sx={{
width:"100%",
borderRadius:10,
"&:hover":{
//border: "1px solid #00FF00",
//color: "gray",
backgroundColor: "white",
//opacity: 0,
}
}}>
tes
</Button>
</BoxContainer2>
</Popover>
</Dialog>
Assuming that the goal is to set border radius for the Dialog modal, since this component internally uses Paper for the modal content, perhaps try pass a sx style in the property PaperProps to style the modal.
Tested below example in here: stackblitz
<Dialog
open={Boolean(open)}
sx={{
backdropFilter: "blur(5px) sepia(5%)",
}}
// 👇 Props passed to Paper (modal content)
PaperProps={{ sx: { borderRadius: "50px" } }}
>
...
If for some reason this does not work, another option could be to try style the nested class name .MuiDialog-paper, which would also target Paper:
<Dialog
open={Boolean(open)}
sx={{
backdropFilter: "blur(5px) sepia(5%)",
// 👇 Another option to style Paper
"& .MuiDialog-paper": {
borderRadius: "50px",
},
}}
>
...
I'm building this app, and, as you can see, we have a left drawer and a main component in the right direction.
And when I close that drawer, the main component will move a little bit in order to occupy the rest of the space.
But, when there's too much data in the table, the animation is going to be super slow and it doesn't look nice.
This is the code, here, we have that left drawer and the main component
{/* Side panel */}
<LeftDrawer />
{/* Main content */}
<SinAsignarHero />
This is only the left drawer, that has an open prop that will receive a boolean from a redux reducer
<Drawer
sx={{
width: 260,
flexShrink: 0,
background: '#fafafa',
'& .MuiDrawer-paper': {
width: 260,
background: '#fafafa',
border: '0px',
boxShadow: '0px 8px 7px #0000003D',
boxSizing: 'border-box',
top: 'auto',
zIndex: 1,
},
}}
open={isOpen}
variant="persistent"
anchor="left"
>
{appOptions &&
appOptions.menus.map(({ id, nombre, sub_menu }) => {
return (
<Fragment key={id}>
<AppOptions nombre={nombre} sub_menu={sub_menu && sub_menu} />
</Fragment>
);
})}
</Drawer>
And the main component that will execute the animation to occupy the whole space with the same boolean from redux
const MainContent = styled('main', { shouldForwardProp: (prop) => prop !== 'open' })<{
open?: boolean;
}>(({ theme, open }) => ({
background: '#fafafa',
height: '90.7vh',
overflowX: 'hidden',
flexGrow: 1,
padding: '40px 53px 0px 53px',
transition: theme.transitions.create('margin', {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.leavingScreen,
}),
marginLeft: `-260px`,
...(open && {
transition: theme.transitions.create('margin', {
easing: theme.transitions.easing.easeOut,
duration: theme.transitions.duration.enteringScreen,
}),
marginLeft: 0,
}),
}));
return (
<MainContent open={isDrawerOpen}>
<SinAsignarTitle setCount={setCount} setHasMore={setHasMore} />
<TableContainer component={Paper} sx={{ maxHeight: '73vh', borderRadius: '5px' }}>
{scrollData.length ? (
<>
<InfiniteScroll
dataLength={scrollData.length}
next={getMoreData}
hasMore={hasMore}
loader={<div></div>}
scrollableTarget="TableContainer"
>
<TableContainer
component={Paper}
sx={{ maxHeight: '73vh', borderRadius: '5px' }}
id="TableContainer"
>
<Table stickyHeader sx={{ minWidth: 800 }}>
{/* Table header */}
<SinAsignarHead setCount={setCount} setHasMore={setHasMore} />
{/* Hero content */}
<SinAsignarContent recogidas={scrollData} />
</Table>
</TableContainer>
</InfiniteScroll>
</>
) : (
<NotFound />
)}
</TableContainer>
</MainContent>
So, when there isn't that much data in the table, it is not that slow, but, I want the animation to be fast always.
This is pretty much what I would love to accomplish
https://mui.com/components/drawers/#persistent-drawer
If you go to the sandbox of that example, and you add too much text, the animation is still fine, I don't know if maybe there are too many things going on when there's too much data so it's harder for my left drawer and main component to make the animations as fast as possible. Is there something I can do in order to fix this ?¿
Try virtualized table.
Virtualization helps with performance issues.
https://mui.com/components/tables/#virtualized-table
Is there a way to make the navigation arrows of the AMP-carousel work with AMP-script.
Basically what i am trying to achieve is to add a click event to the previous and next arrows. On clicking the prev/next trying to trigger custom function.
<amp-script data-ampdevmode layout="container" script="view-content">
<button
id="image-arrow-next"
slot="next-arrow"
className="carousel-next"
data-vars-navigation-action="Image_Navigation_Right"
aria-label="Next"
style={{
width: '34px',
height: '34px',
border: 'none',
margin: '16px',
outline: 'none',
backgroundColor: 'rgba(0,0,0,.5)',
color: '#fff'
}}
>
➜
</button>
<button
slot="prev-arrow"
className="carousel-prev"
aria-label="Previous"
data-vars-navigation-action="Image_Navigation_left"
style={{
width: '34px',
height: '34px',
margin: '16px',
backgroundColor: 'rgba(0,0,0,.5)',
border: 'none',
outline: 'none',
transform: 'rotate(180deg)',
color: '#fff'
}}
>
➜
</button>
</amp-script>
and triggering this function on click of prev/next arrows
<script
id="view-content"
type="text/plain"
target="amp-script"
dangerouslySetInnerHTML={{
__html: viewContent()
}}
></script>
function viewContent() {
const script = `const btn = document.getElementById('image-arrow-next');
btn.addEventListener('click', () => {
console.log('clicked')
})`
return `${script.toString()}()`
}
But the problem is when i wrapped the buttons inside the amp-script both the default navigation arrows of amp-base-carousel and navigation arrows(prev/next) which are present inside the Amp-script shows up in the UI. both the default navigation arrows and the the navigation arrows inside the amp-script gets conflicted with each other
I am using react-cropper plugin for resizing the images. I need to provide minimum width and height below which the image cannot be resized. Also minimum width and height must be relative to the actual image size and not according to the viewport image size.
<Cropper
style={{
height: 422,
width: "90%",
margin: "0 auto",
marginTop: 25
}}
preview=".img-preview"
guides={false}
aspectRatio={16 / 9}
src={this.state.imageSrc}
ref="cropper"
viewMode={1}
className={classes.CropperCustomize}
zoomable={false}
/>
<Cropper
style={{
height: 422,
width: "90%",
margin: "0 auto",
marginTop: 25
}}
crop={this.crop}
draggable={false}
preview=".img-preview"
guides={false}
aspectRatio={16 / 9}
src={this.state.imageSrc}
ref="cropper"
viewMode={1}
className={classes.CropperCustomize}
zoomable={false}
/>
crop = e => {
if (
e.detail.width < this.props.cropWidth ||
e.detail.height < this.props.cropHeight
) {
this.refs.cropper.cropper.setData(
Object.assign({}, e.detail, {
width:
e.detail.width < this.props.cropWidth
? this.props.cropWidth
: e.detail.width,
height:
e.detail.height < this.props.cropHeight
? this.props.cropHeight
: e.detail.height
})
);
}
return;
};