Tiles of any size on a grid, reordered by dragging while the others make room.
Tile Group follows the Start screen of Windows 8. Tiles of any size sit on a grid of cells. You drag a tile to a new place and the other tiles move out of its way.
ax-tile is an ax-surface, so the layers, shapes and tilt of Surface work on it. Tiles tilt when pressed and have a 2px border for the reveal light out of the box; any style of yours wins over both. In the examples below the cells are small, so a group fits next to this text.
Installation
npm install @ax-design/tile-groupand import it:
import { register } from '@ax-design/tile-group';
register();If you don't use a bundler, load the script instead:
<script src="https://unpkg.com/@ax-design/tile-group/build/main.js"></script>
<script>AxTileGroup.register();</script>
Apple
Tile sizes
The columns and rows attributes give the size of a tile in cells. A medium tile is two by two cells, which is also the size of any other element in the group that has no attributes.
Change the size of the first tile and the other tiles move. The order of the children is the order of the tiles: each tile takes the first free place after the one before it.
Try it
<ax-tile-group>
<ax-tile columns="4" rows="2" layers="fill reveal">Apple</ax-tile>
<ax-tile columns="2" rows="2" layers="fill reveal">Tea</ax-tile>
<ax-tile columns="1" rows="1" layers="fill reveal"></ax-tile>
</ax-tile-group>Cell size and gap
A cell is a small tile. Its size and the gap between cells are custom properties. The defaults are 70px and 10px; the group here uses much less.
The size of a tile is its cells plus the gaps between them, so a medium tile is two cells and one gap wide.
Try it
ax-tile-group {
--tile-cell-width: 24px;
--tile-cell-height: 24px;
--tile-gap: 4px;
}Rows and strips
A horizontal group has a fixed number of rows and grows to the right, like the Start screen. Fewer rows make a longer group.
The strip decides the order in which tiles fill the group. 4 fills columns four cells wide, row by row, so two medium tiles sit side by side. 1 fills column by column, top to bottom, as WinJS does; tiles jump around much more while you drag.
Try it
<ax-tile-group strip="4">...</ax-tile-group>ax-tile-group {
--tile-rows: 4;
}Dragging
The drag attribute turns dragging on. With press, a tile follows the pointer as soon as it moves. With hold, it lifts after a press of hold-delay milliseconds, and a quick move scrolls the page instead. With cross-slide, it is the touch gesture of Windows 8 for a group in a horizontal scroller (see Scroll). Press Escape during a drag to put everything back.
The group fires events on the tile. Cancel tiledragstart to keep a tile in place, or cancel tilereorder to put it back.
Try it
<ax-tile-group drag="press" hold-delay="500" contextmenu>
...
</ax-tile-group>group.addEventListener('tilereorder', (event) => {
console.log(event.detail.from, event.detail.to);
});
group.addEventListener('tilecontextmenu', (event) => {
// Show your own menu at event.detail.clientX, clientY.
});Vertical group
With orientation="vertical" the group has a fixed number of columns and grows downward, like the groups of the Windows 10 Start menu. Use --tile-columns instead of --tile-rows. Everything else, dragging included, works the same.
In a vertical group the default strip is 2: it fills rows one medium tile tall, left to right.
Try it
<ax-tile-group orientation="vertical" drag="press">...</ax-tile-group>ax-tile-group {
--tile-columns: 6;
}Reference
columns attribute
<integer>, default 2
On a tile: its width in cells. Change it and the other tiles move.
rows attribute
<integer>, default 2
On a tile: its height in cells.
drag attribute
press | hold | cross-slide | none, default none
On the group: how tiles are dragged. press follows the pointer at once, hold lifts after hold-delay, cross-slide is the Windows 8 touch gesture for a horizontal scroller.
hold-delay attribute
<number>, default 500
Milliseconds of a press before it counts as held.
contextmenu attribute
boolean
Fire tilecontextmenu on a right click, the context menu key, and a touch or pen press held for hold-delay milliseconds and released without moving. The group shows no menu.
orientation attribute
horizontal | vertical, default horizontal
horizontal: a fixed number of rows, the group grows to the right. vertical: a fixed number of columns, the group grows downward.
strip attribute
<integer>, default 4 (vertical: 2)
The order in which tiles fill the group. 4 fills columns four cells wide row by row, 1 fills column by column (WinJS). In a vertical group strips are rows.
grouping attribute
string
Reserved for dragging tiles onto each other to form groups. It fires no events yet.
--tile-cell-width, --tile-cell-height property
<length>, default 70px
The size of a cell, a small tile. A medium tile is two by two cells.
--tile-gap property
<length>, default 10px
The space between cells.
--tile-rows property
<number> | auto, default 6
The rows of cells in a horizontal group. With auto, the group takes as many rows as its height holds.
--tile-columns property
<number> | auto, default 6
The columns of cells in a vertical group. With auto, the group takes as many columns as its width holds.
tiledragstart event
CustomEvent
A drag starts. Fired on the tile, bubbles. Cancel it to keep the tile in place.
tilereorder event
CustomEvent<{ from, to }>
A tile was dropped at a new place. Cancel it to put the tile back.
tiledragend event
CustomEvent<{ from, to }>
The drag is over. from and to are equal when nothing moved.
tilecontextmenu event
CustomEvent<{ clientX, clientY, pointerType }>
pointerType is mouse, touch, pen or keyboard.
refresh() method
() => void
Reads the custom properties again, for changes nothing reports.