Multi-step
Tour with different target selectors — CSS id, class, and data attributes.
Borda supports multiple ways to target step elements: CSS selectors, class names, and data attributes. This example demonstrates all three approaches in a single tour.
Code
main.ts
import { useBorda, ComponentPlacement } from '@retoo/borda';
import '@retoo/borda/styles';
const borda = useBorda();
const instance = await borda.mount({
steps: [
{
target: '#step-1',
title: 'Target by id',
description: 'Pass a CSS selector string.',
placement: ComponentPlacement.BOTTOM_START,
},
{
target: '.card-step',
title: 'Target by class',
description: 'Pass a class name as a CSS selector.',
placement: ComponentPlacement.TOP_START,
},
{
target: '[data-step="3"]',
title: 'Target by data attribute',
description: 'Pass a data attribute selector.',
placement: ComponentPlacement.MIDDLE_START,
},
],
scroll: {
block: 'center',
duration: 400,
},
});