/
githubmirror
/
reveal.js
Обзор
Документация
Войти
/
githubmirror
/
reveal.js
Код
Запросы
0
Пакеты
0
Релизы
0
Аналитика
Безопасность
master
examples/layout-helpers.html
171 строка
5 KB
Hakim El Hattab
placekitten.com -> placecats.com (closes #3848)
11 мар 2026, 21:41
11 мар 2026, 21:41
8d9120f
Код
Авторство
О чём код?
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>reveal.js - Layout Helpers</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <link rel="stylesheet" href="../dist/reveal.css" /> <link rel="stylesheet" href="../dist/theme/white.css" id="theme" /> <link rel="stylesheet" href="../dist/plugin/highlight/monokai.css" /> </head> <body> <div class="reveal"> <div class="slides"> <section> <h2>Layout Helper Examples</h2> <ul> <li><a href="#/fit-text">Big Text</a></li> <li><a href="#/stretch">Stretch</a></li> <li><a href="#/stack">Stack</a></li> <li><a href="#/hstack">HStack</a></li> <li><a href="#/vstack">VStack</a></li> </ul> </section> <section id="fit-text"> <h2>Fit Text</h2> <p>Resizes text to be as large as possible within its container.</p> <pre><code class="html" data-trim data-line-numbers> <h2 class="r-fit-text">FIT</h2> </code></pre> </section> <section> <h2 class="r-fit-text">FIT</h2> </section> <section> <h2 class="r-fit-text">HELLO WORLD</h2> <h2 class="r-fit-text">BOTH THESE TITLES USE FIT-TEXT</h2> </section> <section id="stretch"> <h2>Stretch</h2> <p>Makes an element as tall as possible while remaining within the slide bounds.</p> <pre><code class="html" data-trim data-line-numbers> <h2>Stretch Example</h2> <img src="assets/image2.png" class="r-stretch"> <p>Image byline</p> </code></pre> </section> <section> <h2>Stretch Example</h2> <img src="assets/image2.png" class="r-stretch" /> <p>Image byline</p> </section> <section id="stack"> <h2>Stack</h2> <p>Stacks multiple elements on top of each other, for use with fragments.</p> <pre><code class="html" data-trim data-line-numbers> <div class="r-stack"> <img class="fragment" width="450" height="300" src="..."> <img class="fragment" width="300" height="450" src="..."> <img class="fragment" width="400" height="400" src="..."> </div> </code></pre> </section> <section> <h2>Stack Example</h2> <div class="r-stack"> <p class="fragment fade-in-then-out">One</p> <p class="fragment fade-in-then-out">Two</p> <p class="fragment fade-in-then-out">Three</p> <p class="fragment fade-in-then-out">Four</p> </div> <div class="r-stack"> <img src="https://placecats.com/450/300" width="450" height="300" class="fragment" /> <img src="https://placecats.com/300/450" width="300" height="450" class="fragment" /> <img src="https://placecats.com/400/400" width="400" height="400" class="fragment" /> </div> </section> <section> <h2>Stack Example</h2> <p>fade-in-then-out fragments</p> <div class="r-stack"> <img src="https://placecats.com/450/300" width="450" height="300" class="fragment fade-in-then-out" /> <img src="https://placecats.com/300/450" width="300" height="450" class="fragment fade-in-then-out" /> <img src="https://placecats.com/400/400" width="400" height="400" class="fragment fade-in-then-out" /> </div> </section> <section id="hstack"> <h2>HStack</h2> <p>Stacks multiple elements horizontally.</p> <pre><code class="html" data-trim data-line-numbers> <div class="r-hstack"> <img width="450" height="300" src="..."> <img width="300" height="450" src="..."> <img width="400" height="400" src="..."> </div> </code></pre> </section> <section data-auto-animate> <h2>HStack Example</h2> <div class="r-hstack"> <p style="padding: 0.5em; background: #eee; margin: 0.25em">One</p> <p style="padding: 0.75em; background: #eee; margin: 0.25em">Two</p> <p style="padding: 1em; background: #eee; margin: 0.25em">Three</p> </div> </section> <section id="vstack"> <h2>VStack</h2> <p>Stacks multiple elements vertically.</p> <pre><code class="html" data-trim data-line-numbers> <div class="r-vstack"> <img width="450" height="300" src="..."> <img width="300" height="450" src="..."> <img width="400" height="400" src="..."> </div> </code></pre> </section> <section data-auto-animate> <h2>VStack Example</h2> <div class="r-vstack"> <p style="padding: 0.5em; background: #eee; margin: 0.25em">One</p> <p style="padding: 0.75em; background: #eee; margin: 0.25em">Two</p> <p style="padding: 1em; background: #eee; margin: 0.25em">Three</p> </div> </section> </div> </div> <script src="../dist/reveal.js"></script> <script src="../dist/plugin/highlight.js"></script> <script> Reveal.initialize({ center: true, hash: true, plugins: [RevealHighlight], }); </script> </body> </html>