`<dy-coach-mark>`

A component for creating guided tours and onboarding experiences. It helps users understand new features or complex interfaces by highlighting specific elements and providing contextual information.

Example

import { render } from '@mantou/gem';
import { setTours } from 'duoyun-ui/elements/coach-mark';

setTours(
  [
    {
      preview: 'https://picsum.photos/400/300',
      title: 'starterAnalyticsTitle',
      description: 'starterAnalyticsDesc',
      maskClosable: false,
    },
    {
      title: 'starterMenuTitle',
      description: 'starterMenuDesc',
    },
  ],
  {
    currentIndex: 0,
  },
);

const items = [
  {
    pattern: '/',
    title: 'Nav 1',
    slot: html`<dy-coach-mark index="0"></dy-coach-mark>`,
  },
  {
    pattern: '/test',
    title: 'Nav 2',
    slot: html`<dy-coach-mark index="1"></dy-coach-mark>`,
  },
  {
    title: 'Nav 3',
  },
];

render(
  html`<dy-side-navigation
    style="width: 50%"
    .items=${items}
  ></dy-side-navigation>`,
  document.getElementById('root'),
);

API

DuoyunCoachMarkElement

Shadow DOM; Extends DuoyunVisibleBaseElement

`DuoyunCoachMarkElement` Instance Properties

Property(Attribute)	Reactive	Type
`index`(`index`)	Yes	`number`
`width`(`width`)	Yes	`string`
`size`(`size`)	Yes	`'small' \| 'medium' \| 'large'`
`color`(`color`)	Yes	`string`

TapVisibleBaseElement

Extends GemElement

`TapVisibleBaseElement` Instance Properties

Property(Attribute)	Reactive	Type	Description
`show`		`Emitter`
`hide`		`Emitter`
`fullShow`		`Emitter`	Fired when the element becomes visible and entirely within the viewport, e.g. a page whose enter animation has finished.
`intersectionRoot`	Yes	`Element \| Document`
`intersectionRootMargin`	Yes	`string`
`trackVisibility`(`track-visibility`)	Yes	`boolean`
`delay`(`delay`)	Yes	`number`

`TapVisibleBaseElement` Other

Type	Value
Event	`show`, `hide`, `full-show`
CSS State	`visible`, `full-visible`

<dy-coach-mark>