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.
Usage
- Drill-in to a nested workflow
- Stepped workflow inside a panel interface
Sample
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 calcite-flow-item elements to the component. |
Styles
| Name | Description |
|---|---|
| --calcite-flow-background-color | Specifies the component's background color. |
Methods
| Name | Description | Signature |
|---|---|---|
| back | Removes the currently active calcite-flow-item. | back(): Promise<FlowItem["el"] | FlowItemLikeElement> |
| componentOnReady | Create a promise that resolves once component is fully loaded. | componentOnReady(): Promise<void> |
| setFocus | Sets focus on the component. | setFocus(): Promise<void> |