TileGroup

Usage

import { TileGroup } from 'nr1'

Examples

Props

childrenrequirednode

Tiles to display.

classNamestring

Appends class names to the component.

Should be used only for positioning and spacing purposes.

defaultValuestring|number|string[]|number[]

DEFAULT

[]

The initial tile that should be checked.

gapTypeenum

DEFAULT

TileGroup.GAP_TYPE.MEDIUM

Size of the gap between tiles.

<One ofTileGroup.GAP_TYPE.MEDIUM,
TileGroup.GAP_TYPE.SMALL,
>

onChangefunction

Function called when a tile is checked or unchecked.

function (event: React.MouseEvent, Event source of the callback.
tileValue: any, The value of the tile.
checked: boolean The new checked state.
)

selectionTypeenum

DEFAULT

TileGroup.SELECTION_TYPE.NONE

<One ofTileGroup.SELECTION_TYPE.MULTIPLE,
TileGroup.SELECTION_TYPE.NONE,
TileGroup.SELECTION_TYPE.SINGLE,
>

spacingTypeenum[]

Spacing property. Spacing is defined as a tuple of zero to four values, which follow the same conventions as CSS properties like margin or padding. To omit a value, use SPACING_TYPE.OMIT.

<Array of<One ofTileGroup.SPACING_TYPE.EXTRA_LARGE,
TileGroup.SPACING_TYPE.LARGE,
TileGroup.SPACING_TYPE.MEDIUM,
TileGroup.SPACING_TYPE.NONE,
TileGroup.SPACING_TYPE.OMIT,
TileGroup.SPACING_TYPE.SMALL,
>
>

styleobject

Inline style for custom styling.

Should be used only for positioning and spacing purposes.

testIdstring

Adds a data-test-id attribute. Use it to target the component in unit and E2E tests.

For a test id to be valid, prefix it with your nerdpack id, followed up by a dot.

For example, my-nerdpack.some-element.

Note: You might not see data-test-id attributes as they are removed from the DOM, to debug them pass a e2e-test query parameter to the URL.

tileWidthstring|number

Represents the width of the columns. Columns always have the same width. It can be one of the following types:

'YYpx': where YY is a number, represents the minimum width of the columns in pixels. When the tiles don't fit in the available width they will be wrapped in a new row.
'YYfr': where YY is a number, it represents a fraction of the available width in a 12 fraction grid; for instance, a tile group with the tile width of '6fr', will always render two columns (12fr/6fr = 2) where each tile will occupy 50% of the available width.

valuestring|number|string[]|number[]

The tile or tiles with the matching value will be checked. Can be a single value or an array of values when the selection type is multiple.

If defined, it turns the component into a controlled component.