React.js Blueprint Popover2 Размещение

Опубликовано: 9 Октября, 2022

React.js Blueprint — это набор инструментов для пользовательского интерфейса. Он очень оптимизирован и популярен для создания сложных интерфейсов с высокой плотностью данных для настольных приложений. Компонент React.js Blueprint Popover2 делает содержимое, связанное с целевым элементом, плавающим на экране.

Концепция размещения компонента Popover2 определяет позицию Popover2. Он принимает следующие значения: «начало снизу», «конец снизу», «снизу», «начало сверху», «конец сверху», «сверху», «начало слева», «конец слева», « влево», «право-старт», «право-конец», «право», «авто», «авто-старт» и «авто-конец».

Синтаксис:

<Popover2 placement=""/>

Условие:

  • Введение и установка ReactJS
  • Компонент ReactJS Blueprint Popover2

Создание приложения React и установка модуля:

Шаг 1: Создайте папку проекта реакции, для этого откройте терминал и напишите имя папки команды npm create-react-app, если вы уже установили приложение create-react-app глобально. Если нет, установите create-react-app глобально с помощью команды npm -g create-react-app или установите локально с помощью npm i create-react-app .

npm create-react-app project

Шаг 2: После создания папки проекта (т.е. проекта) перейдите к ней с помощью следующей команды.

cd project

Шаг 3: теперь установите зависимость с помощью следующей команды:

npm install @blueprintjs/core
npm install @blueprintjs/popover2

Структура проекта: Это будет выглядеть так:

Пример 1: мы импортируем компонент Popover2 из «@blueprintjs/popover2» и компонент кнопки из «@blueprintjs/core». Чтобы применить стили компонентов по умолчанию, мы импортируем «@blueprintjs/core/lib/css/blueprint.css».

Для компонента Popover2 в контенте мы создали div с некоторыми встроенными стилями и текстом «Добро пожаловать в Geeksforgeeks!». Теперь к компоненту Popover2 мы передаем разные значения в опору размещения .

App.js

Javascript




import { Button } from "@blueprintjs/core";
import { Popover2 } from "@blueprintjs/popover2";
import "@blueprintjs/core/lib/css/blueprint.css";
  
