Tile Group

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

3 samples
1
2
3
4
5
6
7
8
<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>
v3.0.3

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

KeyFunction
TabWhen 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 ShiftWhen 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 leftWhen 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 rightWhen 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.
SpaceWhen a calcite-tile is focused, when selectionMode is not "none", selects the focused calcite-tile.
EnterWhen a calcite-tile is focused, when selectionMode is not "none", selects the focused calcite-tile.
HomeWhen a calcite-tile is focused, moves focus to the component's first calcite-tile.
EndWhen a calcite-tile is focused, moves focus to the component's last calcite-tile.

API reference

Properties

PropertyAttributeDescriptionTypeDefault
alignmentalignmentSpecifies the alignment of each calcite-tile's content."center" | "start""start"
disableddisabledWhen true, interaction is prevented and the component is displayed with lower opacity.booleanfalse
labelrequiredlabelAccessible name for the component.string
layoutlayoutDefines the layout of the component. Use "horizontal" for rows, and "vertical" for a single column."horizontal" | "vertical""horizontal"
scalescaleSpecifies the size of the component."l" | "m" | "s""m"
selectedItemsread-onlySpecifies the component's selected items.Array<HTMLCalciteTileElement>
selectionAppearanceselection-appearanceSpecifies the selection appearance, where: - "icon" (displays a checkmark or dot), or - "border" (displays a border)."border" | "icon""icon"
selectionModeselection-modeSpecifies 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

NameDescription
default (unnamed)A slot for adding calcite-tile elements.

Events

NameDescriptionBehavior
calciteTileGroupSelectFires when the component's selection changes.bubblescomposed

Methods

NameDescriptionSignature
componentOnReadyCreate a promise that resolves once component is fully loaded.componentOnReady(): Promise<void>

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.

You can no longer sign into this site. Go to your ArcGIS portal or the ArcGIS Location Platform dashboard to perform management tasks.

Your ArcGIS portal

Create, manage, and access API keys and OAuth 2.0 developer credentials, hosted layers, and data services.

Your ArcGIS Location Platform dashboard

Manage billing, monitor service usage, and access additional resources.

Learn more about these changes in the What's new in Esri Developers June 2024 blog post.

Close