sp-coachmark
Attributes and Properties #
Property | Attribute | Type | Default | Description |
---|---|---|---|---|
dir | dir | 'ltr' | 'rtl' | 'ltr' | |
quiet | quiet | boolean | false | |
variant | variant | 'dark' | 'light' | '' | '' |
Description #
An <sp-coachmark>
element can be used to bring added attention to specific parts of your page.
Usage #
yarn add @spectrum-web-components/coachmark
Import the side effectful registration of <sp-coachmark>
via:
import '@spectrum-web-components/coachmark/sp-coachmark.js';
When looking to leverage the Coachmark
base class as a type and/or for extension purposes, do so via:
import { Coachmark } from '@spectrum-web-components/coachmark';
Standard #
<sp-coachmark></sp-coachmark>
<sp-coachmark variant="dark"></sp-coachmark>
<sp-coachmark variant="light"></sp-coachmark>
Quiet #
<sp-coachmark quiet></sp-coachmark>
<sp-coachmark quiet variant="dark"></sp-coachmark>
<sp-coachmark quiet variant="light"></sp-coachmark>