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.
Usage
- Selection workflows
- Filtering patterns
- Primary navigational actions
- Representing a known, small quantity of items
Sample
<calcite-tile-group>
<calcite-tile icon="rangefinder" heading="Field operator"
description="This role allows users in the field to create new Reports, and view and edit existing Reports and Attachments">
</calcite-tile>
<calcite-tile icon="knowledge-graph-dashboard" heading="Office coordinator"
description="This role allows teammates on-base to view, duplicate, and create meaningful insights from Reports">
</calcite-tile>
</calcite-tile-group>
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. | "center" | "start" | "start" |
disabled | disabled | When true , interaction is prevented and the component is displayed with lower opacity. | boolean | false |
label | label | Accessible name for the component. | string | |
layout | layout | Defines the layout of the component.
Use "horizontal" for rows, and "vertical" for a single column. | "horizontal" | "vertical" | "horizontal" |
scale | scale | Specifies the size of the component. | "l" | "m" | "s" | "m" |
selectedItems | Specifies the component's selected items. | Array<HTMLCalciteTileElement> | ||
selectionAppearance | selection-appearance | Specifies the selection appearance, where:
- "icon" (displays a checkmark or dot), or
- "border" (displays a border). | "border" | "icon" | "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),
- "none" (allows no selected items). | "multiple" | "none" | "single" | "single-persist" | "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<void> |