Реквизит React Suite <Dropdown>
React Suite — это интерфейсная библиотека, разработанная для промежуточной платформы и серверных продуктов. Раскрывающийся список React Suite обеспечивает навигацию, которая использует средство выбора для выбора значения.
Список реквизитов React Suite <Dropdown>:
- activeKey: принимает строковое значение, соответствующее eventKey в <Dropdown.Item>.
- classPrefix: обозначает префикс класса CSS компонента. Указание любого значения, которое изменит имя класса Компонента. Это может быть полезно для применения пользовательского стиля на основе имени класса. Значение по умолчанию — «раскрывающийся список».
- defaultOpen: это логическое значение. Он указывает, открыто ли раскрывающееся меню изначально или нет. По умолчанию это ложь.
- disabled: это логическое значение. Он указывает, отключен ли раскрывающийся список или нет.
- значок: устанавливает значок.
- menuStyle: мы пишем свойства CSS. Он определяет стиль меню.
- onClose: Функция обратного вызова void при закрытии меню.
- onOpen: Функция обратного вызова void при закрытии меню.
- onSelect: функция обратного вызова void Selected при выборе любого параметра.
- onToggle: функция обратного вызова void для переключения состояния меню.
- open: это логическое значение. Он указывает, открыт ли выпадающий список или нет. Это правда по умолчанию.
- размещение: определяет положение выпадающего меню. Он принимает следующие значения: «bottomStart», «bottomEnd», «topStart», «topEnd», «leftStart», «leftEnd», «rightStart» и «rightEnd»;
- renderToggle: Пользовательский переключатель.
- title: определяет заголовок раскрывающегося списка.
- toggleAs: обозначает тип элемента компонента. По умолчанию это «Кнопка», но можно настроить элемент для этого компонента.
- toggleClassName: обозначает класс CSS для применения к узлу Toggle DOM.
- триггер: представляет триггерные события. Он принимает следующие значения — «щелчок», «hover», «contextMenu», Array<'click', «hover», «contextMenu»>.
Синтаксис:
<Dropdown></Dropdown>
Предварительное условие: Введение и установка ReactJS
Создание приложения React и установка модуля:
Шаг 1: Создайте папку проекта реакции, для этого откройте терминал и напишите имя папки команды npm create-react-app , если вы уже установили приложение create-react-app глобально.
npm create-react-app project
Шаг 2: После создания папки проекта (то есть проекта) перейдите к ней с помощью следующей команды.
cd project
Шаг 3: теперь установите зависимость с помощью следующей команды:
npm install rsuite
Структура проекта: Это будет выглядеть так:
Пример 1: мы импортируем раскрывающийся компонент из «rsuite», и чтобы применить стили компонентов по умолчанию, мы импортируем «rsuite/dist/rsuite.min.css».
Мы добавляем три раскрывающихся компонента. В первом случае мы передаем значения title, activeKey, Placement, onSelect, который вызывает onSelectHandle, который показывает выбранный в предупреждении eventKey, onClose , который вызывает onCloseHandle, который показывает «Close: closable!» в оповещении. Во втором раскрывающемся компоненте мы передаем отключенную опору и опору значка . Для третьего раскрывающегося компонента мы передаем реквизиты open , toggleAs и menuStyle .
App.js
import { Dropdown } from "rsuite";import "rsuite/dist/rsuite.min.css";import { Block } from "@rsuite/icons";function App() { const onSelectHandle = (e) => { alert(e); }; const onCloseHandle = () => { alert("Close : onCloseHandler !"); }; return ( <div className="App"> <h4>React Suite Dropdown Prop</h4> <Dropdown title="Geeksforgeeks" onSelect={onSelectHandle} onClose={onCloseHandle} activeKey="Problems" placement="bottomStart" > <Dropdown.Item eventKey="Articles"> Articles </Dropdown.Item> <Dropdown.Item eventKey="Problems"> Problems </Dropdown.Item> <Dropdown.Item eventKey="Interview Preparation"> Interview Preparation </Dropdown.Item> <Dropdown.Item eventKey="Contests"> Contests </Dropdown.Item> </Dropdown> <Dropdown title="disabled" disabled icon={<Block />}> <Dropdown.Item eventKey="Articles"> Articles </Dropdown.Item> </Dropdown> <Dropdown title="open-dropdown" open toggleAs="a" menuStyle={{ border: "2px solid blue" }} > <Dropdown.Item eventKey="Articles"> Articles </Dropdown.Item> <Dropdown.Item eventKey="Problems"> Problems </Dropdown.Item> <Dropdown.Item eventKey="Interview Preparation"> Interview Preparation </Dropdown.Item> </Dropdown> </div> );} export default App; |
Шаг для запуска приложения: Запустите приложение с помощью следующей команды из корневого каталога проекта.
npm start
Выход:
Пример 2: мы добавляем компонент раскрывающегося списка с заголовком «Geeksforgeeks», триггером «hover», classPrefix как «btn», передаем renderToggle с div, имеющим некоторый стиль и свойство defaultOpen.
App.js
import { Dropdown } from "rsuite";import "rsuite/dist/rsuite.min.css";import { Block } from "@rsuite/icons";function App() { return ( <div className="App"> <h4>React Suite Dropdown Prop</h4> <Dropdown title="Geeksforgeeks" trigger="hover" classPrefix="btn" defaultOpen renderToggle={() => ( <div style={{ backgroundColor: "green", padding: 8, color: "white", }} > <h4>Geeksforgeeks</h4> </div> )} > <Dropdown.Item eventKey="Articles"> Articles </Dropdown.Item> <Dropdown.Item eventKey="Problems"> Problems </Dropdown.Item> <Dropdown.Item eventKey="Interview Preparation"> Interview Preparation </Dropdown.Item> <Dropdown.Item eventKey="Contests"> Contests </Dropdown.Item> </Dropdown> </div> );} export default App; |
Шаг для запуска приложения: Запустите приложение с помощью следующей команды из корневого каталога проекта.
npm start
Выход:
Ссылка: https://rsuitejs.com/components/dropdown/#code-lt-dropdown-gt-code