Tour
Guides people through dynamic target elements with a focus-managed dialog and highlighted region.
Live TypeScript example
Try the component here, then use the source below in your application.
- JavaScript
- 4.2 KiB
- Component CSS
- 0.9 KiB
- Shared theme CSS
- 3.8 KiBonce per application
How sizes are measured
The JavaScript figure includes this component’s required helpers. CSS includes its styling dependencies. Each entry is bundled separately for ES2022, minified, then compressed with gzip level 9. Your bundler may share helpers across components. Images, fonts, examples and application code are excluded.
Before compression: JavaScript 10.6 KiB; component CSS 2.5 KiB. These figures describe browser assets, not the complete package download.
View all component measurements →Interact with the Tour example. The code below shows its actual inputs and callbacks.
import '@blukavantui/web/theme.css'
import {createTour} from '@blukavantui/web/tour';
import '@blukavantui/web/tour.css';
export function mount(host: HTMLElement) {
const start = document.createElement("button");
start.textContent = "Start tour";
start.className = "blu-common-button blu-common-button--primary";
const target = document.createElement("button");
target.id = "project-" + crypto.randomUUID();
target.textContent = "Create project";
target.className = "blu-common-button";
host.append(start, target);
const tour = createTour(host, { Steps: [
{ Key: "create", Title: "Create your project", Description: "Choose a name and invite your team.", TargetId: target.id },
{ Key: "finish", Title: "Ready to work", Description: "Steps without a target are centered." },
] }, { Completed: () => { host.dataset.completed = "true"; } });
start.onclick = () => tour.update({ IsOpen: true, CurrentStep: 1 });
return { destroy() { tour.destroy(); start.remove(); target.remove(); } };
}
const instance = mount(document.getElementById('example')!)
// When this page or framework component is removed:
// instance.destroy()
Install the library and add the host element
npm install https://blukavantui.blutekmedia.com/downloads/blukavantui-web-0.6.2.tgz<div id="example"></div>This example uses the downloadable @blukavantui/web package. Your application handles persistence and authentication through its typed callbacks. The starter ZIP includes this same example.
createTour
Pass options as the second argument and callbacks in the third argument. Keep the returned instance to update options or dispose it when its view is removed.
import { createTour } from '@blukavantui/web/tour';
import '@blukavantui/web/tour.css';Load @blukavantui/web/theme.css once in your app shell.createTour(host: HTMLElement, options: T.TourOptions, events?: T.TourEvents)Reference for @blukavantui/web 0.6.2. Required and optional follow the shipped TypeScript declarations; optional does not imply a particular default. Pass typed arrays and objects directly where shown.
Options
6| Name | Type / requirement | Usage |
|---|---|---|
Steps | BluTourStep[]Required | Ordered tour steps. Use actual widget Id values for TargetId. |
IsOpen | booleanOptional | Controlled visibility. Assign OnOpenChanged.IsOpen back. |
CurrentStep | numberOptional | Controlled one-based step. Assign OnStepChanged.CurrentStep back. |
FinishLabel | stringOptional | Caption on the final step action. |
SkipLabel | stringOptional | Caption for ending before completion. |
ExtendedClass | stringOptional | Additional CSS classes on the component root. |
Callbacks
4| Name | Type / requirement | Usage |
|---|---|---|
OpenChanged | (isOpen: boolean, reason: string) => unknownOptional | |
StepChanged | (currentStep: number, key: string) => unknownOptional | |
Completed | (key: string) => unknownOptional | |
Error | (message: string) => unknownOptional |
Instance methods & properties
3| Name | Signature / type | Usage |
|---|---|---|
element | HTMLElement | Root owned by this instance. Dispose before removing its host. |
update | (patch: Partial<T.TourOptions>) => void | Apply a partial options update to this instance. |
destroy | () => void | Dispose the instance and its listeners when the view is removed. |
Related data types
Expand a type for its fields and allowed values.
BluTourStep
interface BluTourStep {
/** Unique step identifier. */
Key: string;
/** Step heading. */
Title: string;
/** Step explanation. */
Description?: string;
/** Actual target DOM id. Empty or unavailable targets show a centered step. */
TargetId?: string;
/** Preferred placement: Bottom, Top, Left or Right; clamped to viewport. */
Placement?: string;
}Use these inputs, events, actions and structures in Service Studio. Names and data bindings are specific to the native Blocks.
Part of the full commercial BluKavantUI for OutSystems edition. View OutSystems editions →
Open OutSystems showcase ↗- Web runtime
- Supported
- TypeScript
- Supported
- OutSystems
- Supported
Statuses describe the component’s rendered code and interactions. Supply accessible content and follow the component guidance when integrating it.
Accessibility guidance →Purpose and use
Guides people through dynamic target elements with a focus-managed dialog and highlighted region.
Keyboard design guidance
Tab stays inside the step dialog. Back and Next navigate; Escape skips and restores focus. Missing targets show a centered step.
See the support status above for review coverage and any limitations.
In your application
Provide useful labels, preserve visible focus, and test the component with your actual content. Use text alongside status colors and check contrast in each state.
Events0No events yet.
Interact with an example to see its events.