Flow Item | Calcite Design System

Child component of Flow

Overview

Sample

API reference

Properties

Property	Attribute	Description	Type	Default
beforeBack		Specifies a function to run before the component is removed from its parent `calcite-flow`.	`(() => Promise<void>) \| undefined`
beforeClose		Specifies 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`, hides the component.	`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	Specifies a the component's description.	`string`
disabled	disabled	When `true`, prevents interaction and decreases the component's opacity.	`boolean`	`false`
heading	heading	Specifies the component's heading text.	`string`
headingLevel	heading-level	Specifies the heading level number of the component's `heading` for proper document structure, without affecting visual styling.	`HeadingLevel`
icon	icon	Specifies an icon to display.	`IconName`
iconFlipRtl	icon-flip-rtl	When `true` and the element direction is right-to-left (`"rtl"`), flips the component`s` icon`.	`boolean`	`false`
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		Overrides individual strings used by the component.	`Record<string, unknown> \| undefined`
overlayPositioning	overlay-positioning	Specifies the type of positioning to use for overlaid content, where: `"absolute"` works for most cases - positioning the component inside of overflowing parent containers, which affects the container's layout, and `"fixed"` is used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`.	`OverlayPositioning`	`"absolute"`
scale	scale	Specifies the size of the component.	`Scale`	`"m"`
selected	selected	When `true`, the component is displayed within a parent `calcite-flow`.	`boolean`	`false`
topLayerDisabled	top-layer-disabled	When `true` and the component is `open`, disables top layer placement. Only set this if you need complex z-index control or if top layer placement causes conflicts with third-party components.	`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-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	deprecated Use `--calcite-flow-footer-space` instead. Specifies the padding of the component's footer.
--calcite-flow-item-header-border-block-end	deprecated Use `--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-icon-color	Specifies the color of the component's `icon`.
--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 any `calcite-action`s in the component's header when hovered.
--calcite-flow-header-action-background-color-press	Specifies the background color of any `calcite-action`s in the component's header when pressed.
--calcite-flow-header-action-background-color	Specifies the background color of any `calcite-action`s in the component's header.
--calcite-flow-header-action-indicator-color	Specifies the color of any `calcite-action`s indicator in the component's header.
--calcite-flow-header-action-text-color-press	Specifies the text color of any `calcite-action`s in the component's header when pressed.
--calcite-flow-header-action-text-color	Specifies the text color of any `calcite-action`s in the component's header.

Events

Name	Description	Behavior
calciteFlowItemBack	Fires when the component's back button is clicked.	bubblescomposedcancelable
calciteFlowItemClose	Fires when the component's close button is clicked.	bubblescomposed
calciteFlowItemCollapse	Fires when the component's content area is collapsed.	bubblescomposed
calciteFlowItemExpand	Fires when the component's content area is expanded.	bubblescomposed
calciteFlowItemScroll	Fires when the component's content is scrolled.	bubblescomposed
calciteFlowItemToggle	Fires when the component's collapse button is clicked.	bubblescomposed

Methods

Name	Description	Signature
componentOnReady	Create a promise that resolves once component is fully loaded.	`componentOnReady(): Promise<this>`
scrollContentTo	Scrolls the component's content to a specified set of coordinates.	`scrollContentTo(options?: ScrollToOptions): Promise<void>`
setFocus	Sets focus on the component.	`setFocus(options?: FocusOptions): Promise<void>`