Input Amount Dropdown: Use Cases
Input Amount Dropdown
When .allowedCurrencies is not configured, all currencies will be available in the dropdown
list.
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>
`;
};
Shows all currencies by default
Allowed currencies
When .allowedCurrencies is configured, only those currencies will be available in the dropdown
list.
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>
`;
};
Shows only allowed currencies
Preferred currencies
When .preferredCurrencies is configured, they will show up on top of the dropdown list to enhance user experience.
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>
`;
};
Preferred currencies show on top
Suffix or prefix
Subclassers can decide the dropdown location via _dropdownSlot, this can be set to either suffix or prefix.
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>
`;
};
the dropdown shows in the suffix slot