Tile
The interactivity of a tile depends on whether it's displaying contextual information or acting as an entry point for a more detailed interaction.
import { Tile, TileStack } from '@balance-web/tile';Usage
The Tile component can be used by itself or inside a TileStack. Content is passed to the tile as children.
The tile component does not have an opinion on how text is rendered, it is the consumers responsibility.
A tile will fill the container it's in so it's the consumer's responsibility to allocate containers with approriate widths and heights.
Interactivity
By default tiles are not interactive. The onClick or href props can be used to make them behave interactively.
InteractiveText
When a tile is interactive, the entire tile surface responsds to hover/active events. In addition to that, the Tile.InteractiveText primitive can be used inside the tile
to responsd to these events.
<Tile>
<Tile.InteractiveText>Interactive text</Tile.InteractiveText>
</Tile>For convenience, the InteractiveText component takes all the props a normal Text component does. See below examples on how to compose a tile using InteractiveText.
onClick
The onClick prop makes the entire tile surface a clickable target.
href
The href prop makes the entire tile surface a clickable target.
A link tile supports all the usual anchor props. For example the target prop:
A tile can either be clickable or be a link, not both.
Density
The density of a tile is defined as the white space between the border and the content area. It's set through the density prop and supports three values: compact, regular, spacious.
The default density of a tile is regular.
Tile stack
A group of related tiles can be renderred together inside a TileStack.
Interactive tiles can also be used in a TileStack.