• EnglishEspañol日本語한국어Português
  • Log inStart now

TileGroup

Usage

import { TileGroup } from 'nr1'

Examples

Basic tile group

<TileGroup>
<Tile onClick={console.log}>Tile 1</Tile>
<Tile onClick={console.log}>Tile 2</Tile>
<Tile onClick={console.log}>Tile 3</Tile>
</TileGroup>

Tile group with small gap type

<TileGroup gapType={TileGroup.GAP_TYPE.SMALL}>
<Tile onClick={console.log}>Tile 1</Tile>
<Tile onClick={console.log}>Tile 2</Tile>
<Tile onClick={console.log}>Tile 3</Tile>
</TileGroup>

Tile group with 3 columns

<TileGroup tileWidth="4fr">
{Array.from({ length: 12 }).map((_, index) => (
<Tile onClick={console.log}>Tile {index + 1}</Tile>
))}
</TileGroup>

Tile group with custom tile width

<TileGroup tileWidth={120}>
{Array.from({ length: 12 }).map((_, index) => (
<Tile onClick={console.log}>Tile {index + 1}</Tile>
))}
</TileGroup>

Selectable tiles

<TileGroup selectionType={TileGroup.SELECTION_TYPE.SINGLE} tileWidth={120}>
{Array.from({ length: 12 }).map((_, index) => (
<Tile onClick={console.log}>Tile {index + 1}</Tile>
))}
</TileGroup>

Selectable tiles with default tile checked

<TileGroup
defaultValue="tile-0"
selectionType={TileGroup.SELECTION_TYPE.SINGLE}
tileWidth={120}
>
{Array.from({ length: 12 }).map((_, index) => (
<Tile value={`tile-${index}`} onClick={console.log}>
Tile {index + 1}
</Tile>
))}
</TileGroup>

Controlled selectable tiles

class MyComponent extends React.PureComponent {
constructor() {
super(...arguments);
this.state = {
checkedTile: 'tile-0',
};
this._onChange = this._onChange.bind(this);
}
_onChange(evt, tileValue) {
this.setState({ checkedTile: tileValue });
}
render() {
const { checkedTile } = this.state;
return (
<TileGroup
value={checkedTile}
onChange={this._onChange}
tileWidth={120}
selectionType={TileGroup.SELECTION_TYPE.SINGLE}
>
{Array.from({ length: 12 }).map((_, index) => (
<Tile
sizeType={Tile.SIZE_TYPE.SMALL}
value={`tile-${index}`}
key={index}
onClick={console.log}
>
Tile {index + 1}
</Tile>
))}
</TileGroup>
);
}
}

Multi-select tiles

<TileGroup selectionType={TileGroup.SELECTION_TYPE.MULTIPLE} tileWidth={120}>
{Array.from({ length: 12 }).map((_, index) => (
<Tile onClick={console.log}>Tile {index + 1}</Tile>
))}
</TileGroup>

Controlled multi-select tiles

class MyComponent extends React.PureComponent {
constructor() {
super(...arguments);
this.state = {
checkedTiles: [],
};
this._onChange = this._onChange.bind(this);
}
_onChange(evt, tileValue, checked) {
this.setState((state) => {
return {
checkedTiles: checked
? [...state.checkedTiles, tileValue]
: state.checkedTiles.filter((value) => value !== tileValue),
};
});
}
render() {
const { checkedTiles } = this.state;
return (
<TileGroup
value={checkedTiles}
onChange={this._onChange}
tileWidth={120}
selectionType={TileGroup.SELECTION_TYPE.MULTIPLE}
>
{Array.from({ length: 12 }).map((_, index) => (
<Tile
sizeType={Tile.SIZE_TYPE.SMALL}
value={`tile-${index}`}
key={index}
onClick={console.log}
>
Tile {index + 1}
</Tile>
))}
</TileGroup>
);
}
}

Props

children

REQUIRED
node

Tiles to display.

className

string

Appends class names to the component.Should be used only for positioning and spacing purposes.

defaultValue

string|number|string[]|number[]

The initial tile that should be checked.

gapType

enum

Size of the gap between tiles.<One of

TileGroup.GAP_TYPE.MEDIUMTileGroup.GAP_TYPE.SMALL
>

onChange

function

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.

)

selectionType

enum

<One of

TileGroup.SELECTION_TYPE.MULTIPLE, TileGroup.SELECTION_TYPE.NONE, TileGroup.SELECTION_TYPE.SINGLE,

>

spacingType

enum[]

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,

>
>

style

object

Inline style for custom styling.Should be used only for positioning and spacing purposes.

testId

string

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.

tileWidth

string|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.

value

string|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.

Copyright © 2024 New Relic Inc.

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.