Tabs added to the app bar are best suited for grouping together pages that are
closely related where the content of the page changes in its entirety.Switch to the next tab to continue...
Tab widgets affect a state variable that is then used to show or hide content.
The tab switcher widget in the app bar sets the value of the state variable tabto the key of the selected tab: top1, top2 or top3.
Click on the next tab label (“In page”) to switch tabs.
Slide open the debugger to see the impact on the state of the page.
Tab switcher widgets can be placed in the middle of the page as well.
Tabs are shown or hidden according to the user selection purely on the frontend.
Nevertheless, a request is still sent to the backend when the value of
the tab widget’s state variable changes.
This tab switcher is tied to the state variable inpageto avoid conflict with the state variable tab that’s used for the top tab switcher.
Nested page
Lorem ipsum
Proin lacinia
Tabs can contain anything. In this examples the tab body embeds another page inside one of its tabs.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ut purus sed purus vestibulum lacinia ut et purus.
Praesent porttitor fringilla nunc, ut varius tortor lacinia maximus. Nam luctus sollicitudin justo, id aliquet
velit condimentum vitae. Vivamus scelerisque varius commodo. Vestibulum interdum leo leo, id finibus odio
pulvinar sit amet. Morbi quis neque velit. Integer euismod elementum nunc, id egestas nisl posuere id.
Sed egestas felis eget vulputate lobortis.
Proin lacinia, diam ut condimentum fringilla, turpis nisl egestas mi, a pulvinar magna velit ut quam.
Aenean nec nisl scelerisque, congue justo ut, consequat felis. Suspendisse consequat maximus ex
sollicitudin elementum. Ut sed ipsum blandit, vulputate nulla at, faucibus felis. Donec ac tristique sapien.
Tabs labels can be aligned to the right.
Tab labels do not have to be textual. In this case an icon is used.