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
<calcite-shell>
<calcite-shell-panel slot="panel-start" position="start" id="shell-panel-start">
<calcite-action-bar slot="action-bar">
<calcite-action active icon="gear" text="Configuration"></calcite-action>
</calcite-action-bar>
<calcite-flow id="example-flow">
<calcite-flow-item heading="App Settings" description="Configuration">
<calcite-action id="tooltip-ref" text="Configure" icon="lightbulb" slot="header-actions-end">
</calcite-action>
<calcite-tooltip reference-element="tooltip-ref" text="Configure" slot="header-actions-end">A helpful
hint</calcite-tooltip>
<calcite-block id="first-flow-item-block" heading="Sample options" description="Adjustment categories"
open>
<calcite-list>
<calcite-list-item label="Web map">
<calcite-icon scale="s" slot="content-end" icon="browser-map"></calcite-icon>
</calcite-list-item>
<calcite-list-item label="Layout">
<calcite-icon scale="s" slot="content-end" icon="group-layout-elements"></calcite-icon>
</calcite-list-item>
<calcite-list-item label="Layers" description="This one has a note">
<calcite-icon scale="s" slot="content-end" icon="layers"></calcite-icon>
</calcite-list-item>
<calcite-list-item label="Onboarding">
<calcite-icon scale="s" slot="content-end" icon="education"></calcite-icon>
</calcite-list-item>
<calcite-list-item label="Sharing">
<calcite-chip scale="s" slot="content-end">3 viewers</calcite-chip>
<calcite-icon scale="s" slot="content-end" icon="collaboration"></calcite-icon>
</calcite-list-item>
</calcite-list>
</calcite-block>
</calcite-flow-item>
</calcite-flow>
</calcite-shell-panel>
<calcite-shell-panel slot="panel-end" position="end" id="shell-panel-end" collapsed>
<calcite-action-bar slot="action-bar" expand-disabled>
<calcite-action text="Layer" icon="sliders-horizontal"></calcite-action>
<calcite-action text="Styles" icon="shapes"></calcite-action>
<calcite-action text="Filter" icon="layer-filter"></calcite-action>
<calcite-action text="Configure" icon="popup"></calcite-action>
</calcite-action-bar>
</calcite-shell-panel>
<calcite-panel heading="Content"></calcite-panel>
</calcite-shell>
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> |