shadow
Select element rozširuje možnosti štandardného HTML select elementu poskytujúc vylepšenú používateľskú skúsenosť.
Podporuje jednoduchý aj viacnásobný výber možností pomocou atribútu multiple.
Ponúka rozšírené funkcie ako vymazateľný obsah pomocou atribútu clearable
, vyhľadávanie v možnostiach pomocou find
a lenivé načítavanie pre optimalizáciu výkonu s atribútom lazy
.
Pri viacnásobnom výbere možností sa vybrané položky zobrazujú ako chipy s konfigurovateľn ým maximálnym počtom zobrazených položiek.
Komponent tiež podporuje dynamické načítanie možností z externých zdrojov prostredníctvom elementu Options.
V predvolenom nastavení výber umožňuje používateľovi vybrať len jednu možnosť. Zahrnutím elementu Icon
sa pri možnosti zobrazí aj zvolená ikona.
Pridaním atribútu multiple
umožníte používateľovi vybrať viacero možností.
Pridaním atribútu clearable
umožníte používateľovi odstrániť všetky zvolené možnosti kliknutím na ikonu .
Pridaním atribútu disabled
zabránite používateľovi interagovať so Selectom.
Použitím komponentu Options je podporovaný aj dynamicky generovaný zoznam možností, ktorý sa asynchrónne načíta zo zadanej URL adresy.
Pridaním atribútu standard
sa zobrazí Select v štýle štandardného HTML selectu.
Pridaním atribútu lazy
sa načítajú možnosti len vtedy, keď je to potrebné. To môže byť užitočné pri veľkých množstvách možností alebo pri načítavaní z externých zdrojov.
Pridaním atribútu find
sa zobrazí vstupné pole, ktoré umožňuje používateľovi vyhľadávať možnosti v zozname. Používateľ môže zadať text a zoznam sa automaticky filtruje podľa zadaného textu.
Skombinovaním atribútov lazy
a find
sa načítajú možnosti len vtedy, keď používateľ začne písať do vstupného poľa. To môže byť užitočné pri veľkých množstvách možností alebo pri načítavaní z externých zdrojov.
Description | The value or array of values of the selected options. |
Attribute | value |
Type | string | array |
Default | undefined |
Description | Text label for the select component. |
Attribute | label |
Type | string |
Default | undefined |
Description | The placeholder text displayed in the component when no option is selected. |
Attribute | placeholder |
Type | string |
Default | undefined |
Description | If set, it allows you to select multiple options at once. |
Attribute | multiple |
Type | boolean |
Default | false |
Description | If set, the select component is disabled and cannot be interacted with. |
Attribute | disabled |
Type | boolean |
Default | false |
Description | If set, adds a button to clear the selection. |
Attribute | clearable |
Type | boolean |
Default | false |
Description | The maximum number of options that can be displayed in case of multiple selection. |
Attribute | max-options |
Type | number |
Default | 1 |
Description | The maximum height of the drop-down list of options. |
Attribute | max-height |
Type | string |
Default | undefined |
Description | If set, adds a search box to filter the options. |
Attribute | find |
Type | boolean |
Default | false |
Description | If set, the options are only loaded when you click select. |
Attribute | lazy |
Type | boolean |
Default | false |
Description | Variant of the appearance of the component. The options are 'default' or 'standard'. |
Attribute | Option |
Type | string |
Default | default |
Description | The type of trigger to display the drop-down list. Default 'click'. |
Attribute | trigger |
Type | string |
Default | click |
Description | The location of the drop-down list relative to the select component. |
Attribute | placement |
Type | string |
Default | bottom-start |
Name | Description |
---|
wje-select:change | It is emitted when the selection is changed. |
Description | Adds an option to the select element. |
Signature | (optionData: any, silent?: boolean, map?: { value: string; text: string; }) => void |
Description | Adds options to the select element. |
Signature | (optionsData: Array | object, silent?: boolean, map?: { value: string; text: string; }) => void |
Description | Selects the option with the specified value. |
Signature | (value: string, silent?: boolean) => void |
Description | Selects one or more options in the select element. |
Signature | (values: Array|any, silent?: boolean) => void |
Description | Returns the selected options. |
Signature | () => Array |
Description | Returns all options as HTML. |
Signature | () => NodeList |
Description | Returns the selected options as HTML. |
Signature | () => NodeList |
Name | Description |
---|
native | Native Selector Wrapper. |
input | Input field. |
clear | Delete button. |
label | Marking element. |
input-wrapper | Input field wrapper. |
options-wrapper | A wrapper of possibilities. |
find | Search input field. |
popup | Popup element. |
Name | Description |
---|
--wje-select-border-width | Specifies the width of the border around the select component. Accepts any valid CSS length unit (e.g. px , rem , em ). |
--wje-select-border-style | Defines the border style for the select component. It accepts standard CSS border styles such as solid , dashed or dotted . |
--wje-select-border-color | Sets the border color for the select component. Accepts any valid CSS color value, including variable colors, named colors, and hexadecimal values. |
--wje-select-options-border-width | Specifies the border width for the select drop-down list of options. Accepts any valid CSS length unit. |
--wje-select-options-border-style | Defines the border style for the select drop-down list of options. Inherits from a defined CSS variable for consistency. |
--wje-select-options-border-color | Sets the border color for the drop-down list of select options. Accepts any valid CSS color value. |
--wje-select-background | Specifies the background color of the select component. Accepts any valid CSS color value. |
--wje-select-line-height | Defines the line height for the text in the select component. Accepts any valid CSS length value, ensuring consistent vertical alignment. |
--wje-select-color | Sets the text color for the select component. Accepts any valid CSS color value. |
--wje-select-border-radius | Specifies the edge radius for the select component. Specifies corner rounding and accepts any valid CSS length unit or variable. |
--wje-select-margin-bottom | Sets the bottom margin for the select component. |
Name | Description |
---|
`` | The default slot for the selects options. |
anchor | Slot for anchoring element. |
arrow | Slot for drop-down list arrow. |
start | Slot for placing content at the top of the component. |
end | Slot for placing contents on the end of the component. |