`<bmx-tour-step>`

One step of a bmx-tour: what to point at, the heading, and the words in the card while it is the current step. Only means anything inside a bmx-tour.

11 properties · 0 events · 0 methods · 1 parts

Example

Settings Show me

Your preferences are here now, not in the profile menu.

Show markup

<div class="row" style="display: block">
  <p style="margin: 0 0 12px">
    <bmx-button id="ex-ts-target">Settings</bmx-button>
    <bmx-button id="ex-ts-start" variant="soft">Show me</bmx-button>
  </p>
</div>

<bmx-tour id="ex-ts" label="One-step tip">
  <bmx-tour-step target="#ex-ts-target" heading="Settings moved" placement="right">Your preferences are here now, not in the profile menu.</bmx-tour-step>
</bmx-tour>

<script type="module">
  await customElements.whenDefined('bmx-tour');
  document.getElementById('ex-ts-start').addEventListener('click', () => document.getElementById('ex-ts').start());
</script>

<bmx-tour-step target="#new-invoice" heading="Raise an invoice" placement="bottom">
  Start here: every invoice begins with this button.
</bmx-tour-step>

With no target (or one that is not on the page) the card is shown in the middle of the window: a welcome, or a closing word.

Properties

Property	Attribute	Type	Default	Description
`active`	`active`	`boolean`	`false`	Whether this is the step showing. Set by `bmx-tour`.
`advanceOn`	`advance-on`	`string`	—	An event on the target that moves the tour on, e.g. `click` or `change`.
`disabled`	`disabled`	`boolean`	`false`	Leave the step out.
`heading`	`heading`	`string`	—	The card's heading; also its accessible name.
`interactive`	`interactive`	`boolean`	`false`	The target can be used while the step is showing: the cut-out lets the pointer through.
`next`	`next`	`string`	—	The step to go to after this one, by value, instead of the next in order.
`placement`	`placement`	`BmxPlacement \| 'auto'`	`'auto'`	Where the card sits against the target. `auto` picks the side with the most room.
`spotlight`	`spotlight`	`boolean`	`true`	Dim the page around the target on this step.
`target`	`target`	`string \| HTMLElement`	—	What the step points at: a CSS selector, or (from script) an element.
`value`	`value`	`string`	—	What the step is called in the tour's `value` and events. Default: its heading, then its position.
`waitFor`	`wait-for`	`number`	`0`	How long to wait, in milliseconds, for a target that is not on the page yet.

Slots

Slot	Description
`(default)`	The step's words, and anything else the card should hold.

CSS shadow parts

Part	Description
`base`	The box around the content.