ВебмастерскаяСекреты вебмастера

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

Источник

Статьи по теме

Добавить комментарий

Ваш адрес email не будет опубликован.

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.

Back to top button