布局

¥Layout

我们提供一些不同的辅助类来控制布局和内容样式。我们计划在即将发布的版本中添加更多功能，敬请期待。

¥We provide a few different helper classes for controlling the layout and styling your content. We're aiming to add more of these in upcoming versions so keep an eye out for that.

如果你要更改演示文稿的大小、缩放比例和居中，请参阅 演示大小。

¥If you're looking to change the sizing, scaling and centering of your presentation please see Presentation Size.

堆栈

¥Stack

r-stack 布局助手允许你将多个元素居中并叠加放置。这旨在与 fragments 一起使用，以逐步显示元素。

¥The r-stack layout helper lets you center and place multiple elements on top of each other. This is intended to be used together with fragments to incrementally reveal elements.

<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>

如果你想单独显示每个堆叠元素，你可以调整片段设置：

¥If you want to show each of the stacked elements individually you can adjust the fragment settings:

<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>

适合文本

¥Fit Text

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

¥The r-fit-text class makes text as large as possible without overflowing the slide. This is great when you want BIG text without having to manually find the right font size. Powered by 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>

拉伸

¥Stretch

r-stretch 布局助手允许你调整元素（例如图片或视频）的大小，以覆盖幻灯片中剩余的垂直空间。例如，在下面的示例中，我们的幻灯片包含标题、图片和署名。由于图片具有 .r-stretch 类，因此其高度设置为幻灯片高度减去标题和署名的总高度。

¥The r-stretch layout helper lets you resize an element, like an image or video, to cover the remaining vertical space in a slide. For example, in the below example our slide contains a title, an image and a byline. Because the image has the .r-stretch class, its height is set to the slide height minus the combined height of the title and byline.

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

拉伸示例

图片署名

¥Image byline

拉伸限制

¥Stretch Limitations

• 幻灯片部分只能拉伸其直系后代

  ¥Only direct descendants of a slide section can be stretched

• 每个幻灯片部分只能拉伸一个后代

  ¥Only one descendant per slide section can be stretched

框架

¥Frame

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

¥Decorate any element with r-frame to make it stand out against the background. If the framed element is placed inside an anchor, we'll apply a hover effect to the border.

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