sp-coachmark

Examples

API

Attributes and Properties #

Property	Attribute	Type	Default
`dir`	`dir`	`'ltr' \| 'rtl'`	`'ltr'`
`quiet`	`quiet`	`boolean`	`false`
`variant`	`variant`	`'dark' \| 'light' \| ''`	`''`

CSS Custom Properties #

Name	Default
`--spectrum-coachmark-animation-indicator-keyframe-0-opacity`	`0`
`--spectrum-coachmark-animation-indicator-keyframe-0-scale`	`1`
`--spectrum-coachmark-animation-indicator-keyframe-100-opacity`	`0`
`--spectrum-coachmark-animation-indicator-keyframe-100-scale`	`2`
`--spectrum-coachmark-animation-indicator-keyframe-50-opacity`	`1`
`--spectrum-coachmark-animation-indicator-keyframe-50-scale`	`1.5`
`--spectrum-coachmark-animation-indicator-ring-center-delay-multiple`	`-0.66`
`--spectrum-coachmark-animation-indicator-ring-duration`	`3000ms`
`--spectrum-coachmark-animation-indicator-ring-inner-delay-multiple`	`-0.5`
`--spectrum-coachmark-animation-indicator-ring-outer-delay-multiple`	`-1`
`--spectrum-coachmark-background-color`	`var(--spectrum-global-color-gray-50)`
`--spectrum-coachmark-border-color`	`var(--spectrum-alias-border-color-dark)`
`--spectrum-coachmark-border-radius`	`var(--spectrum-alias-border-radius-regular)`
`--spectrum-coachmark-border-size`	`var(--spectrum-alias-border-size-thin)`
`--spectrum-coachmark-content-margin-bottom`	`var(--spectrum-global-dimension-size-200)`
`--spectrum-coachmark-content-text-color`	`var(--spectrum-alias-text-color)`
`--spectrum-coachmark-indicator-gap`	`var(--spectrum-global-dimension-size-75)`
`--spectrum-coachmark-indicator-ring-border-size`	`var(--spectrum-global-dimension-static-size-25)`
`--spectrum-coachmark-indicator-ring-default-color`	`var(--spectrum-alias-focus-color)`
`--spectrum-coachmark-indicator-ring-diameter`	`var(--spectrum-global-dimension-size-200)`
`--spectrum-coachmark-indicator-ring-high-contrast-color`	`var(--spectrum-global-color-gray-900)`
`--spectrum-coachmark-indicator-ring-low-contrast-color`	`var(--spectrum-global-color-gray-50)`
`--spectrum-coachmark-max-width`	`var(--spectrum-global-dimension-size-5000)`
`--spectrum-coachmark-min-width`	`var(--spectrum-global-dimension-size-3400)`
`--spectrum-coachmark-padding-x`	`var(--spectrum-global-dimension-size-300)`
`--spectrum-coachmark-padding-y`	`var(--spectrum-global-dimension-size-300)`
`--spectrum-coachmark-quiet-animation-indicator-keyframe-0-scale`	`0.8`
`--spectrum-coachmark-quiet-animation-indicator-ring-inner-delay-multiple`	`-0.33`
`--spectrum-coachmark-quiet-indicator-ring-diameter`	`var(--spectrum-global-dimension-size-100)`
`--spectrum-coachmark-shadow-color`	`var(--spectrum-alias-dropshadow-color)`
`--spectrum-coachmark-step-text-color`	`var(--spectrum-alias-label-text-color)`
`--spectrum-coachmark-step-text-font-weight`	`var(--spectrum-alias-body-text-font-weight)`
`--spectrum-coachmark-step-text-line-height`	`var(--spectrum-alias-body-text-line-height)`
`--spectrum-coachmark-step-text-size`	`var(--spectrum-global-dimension-font-size-100)`
`--spectrum-coachmark-title-margin-bottom`	`var(--spectrum-global-dimension-size-200)`
`--spectrum-coachmark-title-text-color`	`var(--spectrum-alias-heading-text-color)`
`--spectrum-coachmark-title-text-font-weight`	`var(--spectrum-alias-heading-text-font-weight-regular)`
`--spectrum-coachmark-title-text-line-height`	`var(--spectrum-alias-heading-text-line-height)`
`--spectrum-coachmark-title-text-size`	`var(--spectrum-alias-heading-xs-text-size)`

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>

Spectrum Web Components