Плавающая кнопка на ReactJS

Плавающая кнопка на ReactJS

Плавающая кнопка на 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.

Источник