Модальная доступность React Suite
Пакет React — это библиотека компонентов React, разумный дизайн пользовательского интерфейса и удобный опыт разработки. Он поддерживается во всех основных браузерах. Он предоставляет готовые компоненты React, которые можно легко использовать в любом веб-приложении.
В этой статье мы узнаем о модальной доступности набора React . Доступность — это инструмент или способ, который позволяет пользователю легко получить доступ к веб-сайту, предоставляя такие функции, как кнопки, хлебные крошки, флажки или раскрывающиеся списки и т. д. Модальная доступность описывает, как модальное окно доступно, например, клавиатура, состояния, свойства и т. д. Модальное компонент имеет роль по умолчанию — dialog , aria-modal установлен в true, aria-labeledby , aria-describedby для заголовка и описания модального окна соответственно, которые определены WAI-ARIA.
Модальные реквизиты:
- autoFocus : модальное окно открывается и автоматически фокусируется на себе, если для этого параметра установлено значение true.
- background : Modal будет отображать фон в открытом состоянии, если для этого параметра установлено значение true.
- backdropClassName : используется для добавления необязательного дополнительного имени класса в .modal-backdrop.
- classPrefix : обозначает префикс класса CSS компонента.
- dialogClassName : используется для класса CSS, применяемого к узлам Dialog DOM.
- EnforceFocus : Modal предотвратит уход фокуса при открытии, если для него установлено значение true.
- клавиатура : закрывает модальное окно при нажатии клавиши ESC.
- onClose : это функция обратного вызова, запускаемая, когда Modal скрывается.
- onEnter : это функция обратного вызова, которая запускается перед модальным переходом.
- onEntered : это функция обратного вызова, которая запускается после завершения перехода модального окна.
- onEntering : это функция обратного вызова, которая запускается, когда модальное окно начинает переход.
- onExit : это функция обратного вызова, которая запускается прямо перед выходом модального окна.
- onExited : это функция обратного вызова, которая запускается после того, как модальное окно завершает переход.
- onExiting : это функция обратного вызова, которая запускается, когда модальное окно начинает выходить.
- onOpen : это функция обратного вызова, которая запускается при отображении модального окна.
- overflow : автоматически устанавливает высоту, когда содержимое тела слишком длинное.
- size : устанавливает модальный размер.
Реквизит Modal.Header:
- as : используется для добавления пользовательского элемента для этого компонента.
- classPrefix : обозначает префикс класса CSS компонента.
- closeButton : отображает кнопку закрытия.
- onHide : это функция обратного вызова, которая запускается, когда Modal скрыт.
Modal.Title Реквизиты:
- as : используется для добавления пользовательского элемента для этого компонента.
- classPrefix : обозначает префикс класса CSS компонента.
Реквизит Modal.Footer:
- as : используется для добавления пользовательского элемента для этого компонента.
- classPrefix : обозначает префикс класса CSS компонента.
Реквизит Modal.Body:
- as : используется для добавления пользовательского элемента для этого компонента.
- classPrefix : обозначает префикс класса CSS компонента.
Синтаксис:
import { Modal } from "rsuite";
export default function App() {
return (
<Modal
keyboard={false}
aria-labelledby="modal-title"
aria-describedby="modal-description"
>
...
</Modal>
);
}Создание приложения React и установка модуля:
Шаг 1 : Создайте приложение React с помощью данной команды:
npm create-react-app projectname
Шаг 2 : После создания проекта перейдите к нему с помощью данной команды:
cd projectname
Шаг 3 : Теперь установите пакет узла rsuite с помощью данной команды:
npm install rsuite
Структура проекта: теперь структура вашего проекта должна выглядеть следующим образом:
Шаг для запуска приложения : Запустите приложение, используя следующую команду из корневого каталога проекта:
npm start
Пример 1: Пример ниже демонстрирует модальное окно, когда взаимодействие с клавиатурой равно «истине».
App.js
import { useState } from "react";import { Button, Modal } from "rsuite";import "rsuite/dist/rsuite.min.css"; export default function App() { const [open, setOpen] = useState(false); const handleOpen = () => setOpen(true); const handleClose = () => setOpen(false); return ( <center> <div> <h2>GeeksforGeeks</h2> <h4 style={{ color: "green" }}> React Suite Modal Accessibility</h4> <div style={{ marginTop: 20, width: 400 }}> <div className="modal-container"> <Button onClick={handleOpen} appearance="primary" color="blue"> Open </Button> <Modal open={open} onClose={handleClose} keyboard={true}> <Modal.Header> <Modal.Title>Error</Modal.Title> </Modal.Header> <Modal.Body> <div> <h3> Close the Modal using ESC key. </h3> </div> </Modal.Body> <Modal.Footer> <Button onClick={handleClose} appearance="primary" color="blue" > Done </Button> <Button onClick={handleClose} appearance="subtle"> Cancel </Button> </Modal.Footer> </Modal> </div> </div> </div> </center> );} |
Выход:
Примечание. В приведенном выше примере модальное окно закрывается с помощью клавиши «Esc».
Пример 2: Пример ниже демонстрирует использование aria-labelledby и aria-described в модальном режиме.
App.js
import { useState } from "react";import { Button, ButtonToolbar, Modal } from "rsuite";import "rsuite/dist/rsuite.min.css"; export default function App() { const [open, setOpen] = useState(false); const handleOpen = () => setOpen(true); const handleClose = () => setOpen(false); return ( <center> <div> <h2>GeeksforGeeks</h2> <h4 style={{ color: "green" }}> React Suite Modal Accessibility</h4> <div style={{ marginTop: 20, width: 400 }}> <div> <ButtonToolbar> <Button onClick={handleOpen}> Open </Button> </ButtonToolbar> <Modal open={open} onClose={handleClose} aria-labelledby="modal-title" aria-describedby="modal-description" > <Modal.Header> <Modal.Title id="modal-title"> GeeksforGeeks </Modal.Title> </Modal.Header> <Modal.Body id="modal-description"> Welcome to world of Coding. </Modal.Body> </Modal> </div> </div> </div> </center> );} |
Выход:
Ссылка: https://rsuitejs.com/components/modal/#accessibility