• /
  • Log in
  • Free account

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 of
TileGroup.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 of
TileGroup.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 of
TileGroup.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[]
Create issueEdit page
Copyright © 2021 New Relic Inc.