Microguide
The Microguide supports the onboarding of new users, as well as the
introduction of new features to existing users. It can have one or multiple
steps, each of which has three optional slots: Title, Visual and Content.
Import
import { Microguide } from '@dynatrace/strato-components-preview/overlays';
Use cases
There is no designated trigger for the Microguide. The guide can be triggered
using a button, but as the state is entirely controlled by you, it is also
possible to open it e.g. on page load. To handle the component's state, provide
a value for the open prop along with an onClose callback. The onClose
callback also includes the current step and whether the Microguide was finished.
To define a single step, wrap the desired content with the Step slot. Each
step can have a Title, a Visual and a Content slot, all of which are
optional.
Define multiple steps
Use multiple Step slots in the desired order to create multiple pages for the
Microguide.
To react to the user navigating between steps, use the onStepChange callback,
which includes the step that the user is navigating to.
Add a visual
Use the Visual slot to add an image or a video. The recommended asset size is
400 x 250px (8:5 aspect ratio). If the provided visual has a different aspect
ratio, it is scaled proportionally to fit the container.
Add content
The Content slot can be used to provide detailed information for a step, such
as text or links to more information. If the microguide exceeds the screen
height, the content becomes scrollable.
Change the placement
Use the placement property to define the component's position.
Possible placement options:
- bottom-right (default)
- bottom-left
- top-right
- top-left
Add an aria-label
By default, the Microguide is already correctly labeled with aria-labelledby
pointing to the title and aria-describedby pointing to the provided content.
Only if both title and content are not defined, an appropriate aria-label
should be set.