11bbc5fff5
* feat: migrated the navigation metadata from inline MD title decorations to frontmatter * fix: fixed frontmatter metadate for api-table MDs * fix: fixed frontmatter eslint issue
113 lines
2.3 KiB
Markdown
113 lines
2.3 KiB
Markdown
---
|
|
parts:
|
|
- Input Stepper
|
|
- Use Cases
|
|
title: 'Input Stepper: Use Cases'
|
|
eleventyNavigation:
|
|
key: 'Input Stepper: Use Cases'
|
|
order: 20
|
|
parent: Input Stepper
|
|
title: Use Cases
|
|
---
|
|
|
|
# Input Stepper: Use Cases
|
|
|
|
```js script
|
|
import { html } from '@mdjs/mdjs-preview';
|
|
import { loadDefaultFeedbackMessages } from '@lion/ui/validate-messages.js';
|
|
import '@lion/ui/define/lion-input-stepper.js';
|
|
loadDefaultFeedbackMessages();
|
|
```
|
|
|
|
## Default
|
|
|
|
When no range or step is defined, it can go infinite with default step value as `1`. You can also specify prefix content using `after` slot.
|
|
|
|
```html preview-story
|
|
<lion-input-stepper name="year">
|
|
<label slot="label">How old is the existence?</label>
|
|
<div slot="after" data-description>In Billion Years</div>
|
|
</lion-input-stepper>
|
|
```
|
|
|
|
## Attributes & Properties
|
|
|
|
### Step and Value
|
|
|
|
Use `step` attribute to specify the incrementor or decrementor difference and `value` to set the default value.
|
|
|
|
```html preview-story
|
|
<lion-input-stepper
|
|
label="Amount of oranges"
|
|
min="100"
|
|
step="100"
|
|
name="value"
|
|
value="200"
|
|
></lion-input-stepper>
|
|
```
|
|
|
|
### Range
|
|
|
|
Use `min` and `max` attribute to specify a range.
|
|
|
|
```html preview-story
|
|
<lion-input-stepper
|
|
label="Amount of oranges"
|
|
min="200"
|
|
max="500"
|
|
name="value"
|
|
step="100"
|
|
value="200"
|
|
></lion-input-stepper>
|
|
```
|
|
|
|
### Value text
|
|
|
|
Use the `.valueTextMapping` property to override the value with a text.
|
|
|
|
```js preview-story
|
|
export const valueTextMapping = () => {
|
|
const values = {
|
|
1: 'first',
|
|
2: 'second',
|
|
3: 'third',
|
|
4: 'fourth',
|
|
5: 'fifth',
|
|
6: 'sixth',
|
|
7: 'seventh',
|
|
8: 'eighth',
|
|
9: 'ninth',
|
|
10: 'tenth',
|
|
};
|
|
return html`
|
|
<lion-input-stepper
|
|
label="Order"
|
|
min="1"
|
|
max="10"
|
|
name="value"
|
|
.valueTextMapping="${values}"
|
|
></lion-input-stepper>
|
|
`;
|
|
};
|
|
```
|
|
|
|
### Formatting
|
|
|
|
Just like with the `input-amount` you can add the `formatOptions` to format the numbers to your preferences, to a different locale or adjust the amount of fractions.
|
|
|
|
```js preview-story
|
|
export const formatting = () => {
|
|
const format = { locale: 'nl-NL' };
|
|
return html`
|
|
<lion-input-stepper
|
|
label="Amount of oranges"
|
|
min="0"
|
|
max="5000"
|
|
step="100"
|
|
name="value"
|
|
.formatOptions="${format}"
|
|
.modelValue="${1200}"
|
|
></lion-input-stepper>
|
|
`;
|
|
};
|
|
```
|