Flow components let us split our app UI into independent, reusable pieces. A page layout in Flow has the following components:
Content – Hidden | Presentation | List | Outcomes | Image
Input – Input | Radio | Checkbox | Toggle | Text | Rich Text | Combobox
Data – File Upload | Table | Files | Tiles
Charts – Bar | Line | Pie | Doughnut | Polar Area
Let’s take a look at the toggle component.
Toggle
The toggle component lets us create toggle buttons that toggle between enabled/disabled or true/false.
We drag and drop the toggle component to a container in the page layout.
Like other components, this opens a configuration panel on the right-hand-side that lets us customize the component.
The selection made by the user (true/false) can be saved in a Boolean value.
Attributes
We can change the shape and color of the toggle button by configuring the attributes either from the metadata or the drawing tool.
| Key | Value | Description |
|---|---|---|
| shape | {string} | “Round” for rounded corners (default), “square” for not-rounded corners. |
| background | {string} | Supports any CSS color format string, or the following named colors: success, info, warning, danger. |
Using the drawing tool:
Editing the metadata:
Goody bag
- Sample flow – https://flow.manywho.com/c5a50df2-f24b-4342-9fbd-1c91747ac0cf/play/default?flow-id=bb511f55-8397-4de4-8fe9-95b00fdb3f3d
- Sample package – https://s3.amazonaws.com/mw-documentation/flow-examples/toggle.json