Navigation Bar
This example shows how to create an app with a Navigation Bar.
Open in Online Editor
class MyApp extends App{
createStartPage(){
return HomePage
}
createLayout(pageContent){
return Rows.backgroundColor(`skyblue`).children(
pageContent.size(1),
Box.height(1).backgroundColor(`black`),
Columns.padding(1).children(
Space,
Button.text(`🏠\nHome`).page(HomePage),
Space,
Button.text(`💡\nAbout`).page(AboutPage),
Space,
Button.text(`📞\nContact`).page(ContactPage),
Space,
),
)
}
}
class HomePage extends Page{
createGui(){
return a.createLayout(
Text.text(`Home!`),
)
}
}
class AboutPage extends Page{
createGui(){
return a.createLayout(
Text.text(`About!`),
)
}
}
class ContactPage extends Page{
createGui(){
return a.createLayout(
Text.text(`Contact us!`),
)
}
}