Плавающая кнопка на ReactJS
ReactJS — библиотека для построения пользовательских интерфейсов. Она основана на
концепции компонентов — независимых строительных блоков интерфейса.
В данном примере я покажу Вам как просто можно сделать переиспользуемый React-компонент плавающей кнопки.
Плавающая кнопка — это такой элемент интерфейса пользователя, который располагается, как правило, в одном из крайних углов видимой области экрана устройства, не меняет своего положения при прокрутке страницы и служит для выполнения некоторых действий. Особенно такой элемент распространен на Android-смартфонах, но и на веб-страницах он тоже встречается часто.
Сначала CSS-код (файл FloatingButton.css):
.FloatingButton {
/** базовый размер кнопки */
--button-size: 48px;
/** позиция элемента относительно нижнего правого угла */
--button-position: 15px;
position: fixed;
display: flex;
justify-content: center;
align-items: center;
right: var(--button-position);
bottom: var(--button-position);
width: calc(var(--button-size) + 4px);
height: var(--button-size);
border-radius: 50%;
background: rgb(55, 160, 14);
color: rgb(255, 255, 255);
font-size: 2.5rem;
padding-bottom: 6px;
padding-left: 1px;
cursor: pointer;
/**
для того, чтобы кнопка не перекрывалась любым другим элементом страницы,
при необходимости можно увеличить
*/
z-index: 1000;
/** не позволят выделять содержимое кнопки для копирования */
user-select: none;
box-shadow: 0 1px 2px 1px rgba(0, 0, 0, 0.5);
}
/**
при наведении курсора мыши делаем кнопку немного прозрачной
*/
.FloatingButton:hover {
opacity: 0.85;
}
HTML-код + JSX:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Floating Button</title>
<script src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<!-- Don't use this in production: -->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<link rel="stylesheet" href="FloatingButton.css">
</head>
<body>
<div id="root">руддщ</div>
<script type="text/babel">
/**
* Компонент кнопки
*
*/
function FloatingButton({ title, onClick, ...rest }) {
return (
<div className="FloatingButton" title={title} onClick={onClick} {...rest}>
?
</div>
)
}
/**
* Обработчик нажатия на кнопку
*
*/
function handleClick(e) {
alert(e.target.dataset.action)
}
const Button = <FloatingButton title="Добавить вопрос" onClick={handleClick} data-action="question:add"/>
ReactDOM.render(Button, document);
</script>
</body>
</html>
Таким образом, мы создали независимый компонент плавающей кнопки, который вы можете использовать в своих собственных проектах. Для этого достаточно выделить компонент FloatingButton в отдельный JSX-файл, в котором подключены файл стиля FloatingButton.css.
