bleed.mdx

import { Property } from '@grapp/nextra-theme' import { Callout } from "nextra/components";

import { Example, getExamples } from '../../../components/Example'

export const getStaticProps = () => { return getExamples(['bleed/bleed']); }

Bleed

The Bleed component is specifically designed to create a container with negative margins so that its content appears to extend beyond the container's boundaries. This is particularly useful when you want to visually break out of a parent container without having to refactor the entire component tree.

This component works in contrast to the Inset component, which creates a padded container. While Inset creates a container that keeps its content within its boundaries, this component creates a container that allows its content to "bleed" into the surrounding layout.

Props

The Bleed component is created using the Box component. It extends all the props* supported by Box, as well as React Native View, and the props mentioned below.

Unavailable `Box` props: `margin`, `marginX`, `marginY`, `marginTop`, `marginRight`, `marginBottom`, `marginLeft`, `marginStart`, `marginEnd`

space

<Property types={["ResponsiveProp"]}> Applies a negative margin to each side.

horizontal

<Property types={["ResponsiveProp"]}> Applies a negative margin horizontally.

vertical

<Property types={["ResponsiveProp"]}> Applies a negative margin vertically.

top

<Property types={["ResponsiveProp"]}> Applies a negative margin to the top.

right

<Property types={["ResponsiveProp"]}> Applies a negative margin to the right.

bottom

<Property types={["ResponsiveProp"]}> Applies a negative margin to the bottom.

left

<Property types={["ResponsiveProp"]}> Applies a negative margin to the left.

start

<Property types={["ResponsiveProp"]}> Applies a negative margin to the left for the ltr direction, otherwise to the right.

end

<Property types={["ResponsiveProp"]}> Applies a negative margin to the right for the ltr direction, otherwise to the left.