Tile

A tile with one action: it shows the press before the action runs, and it can launch its app with the flip of Windows 8.

A tile is the box of the Start screen of Windows 8. It has one action, a link or a button with slot="action". The action covers the whole tile and its text is the name of the tile. Anything else in the tile tilts with it.

A tile with an action is pressed: it tilts and lights up, and the action runs once that press has been seen. A tile with --ax-tile-launch set to flip launches its app instead, with the splash of the app, as Windows 8 does. The Start screen of the lab (/lab/start/) puts tiles and groups together.

ax-tile is an ax-surface from @ax-design/surface, so the layers, shapes and tilt of Surface work on it. Put the tiles in an ax-tile-group from @ax-design/tile-group to lay them out and drag them.

npm install @ax-design/tile

import { register } from '@ax-design/tile';
register();

<script src="https://unpkg.com/@ax-design/tile/build/main.js"></script>
<script>AxTile.register();</script>

Press the tile. It tilts and lights up, and the button runs its action after the press has been seen. A link works the same way: it navigates once the press is over, so it does not leave under the finger.

The longest wait is capped by --ax-tile-activation-delay-max. It is none by default, which means no cap; here it is set to a value you can change.

<ax-tile layers="fill reveal">
  <a slot="action" href="/mail">Mail</a>
</ax-tile>

.tile {
  --ax-tile-activation-delay-max: 400ms;
}

With --ax-tile-launch set to flip, a click launches the app: the tile turns edge-on and grows to the whole page, and the splash of the app turns to face the viewer. The splash is the content of the splash template, on the color of the tile or the color you set.

This example waits 1.2 seconds, as an app does while it loads, and then the splash goes. Click again once it is gone. The action is a button here, so nothing navigates away.

<ax-tile class="app" layers="fill reveal">
  <a slot="action" href="/mail">Mail</a>
  <template slot="splash"><img src="mail-logo.svg" alt="" width="96"></template>
</ax-tile>

.app {
  --ax-tile-launch: flip;
  --ax-tile-splash-color: #0078d7;
  --ax-tile-splash-hold: 500ms;
  --ax-tile-splash-fade: 167ms;
  --ax-tile-splash-timeout: 5000ms;
}

tile.addEventListener('tilelaunchactivate', (event) => {
  // A promise of your app, settled when its first screen is ready.
  event.detail.hold(appReady);
});

A launch sends the click of the link as a real click, so the router of the page handles it as it handles any link. The splash can wait for the page the link leads to: the tile holds it with hold(promise) from the tilelaunchstart or tilelaunchactivate event, and the promise settles when the page is ready.

tile.launch(ready) runs the same launch from code, whatever --ax-tile-launch says. The first block is that call. The second is a sketch for SvelteKit: it is not tested with the framework, so check it against the version you use. The README has the same sketches for Next.js, React Router and Vue Router.

const ready = fetch('/api/mail/summary').then((r) => r.json());
tile.launch(ready);

import { afterNavigate, preloadData } from '$app/navigation';

let arrived = null;
afterNavigate(() => arrived && arrived());

document.addEventListener('tilelaunchstart', (event) => {
  const { url, hold } = event.detail;
  if (!url) return;
  hold(new Promise((resolve) => (arrived = resolve)));
  preloadData(url);
});

Mail

Accessibility

Keyboard: Tab to the action. Enter presses a link or a button, and Space presses a button; Space does not activate a link, it scrolls the page. The press comes from the center of the tile, and the action runs after the ripple.

Screen readers: The tile sets no role. The link or the button of the action gives the role and the name. With label="hidden" the text is not shown, and the name stays.

High contrast (forced colors): The tile is a surface, so its fill and border follow the forced colors rules of Surface.

Reduced motion: The tilt takes its end state at once. A reveal ripple still plays, and the click waits for it. A flip launch is not played.

Reduced transparency: With the fallback the reveal light is not drawn, and the click runs at once, as it does without any feedback. Choose Fallback in the switch to see it live.

More contrast: Nothing changes by itself. The tile follows the prefers-contrast rules of Surface.

Try it: in Chrome or Edge, open DevTools, then Rendering, and emulate the CSS media features prefers-reduced-motion, forced-colors or prefers-reduced-transparency. Or turn on the setting of your system: Show animations, Contrast themes and Transparency effects on Windows; Reduce motion, Increase contrast and Reduce transparency on macOS.

import { setAlwaysUseFallback } from '@ax-design/surface';

// Draw every effect with its solid fallback, as when transparency effects are off.
setAlwaysUseFallback(true);

Reference