Button #

On this page you find the documentation for the GUI Component Button.

Introduction #

The Button component is a view that displays some text to the user shown as a button, and which the user can click on. The text passed as the main content to the Button will be shown in the Button.

class StartPage extends Page{
	createGui(){
		return Button(`Click me!`)
	}
}

class MyApp extends App{
	createStartPage(){
		return new StartPage()
	}
}

The text is always centered both vertically and horizontally in the Button.

Clicking on the Button takes the user to the next page in the app.

Adding Direction #

To indicate which Page the user should come to when clicking on the Button, use the configuration method page():

class StartPage extends Page{
	createGui(){
		return Button(`Go there`).page(DestinationPage)
	}
}

class DestinationPage extends Page{
	createGui(){
		return Rows(
			Text(`Welcome to the DestinationPage!`),
			Button(`Back to StartPage`).page(StartPage),
		)
	}
}

class MyApp extends App{
	createStartPage(){
		return new StartPage()
	}
}

The value you pass to page() can be the same type of value you pass as the page argument in the Direction constructor. It's typically the name of the Page class the user should come to.

Handling clicks #

Use the configuration method handler() to specify a function that should be called when the user clicks on the Button.

class StartPage extends Page{
	createGui(){
		return Button(`Show message`).handler(() => alert('You clicked me!'))
	}
}

class MyApp extends App{
	createStartPage(){
		return new StartPage()
	}
}