Слияние кода завершено, страница обновится автоматически
Компонент выбора для React.
[![Скачиваемости NPM][download-image]][download-url]
import Select, { Option } from 'rc-select';
import 'rc-select/assets/index.css';
export default () => (
<Select>
<Option value="jack">jack</Option>
<Option value="lucy">lucy</Option>
<Option value="yiminghe">yiminghe</Option>
</Select>
);
| --- | --- | --- | --- | --- |
| id | html id для компонента | String | '' |
| className | дополнительный css класс корневого узла | String | '' |
| data-* | html data атрибуты для компонента | String | '' |
| prefixCls | префикс класса | String | '' |
| animation | имя анимации выпадающего списка. Поддерживается только slide-up | String | '' |
| transitionName | имя css анимации выпадающего списка | String | '' |
| choiceTransitionName | имя css анимации для выбранных элементов в режиме multiple | String | '' |
| dropdownMatchSelectWidth | совпадает ли ширина выпадающего списка со шириной select | boolean | true |
| dropdownClassName | дополнительный className для выпадающего списка | String | - |
| dropdownStyle | дополнительный стиль для выпадающего списка | React.CSSProperties | {} |
| dropdownAlign | дополнительное выравнивание для выпадающего списка | AlignType | {} |
| dropdownMenuStyle | дополнительный стиль для выпадающего меню | Object | React.CSSProperties |
| notFoundContent | контент для отображения, когда нет совпадений | ReactNode | 'Not Found' |
| tokenSeparators | разделитель для токенизации в режиме тега/множественного выбора | string[]? | |
| open | управление открытием select | boolean | |
| defaultOpen | управление стандартным открытием select | boolean | |
| placeholder | placeholder для select | React Node | |
| showSearch | отображение поля поиска в режиме single | boolean | true |
| allowClear | возможность очистки | boolean | { clearIcon? : ReactNode } | false || tags | Когда включен режим тегов, пользователь может выбирать из существующих опций или создавать новый тег. Выбор первого варианта означает, что пользователь ввел значение в поле поиска. | boolean | false |
| tagRender | Рендеринг пользовательских тегов | (props: CustomTagProps) => ReactNode | - |
| maxTagTextLength | Максимальная длина текста тега для отображения | number | - |
| maxTagCount | Максимальное количество тегов для отображения | number | - |
| maxTagPlaceholder | Placeholder для пропущенных значений | ReactNode/функция(omittedValues) | - |
| combobox | Включение режима combobox (не может быть установлено multiple одновременно) | boolean | false |
| multiple | Множественный выбор | boolean | false |
| disabled | Отключение select | boolean | false |
| filterOption | Фильтрация опций по значению ввода | По умолчанию фильтрация по опции's optionFilterProp свойству's значение | boolean | true/Function(inputValue: string, option: Option) |
| optionFilterProp | Свойство опции, значение которого будет использоваться для фильтрации, если optionFilterProp равно true | String | 'value' |
| filterSort | Функция сортировки для сортировки поиска опций, см. Array.sort's compareFunction. | Function(optionA: Option, optionB: Option) | - |
| optionLabelProp | Отображение значения опции или дочерних элементов опции как содержимого select | String: 'value'/'children' | 'value' |
| defaultValue | Начальное выбранное значение опции(ов) | String | String[] | - |
| value | Текущее выбранное значение опции(ов) | String | String[] | {key: String, label: React.Node} | {key: String, label: React.Node}[] | - | | labelInValue | включение метки в значение, см. выше тип value. Не поддерживается режим combobox | boolean | false |
| backfill | заполнение select опции в поле поиска (работает только в режиме single и combobox) | boolean | false |
| onChange | вызывается при выборе опции или изменении значения ввода (combobox) | function(value, option:Option | Option[]) | - |
| onSearch | вызывается при изменении значения ввода | function | - |
| onBlur | вызывается при потере фокуса | function | - |
| onFocus | вызывается при получении фокуса | function | - |
| onPopupScroll | вызывается при прокрутке меню | function | - |
| onSelect | вызывается при выборе опции. Параметр - значение опции и экземпляр опции | Function(value, option:Option) | - |
| onDeselect | вызывается при снятии выбора опции. Параметр - значение опции. Вызывается только для режима multiple или tags | Function(value, option:Option) | - |
| onInputKeyDown | вызывается при нажатии клавиши в поле ввода | Function(event) | - |
| defaultActiveFirstOption | активация первой опции по умолчанию | boolean | true |
| getPopupContainer | контейнер, в который рендерится выпадающее меню select | function(trigger:Node):Node | function(){return document.body;} |
| getInputElement | кастомизация элемента ввода | function(): Element | - |
| showAction | действия, которые вызывают выпадающее меню | String[]? | - |
| autoFocus | фокусировка select после монтирования | boolean | - |
| autoClearSearchValue | автоматическое очищение значения поля поиска при выборе/снятии выбора в режиме multiple select | boolean | true |
| prefix | указание префикса select (иконка или текст) | ReactNode | - |
| suffixIcon | указание иконки стрелки select | ReactNode | - | | clearIcon | иконка очистки | ReactNode | - |
| removeIcon | иконка удаления | ReactNode | - |
| menuItemSelectedIcon | иконка выделенного элемента | ReactNode | (props: MenuItemProps) => ReactNode | - |
| dropdownRender | отрисовка пользовательского выпадающего меню | (menu: React. Node) => ReactNode | - |
| loading | показывать иконку загрузки в стрелке | boolean | false |
| virtual | отключить виртуальное прокручивание | boolean | true |
| direction | направление выпадающего меню | 'ltr' | 'rtl' | 'ltr' |
| optionRender | пользовательская отрисовка опций | (oriOption: FlattenOptionData<BaseOptionType>, info: { index: number }) => React. Node | - |
| labelRender | пользовательская отрисовка метки | (props: LabelInValueType) => React. Node | - |
| maxCount | максимальное количество элементов, которое можно выбрать | number | - |
| ----- | ------------------------- | ---------- | ------ | | focus | программное фокусирование select | - | - | | blur | программное размытие select | - | - |
| имя | описание | тип | значение по умолчанию |
|---|---|---|---|
| className | дополнительный класс для опции | String | '' |
| disabled | отменяет эффект для клика или нажатия клавиш для этого элемента | boolean | false |
| key | если React требует установки ключа, то ключ совпадает с значением, значение можно опустить | String/number | - |
| value | атрибут по умолчанию для фильтрации. если React требует установки ключа, то ключ совпадает с значением, значение можно опустить | String/number | - |
| title | если вы не удовлетворены автоматически сгенерированным title, который отображается при наведении на выбранный элемент, вы можете настроить его с помощью этого свойства |
String | - |
| имя | описание | тип | значение по умолчанию |
|---|---|---|---|
| label | метка группы | String/React.Element | - |
| key | - | String | - |
| value | атрибут по умолчанию для фильтрации. если React требует установки ключа, то ключ совпадает с значением, значение можно опустить | String | - |
| className | аналогично Пропсы опции
|
String | '' |
| title | аналогично Пропсы опции
|
String | - |
npm install
npm start
локальный пример: http://localhost:9001/онлайн пример: http://select.react-component.now.sh/
npm test
npm run coverage
rc-select распространяется под лицензией MIT.
Вы можете оставить комментарий после Вход в систему
Неприемлемый контент может быть отображен здесь и не будет показан на странице. Вы можете проверить и изменить его с помощью соответствующей функции редактирования.
Если вы подтверждаете, что содержание не содержит непристойной лексики/перенаправления на рекламу/насилия/вульгарной порнографии/нарушений/пиратства/ложного/незначительного или незаконного контента, связанного с национальными законами и предписаниями, вы можете нажать «Отправить» для подачи апелляции, и мы обработаем ее как можно скорее.
Опубликовать ( 0 )