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
使用 block 属性使元素垂直出血。
¥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
使用 inlineStart、inlineEnd、blockStart 和 blockEnd 属性使元素沿特定方向出血。
¥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'] | undefinedThe negative margin on the x-axis | |
block | SystemStyleObject['marginBlock'] | undefinedThe negative margin on the y-axis | |
inlineStart | SystemStyleObject['marginInlineStart'] | undefinedThe negative margin on the inline-start axis | |
inlineEnd | SystemStyleObject['marginInlineEnd'] | undefinedThe negative margin on the inline-end axis | |
blockStart | SystemStyleObject['marginBlockStart'] | undefinedThe negative margin on the block-start axis | |
blockEnd | SystemStyleObject['marginBlockEnd'] | undefinedThe negative margin on the block-end axis | |
as | React.ElementTypeThe underlying element to render. | |
asChild | booleanUse the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide. |