103 lines
2.5 KiB
Markdown
103 lines
2.5 KiB
Markdown
---
|
|
title: 'Input Amount Dropdown: Use Cases'
|
|
parts:
|
|
- Input Amount Dropdown
|
|
- Use Cases
|
|
eleventyNavigation:
|
|
key: 'Input Amount Dropdown: Use Cases'
|
|
order: 20
|
|
parent: Input Amount Dropdown
|
|
title: Use Cases
|
|
---
|
|
|
|
# Input Amount Dropdown: Use Cases
|
|
|
|
```js script
|
|
import { html } from '@mdjs/mdjs-preview';
|
|
import { loadDefaultFeedbackMessages } from '@lion/ui/validate-messages.js';
|
|
import { LionInputAmountDropdown } from '@lion/ui/input-amount-dropdown.js';
|
|
import '@lion/ui/define/lion-input-amount-dropdown.js';
|
|
```
|
|
|
|
## Input Amount Dropdown
|
|
|
|
When `.allowedCurrencies` is not configured, all currencies will be available in the dropdown
|
|
list.
|
|
|
|
```js preview-story
|
|
export const InputAmountDropdown = () => {
|
|
loadDefaultFeedbackMessages();
|
|
return html`
|
|
<lion-input-amount-dropdown
|
|
label="Select currency via dropdown"
|
|
help-text="Shows all currencies by default"
|
|
name="amount"
|
|
></lion-input-amount-dropdown>
|
|
`;
|
|
};
|
|
```
|
|
|
|
## Allowed currencies
|
|
|
|
When `.allowedCurrencies` is configured, only those currencies will be available in the dropdown
|
|
list.
|
|
|
|
```js preview-story
|
|
export const allowedCurrencies = () => {
|
|
loadDefaultFeedbackMessages();
|
|
return html`
|
|
<lion-input-amount-dropdown
|
|
label="Select currency via dropdown"
|
|
help-text="Shows only allowed currencies"
|
|
name="amount"
|
|
.allowedCurrencies=${['EUR', 'GBP']}
|
|
></lion-input-amount-dropdown>
|
|
`;
|
|
};
|
|
```
|
|
|
|
## Preferred currencies
|
|
|
|
When `.preferredCurrencies` is configured, they will show up on top of the dropdown list to enhance user experience.
|
|
|
|
```js preview-story
|
|
export const preferredCurrencies = () => {
|
|
loadDefaultFeedbackMessages();
|
|
return html`
|
|
<lion-input-amount-dropdown
|
|
label="Select currency via dropdown"
|
|
help-text="Preferred currencies show on top"
|
|
name="amount"
|
|
.allowedCurrencies=${['EUR', 'GBP', 'USD', 'JPY']}
|
|
.preferredCurrencies=${['USD', 'JPY']}
|
|
></lion-input-amount-dropdown>
|
|
`;
|
|
};
|
|
```
|
|
|
|
## Suffix or prefix
|
|
|
|
Subclassers can decide the dropdown location via `_dropdownSlot`, this can be set to either `suffix` or `prefix`.
|
|
|
|
```js preview-story
|
|
class DemoAmountDropdown extends LionInputAmountDropdown {
|
|
constructor() {
|
|
super();
|
|
|
|
this._dropdownSlot = 'suffix';
|
|
}
|
|
}
|
|
|
|
customElements.define('demo-amount-dropdown', DemoAmountDropdown);
|
|
|
|
export const suffixSlot = () => {
|
|
loadDefaultFeedbackMessages();
|
|
return html`
|
|
<demo-amount-dropdown
|
|
label="Select region via dropdown"
|
|
help-text="the dropdown shows in the suffix slot"
|
|
name="amount"
|
|
></demo-amount-dropdown>
|
|
`;
|
|
};
|
|
```
|