布局

我们提供了一些不同的帮助程序类来控制布局和设置内容样式。我们的目标是将来在这些版本中添加更多功能，因此请注意这一点。

如果你想更改演示文稿的尺寸、比例和居中，请参阅演示文稿大小。

堆叠

r-stack 布局帮助程序允许你逐个对齐并放置多个元素。它的目的是与片段一起使用以逐步揭示元素。

<div class="r-stack">
  <img
    class="fragment"
    src="https://picsum.photos/450/300"
    width="450"
    height="300"
  />
  <img
    class="fragment"
    src="https://picsum.photos/300/450"
    width="300"
    height="450"
  />
  <img
    class="fragment"
    src="https://picsum.photos/400/400"
    width="400"
    height="400"
  />
</div>

如果你想逐个显示堆叠的每个元素，则可以调整片段设置

<div class="r-stack">
  <img
    class="fragment fade-out"
    data-fragment-index="0"
    src="https://picsum.photos/450/300"
    width="450"
    height="300"
  />
  <img
    class="fragment current-visible"
    data-fragment-index="0"
    src="https://picsum.photos/300/450"
    width="300"
    height="450"
  />
  <img
    class="fragment"
    src="https://picsum.photos/400/400"
    width="400"
    height="400"
  />
</div>

适应文本

r-fit-text 类使文本尽可能大，但又不溢出幻灯片。当你想要大的文本，但不愿手动查找合适的字体大小时，这非常有用。由 fitty ❤ 提供支持

<h2 class="r-fit-text">BIG</h2>

<h2 class="r-fit-text">FIT TEXT</h2>
<h2 class="r-fit-text">CAN BE USED FOR MULTIPLE HEADLINES</h2>

拉伸

r-stretch 布局帮助器使你可以调整大小以覆盖幻灯片中剩余垂直空间。例如，在下例中，幻灯片包含一个标题、一个图像和一个署名。由于图像具有 .r-stretch 类，因此其高度设置为幻灯片高度减去标题和署名的总高度。

<h2>Stretch Example</h2>
<img class="r-stretch" src="/images/slides-symbol-512x512.png" />
<p>Image byline</p>

拉伸示例

图像署名

拉伸限制

• 幻灯片部分的直接后代才能拉伸
• 每个幻灯片部分中只有一个后代才能拉伸

框架

使用 r-frame 装饰任何元素，以使其在背景中脱颖而出。如果将带框架的元素放在锚点内，我们将对边框应用悬停效果。

<img src="logo.svg" width="200" />
<a href="#">
  <img class="r-frame" src="logo.svg" width="200" />
</a>