Skip to main content

Select

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.

Základné použitie

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.

Výber viacerých položiek

Pridaním atribútu multiple umožníte používateľovi vybrať viacero možností.

Clearable

Pridaním atribútu clearable umožníte používateľovi odstrániť všetky zvolené možnosti kliknutím na ikonu .

Disabled

Pridaním atribútu disabled zabránite používateľovi interagovať so Selectom.

Dynamický zoznam možností

Použitím komponentu Options je podporovaný aj dynamicky generovaný zoznam možností, ktorý sa asynchrónne načíta zo zadanej URL adresy.

Standard

Pridaním atribútu standard sa zobrazí Select v štýle štandardného HTML selectu.

Lazy načítavanie

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.

Find

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.

Atribúty a Vlastnosti

value

DescriptionThe value or array of values of the selected options.
Attributevalue
Typestring | array
Defaultundefined

label

DescriptionText label for the select component.
Attributelabel
Typestring
Defaultundefined

placeholder

DescriptionThe placeholder text displayed in the component when no option is selected.
Attributeplaceholder
Typestring
Defaultundefined

multiple

DescriptionIf set, it allows you to select multiple options at once.
Attributemultiple
Typeboolean
Defaultfalse

disabled

DescriptionIf set, the select component is disabled and cannot be interacted with.
Attributedisabled
Typeboolean
Defaultfalse

clearable

DescriptionIf set, adds a button to clear the selection.
Attributeclearable
Typeboolean
Defaultfalse

maxOptions

DescriptionThe maximum number of options that can be displayed in case of multiple selection.
Attributemax-options
Typenumber
Default1

maxHeight

DescriptionThe maximum height of the drop-down list of options.
Attributemax-height
Typestring
Defaultundefined

find

DescriptionIf set, adds a search box to filter the options.
Attributefind
Typeboolean
Defaultfalse

lazy

DescriptionIf set, the options are only loaded when you click select.
Attributelazy
Typeboolean
Defaultfalse

Option

DescriptionVariant of the appearance of the component. The options are 'default' or 'standard'.
AttributeOption
Typestring
Defaultdefault

trigger

DescriptionThe type of trigger to display the drop-down list. Default 'click'.
Attributetrigger
Typestring
Defaultclick

placement

DescriptionThe location of the drop-down list relative to the select component.
Attributeplacement
Typestring
Defaultbottom-start

Eventy

NameDescription
wje-select:changeIt is emitted when the selection is changed.

Metódy

addOption

DescriptionAdds an option to the select element.
Signature(optionData: any, silent?: boolean, map?: { value: string; text: string; }) => void

addOptions

DescriptionAdds options to the select element.
Signature(optionsData: Array | object, silent?: boolean, map?: { value: string; text: string; }) => void

selectOption

DescriptionSelects the option with the specified value.
Signature(value: string, silent?: boolean) => void

selectOptions

DescriptionSelects one or more options in the select element.
Signature(values: Array|any, silent?: boolean) => void

getSelected

DescriptionReturns the selected options.
Signature() => Array

getAllOptions

DescriptionReturns all options as HTML.
Signature() => NodeList

getSelectedOptions

DescriptionReturns the selected options as HTML.
Signature() => NodeList

CSS Shadow Parts

NameDescription
nativeNative Selector Wrapper.
inputInput field.
clearDelete button.
labelMarking element.
input-wrapperInput field wrapper.
options-wrapperA wrapper of possibilities.
findSearch input field.
popupPopup element.

CSS Custom Vlastnosti

NameDescription
--wje-select-border-widthSpecifies the width of the border around the select component. Accepts any valid CSS length unit (e.g. px, rem, em).
--wje-select-border-styleDefines the border style for the select component. It accepts standard CSS border styles such as solid, dashed or dotted.
--wje-select-border-colorSets 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-widthSpecifies the border width for the select drop-down list of options. Accepts any valid CSS length unit.
--wje-select-options-border-styleDefines the border style for the select drop-down list of options. Inherits from a defined CSS variable for consistency.
--wje-select-options-border-colorSets the border color for the drop-down list of select options. Accepts any valid CSS color value.
--wje-select-backgroundSpecifies the background color of the select component. Accepts any valid CSS color value.
--wje-select-line-heightDefines the line height for the text in the select component. Accepts any valid CSS length value, ensuring consistent vertical alignment.
--wje-select-colorSets the text color for the select component. Accepts any valid CSS color value.
--wje-select-border-radiusSpecifies the edge radius for the select component. Specifies corner rounding and accepts any valid CSS length unit or variable.
--wje-select-margin-bottomSets the bottom margin for the select component.

Sloty

NameDescription
``The default slot for the selects options.
anchorSlot for anchoring element.
arrowSlot for drop-down list arrow.
startSlot for placing content at the top of the component.
endSlot for placing contents on the end of the component.