sp-coachmark

Examples API

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 #

See it on NPM! How big is this package in your project? Try it on webcomponents.dev

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>