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.

Lazy search

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

Description	The value or array of values of the selected options.
Attribute	value
Type	string ｜ array
Default	undefined

label

Description	Text label for the select component.
Attribute	label
Type	string
Default	undefined

placeholder

Description	The placeholder text displayed in the component when no option is selected.
Attribute	placeholder
Type	string
Default	undefined

multiple

Description	If set, it allows you to select multiple options at once.
Attribute	multiple
Type	boolean
Default	false

disabled

Description	If set, the select component is disabled and cannot be interacted with.
Attribute	disabled
Type	boolean
Default	false

clearable

Description	If set, adds a button to clear the selection.
Attribute	clearable
Type	boolean
Default	false

maxOptions

Description	The maximum number of options that can be displayed in case of multiple selection.
Attribute	max-options
Type	number
Default	1

maxHeight

Description	The maximum height of the drop-down list of options.
Attribute	max-height
Type	string
Default	undefined

find

Description	If set, adds a search box to filter the options.
Attribute	find
Type	boolean
Default	false

lazy

Description	If set, the options are only loaded when you click select.
Attribute	lazy
Type	boolean
Default	false

Option

Description	Variant of the appearance of the component. The options are 'default' or 'standard'.
Attribute	Option
Type	string
Default	default

trigger

Description	The type of trigger to display the drop-down list. Default 'click'.
Attribute	trigger
Type	string
Default	click

placement

Description	The location of the drop-down list relative to the select component.
Attribute	placement
Type	string
Default	bottom-start

Eventy

Name	Description
wje-select:change	It is emitted when the selection is changed.

Metódy

addOption

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

addOptions

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

selectOption

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

selectOptions

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

getSelected

Description	Returns the selected options.
Signature	() => Array

getAllOptions

Description	Returns all options as HTML.
Signature	() => NodeList

getSelectedOptions

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

CSS Shadow Parts

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.

CSS Custom Vlastnosti

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.

Sloty

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.