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.
text_format Text formatting
The Material typography scale and inline text-style helpers — colors, weights, sizes — across the framework's font stack.open_in_newweb_assetdock_to_right
code_blocks Code blocks
Server-side syntax highlighting via Chroma, with token classes mapped to Material design colors so the same markup recolors on theme change.open_in_newweb_assetdock_to_right
pending Progress widget
Determinate and indeterminate progress indicators, plus the finite/infinite progress-status pattern for long-running operations.open_in_newweb_assetdock_to_right
construction Toolbar widget
An action toolbar with grouped buttons and separators. Buttons that share a parent are automatically gathered into a toolbar without explicit configuration.open_in_newweb_assetdock_to_right
collections Gallery widget
A horizontally-scrolling gallery of cards. Useful for featured-content rows or any list where horizontal swipe beats vertical scroll.open_in_newweb_assetdock_to_right
dashboard Deck of cards widget
A responsive grid of cards that re-flows between 1, 2, and more columns depending on the viewport width. Good for dashboards or any uniform collection.open_in_newweb_assetdock_to_right
tab Tab switcher widget
Tabbed content with smooth switching between sections. Each tab body is rendered server-side and revealed via the same state-driven redraw that powers the rest of the framework.open_in_newweb_assetdock_to_right
explore Navigation widgets
The three flavors of side navigation — a compact strip, a labeled rail, and a full drawer — all driven by the same widget tree and adapting to the viewport.open_in_newweb_assetdock_to_right
edit Form input widgets
Every form input widget on one page — text, email, password, OTP, dates, ranges, dropdowns, file uploads, color pickers, checkboxes, radios, star/sentiment ratings, filter and input chips, toggle switches, and the rich-text editor.open_in_newweb_assetdock_to_right
checklist Form validation
Client-side and server-side form validation working together: required fields, pattern matching, length limits, and custom predicate functions, with inline error messages that survive a server round-trip.open_in_newweb_assetdock_to_right
table_view Data table
A sortable, filterable, paginated table over a small US-states dataset. Quick-search, column sort, and page-size controls all use the same incremental-redraw plumbing the rest of the framework uses.open_in_newweb_assetdock_to_right
edit_note CRUD
Standard create / read / update / delete flow over a per-session in-memory directory of contacts. Demonstrates form-driven persistence with validation, duplicate detection, and a record cap.open_in_newweb_assetdock_to_right
bar_chart Charts
Apache ECharts wrapped as bespa widgets. Bar, pie, column, and a US-states map all themed against the Material design tokens, with live theme switching.open_in_newweb_assetdock_to_right
account_tree Mermaid
Mermaid diagrams (flowcharts, sequence, class, state, gantt) rendered client-side, themed against the Material design tokens, with optional zoom and pan interaction.open_in_newweb_assetdock_to_right