Tile Group can be used to organize multiple Tile components within a layout.
Overview
Tile Group supports workflows and patterns using more than one Tile. Tiles within the Tile Group are navigable via keyboard are grouped visually. Through the use of opt-in selection modes, Tile Group can facilitate interactive workflows with Tiles.
Sample
Usage
- Selection workflows
- Filtering patterns
- Primary navigational actions
- Representing a known, small quantity of items
Best Practices
While similar to the Card Group, a Tile Group has distinct capabilities and intended use cases.
Tile Groups most often contain a known quantity of Tiles, whereas Card Groups can be comprised of a variable quantity of Cards.
Accessibility
Keyboard navigation
| Key | Function |
|---|---|
Tab | When a calcite-tile is focused, moves focus to next calcite-tile If the current focus is the last calcite-tile, focus will leave the component. |
Tab and Shift | When a calcite-tile is focused, moves focus to the previous calcite-tile. If the current focus is the first calcite-tile, focus will leave the component. |
Arrow left | When a calcite-tile is focused, moves focus to the previous calcite-tile. If the current focus is the first calcite-tile, focus will return to the last calcite-tile. |
Arrow right | When a calcite-tile is focused, moves focus to the next calcite-tile. If the current focus is the last calcite-tile, focus will return to the first calcite-tile. |
Space | When a calcite-tile is focused, when selection is not "none", selects the focused calcite-tile. |
Enter | When a calcite-tile is focused, when selection is not "none", selects the focused calcite-tile. |
Home | When a calcite-tile is focused, moves focus to the component's first calcite-tile. |
End | When a calcite-tile is focused, moves focus to the component's last calcite-tile. |
API reference
Properties
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
| alignment | alignment | Specifies the alignment of each calcite-tile's content. | Exclude<Alignment, "end"> | "start" |
| disabled | disabled | When true, interaction is prevented and the component is displayed with lower opacity. | boolean | false |
| label | label | Specifies an accessible label for the component. | string | |
| layout | layout | Defines the layout of the component.
Use "horizontal" for rows, and "vertical" for a single column. | Extract<Layout, "horizontal" | "vertical"> | "horizontal" |
| scale | scale | Specifies the component's size. | Scale | "m" |
| selectedItems | Specifies the component's selected items. | Tile[] | ||
| selectionAppearance | selection-appearance | Specifies the selection appearance, where:
- "icon" (displays a checkmark or dot),
- "highlight" (changes the background color), and
- "border" (displays a border). [Deprecated] The "border" value is deprecated in v5.0.0, removal target v6.0.0 - Use "highlight" instead. | Extract<"icon" | "highlight" | "border", SelectionAppearance> | "icon" |
| selectionMode | selection-mode | Specifies the selection mode, where:
- "multiple" (allows any number of selected items),
- "single" (allows only one selected item),
- "single-persist" (allows only one selected item and prevents de-selection), and
- "none" (allows no selected items). | Extract<"multiple" | "none" | "single" | "single-persist", SelectionMode> | "none" |
Slots
| Name | Description |
|---|---|
| default (unnamed) | A slot for adding calcite-tile elements. |
Events
| Name | Description | Behavior |
|---|---|---|
| calciteTileGroupSelect | Fires when the component's selection changes. |
Methods
| Name | Description | Signature |
|---|---|---|
| componentOnReady | Create a promise that resolves once component is fully loaded. | componentOnReady(): Promise<this> |