Power Point Presentation

This example shows how to create an app that functions as a Power Point Presentation (shows more and more content on each slide as you progress).

Open in Online Editor

class MyApp extends App{
	
	createStartPage(){
		return Slide1
	}
	
}

class Slide1 extends Page{
	
	counter = 0
	
	onBefore(){
		p.counter += 1
	}
	
	createGui(){
		return Rows.padding(5).children(
			Text.text(`Hello!`),
			Space,
			Text.text(` - I am Peter`).left().showIf(2 <= p.counter),
			Text.text(` - Born 1990`).left().showIf(3 <= p.counter),
			Text.text(` - Raised in Baremossö`).left().showIf(4 <= p.counter),
			Space,
			Button.text(`Next`).page(Slide1).keepIf(p.counter <= 3),
			Button.text(`Next`).page(Slide2).keepIf(4 == p.counter),
		)
	}
	
}

class Slide2 extends Page{
	
	counter = 0
	
	onBefore(){
		p.counter += 1
	}
	
	createGui(){
		return Rows.padding(5).children(
			Space,
			Text.text(`Thank you for listening!`),
			Space,
			Text.text(`Any questions?`).showIf(2 <= p.counter),
			Space,
			Button.text(`Next`).page(Slide2).showIf(p.counter < 2),
		)
	}
	
}