5dc2205d7d
* feat(input-stepper): add aria-valuemin, aria-valuemax and an option to set aria-valuetext * chore: change valueText into an Object * chore: remove reflect of valueText * Update packages/ui/components/input-stepper/src/LionInputStepper.js Co-authored-by: Oleksii Kadurin <ovkadurin@gmail.com> * Update packages/ui/components/input-stepper/src/LionInputStepper.js Co-authored-by: Oleksii Kadurin <ovkadurin@gmail.com> * chore: rename valueText to valueTextMapping --------- Co-authored-by: Oleksii Kadurin <ovkadurin@gmail.com>
101 lines
2.1 KiB
Markdown
101 lines
2.1 KiB
Markdown
# Input Stepper >> Use Cases ||20
|
|
|
|
```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>
|
|
`;
|
|
};
|
|
```
|