Default Gray Amethyst

Wizard Sub Step

<mo-wizard-sub-step> | MOWizardSubStep
Since 2.2 stable

Wizard sub steps are the smaller sub steps in a wizard step.

<mo-wizard orientation="vertical">
  <mo-wizard-step label="Step">
    <mo-wizard-sub-step label="Sub step"></mo-wizard-sub-step>
  </mo-wizard-step>
</mo-wizard>

import { MOWizard, MOWizardStep, MOWizardSubStep } from '@modes-web-components/dist/react';

const App = () => {
  return (
    <MOWizard orientation="vertical">
      <MOWizardStep label="Step">
        <MOWizardSubStep label="Sub step"></MOWizardSubStep>
      </MOWizardStep>
    </MOWizard>
  );
};

Examples

With badges

You can include badges for each sub step as well.

Config Config 
<mo-wizard orientation="vertical">
  <mo-wizard-step label="Step">
    <mo-wizard-sub-step label="Details">
      <mo-badge variant="neutral" size="small" pill slot="badges">Config</mo-badge>
      <mo-badge variant="neutral" size="small" pill slot="badges">Config</mo-badge>
    </mo-wizard-sub-step>
  </mo-wizard-step>
</mo-wizard>

import { MOWizard, MOWizardStep, MOWizardSubStep } from '@modes-web-components/dist/react';

const App = () => {
  return (
    <MOWizard orientation="vertical">
      <MOWizardStep label="Step">
        <MOWizardSubStep label="Details">
          <MOBadge variant="neutral" size="small" pill slot="badges">
            Config
          </MOBadge>
          <MOBadge variant="neutral" size="small" pill slot="badges">
            Config
          </MOBadge>
        </MOWizardSubStep>
      </MOWizardStep>
    </MOWizard>
  );
};

Importing

If you’re using the autoloader or the traditional loader, you can ignore this section. Otherwise, feel free to use any of the following snippets to cherry pick this component.

Bundler React Script

To import this component using a bundler:

import '@metsooutotec/modes-web-components/dist/components/wizard-sub-step/wizard-sub-step.js';

To import this component as a React component:

import MOWizardSubStep from '@metsooutotec/modes-web-components/dist/react/wizard-sub-step/';

To import this component using a script tag:

<script type="module" src="https://modes-web.metso.com/dist/components/cdn/components/wizard-sub-step/wizard-sub-step.js"></script>

Slots

Name Description
(default) The default slot, slot custom label here.
chips Slot to show chips for each sub step.

Learn more about using slots.

Properties

Name Description Reflects Type Default
label The label for the wizard sub step. string ''
orientation The component orientation (layout flow direction). Should be opposite to that of the parent Wizard’s, and automatically given by parent mo-wizard-step 'horizontal' | 'vertical' 'vertical'
updateComplete A read-only promise that resolves when the component has finished updating.

Learn more about attributes and properties.

Parts

Name Description
base The component’s internal wrapper.

Learn more about customizing CSS parts.