Chakra UI Separator - Horizon UI

The separator composes Flex and is used as a separation element.

Import#

import { VSeparator, HSeparator } from "components/Separator/Separator"

Usage - HSeparator#

function Example() {
const property = {
imageUrl: "https://bit.ly/2Z4KKcF",
imageAlt: "Rear view of modern home with pool",
beds: 3,
baths: 2,
title: "Modern home in city center in the heart of historic Los Angeles",
formattedPrice: "$1,900.00",
reviewCount: 34,
rating: 4,
}
return (
<Box>
<Text align="center" mb="20px">
This is before the HSeparator
</Text>
<Flex
h="1px"
w="100%"
bg="linear-gradient(90deg, rgba(224, 225, 226, 0) 0%, #E0E1E2 49.52%, rgba(224, 225, 226, 0) 100%)"
mb="20px"
></Flex>
<Text align="center">This is after the HSeparator</Text>
</Box>
)
}
function Example() {
return (
<Text align="center" mb="20px">
This is before the HSeparator
</Text>
</HSeparator>
<Text align="center">
This is after the HSeparator
</Text>
)
}

Usage - VSeparator#

function Example() {
return (
<Flex alignItems="center" width="100%" height="100px">
<Text align="center" mb="20px" mr="20px">
This is before the VSeparator
</Text>
<Flex
w="1px"
bg="linear-gradient(0deg, rgba(224, 225, 226, 0) 0%, #E0E1E2 49.52%, rgba(224, 225, 226, 0.15625) 99.04%)"
mr="20px"
></Flex>
<Text align="center">This is after the VSeparator</Text>
</Flex>
)
}
function Example() {
return (
<Text align="center" mb="20px">
This is before the VSeparator
</Text>
</VSeparator />
<Text align="center">
This is after the VSeparator
</Text>
)
}

Horizon UI © 2021-2023 Copyright. All Rights Reserved.

  • Blog
  • License