SettingsPage
The settings home: a grid of the places people can go from here, each with its own icon and color.
Master
Stage narrows the box the frame lives in, so watch the tiles and the rail on a phone. Every place under Settings, each tile its own color. Pick one and the side nav follows. Turn the notice on for a line that has to be read before the tiles, and the frame off to see the settings home on its own.
Usage
Use SettingsPage for a home that sends people onwards rather than showing them data: the settings home, or another home shaped like it, such as a reports home. It is a blueprint: it composes kit pieces and keeps no state of its own. children are kit NavTiles, one per place, each with its own intent so the colors become part of how people find the same place again. intro writes anything that has to be said before the tiles, like a kit Callout about a setting that needs attention. The page's name and trail are the kit PageHeader in the AppShell page around it, which owns the page padding. The grid is the .layout-metrics class from contracts/layout.json, widened so a tile has room for its line of text. See contracts/settingspage.json for the full contract.
Do's
- The settings home: a page whose job is to send people on.
- Another home shaped the same way, like a reports home.
- A set of places where the icon and its color help people find the same one again.
Don'ts
- Do not add state to it; it is a blueprint.
- Do not build the tiles inside it. Pass kit Tiles.
- Do not use kit Cards as the tiles; a Card is for comparing and picking, a NavTile is a way in.
- Do not put the page's name inside it. That is the PageHeader in the frame around it.
- Do not add a grid of your own or page padding around it. Read contracts/layout.json.
- Do not use raw hex.
<SettingsPage />