Hello I am trying to implement this design below
as you can see there are multiple copy buttons on each paragraph. How can I copy each specific paragraph
Here is the code for the design
<Stack spacing={3} ml={7} w="90%">
<Text fontSize={40} fontWeight="bold" mt="60px" mb="10px">Your Product Listing</Text>
<Flex direction="row" align="center">
<Text id='title' fontSize="32px" fontWeight="semibold"><Link color="#18A9FB" href='#'>Fleur de Sel</Link> - Premium Sea salt from Guerande France - <Link color="#18A9FB" href='#'>Flaky Sea Salt </Link> from the Celtic Sea - Salt Cork box - 3.5 Oz (100g)
</Text>
<Button variant='link' _hover={{
textDecoration: 'none',
}} > <Icon as={AiOutlineReload} mr={2} ml={4} boxSize={8} /> </Button>
<Button onClick={(e) => copyText(e)} variant='link' _hover={{
textDecoration: 'none',
}}> <Icon as={MdContentCopy} mr={2} boxSize={8} /> </Button>
</Flex>
<UnorderedList spacing={4}>
<ListItem>
AUTHENTIC HAND HARVESTED SALT: Tablissima french sea salt is carefully harvested by hand from the surface of salt ponds in the Guérande region of France. Centuries-old harvesting techniques are used to harvest a 100% natural salt that will provide a delicate taste to your food and make every bite delicious.
</ListItem>
<ListItem>
ARTISANAL SEA SALT: Our Guérande Fleur de Sel is classified as IGP (Protected Geographical Indication), which guarantees you its origin, its natural production method and it's harvesting techniques. Our salt comes from a production with no pesticides, nor herbicides, no fossil nor carbon Energy.
</ListItem>
<ListItem>
CAVIAR OF SALT: This finishing salt is loved by the best culinary professionals. Rich in minerals and lower in sodium than regular salt, it will give a delicate and subtle taste to any of your favourite dishes.
</ListItem>
<ListItem>
MADE IN FRANCE: Our sea salt is harvested on the salt marshes of Guérande in France. Delicately picked from the surface of the water, it’s neither washed nor treated and drips naturally on our salt flats. Trusted by the best Chefs.
</ListItem>
</UnorderedList>
</Stack>
Related
Consider this code snippet:
<Typography className={classes.welcomeMessage} variant="h1">
A <span className={classes.redText}>smart nation </span> approach
to <span className={classes.redText}>safety.</span>
</Typography>
Essentially I want to have one sentence, but some of the words in that sentence are of red colour. redText and welcomeMessage contain the same properties except for the fact that the colour is different. However, the text comes up like this:
Asmart nationapproach tosafety.
I presume the span component is messing with the spacing. Is there an easy fix or ideal way of dealing with this?
I tried it by the style and it's working perfectly, there should be some problem with your classes of styles, try this, it will work perfectly.
<Typography style={{ color: "blue" }} variant="h1">
A <span style={{ color: "red" }}>smart nation </span> approach to{" "}
<span style={{ color: "red" }}>safety.</span>
</Typography>
My suggestion is, on Typography you can try to use sx, so the code will like this:
<Typography sx={{ color: "blue" }} variant="h1">
A <span style={{ color: "red" }}>smart nation </span> approach to{" "}
<span style={{ color: "red" }}>safety.</span>
</Typography>
I have two charts on top of each other that extend to the bottom of the screen. The first is collapsible via an Accordion.
However, if I do the following two things in sequence:
Make my browser window bigger
Then, collapse the Accordion (i.e., minimize the first graph).
Then there will be unwanted whitespace below the second graph.
<Flex direction="column" height="calc(100vh)" className="flex-wrapper">
<Box fontSize={["sm", "md", "lg", "xl"]}>Font Size</Box>
<Flex className="flex-wrapper0">
<div>123456789010</div>
<Box className="accordion-box-container">
<Accordion className="accordion-wrapper" allowToggle>
<AccordionItem>
<h2 className="accordion-title">
<AccordionButton
className="accordion-button"
borderRadius="md"
borderWidth="0px"
_focus={{ boxShadow: "none" }}
>
<Box
textAlign="left"
h={3}
_focus={{ boxShadow: "none" }}
></Box>
<AccordionIcon />
</AccordionButton>
</h2>
<AccordionPanel p="0">
<Box height="30vh">
<ThreeDataPoint />
</Box>
</AccordionPanel>
</AccordionItem>
</Accordion>
<div className="graph-wrapper">
<ThreeDataPoint />
</div>
</Box>
</Flex>
</Flex>
It seems like some interaction problem between browser resizing and css? I think I need to force a re-rendering of <ThreeDataPoint /> whenever the accordion button is pressed so that it can pick up the new height that it's supposed to be using. I wonder how to force such a re-rendering?
Here's codesandbox:
https://codesandbox.io/s/elegant-fermat-bugv1?file=/src/index.tsx
And the app URL:
https://bugv1.csb.app/
It was because of this !important flag causing troubles in the css file:
.graph-wrapper div {
height: 100% !important;
}
After commenting this out, it worked as expected.
Am trying to make sure that when I view my react website on a small screen my cards have space in between them. Right now when I view on a large screen the cards are spaced evenly, however, on a small screen, they are not spaces. Has anyone encountered that issue?
Here is my code
<Row gutter={16} justify="space-between" align="middle">
{this.state.news.slice(0,4).map((item, key) => (
<Col span={12} md={{span:6}} lg={{span:6}} style={{paddingTop:15,marginTop:10}}>
<Card
hoverable
style={{ width: 230 }}
cover={<img alt="example" src={item.imageurl} />}
actions={[
<a href={item.url} target="_blank" > Read News</a>,
]}>
<div style={{fontSize:10,paddingRight:5}}>
<Meta title={item.title} description={item.categories} />
</div>
</Card>
</Col>
))}
</Row>
cards on a big screen
cards on a small screen
You have style={{ width: 100 }},This will keep the width fixed for all screen. take it out and try.
<Card
hoverable
// style={{ width: 100 }}
cover={<img alt="example" src={i.picture.large} />}
actions={[
<a href='#' target="_blank" > Read News</a>,
]}>
</Card>
I'm playing around with ant-design and trying to structure a simple menu, and everything works as expected:
<Menu mode="inline">
<Menu.Item key="/">
<Icon type="dashboard" theme="outlined" />
Dashboard
</Menu.Item>
<Menu.Item key="/transactions">
<Icon type="bars" theme="outlined" />
Transactions
</Menu.Item>
<Menu.Item key="/groups">
<Icon type="team" theme="outlined" />
Groups
</Menu.Item>
<Menu.Item key="/account">
<Icon type="idcard" theme="outlined" />
Account
</Menu.Item>
</Menu>
(https://codesandbox.io/s/wqn37ojmv7)
Now, I wanted to DRY up this code a bit, by making a separate wrapped MenuItem component:
const MenuItem = ({route, icon, children}) => (
<Menu.Item key={route}>
<Icon type={icon} theme="outlined" />
{children}
</Menu.Item>
);
// ...
<Menu mode="inline">
<MenuItem route="/" icon="dashboard">Dashboard</MenuItem>
<MenuItem route="/transactions" icon="bars">Transactions</MenuItem>
<MenuItem route="/groups" icon="team">Groups</MenuItem>
<MenuItem route="/account" icon="idcard">Account</MenuItem>
</Menu>
However, substituting my shiny new component will pretty much break everything - somehow I seem to lose some props that were magically passed to the Menu.Items before (like a clsPrefix or a onItemHover-callback): https://codesandbox.io/s/ojyqy0oqq6
What is going on here? How are these props passed behind the scenes and how can I wrap Menu.Item correctly without losing all of this magic?
You could pass the rest of the passed props
const MenuItem = ({route, icon, children, ...props}) => (
<Menu.Item key={route} {...props}>
<Icon type={icon} theme="outlined" />
{children}
</Menu.Item> );
My goal is to convert some of the code here http://jsbin.com/qipufujibi/edit?html,output to Semantic UI React.
This is my attempt:
<Card>
<Reveal animated='fade'>
<Reveal.Content visible>
<Image src="imgSrc"/>
</Reveal.Content>
<Reveal.Content hidden>
<Card.Content>
<h3>Minions</h3>
<Card.Meta>
<span className='date'>2015</span>
</Card.Meta>
<Card.Description>
Matt
</Card.Description>
</Card.Content>
<Card.Content extra>
<a>
<Icon name='user' />
22 Friends
</a>
</Card.Content>
</Reveal.Content>
</Reveal>
</Card>
However, it does not work properly.
It loses the style https://i.imgur.com/Ypx5Nag.gifv. How can I fix it?