<commit_before>title: Quasar Stepper
---
A Stepper is an interface for users to show numbered steps or for navigation. It's usually useful when user has to follow steps to complete a process.

<input type="hidden" data-fullpage-demo="web-components/stepper">

The navigation is handled by Quasar. User is able to go forward, back and to finish the process.

## Basic Usage

``` html
<q-stepper @finish="finish()" ref="stepper">
  <q-step title="Select campaign settings">
    Content, DOM Elements, Components, ...
  </q-step>

  <!-- Step specifying when user should be able to jump to next step -->
  <q-step title="Create an ad group" :ready="ready">
    Content, DOM Elements, Components, ...
    Do something and change 'ready' variable to boolean 'true'.
  </q-step>

  <q-step title="Create an ad">
    Content, DOM Elements, Components, ...
  </q-step>
</q-stepper>
```

## Stepper Container Component
> Following Vue methods and events apply only to `<q-stepper>` container component.

### Vue Methods
| Vue Method | Description |
| --- | --- |
| `reset()` | Resets progress |
| `nextStep()` | Stepper goes to next step. |
| `previousStep()` | Stepper goes to previous step. |
| `finish()` | Stepper goes to "complete" state. |
<commit_msg>feat: Add missing I18n props for Stepper<commit_after>title: Quasar Stepper
---
A Stepper is an interface for users to show numbered steps or for navigation. It's usually useful when user has to follow steps to complete a process.

<input type="hidden" data-fullpage-demo="web-components/stepper">

The navigation is handled by Quasar. User is able to go forward, back and to finish the process.

## Basic Usage

``` html
<q-stepper @finish="finish()" ref="stepper">
  <q-step title="Select campaign settings">
    Content, DOM Elements, Components, ...
  </q-step>

  <!-- Step specifying when user should be able to jump to next step -->
  <q-step title="Create an ad group" :ready="ready">
    Content, DOM Elements, Components, ...
    Do something and change 'ready' variable to boolean 'true'.
  </q-step>

  <q-step title="Create an ad">
    Content, DOM Elements, Components, ...
  </q-step>
</q-stepper>
```

## Stepper Container Component
> Following Vue methods and events apply only to `<q-stepper>` container component.

### Vue Methods
| Vue Method | Description |
| --- | --- |
| `reset()` | Resets progress |
| `nextStep()` | Stepper goes to next step. |
| `previousStep()` | Stepper goes to previous step. |
| `finish()` | Stepper goes to "complete" state. |

### Vue Properties
| Vue Property | Type | Description |
| --- | --- | --- |
| `back-label` | String | Text to display instead of default 'Back' |
| `next-label` | String | Text to display instead of default 'Continue' |
| `finish-label` | String | Text to display instead of default 'Finish' |

{'fraction_non_alphanumeric': 0.13753987947536334, 'fraction_numerical': 0.0007089684509039348, 'mean_word_length': 3.6338259441707716, 'pattern_counts': {'":': 0, '<': 25, '<?xml version=': 0, '>': 27, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 1, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '95687', 'n_tokens_mistral': 858, 'n_tokens_neox': 818, 'n_words': 335}