Overview
Sample
<calcite-shell>
<calcite-shell-panel slot="panel-start" width="l">
<calcite-flow>
<calcite-flow-item>
<calcite-panel heading="Map Options">
<calcite-action icon="question" text="Favorite" slot="header-actions-start"></calcite-action>
<calcite-action icon="save" text="Save" slot="header-actions-end"></calcite-action>
<calcite-action icon="reset" text-enabled text="Reset" slot="header-menu-actions"></calcite-action>
<calcite-action icon="pencil" text-enabled text="Rename" slot="header-menu-actions">
</calcite-action>
<calcite-button width="half" slot="footer" appearance="outline">
Cancel
</calcite-button>
<calcite-button width="half" slot="footer">
Next
</calcite-button>
<calcite-block collapsible heading="Layer effects" description="Adjust blur, highlight, and more"
icon-start="effects">
<calcite-notice open>
<div slot="message">Use layer effects sparingly, for emphasis</div>
</calcite-notice>
</calcite-block>
<calcite-block collapsible heading="Symbology" description="Select type, color, and transparency"
icon-start="map-pin">
<calcite-notice open>
<div slot="message">The viewers are going to love this</div>
</calcite-notice>
</calcite-block>
<calcite-fab slot="fab"></calcite-fab>
</calcite-panel>
</calcite-flow-item>
</calcite-flow>
</calcite-shell-panel>
<calcite-panel heading="Content"></calcite-panel>
</calcite-shell>
API reference
Properties
Property | Attribute | Description | Type | Default |
---|---|---|---|---|
beforeBack | When provided, the method will be called before it is removed from its parent calcite-flow . | () => Promise<void> | ||
beforeClose | Passes a function to run before the component closes. | () => Promise<void> | ||
closable | closable | When true , displays a close button in the trailing side of the component's header. | boolean | false |
closed | closed | When true , the component will be hidden. | boolean | false |
collapsed | collapsed | When true , hides the component's content area. | boolean | false |
collapsible | collapsible | When true , the component is collapsible. | boolean | false |
description | description | A description for the component. | string | |
disabled | disabled | When true , interaction is prevented and the component is displayed with lower opacity. | boolean | false |
heading | heading | The component header text. | string | |
headingLevel | heading-level | Specifies the heading level of the component's heading for proper document structure, without affecting visual styling. | 1 | 2 | 3 | 4 | 5 | 6 | |
loading | loading | When true , a busy indicator is displayed. | boolean | false |
menuOpen | menu-open | When true , the action menu items in the header-menu-actions slot are open. | boolean | false |
messageOverrides | Use this property to override individual strings used by the component. | {
back?: string;
close?: string;
options?: string;
} | ||
overlayPositioning | overlay-positioning | Determines the type of positioning to use for the overlaid content.
Using "absolute" will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout.
"fixed" should be used to escape an overflowing parent container, or when the reference element's position CSS property is "fixed" . | "absolute" | "fixed" | "absolute" |
scale | scale | Specifies the size of the component. | "l" | "m" | "s" | "m" |
selected | selected | When true, flow-item is displayed within a parent flow. | boolean | false |
Slots
Name | Description |
---|---|
default (unnamed) | A slot for adding custom content. |
action-bar | A slot for adding a calcite-action-bar to the component. |
alerts | A slot for adding calcite-alert s to the component. |
content-top | A slot for adding content above the unnamed (default) slot and below the action-bar slot (if populated). |
content-bottom | A slot for adding content below the unnamed (default) slot and above the footer slot (if populated) |
header-actions-start | A slot for adding calcite-action s or content to the start side of the component's header. |
header-actions-end | A slot for adding calcite-action s or content to the end side of the component's header. |
header-content | A slot for adding custom content to the component's header. |
header-menu-actions | A slot for adding an overflow menu with calcite-action s inside a calcite-dropdown . |
fab | A slot for adding a calcite-fab (floating action button) to perform an action. |
footer | A slot for adding custom content to the component's footer. Should not be used with the "footer-start" or "footer-end" slots. |
footer-actions | "footer" slot instead. A slot for adding calcite-button s to the component's footer. |
footer-end | A slot for adding a trailing footer custom content. Should not be used with the "footer" slot. |
footer-start | A slot for adding a leading footer custom content. Should not be used with the "footer" slot. |
Styles
Name | Description |
---|---|
--calcite-flow-item-footer-padding | --calcite-flow-footer-space instead. Specifies the padding of the component's footer. |
--calcite-flow-item-header-border-block-end | --calcite-flow-border-color instead. Specifies the component header's block end border. |
--calcite-flow-corner-radius | Specifies the component's corner radius. |
--calcite-flow-heading-text-color | Specifies the text color of the component's heading . |
--calcite-flow-description-text-color | Specifies the text color of the component's description . |
--calcite-flow-border-color | Specifies the component's border color. |
--calcite-flow-background-color | Specifies the component's background color. |
--calcite-flow-header-background-color | Specifies the background color of the component's header. |
--calcite-flow-footer-background-color | Specifies the background color of the component's footer. |
--calcite-flow-space | Specifies the padding of the component's "unnamed (default)" slot. |
--calcite-flow-header-content-space | Specifies the padding of the "header-content" slot. |
--calcite-flow-footer-space | Specifies the padding of the component's footer. |
--calcite-action-background-color | Specifies the background color of the component's closable , collapsible , and back calcite-action s. Applies to any slotted calcite-action s. |
--calcite-action-background-color-hover | Specifies the background color of the component's closable , collapsible , and back calcite-action s when hovered. Applies to any slotted calcite-action s. |
--calcite-action-background-color-pressed | Specifies the background color of the component's closable , collapsible , and back calcite-action s when pressed. Applies to any slotted calcite-action s. |
--calcite-action-text-color-hover | Specifies the text and icon color of the component's closable , collapsible , and back calcite-action s when hovered. Applies to any slotted calcite-action s. |
--calcite-action-text-color-pressed | Specifies the text and icon color of the component's closable , collapsible , and back calcite-action s when pressed. Applies to any slotted calcite-action s. |
--calcite-popover-border-color | Specifies the border color of the component's internally rendered calcite-popover , which is rendered within a calcite-action menu when slotted calcite-action s are present in the header-actions-end slot. Applies to any slotted calcite-popover s. |
--calcite-flow-header-action-background-color-hover | Specifies the background color of the component's calcite-action items in the flow item header when hovered. |
--calcite-flow-header-action-background-color-press | Specifies the background color of the component's calcite-action items in the flow item header when pressed. |
--calcite-flow-header-action-background-color | Specifies the background color of the component's calcite-action items in the flow item header. |
--calcite-flow-header-action-indicator-color | Specifies the color of the component's calcite-action items' indicator in the flow item header. |
--calcite-flow-header-action-text-color-press | Specifies the text color of the component's calcite-action items in the flow item header when pressed. |
--calcite-flow-header-action-text-color | Specifies the text color of the component's calcite-action items in the flow item header. |
Events
Name | Description | Behavior |
---|---|---|
calciteFlowItemBack | Fires when the back button is clicked. | |
calciteFlowItemClose | Fires when the close button is clicked. | |
calciteFlowItemScroll | Fires when the content is scrolled. | |
calciteFlowItemToggle | Fires when the collapse button is clicked. |
Methods
Name | Description | Signature |
---|---|---|
componentOnReady | Create a promise that resolves once component is fully loaded. | componentOnReady(): Promise<void> |
scrollContentTo | Scrolls the component's content to a specified set of coordinates. | scrollContentTo(options?: ScrollToOptions): Promise<void> |
setFocus | Sets focus on the component. | setFocus(): Promise<void> |