Tiles
The Tiles component is used to lay out elements as equally-sized elements,
optionally wrapping on multiple lines as well as a stack when space is limited.
If you have a direct child of Tiles
that you don’t want to stretch, wrap that
child in a View
component.
import {extend, View, Tiles} from '@shopify/post-purchase-ui-extensions';
extend('Checkout::PostPurchase::Render', (root) => {
const tiles = root.createComponent(Tiles, undefined, [
root.createComponent(View, {border: 'base', padding: 'base'}, 'View'),
root.createComponent(View, {border: 'base', padding: 'base'}, 'View'),
root.createComponent(View, {border: 'base', padding: 'base'}, 'View'),
]);
root.appendChild(tiles);
});
import {render, Tiles, View} from '@shopify/post-purchase-ui-extensions-react';
render('Checkout::PostPurchase::Render', () => <App />);
function App() {
return (
<Tiles>
<View border="base" padding="base">
View
</View>
<View border="base" padding="base">
View
</View>
<View border="base" padding="base">
View
</View>
</Tiles>
);
}
import {extend, View, Tiles} from '@shopify/post-purchase-ui-extensions';
extend('Checkout::PostPurchase::Render', (root) => {
const tiles = root.createComponent(Tiles, undefined, [
root.createComponent(View, {border: 'base', padding: 'base'}, 'View'),
root.createComponent(View, {border: 'base', padding: 'base'}, 'View'),
root.createComponent(View, {border: 'base', padding: 'base'}, 'View'),
]);
root.appendChild(tiles);
});
import {render, Tiles, View} from '@shopify/post-purchase-ui-extensions-react';
render('Checkout::PostPurchase::Render', () => <App />);
function App() {
return (
<Tiles>
<View border="base" padding="base">
View
</View>
<View border="base" padding="base">
View
</View>
<View border="base" padding="base">
View
</View>
</Tiles>
);
}
Anchor to PropsProps
optional = ?
Name | Type | Description |
---|---|---|
maxPerLine? | number | Number of tiles per line. |
breakAt? | number | Width of the component when the tiles stack on the cross-axis. Each tile will then take all the available space. It accepts a number in pixel. If not specified, the tiles will never stack and each of them will progressively shrink when the screen is resized. |
alignment? | "leading" | "center" | "trailing" | Position tiles along the cross axis |
spacing? | "xtight" | "tight" | "loose" | "xloose" | Adjust spacing between tiles |
Was this page helpful?