Skip to content
On this page

Onboarding Dialog Vue demo

A reusable custom dialog created using Codex Dialog component.

Demo

An Onboarding dialog example with 3 steps

View code
vue
<template>
	<onboarding-dialog
		v-model:open="open"
		v-model:is-checked="isDontShowAgainChecked"
		class="ext-growthExperiments-OnboardingDialogDemo__dialog"
		:initial-step="1"
		:show-paginator="true"
		:total-steps="3"
		:is-rtl="readingDirection === 'rtl'"
		@close="onDialogClose"
	>
		<template #title>
			A slotted <i>Onboarding dialog</i> header
		</template>
		<template #closeBtnText>
			Skip all
		</template>
		<template #step1>
			<div>
				<h5>
					Step 1 with basic text content
				</h5>
				<p>
					Lorem ipsum dolor sit amet consectetur adipisicing elit.
					Voluptatum necessitatibus nostrum vitae doloribus nisi itaque quasi
					nihil nam eum magni aliquam distinctio, commodi, dolore quibusdam
					nulla ullam expedita consectetur.
				</p>
			</div>
		</template>
		<template #step2>
			<div>
				// step content...
			</div>
		</template>
		<template #step3>
			<div>
				// step content...
			</div>
		</template>
			<template #checkboxLabel>
				Don't show again
			</template>
		</onboarding-dialog>
</template>

<script>
import { ref } from 'vue';
import { CdxButton } from '@wikimedia/codex';
import OnboardingDialog from '..';

export default {
	name: 'OnboardingDialogDemo',

	components: {
		CdxButton,
		OnboardingDialog
	},

	setup() {
		const open = ref( false );
		const isDontShowAgainChecked = ref( false );
		
		function onDialogClose( result ) {
			// eslint-disable-next-line no-console
			console.log( 'Dialog closed', result );
		}

		return {
			isDontShowAgainChecked,
			open,
			onDialogClose
		};
	}
};
</script>

Caveats

  • Dialog height

In the demo example above the height of the dialog is set to 520px.

The dialog height must be set to a fixed value to avoid changes in dialog height between steps with different content length.

  • Transitions

To correctly display slide transitions between dialog steps, step content needs to be wrapped in a single element, eg: div, section

html
<template #step1>
  <div>
   // step content...
  </div>
</template>

CSS overwrites

The following overwrites are applied to tha cdx-dialog styles to avoid padding in the dialog body and to keep the same padding value when the dialog body content is and is not scrollable:

css
	&.cdx-dialog--dividers,
	&.cdx-dialog--has-custom-header,
	&.cdx-dialog--has-custom-footer {
		.cdx-dialog__body {
			padding: 0;
		}
	}

	&.cdx-dialog--dividers {
		.cdx-dialog__header {
			padding-bottom: 0;
		}

		.cdx-dialog__footer {
			padding-top: 0;
		}
	}

Usage

Props

Prop nameDescriptionTypeDefault
initialStepThe first step to show when the dialog is openNumber1
isCheckedCheckbox value provided via a v-model:is-checked binding in the parent scopeBooleanfalse
openWhether the dialog is visible. Should be provided via a v-model:open binding in the parent scopeBooleanfalse
stepperLabelText representation of dialog progress in the stepper componentString''
totalStepsThe total number of steps the dialog includesNumber0

Slots

NameDescriptionBindings
checkboxLabelText for the checkbox label
defaultIf no #step1 is provided, the dialog will display the content in the default slot
closeBtnTextText for the header button
stepNStep content provided by named slots: #step1, #step2, #step3, etc...
startBtnTextText for the last step button
titleMain dialog title

Events

Event namePropertiesDescription
closeObjectEmitted when the dialog is closed
update:currentStepNumberWhen the shown step changes
update:openBooleanWhen the open/close dialog state changes
update:is-checkedBooleanWhen the checkbox value changes

Examples

Simple dialog without steps

If no #step1 is provided, the dialog will display fixed content in the #default slot.

View code
vue
<template>
	<onboarding-dialog
		v-model:open="open"
		class="ext-growthExperiments-OnboardingDialogDemo__dialog"
		:total-steps="1"
		:initial-step="1"
		@close="onDialogClose"
	>
		<template #title>
			Onboarding dialog with one step
		</template>
		<!-- eslint-disable max-len -->
		<div
			class="ext-growthExperiments-OnboardingDialogDemo__dialog__image"
			role="img"
			aria-label="Illustration of the Moon article, with the articles Earth and Satellite being suggested as links that could be added to the associated text."
		>
		</div>
		<div class="ext-growthExperiments-OnboardingSimpleDialogDemo__dialog__content">
			<h5 class="ext-growthExperiments-OnboardingSimpleDialogDemo__dialog__content__title">
				This is a simple dialog without steps.
			</h5>
			<p class="ext-growthExperiments-OnboardingSimpleDialogDemo__dialog__content__text">
				One or several paragraphs will be included here as dialog content, and this text can be multiline.
			</p>
			<p class="ext-growthExperiments-OnboardingSimpleDialogDemo__dialog__content__text">
				Lorem ipsum dolor sit amet consectetur. Interdum ultricies etiam pharetra sapien curabitur commodo. Imperdiet sed purus proin libero malesuada amet nibh. Eleifend diam tincidunt sagittis gravida.
			</p>
			<p class="ext-growthExperiments-OnboardingSimpleDialogDemo__dialog__content__text">
				Nulla phasellus eget risus volutpat aliquet velit leo ac.
			</p>
		<!-- eslint-enable max-len -->
		</div>
		<template #checkboxLabel>
			Don't show again
		</template>
	</onboarding-dialog>
<template>