Usage
import { Tile } from 'nr1'Examples
Props
Use it to describe better the context of the component's action for users on screen readers.
Content to render inside the component.
Appends class names to the component.
Should be used only for positioning and spacing purposes.
When true, the tile is not available for interaction.
Callback fired any time the user clicks on the tile.
function (event: React.MouseEvent )TileSpecifies the desired size of the tile (smaller sizes have less internal padding).
<One ofTile.SIZE_TYPE.MEDIUM,Tile.SIZE_TYPE.SMALL,>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 ofTile.SPACING_TYPE.EXTRA_LARGE,Tile.SPACING_TYPE.LARGE,Tile.SPACING_TYPE.MEDIUM,Tile.SPACING_TYPE.NONE,Tile.SPACING_TYPE.OMIT,Tile.SPACING_TYPE.SMALL,>>Inline style for custom styling.
Should be used only for positioning and spacing purposes.
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.
Location object or url string to link to.
shape
TileType can be:
-
Plain — use when tiles don't need to be emphasized.
-
Outline — the default tile type.
-
Solid — use when tiles needs to contrast against a white background.
<One ofTile.TYPE.OUTLINE,Tile.TYPE.PLAIN,Tile.TYPE.SOLID,>Unique identifier of the tile. Used by the <TileGroup> to identify
checked tiles.