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 ofTileGroup.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 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,
>
>

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.

Usage.css-21sua1{background:none;border:none;width:0;padding:0;}

Examples

Basic tile group

Tile group with small gap type

Tile group with 3 columns

Tile group with custom tile width

Selectable tiles

Selectable tiles with default tile checked

Controlled selectable tiles

Multi-select tiles

Controlled multi-select tiles

Props

REQUIRED

node

string

string|number|string[]|number[]

enum

function

enum

enum[]

object

string

string|number

string|number|string[]|number[]

Usage