内置组件
溢出

Bleed 组件

示例

使用<Bleed>包装您的内容时，它会比容器稍宽，并且会在两侧溢出。

君子博学而日参省乎己，则知明而行无过矣。—— 荀子

当您想要显示一些图形信息时，它提供了更好的阅读体验，这些信息通常在更大的尺寸下看起来更好。

例如，您可以将文本、图像、视频或任何组件放入：

您甚至可以使用<Bleed full>使其完全填充页面，除了侧边栏

Preview

用法

import {Bleed} from 'nextra-theme-docs';
 
<Bleed>
  <div
    style={{
      border: '1px solid #ccc',
      height: '100px',
      display: 'flex',
      justifyContent: 'center',
      alignItems: 'center',
    }}
  >
    <span>君子博学而日参省乎己，则知明而行无过矣。</span>
    <span>—— 荀子</span>
  </div>
</Bleed>
 
<Bleed full>
  <Image src='/images/art.jpg'></Image>
</Bleed>
文件树图片