Ви не можете вибрати більше 25 тем Теми мають розпочинатися з літери або цифри, можуть містити дефіси (-) і не повинні перевищувати 35 символів.

layout-helpers.html 4.9KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160
  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <title>reveal.js - Layout Helpers</title>
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  7. <link rel="stylesheet" href="../dist/reveal.css">
  8. <link rel="stylesheet" href="../dist/theme/white.css" id="theme">
  9. <link rel="stylesheet" href="../plugin/highlight/monokai.css">
  10. </head>
  11. <body>
  12. <div class="reveal">
  13. <div class="slides">
  14. <section>
  15. <h2>Layout Helper Examples</h2>
  16. <ul>
  17. <li><a href="#/fit-text">Big Text</a></li>
  18. <li><a href="#/stretch">Stretch</a></li>
  19. <li><a href="#/stack">Stack</a></li>
  20. <li><a href="#/hstack">HStack</a></li>
  21. <li><a href="#/vstack">VStack</a></li>
  22. </ul>
  23. </section>
  24. <section id="fit-text">
  25. <h2>Fit Text</h2>
  26. <p>Resizes text to be as large as possible within its container.</p>
  27. <pre><code class="html" data-trim data-line-numbers>
  28. <h2 class="r-fit-text">FIT</h2>
  29. </code></pre>
  30. </section>
  31. <section>
  32. <h2 class="r-fit-text">FIT</h2>
  33. </section>
  34. <section>
  35. <h2 class="r-fit-text">HELLO WORLD</h2>
  36. <h2 class="r-fit-text">BOTH THESE TITLES USE FIT-TEXT</h2>
  37. </section>
  38. <section id="stretch">
  39. <h2>Stretch</h2>
  40. <p>Makes an element as tall as possible while remaining within the slide bounds.</p>
  41. <pre><code class="html" data-trim data-line-numbers>
  42. <h2>Stretch Example</h2>
  43. <img src="assets/image2.png" class="r-stretch">
  44. <p>Image byline</p>
  45. </code></pre>
  46. </section>
  47. <section>
  48. <h2>Stretch Example</h2>
  49. <img src="assets/image2.png" class="r-stretch">
  50. <p>Image byline</p>
  51. </section>
  52. <section id="stack">
  53. <h2>Stack</h2>
  54. <p>Stacks multiple elements on top of each other, for use with fragments.</p>
  55. <pre><code class="html" data-trim data-line-numbers>
  56. <div class="r-stack">
  57. &lt;img class="fragment" width="450" height="300" src="..."&gt;
  58. &lt;img class="fragment" width="300" height="450" src="..."&gt;
  59. &lt;img class="fragment" width="400" height="400" src="..."&gt;
  60. </div>
  61. </code></pre>
  62. </section>
  63. <section>
  64. <h2>Stack Example</h2>
  65. <div class="r-stack">
  66. <p class="fragment fade-in-then-out">One</p>
  67. <p class="fragment fade-in-then-out">Two</p>
  68. <p class="fragment fade-in-then-out">Three</p>
  69. <p class="fragment fade-in-then-out">Four</p>
  70. </div>
  71. <div class="r-stack">
  72. <img src="https://placekitten.com/450/300" width="450" height="300" class="fragment">
  73. <img src="https://placekitten.com/300/450" width="300" height="450" class="fragment">
  74. <img src="https://placekitten.com/400/400" width="400" height="400" class="fragment">
  75. </div>
  76. </section>
  77. <section>
  78. <h2>Stack Example</h2>
  79. <p>fade-in-then-out fragments</p>
  80. <div class="r-stack">
  81. <img src="https://placekitten.com/450/300" width="450" height="300" class="fragment fade-in-then-out">
  82. <img src="https://placekitten.com/300/450" width="300" height="450" class="fragment fade-in-then-out">
  83. <img src="https://placekitten.com/400/400" width="400" height="400" class="fragment fade-in-then-out">
  84. </div>
  85. </section>
  86. <section id="hstack">
  87. <h2>HStack</h2>
  88. <p>Stacks multiple elements horizontally.</p>
  89. <pre><code class="html" data-trim data-line-numbers>
  90. <div class="r-hstack">
  91. &lt;img width="450" height="300" src="..."&gt;
  92. &lt;img width="300" height="450" src="..."&gt;
  93. &lt;img width="400" height="400" src="..."&gt;
  94. </div>
  95. </code></pre>
  96. </section>
  97. <section data-auto-animate>
  98. <h2>HStack Example</h2>
  99. <div class="r-hstack">
  100. <p style="padding: 0.50em; background: #eee; margin: 0.25em">One</p>
  101. <p style="padding: 0.75em; background: #eee; margin: 0.25em">Two</p>
  102. <p style="padding: 1.00em; background: #eee; margin: 0.25em">Three</p>
  103. </div>
  104. </section>
  105. <section id="vstack">
  106. <h2>VStack</h2>
  107. <p>Stacks multiple elements vertically.</p>
  108. <pre><code class="html" data-trim data-line-numbers>
  109. <div class="r-vstack">
  110. &lt;img width="450" height="300" src="..."&gt;
  111. &lt;img width="300" height="450" src="..."&gt;
  112. &lt;img width="400" height="400" src="..."&gt;
  113. </div>
  114. </code></pre>
  115. </section>
  116. <section data-auto-animate>
  117. <h2>VStack Example</h2>
  118. <div class="r-vstack">
  119. <p style="padding: 0.50em; background: #eee; margin: 0.25em">One</p>
  120. <p style="padding: 0.75em; background: #eee; margin: 0.25em">Two</p>
  121. <p style="padding: 1.00em; background: #eee; margin: 0.25em">Three</p>
  122. </div>
  123. </section>
  124. </div>
  125. </div>
  126. <script src="../dist/reveal.js"></script>
  127. <script src="../plugin/highlight/highlight.js"></script>
  128. <script>
  129. Reveal.initialize({
  130. center: true,
  131. hash: true,
  132. plugins: [ RevealHighlight ]
  133. });
  134. </script>
  135. </body>
  136. </html>