sp-coach-indicator

NPM

1.0.3

Storybook

View Storybook

Try it on

webcomponents.dev
Examples API

Attributes and Properties #

Property Attribute Type Default Description quiet quiet boolean false staticColor static-color 'white' | 'black' | undefined

Description #

<sp-coach-indicator> show the connection between an object and its explanation in a touring mode — for example, the source of in an onboarding tour.

Usage #

See it on NPM! How big is this package in your project?

yarn add @spectrum-web-components/coachmark

Import the side effectful registration of <sp-coach-indicator> via:

import '@spectrum-web-components/coachmark/sp-coach-indicator.js';

When looking to leverage the CoachIndicator base class as a type and/or for extension purposes, do so via:

import { CoachIndicator } from '@spectrum-web-components/coachmark';

Static color variants #

Standard 
<sp-coach-indicator></sp-coach-indicator>
<sp-coach-indicator static-color="dark"></sp-coach-indicator>
<sp-coach-indicator static-color="light"></sp-coach-indicator>
 Quiet 
<sp-coach-indicator quiet></sp-coach-indicator>
<sp-coach-indicator quiet static-color="dark"></sp-coach-indicator>
<sp-coach-indicator quiet static-color="light"></sp-coach-indicator>