Bleed
Some Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
import { Bleed, Box, Heading, Stack, Text } from "@chakra-ui/react"
import { DecorativeBox } from "compositions/lib/decorative-box"
const Demo = () => {
return (
<Box padding="10" rounded="sm" borderWidth="1px">
<Bleed inline="10">
<DecorativeBox height="20">Bleed</DecorativeBox>
</Bleed>
<Stack mt="6">
<Heading size="md">Some Heading</Heading>
<Text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</Text>
</Stack>
</Box>
)
}
Usage
import { Bleed } from "@chakra-ui/react"<Bleed>
<div />
</Bleed>Examples
Vertical
Use the block prop to make the element bleed vertically.
Bleed
import { Bleed, Box } from "@chakra-ui/react"
import { DecorativeBox } from "compositions/lib/decorative-box"
const Demo = () => {
return (
<Box padding="10" rounded="sm" borderWidth="1px">
<Bleed block="10">
<DecorativeBox height="20">Bleed</DecorativeBox>
</Bleed>
</Box>
)
}
Specific Direction
Use the inlineStart, inlineEnd, blockStart, and blockEnd props to make
the element bleed in a specific direction.
inlineStart
inlineEnd
blockStart
blockEnd
import { Bleed, Box, Stack } from "@chakra-ui/react"
import { DecorativeBox } from "compositions/lib/decorative-box"
const Demo = () => {
return (
<Stack gap="8">
<Box padding="8" rounded="sm" borderWidth="1px">
<Bleed inlineStart="8">
<DecorativeBox height="8">inlineStart</DecorativeBox>
</Bleed>
</Box>
<Box padding="8" rounded="sm" borderWidth="1px">
<Bleed inlineEnd="8">
<DecorativeBox height="8">inlineEnd</DecorativeBox>
</Bleed>
</Box>
<Box padding="8" rounded="sm" borderWidth="1px">
<Bleed blockStart="8">
<DecorativeBox height="8">blockStart</DecorativeBox>
</Bleed>
</Box>
<Box padding="8" rounded="sm" borderWidth="1px">
<Bleed blockEnd="8">
<DecorativeBox height="8">blockEnd</DecorativeBox>
</Bleed>
</Box>
</Stack>
)
}
Props
| Prop | Default | Type |
|---|---|---|
inline | SystemStyleObject['marginInline']The negative margin on the x-axis | |
block | SystemStyleObject['marginBlock']The negative margin on the y-axis | |
inlineStart | SystemStyleObject['marginInlineStart']The negative margin on the inline-start axis | |
inlineEnd | SystemStyleObject['marginInlineEnd']The negative margin on the inline-end axis | |
blockStart | SystemStyleObject['marginBlockStart']The negative margin on the block-start axis | |
blockEnd | SystemStyleObject['marginBlockEnd']The negative margin on the block-end axis |