Visibility
Show and hide the widget with optional CSS transitions.
Visibility controls whether the widget is shown or hidden. It supports an initial hidden state and CSS-animated transitions. The widget can be toggled at runtime through the visibility API.
Config
| Property | Type | Default | Description |
|---|---|---|---|
isHidden | boolean | false | Start the widget in a hidden state |
isAnimated | boolean | false | Enable CSS animations for show/hide transitions |
await borda.mount({
steps: [
{
target: '#element',
title: 'Title',
description: 'Description',
placement: 'bottom-center',
},
],
visibility: {
isHidden: true,
isAnimated: true,
},
});
When isHidden is true, the widget mounts but remains invisible until show() is called.
Runtime API
// Show the widget
instance.visibility.show();
// Hide the widget
instance.visibility.hide();
// Check current state
instance.visibility.isHidden;
Events
Visibility changes emit events through the event bus:
import { BordaEvent } from '@retoo/borda';
instance.api.events.on(BordaEvent.ON_VISIBILITY_SHOW, () => {
console.log('Widget is now visible');
});
instance.api.events.on(BordaEvent.ON_VISIBILITY_HIDE, () => {
console.log('Widget is now hidden');
});