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

Источник

Читайте также

НЕТ КОММЕНТАРИЕВ

Оставить комментарий