Компонент для выбора элемента из списка

Описание

Компонент для выбора элемента из списка.

При фокусе селекта он автоматически раскрывается. Доступно управление с помощью клавиатуры.

Space – раскрыть селект.

Enter – выбор выделенного пункта селекта.

↑ – переход к следующему пункту селекта.

↓ – переход к предыдущему пункту селекта.

Подключение

JS

import {Select} from 'ui.select';

PHP

\Bitrix\Main\UI\Extension::load("ui.select");

Типы

export type SelectOption = {
	label: string;
	value: string;
}

export type SelectOptions = {
	options: SelectOption[];
	value: string;
	isSearchable: boolean;
	containerClassname: string;
	popupParams: PopupOptions;
}

// imported from main.popup
type PopupOptions = {
	id?: string,
	bindElement?: PopupTarget,
	bindOptions?: PopupTargetOptions,
	content?: string | Element | Node,
	closeByEsc?: boolean,
	buttons?: [],
	className?: string,
	width?: number,
	height?: number,
	minWidth?: number,
	minHeight?: number,
	maxWidth?: number,
	maxHeight?: number,
	resizable?: boolean,
	padding?: number,
	contentPadding?: number,
	borderRadius?: string,
	contentBorderRadius?: string,
	background?: string,
	cacheable?: boolean,
	contentBackground?: string,
	animation?: PopupAnimationOptions,
	closeIcon?: boolean,
	autoHide?: boolean,
	autoHideHandler?: (event: MouseEvent) => boolean,
	zIndexOptions?: ZIndexComponentOptions,
	toFrontOnShow?: boolean,
	events?: { [eventName: string]: (event: BaseEvent) => void },
	titleBar?: string | { content: string },
	angle?: boolean | { offset: number, position?: 'top' | 'bottom' | 'left' | 'right' },
	overlay?: boolean | { backgroundColor?: string, opacity?: number },
	contentColor?: 'white' | 'gray',
	draggable?: boolean | { restrict: boolean },
	darkMode?: boolean,
	fixed?: boolean,
	compatibleMode?: boolean,
	bindOnResize?: boolean,
	targetContainer?: HTMLElement,
	disableScroll?: boolean,

	//Compatibility
	noAllPaddings?: boolean,
	contentNoPaddings?: boolean,
}

Параметры

placeholder: string – отображается в селекте, пока не выбрано значение.

options: SelectOption – опции селекта.

isSearchable: boolean – дает возможность поиска.

containerClassname: string – дополнительный класс для контейнера. Используется для изменения стилей.

popupParams: PopupOptions – параметры для окна попапа.

Методы

getValue(): string – возвращает выбранное значение.

setValue(): string – устанавливает новое значение.

showMenu(): void – открывает меню.

hideMenu(): void – скрывает меню.

isMenuShown(): boolean – возвращает true, если меню открыто.

renderTo(targetContainer: HTMLElement): HTMLElement | null – рендерит селект внутри targetContainer.

События

При выборе пункта меню селект эмитит событие BX.UI.Select::update.

const options = [
	{
		value: '1',
		label: 'the Union of Soviet Socialist Republics'
	},
	{
		value: '2',
		label: 'Deutch'
	},
	{
		value: '3',
		label: 'England'
	},
]

const select = new BX.Ui.Select({
	options,
	value: '12',
	isSearchable: true,
	containerClassname: '',
});

select.subscribe('update', (e) => {
	// some code here
});
    
select.renderTo(document.getElementById('select'));

Пример

import {Select} from 'ui.select';

const container = document.body;

const select = new Select({ 
	value: '1',
	options: [
		{
			value: '1',
			label: 'Russia',
		}, 
		{
			value: '2', 
			label: 'Germany',
		},
		{
			value: '3',
			label: 'China'
		}
	],
	isSearchable: false,
		containerClassname: '',
});

select.renderTo(container);

Закрытый селект

Открытый селект