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' | '' ''

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 #

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>