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>
I found a simple application with React and draw2D.
The dashbox is the div and the canvas.
The circle is a
draw2d.shape.basic.Circle({
x: 40,
y: 10,
stroke: 3
})
How to change the code to draw the circle inside the box dashed (the canvas)?
https://codesandbox.io/s/exciting-cray-97g6r?file=/src/App.js
thanks.
The first solution
<span>
<p>Avec canvas2</p>
<div ref={inputRef} id="canvas"
style={{ height: 200, width: 300, border: "dashed brown",position:"relative" }}/>
</span>
Only add position:"relative", to the div.
I improve this solution again.
componentDidMount() {
this.canvas = new draw2d.Canvas("canvas", 9000, 9000));
this.canvas.add(
new draw2d.shape.basic.Circle({
x: 40,
y: 10,
stroke: 3
})
);
}
render() {
return (
<span>
<p>Avec canvas2</p>
<div
id="canvas"
style={{ height: 600, width: 600, border: "dashed brown" }}
/>
</span>
);
}
Now, we have a big picture inside a window ..
I'm relatively new to React and I'm trying to create a sort of dashboard for Cryptocurrency prices.
I'm using react-financial-charts to generate an OHLCV chart within a ResponsiveReactGridLayout.
However, the svg always displays outside the grid. Can anyone help with how I could fix this:
Here is the code: https://github.com/astronights/market_analysis_tool_evaluation-ui/blob/master/src/components/Home/Home.tsx where I render my Component that contains the ChartCanvas.
<div key="candlestick" className="home-card">
<div ref={canvasRef} style={{ width: "100%", height: "100%" }}>
{canvasRef.current ? (
<Candlestick
coin={coin}
width={canvasRef.current.clientWidth}
height={canvasRef.current.offsetHeight}
/>
) : null}
</div>
</div>
and here is the code for the chartCanvas: https://github.com/astronights/market_analysis_tool_evaluation-ui/blob/master/src/components/Home/Candlestick.tsx
return (
<ChartCanvas
height={props.height}
ratio={1}
width={props.width}
margin={{ bottom: 50, top: 100, left: 50, right: 50 }}
padding={0}
seriesName={`OHLCV prices - ${props.coin.coin}`}
data={prices}
xScale={scaleTime()}
xAccessor={xAccessor}
xExtents={xExtents}
/>
As you can see in the image, the SVG chart generated seems to be going outside.
Fixed by adding these lines of CSS.
.react-financial-charts {
position: absolute !important;
top: 0;
left: 0;
}
canvas {
position: absolute !important;
top: 0;
left: 0;
}
I needs progress bar like soundcloud (Pointer fixed in center) Like This
I tried with React Native Slider but unable fixed in center
function TrackProgres() {
const bufferedPosition = 0
const duration = 600
return (
<ScrollView horizontal={true}>
<ImageBackground source={require('../../../../assets/images/sound.png')} style={{width:550, height: 40,zIndex:-1,left: 50,marginRight: -50 }} imageStyle={{resizeMode: 'repeat'}}>
<Slider
style={{width: 550}}
value={bufferedPosition}
maximumValue={duration}
minimumTrackTintColor="#292b2c"
maximumTrackTintColor="#292b2c"
thumbStyle={styles.thumb}
trackStyle={styles.track}
onValueChange={(value) => seekTo(value)}
/>
</ImageBackground>
</ScrollView>
)
What you're looking for isn't a slider - it's just a conditional rendering on a background position. Think of it like this:
const { width } = Dimensions.get('window');
return (
<View
style={{
position: 'absolute',
height: 30,
width,
top: 0,
left: (width / 2) - (width * percentComplete),
backgroundColor: '#F00',
}}
>
<View
style={{
position: 'absolute',
backgroundColor: '#FFF',
top: 0,
left: (width / 2) - 1,
width: 2,
height: 30,
}}
/>
</View>
);
If you render these with percentComplete as a value between 0 and 1, the background View will be offset properly.
At 0% complete, the View will start at left: width / 2, or the center of the screen. As percentComplete increases, that offset will decrease, and go beyond the left edge of the screen after 50% complete. At 100%, the right edge of the background View will be at the midpoint of the screen.
The foreground View remains in the center.
What is MobileTearSheet and where is it?
By all means copy the one from the docs site. (it's just an image.)
Take it:
https://raw.githubusercontent.com/callemall/material-ui/master/docs/src/app/components/MobileTearSheet.js
Here is my working version (in one file) you can drop into you project.
If you want to use this source, please up vote this answer
MobileTearSheet.js
import React, from 'react';
const MobileTearSheet = React.createClass({
getDefaultProps() {
return { height: "100%" }
},
render:function() {
const styles = {
root: {
marginBottom: 24,
marginRight: 24,
maxWidth: 360,
width: '100%',
},
container: {
border: 'solid 1px #d9d9d9',
borderBottom: 'none',
height: this.props.height,
overflow: 'hidden',
},
bottomTear: {
display: 'block',
position: 'relative',
marginTop: -10,
maxWidth: 360,
},
};
return (
<div style={Object.assign({},styles.root,this.props.style||{})}>
<div style={styles.container}>
{this.props.children}
</div>
<div style={styles.bottomTear}>
<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" viewBox="0 0 360 10" enableBackground="new 0 0 360 10">
<polygon fill="#DAD9D9" points={`359,0 359,7.5 352.5,0.5 345,8.5 337.5,0.5 330,8.5 322.5,0.5 315,8.5 307.5,0.5 300,8.5 292.5,0.5
285,8.5 277.5,0.5 270,8.5 262.5,0.5 255,8.5 247.5,0.5 240,8.5 232.5,0.5 225,8.5 217.5,0.5 210,8.5 202.5,0.5 195,8.5 187.5,0.5
180,8.5 172.5,0.5 165,8.5 157.5,0.5 150,8.5 142.5,0.5 135,8.5 127.5,0.5 120,8.5 112.5,0.5 105,8.5 97.5,0.5 90,8.5 82.5,0.5
75,8.5 67.5,0.5 60,8.5 52.5,0.5 45,8.5 37.5,0.5 30,8.5 22.5,0.5 15,8.5 7.5,0.5 1,7.5 1,0 0,0 0,10 7.5,2 15,10 22.5,2 30,10
37.5,2 45,10 52.5,2 60,10 67.5,2 75,10 82.5,2 90,10 97.5,2 105,10 112.5,2 120,10 127.5,2 135,10 142.5,2 150,10 157.5,2 165,10
172.5,2 180,10 187.5,2 195,10 202.5,2 210,10 217.5,2 225,10 232.5,2 240,10 247.5,2 255,10 262.5,2 270,10 277.5,2 285,10
292.5,2 300,10 307.5,2 315,10 322.5,2 330,10 337.5,2 345,10 352.5,2 360,10 360,0 `}/>
</svg>
</div>
</div>
);
}
})
export default MobileTearSheet;
For usage see: material-ui list example
I found this question while debugging why the List example code wasn't compiling. Don't worry you can just replace the tags with a and it should work just fine!