Layout Examples
👇
Slide Definition
dslSlide { content { h2 { +"Layout Examples" } unorderedList( { listHref("#/fit-text", "Fit Text") }, { listHref("#/stretch", "Stretch") }, { listHref("#/stack", "Stack") }, { listHref("#/hstack", "HStack") }, { listHref("#/vstack", "VStack") }, ) p { +"👇" } } }
Fit Text
Resizes text to be as large as possible within its container. 👇
h2("r-fit-text") { +"FIT" }
or
<h2 class="r-fit-text">FIT</h2>
FIT
Slide Definition
dslSlide { content { h2("r-fit-text") { +"FIT" } } }
HELLO WORLD
BOTH THESE TITLES USE FIT-TEXT
Slide Definition
dslSlide { content { h2("r-fit-text") { +"HELLO WORLD" } h2("r-fit-text") { +"BOTH THESE TITLES USE FIT-TEXT" } } }
Stretch
Makes an element as tall as possible while remaining within the slide bounds. 👇
h2 { +"Stretch Example" }
img(classes = "r-stretch") {
src = "revealjs/assets/image2.png"
}
p { +"Image byline" }
or
<h2>Stretch Example</h2>
<img class="r-stretch" src="revealjs/assets/image2.png">
<p>Image byline</p>
<p>👇</p>
Stretch Example
Image byline
👇
Slide Definition
dslSlide { content { h2 { +"Stretch Example" } img(classes = "r-stretch") { src = "revealjs/assets/image2.png" } p { +"Image byline" } p { +"👇" } } }
Stack
Stacks multiple elements on top of each other, for use with fragments. 👇
h2 { +"Stack Example" }
div("r-stack") {
p("fragment fade-in-then-out") { +"One" }
p("fragment fade-in-then-out") { +"Two" }
p("fragment fade-in-then-out") { +"Three" }
p("fragment fade-in-then-out") { +"Four" }
}
div("r-stack") {
val kitten = "https://placekitten.com"
img(classes = "fragment") {
src = "$kitten/450/300"; width = "450"; height = "300"
}
img(classes = "fragment") {
src = "$kitten/300/450"; width = "300"; height = "450"
}
img(classes = "fragment") {
src = "$kitten/400/400"; width = "400"; height = "400"
}
}
Stack Example
One
Two
Three
Four
Slide Definition
dslSlide { content { h2 { +"Stack Example" } div("r-stack") { p("fragment fade-in-then-out") { +"One" } p("fragment fade-in-then-out") { +"Two" } p("fragment fade-in-then-out") { +"Three" } p("fragment fade-in-then-out") { +"Four" } } div("r-stack") { val kitten = "https://placekitten.com" img(classes = "fragment") { src = "$kitten/450/300"; width = "450"; height = "300" } img(classes = "fragment") { src = "$kitten/300/450"; width = "300"; height = "450" } img(classes = "fragment") { src = "$kitten/400/400"; width = "400"; height = "400" } } } }
HStack 👇
Stacks multiple elements horizontally.
h2 { +"HStack Example 👇" }
div("r-hstack") {
p { +"One"; style = "padding: 0.50em; background: #eee; margin: 0.25em" }
p { +"Two"; style = "padding: 0.75em; background: #eee; margin: 0.25em" }
p { +"Three"; style = "padding: 1.00em; background: #eee; margin: 0.25em" }
}
HStack Example 👇
One
Two
Three
Slide Definition
dslSlide { content { h2 { +"HStack Example 👇" } div("r-hstack") { p { +"One"; style = "padding: 0.50em; background: #eee; margin: 0.25em" } p { +"Two"; style = "padding: 0.75em; background: #eee; margin: 0.25em" } p { +"Three"; style = "padding: 1.00em; background: #eee; margin: 0.25em" } } } }
VStack 👇
Stacks multiple elements vertically.
h2 { +"VStack Example 👇" }
div("r-vstack") {
p { +"One"; style = "padding: 0.50em; background: #eee; margin: 0.25em" }
p { +"Two"; style = "padding: 0.75em; background: #eee; margin: 0.25em" }
p { +"Three"; style = "padding: 1.00em; background: #eee; margin: 0.25em" }
}
VStack Example 👇
One
Two
Three
Slide Definition
dslSlide { content { h2 { +"VStack Example 👇" } div("r-vstack") { p { +"One"; style = "padding: 0.50em; background: #eee; margin: 0.25em" } p { +"Two"; style = "padding: 0.75em; background: #eee; margin: 0.25em" } p { +"Three"; style = "padding: 1.00em; background: #eee; margin: 0.25em" } } } }
Layout Examples Fit Text Stretch Stack HStack VStack 👇