Responsive
Different tour configurations at different viewport widths.
Apply different component overrides at different breakpoints. Resize the browser or open DevTools device toolbar to see the tour adapt.
Code
main.ts
import { useBorda, ComponentPlacement } from '@retoo/borda';
import '@retoo/borda/styles';
const borda = useBorda();
await borda.mount({
steps: [
{
target: '#element',
title: 'Responsive',
description: 'This tour adapts to your screen size.',
placement: ComponentPlacement.BOTTOM_START,
},
],
responsive: {
480: {
tourButtons: { skip: false },
tourTooltip: { padding: 8 },
tourProgress: false,
},
768: {
tourTooltip: { padding: 16 },
},
},
});