I want to fix the position of react slick carousel,and want to change the navigation dots style.I am trying in this way....
dots style I want,
Screenshot: https://i.stack.imgur.com/MhOQa.png
`<Show above='md'>
<Box w='50%'>
<Slider {...settings} className='customSlide'>
<Box>
<Image
src={avtar}
/>
</Box>
<Box>
<Image
src={avtar1}
/>
</Box>
<Box>
<Image
src={avtar2}
/>
</Box>
<Box>
<Image
src={avtar3}
/>
</Box>
</Slider>
</Box>
<Divider orientation='vertical' variant={'dashed'} borderColor={'grey'} height='100vh' />
</Show>
`
CSS:
.customSlide{ position: fixed!important; }
Thanks in advance..
Related
I'm using chakra ui.
Hovering over the Sidebar expands the sidebar to the right.
The text is bent on the way to the right.
Is there any way to widen the　Sidebar without bending the letters?
If anyone can help me understand, I would appreciate your help.
code
<Flex
background="blue.50"
flexDirection="column"
height="100vh"
justifyContent="space-between"
onMouseEnter={() => setState((prevState) => !prevState)}
onMouseLeave={() => setState((prevState) => !prevState)}
position="fixed"
width={state ? "204px" : "44px"}
zIndex={10}
transition={"all .2s ease"}
>
<Box transition="all 0.3s">
<HStack p={3}>
<Flex alignItems="center">
<Image
display={state ? "none" : "inline-block"}
height="24px"
src={""}
transition="all 0.3s ease-in-out"
/>
<Image
display={state ? "inline-block" : "none"}
src={"chakra_logo.png"}
/>
</Flex>
<Text display={state ? "inline-block" : "none"} fontSize="xs">
logo
</Text>
</HStack>
<VStack mt={3} spacing={0}>
<Box _hover={{ backgroundColor: "gray.200" }} width="full">
<Link>
<a>
<HStack p={3}>
<BiSearchAlt />
<Text display={state ? "inline-block" : "none"}>
search Page
</Text>
</HStack>
</a>
</Link>
</Box>
</VStack>
</Box>
<VStack mb={2} spacing={0}>
<Box mb={2} px={3} width="full">
<Divider borderColor="gray.300" />
</Box>
<Box _hover={{ backgroundColor: "gray.200" }} p={3} width="full">
<HStack>
<Image src={""} width="24px" />
<Text display={state ? "inline-block" : "none"}>
My Page Setting
</Text>
</HStack>
</Box>
</VStack>
</Flex>
To prevent text from wrapping, you can add whiteSpace="nowrap" and overflow="hidden" props to the <Text /> elements.
I use chakra ui.
When I hover the sidebar, the sidebar extends to the right.
I am using transition, but the animation is not applied. It is a bit choppy.
I am using transition="all 0.3s" but no animation happens when hover is applied.
I don't know why.If anyone can help me understand, I would appreciate your help.
code
enter link description here
<Flex
background="blue.50"
flexDirection="column"
height="100vh"
justifyContent="space-between"
onMouseEnter={() => setState((prevState) => !prevState)}
onMouseLeave={() => setState((prevState) => !prevState)}
position="fixed"
width={state ? "204px" : "54px"}
zIndex={10}
>
<Box transition="all 0.3s">
<HStack p={3}>
<Flex alignItems="center">
<Image
display={state ? "none" : "inline-block"}
height="24px"
src={""}
transition="all 0.3s ease-in-out"
/>
<Image
display={state ? "inline-block" : "none"}
src={"chakra_logo.png"}
/>
</Flex>
<Text display={state ? "inline-block" : "none"} fontSize="xs">
logo
</Text>
</HStack>
<VStack mt={3} spacing={0}>
<Box _hover={{ backgroundColor: "gray.200" }} width="full">
<Link>
<a>
<HStack p={3}>
<BiSearchAlt />
<Text display={state ? "inline-block" : "none"} fontSize="sm">
search
</Text>
</HStack>
</a>
</Link>
</Box>
<Box _hover={{ backgroundColor: "gray.200" }} width="full">
<Link>
<a>
<HStack p={3}>
<AiOutlineSetting />
<Text display={state ? "inline-block" : "none"} fontSize="sm">
setting
</Text>
</HStack>
</a>
</Link>
</Box>
</VStack>
</Box>
<VStack mb={2} spacing={0}>
<Box mb={2} px={3} width="full">
<Divider borderColor="gray.300" />
</Box>
<Box _hover={{ backgroundColor: "gray.200" }} p={3} width="full">
<HStack>
<Image
alt="MyImage"
src={""}
width="24px"
/>
</HStack>
</Box>
</VStack>
</Flex>
You need to add CSS transition to main Flex also:
<Flex
background="blue.50"
flexDirection="column"
height="100vh"
justifyContent="space-between"
onMouseEnter={() => setState((prevState) => !prevState)}
onMouseLeave={() => setState((prevState) => !prevState)}
position="fixed"
width={state ? "204px" : "54px"}
zIndex={10}
transition={"all .2s ease"}
>...
I want to achieve the given style.
Currently, I have
<Box display="flex" flexDirection="row" alignItems="center" width={1}>
<Box flexGrow="1">
<Typography variant="h6">
{subscription.PlanName}
<Box
px={1}
py={0.5}
color={"primary.contrastText"}
className={classes.success}
display="flex"
alignItems="center"
justifyContent="space-between"
>
{subscription.Status}
</Box>
</Typography>
<Typography variant="caption" component="div">Purchased on: <b>{moment(subscription.StartDate).format("DD-MM-YYYY")}</b></Typography>
<Typography variant="caption" component="div">Expiring on: <b>{moment(subscription.EndDate).format("DD-MM-YYYY")}</b></Typography>
</Box>
<Box>
<Button
variant="outlined"
color="primary"
onClick={Actions.openBillingDrawer}>
UPDATE CREDITS
</Button>
</Box>
<Box>
<Button
variant="contained"
color="primary"
onClick={Actions.openBillingDrawer}>
UPGRADE PLAN
</Button>
</Box>
Also, the UPDATE CREDITS button is different from which I am currently using. Please provide the correct button for that too.
it is not exactly your goal, but its a good place to start. You've got the right separation of boxes, right size of the green box and a iconButton:
<Box
display="flex"
flexDirection="row"
alignItems="center"
width={1}
justifyContent="space-between"
>
<Box>
<Box display="flex" alignItems="flex-end" margin="5px 0">
<Typography variant="h4" style={{ lineHeight: "0.8" }}>
Basic Plan
</Typography>
<Box
color="primary.contrastText"
bgcolor="success.main"
fontSize="8px"
padding="2px 4px"
marginLeft="6px"
>
ACTIVE
</Box>
</Box>
<Typography variant="caption" component="div" color="textSecondary">
Purchased on: <b>01-01-2020</b>
</Typography>
<Typography variant="caption" component="div" color="textSecondary">
Expiring on: <b>02-02-2020</b>
</Typography>
</Box>
<Box>
<Button
variant="outlined"
color="primary"
endIcon={<ArrowDropDownIcon />}
>
UPDATE CREDITS
</Button>
<Button variant="contained" color="primary">
UPGRADE PLAN
</Button>
</Box>
</Box>
Hello I have difficulty putting my arrows in the center and one on the left and one on the right of my carousel
could someone help me with this?
now i have this
my code:
<Visibility
onBottomPassed={()=>stickTopMenu()}
onBottomVisible={()=> unStickTopMenu()}
once={false}
>
<Grid style={{backgroundColor:'#000',paddingTop:0}}>
<Grid.Row columns={1} style={{padding:0}}>
<Grid.Column style={{padding:0}}>
<ImageCarousel />
</Grid.Column>
</Grid.Row>
</Grid>
</Visibility>
and:
const ImageCarousel = () => (
<CarouselProvider
totalSlides={3}
naturalSlideWidth={1}
naturalSlideHeight={1}
>
<Slider style={{ maxHeight: "500px"}}>
<Slide tag="a" index={0}>
<Image src="https://lorempixel.com/800/800/cats/0" />
</Slide>
<Slide tag="a" index={1}>
<Image src="https://lorempixel.com/800/800/cats/1" />
</Slide>
<Slide tag="a" index={2}>
<Image src="https://lorempixel.com/800/800/cats/2" />
</Slide>
</Slider>
<ButtonBack style={{position: 'absolute', top:' 50%',left: 0,transform: 'translateY(-50%)'}}>Back</ButtonBack>
<ButtonNext style={{position: 'absolute', top:' 50%',left: 0,transform: 'translateY(-50%)'}}>Next</ButtonNext>
</CarouselProvider>
);
Maybe you should add a reference to the parent element. Also, remember you have to transform X and Y
const ImageCarousel = () => (
<CarouselProvider
totalSlides={3}
naturalSlideWidth={1}
naturalSlideHeight={1}
style={{position: "relative" }}
>
<Slider style={{ maxHeight: "500px"}}>
<Slide tag="a" index={0}>
<Image src="https://lorempixel.com/800/800/cats/0" />
</Slide>
<Slide tag="a" index={1}>
<Image src="https://lorempixel.com/800/800/cats/1" />
</Slide>
<Slide tag="a" index={2}>
<Image src="https://lorempixel.com/800/800/cats/2" />
</Slide>
</Slider>
<ButtonBack style={{position: 'absolute', top:'50%',left: 20,transform: 'translate(-50%,-50%)'}}>Back</ButtonBack>
<ButtonNext style={{position: 'absolute', top:'50%',right: 20,transform: 'translate(-50%,-50%)'}}>Next</ButtonNext>
</CarouselProvider>
);
The image enclosed shows the current state of the Segment. Is there a way to make them the same height?
import React, { Component } from 'react';
import { Grid, Segment, Header, Image, Card, Icon, Button, Divider, Radio, Form } from 'semantic-ui-react';
import './UserAccountProfilePage.css';
export default function UserAccountProfilePage() {
return (
<Grid columns={2} stackable className="fill-content">
<Grid.Column width={1} />
<Grid.Column width={7}>
<Segment>
<Header as="h1">Profile</Header>
<Image className="centered" src="/images/daniel.jpg" size="medium" circular />
<Card fluid>
<Card.Content>
<Card.Header>Daniel</Card.Header>
<Card.Meta>Joined in 2016</Card.Meta>
<Card.Description>Daniel is a comedian living in Nashville.</Card.Description>
</Card.Content>
<Card.Content extra>
<a>
<Icon name="user" />
10 Friends
</a>
</Card.Content>
</Card>
</Segment>
</Grid.Column>
<Grid.Column width={7}>
<Segment>
<Header as="h2">Settings</Header>
<Button positive fluid>
Sync Google Calendar
</Button>
<Divider />
<Header as="h4">Text notifications</Header>
<Radio toggle />
<Divider />
<Header as="h4">Customize text notifications</Header>
<RadioExampleRadioGroup />
</Segment>
</Grid.Column>
<Grid.Column width={1} />
</Grid>
);
}
Thanks in advance!
There are two things to look at here. First, you need to add a Grid.Row component in between your Grid component and Grid.Column components. Then you need to add a stretched prop to it.
Add this: <Grid.Row stretched>
Luckily, the styles for this are already part of Semantic UI CSS.
import React, { Component } from 'react';
import { Grid, Segment, Header, Image, Card, Icon, Button, Divider, Radio, Form } from 'semantic-ui-react';
import './UserAccountProfilePage.css';
export default function UserAccountProfilePage() {
return (
<Grid columns={2} stackable className="fill-content">
<Grid.Row stretched>
<Grid.Column width={1} />
<Grid.Column width={7}>
<Segment>
<Header as="h1">Profile</Header>
<Image className="centered" src="/images/daniel.jpg" size="medium" circular />
<Card fluid>
<Card.Content>
<Card.Header>Daniel</Card.Header>
<Card.Meta>Joined in 2016</Card.Meta>
<Card.Description>Daniel is a comedian living in Nashville.</Card.Description>
</Card.Content>
<Card.Content extra>
<a>
<Icon name="user" />
10 Friends
</a>
</Card.Content>
</Card>
</Segment>
</Grid.Column>
<Grid.Column width={7}>
<Segment>
<Header as="h2">Settings</Header>
<Button positive fluid>
Sync Google Calendar
</Button>
<Divider />
<Header as="h4">Text notifications</Header>
<Radio toggle />
<Divider />
<Header as="h4">Customize text notifications</Header>
<RadioExampleRadioGroup />
</Segment>
</Grid.Column>
<Grid.Column width={1} />
</Grid.Row>
</Grid>
);
}