function App() {
    return (
        <div className="App">
            <h3> React Blueprint Popover2 Placement</h3>
  
            <div style={{ textAlign: "center" }}>
                <Popover2
                    placement="top-start"
                    content={
                        <div style={{ 
                            backgroundColor: "white", 
                            padding: "30px" 
                        }}>
                            <h4>
                                Welcome to{" "}
                                <span style={{ color: "green" }}>
                                    Geeksforgeeks 
                                </span>!
                            </h4>
                        </div>
                    }
                    renderTarget={({ isOpen, ref, ...targetProps }) => (
                        <Button {...targetProps} 
                            elementRef={ref} text="top-start" />
                    )}
                />
                <Popover2
                    placement="top"
                    content={
                        <div style={{ 
                            backgroundColor: "white", 
                            padding: "30px" 
                        }}>
                            <h4>
                                Welcome to{" "}
                                <span style={{ color: "green" }}>
                                    Geeksforgeeks 
                                </span>!
                            </h4>
                        </div>
                    }
                    renderTarget={({ isOpen, ref, ...targetProps }) => (
                        <Button {...targetProps} 
                            elementRef={ref} text="top" />
                    )}
                />
                <Popover2
                    placement="top-end"
                    content={
                        <div style={{ 
                            backgroundColor: "white", 
                            padding: "30px" 
                        }}>
                            <h4>
                                Welcome to{" "}
                                <span style={{ color: "green" }}>
                                    Geeksforgeeks 
                                </span>!
                            </h4>
                        </div>
                    }
                    renderTarget={({ isOpen, ref, ...targetProps }) => (
                        <Button {...targetProps} 
                            elementRef={ref} text="top-end" />
                    )}
                />
                <br />
                <Popover2
                    placement="right-start"
                    content={
                        <div style={{ 
                            backgroundColor: "white", 
                            padding: "30px" 
                        }}>
                            <h4>
                                Welcome to{" "}
                                <span style={{ color: "green" }}>
                                    Geeksforgeeks
                                </span>!
                            </h4>
                        </div>
                    }
                    renderTarget={({ isOpen, ref, ...targetProps }) => (
                        <Button {...targetProps} 
                            elementRef={ref} text="right-start" />
                    )}
                />
                <Popover2
                    placement="right"
                    content={
                        <div style={{ 
                            backgroundColor: "white", 
                            padding: "30px" 
                        }}>
                            <h4>
                                Welcome to{" "}
                                <span style={{ color: "green" }}>
                                    Geeksforgeeks 
                                </span>!
                            </h4>
                        </div>
                    }
                    renderTarget={({ isOpen, ref, ...targetProps }) => (
                        <Button {...targetProps} 
                            elementRef={ref} text="right" />
                    )}
                />
                <Popover2
                    placement="right-end"
                    content={
                        <div style={{ 
                            backgroundColor: "white", 
                            padding: "30px" 
                        }}>
                            <h4>
                                Welcome to{" "}
                                <span style={{ color: "green" }}>
                                    Geeksforgeeks 
                                </span>!
                            </h4>
                        </div>
                    }
                    renderTarget={({ isOpen, ref, ...targetProps }) => (
                        <Button {...targetProps} 
                            elementRef={ref} text="right-end" />
                    )}
                />
                <br />
                <Popover2
                    placement="left-start"
                    content={
                        <div style={{ 
                            backgroundColor: "white", 
                            padding: "30px" 
                        }}>
                            <h4>
                                Welcome to{" "}
                                <span style={{ color: "green" }}>
                                    Geeksforgeeks 
                                </span>!
                            </h4>
                        </div>
                    }
                    renderTarget={({ isOpen, ref, ...targetProps }) => (
                        <Button {...targetProps} 
                            elementRef={ref} text="left-start" />
                    )}
                />
                <Popover2
                    placement="left"
                    content={
                        <div style={{ 
                            backgroundColor: "white", 
                            padding: "30px" 
                        }}>
                            <h4>
                                Welcome to{" "}
                                <span style={{ color: "green" }}>
                                    Geeksforgeeks 
                                </span>!
                            </h4>
                        </div>
                    }
                    renderTarget={({ isOpen, ref, ...targetProps }) => (
                        <Button {...targetProps} 
                            elementRef={ref} text="left" />
                    )}
                />
                <Popover2
                    placement="left-end"
                    content={
                        <div style={{ 
                            backgroundColor: "white", 
                            padding: "30px" 
                        }}>
                            <h4>
                                Welcome to{" "}
                                <span style={{ color: "green" }}>
                                    Geeksforgeeks 
                                </span>!
                            </h4>
                        </div>
                    }
                    renderTarget={({ isOpen, ref, ...targetProps }) => (
                        <Button {...targetProps} 
                            elementRef={ref} text="left-end" />
                    )}
                />
                <br />
                <Popover2
                    placement="bottom-start"
                    content={
                        <div style={{ 
                            backgroundColor: "white", 
                            padding: "30px" 
                        }}>
                            <h4>
                                Welcome to{" "}
                                <span style={{ color: "green" }}>
                                    Geeksforgeeks
                                </span>!
                            </h4>
                        </div>
                    }
                    renderTarget={({ isOpen, ref, ...targetProps }) => (
                        <Button {...targetProps} 
                            elementRef={ref} text="bottom-start" />
                    )}
                />
               
Picked

РЕКОМЕНДУЕМЫЕ СТАТЬИ

Количество чисел между L и R, взаимно простых с P
27 Февраля, 2023
Постройте матрицу, каждая строка и столбец которой содержат N и M единиц соответственно.
27 Февраля, 2023
Найдите все факторы заданного числа и их побитовое XOR
27 Февраля, 2023
Показать самое длинное имя
27 Февраля, 2023
Форматирование лицензионного ключа
27 Февраля, 2023
Когда я должен использовать список против LinkedList
27 Февраля, 2023
Реализовать быструю сортировку с первым элементом в качестве опорного
27 Февраля, 2023
Алгоритм хеш-сортировки
27 Февраля, 2023