Flow is a layout component which allows for drilling in and out of panels in the interface.
Overview
Flow provides a fluid experience among a series of stacked panels. Drill-in interface elements and animations are automatically applied as you add and remove child components.
Populate Flow with Flow Item.
Sample
Component comparison
Consider for drilling into a nested workflow through a series of related panels.
Interactions occur within Flow Items to drill into related content, or use Flow's back button to return to the previous view.
Consider for guiding users through processes with sequential steps.
Interactions typically advance users to a next step, either within the same page or to a different page.
Usage
- Drill-in to a nested workflow
- Stepped workflow inside a panel interface
Accessibility
Keyboard navigation
| Key | Function |
|---|---|
Tab | Moves focus to next focusable element. If the current focus is the last element, focus will leave the component. |
Tab and Shift | Moves focus to previous focusable element. If the current focus is the first element, focus will leave the component. |
API reference
Slots
| Name | Description |
|---|---|
| default (unnamed) | A slot for adding |
Styles
| Name | Description |
|---|---|
| --calcite-flow-background-color | Specifies the component's background color. |
Methods
| Name | Description | Signature |
|---|---|---|
| back | Removes selection of the currently active | back(): Promise<FlowItem | FlowItemLikeElement | undefined> |
| componentOnReady | Creates a promise that resolves once the component is fully loaded. | componentOnReady(): Promise<this> |
| setFocus | Sets focus on the component. | setFocus(options?: FocusOptions): Promise<void> |