Стек панелей React.js Blueprint (v2) Панели компонентов

Опубликовано: 24 Февраля, 2023

Blueprint — это набор инструментов пользовательского интерфейса для Интернета на основе React. Эта библиотека очень оптимизирована и популярна для создания сложных и насыщенных данными интерфейсов для настольных приложений.

В этой статье мы обсудим панели компонентов стека React.js Blueprint Panel (v2). Стек панелей (v2) используется для управления стеком панелей и отображает только самую верхнюю панель. В панели каждая панель состоит из заголовка, содержащего кнопку возврата для возврата к предыдущей панели. Стек панелей может работать как управляемый или неуправляемый компонент.

Панели предоставляются как объекты, в которых renderPanel и другие реквизиты используются для рендеринга элемента панели, а заголовок отображается в заголовке и на кнопке «Назад». Кроме того, каждая панель монтируется только тогда, когда она находится на вершине стека, и размонтируется, только когда она закрыта или когда над ней открывается панель.

Реквизиты панели интерфейса React.js:

htmlTitle: обозначает заголовок HTML, который будет передан компоненту.
props: это реквизиты, которые передаются типу компонента при его рендеринге.
renderPanel: Обозначает средство визуализации для этой панели.
title: это заголовок, который будет отображаться над этой панелью.

Интерфейс React.js PanelActions Props:

closePanel: используется для обозначения вызова этого метода для программного закрытия этой панели.
openPanel: используется для обозначения вызова этого метода для открытия новой панели в верхней части стека.

React.js BluePrint stack Panels (v2) Реквизит компонента:

className: используется для обозначения списка имен классов для передачи дочерним компонентам.
InitialPanel: используется для обозначения начальной панели, которая отображается, когда стек пуст.
onClose: используется для обозначения функции обратного вызова, которая вызывается при закрытии панели.
onOpen: используется для обозначения функции обратного вызова, которая вызывается при открытии панели.
renderActivePanelOnly: определяет, будет ли PanelStack отображать все панели в стеке в DOM.
showPanelHeader: определяет, показывать ли кнопку «Назад» в заголовке каждой панели.
стек: используется для обозначения списка всех панелей.

Синтаксис:

<PanelStack2
    onOpen={addToPanelStack}
    onClose={removeFromPanelStack}
    renderActivePanelOnly={activePanelOnly}
    initialPanel={initialPanel}
/>

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

Шаг 1: Создайте приложение React с помощью следующей команды:

npm create-react-app appname

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

cd appname

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

npm install @blueprintjs/core

Структура проекта:

Шаги для запуска приложения: Запустите проект следующим образом.

npm start

Пример 1: Пример ниже демонстрирует базовое использование компонента Panel Stack v2.

App.js

Javascript

import React, { useCallback, useState } from "react";
import "@blueprintjs/core/lib/css/blueprint.css";
import { Button, PanelStack2 } from "@blueprintjs/core";
import "./App.css";
  
const Panel1 = (props) => {
    const openNewPanel = () => {
        props.openPanel({
            props: {},
            renderPanel: Panel2,
            title: `Panel-2`,
        });
    };
  
    return (
        <div className="docs-panel-stack-contents-example">
            <h2>You are at Panel 1.</h2>
            <Button onClick={openNewPanel} 
                text="Open New Panel" />
        </div>
    );
};
  
const Panel2 = (props) => {
    const openNewPanel = () => {
        props.openPanel({
            props: {},
            renderPanel: Panel3,
            title: `Panel-3`,
        });
    };
  
    return (
        <div className="docs-panel-stack-contents-example">
            <h2>You are at Panel 2.</h2>
            <Button onClick={openNewPanel} 
                text="Open New Panel" />
        </div>
    );
};
  
const Panel3 = (props) => {
    const openNewPanel = () => {
        props.openPanel({
            props: {},
            renderPanel: Panel1,
            title: `Panel-1`,
        });
    };
  
    return (
        <div className="docs-panel-stack-contents-example">
            <h2>You are at Panel 3.</h2>
            <Button onClick={openNewPanel} 
                text="Open New Panel" />
        </div>
    );
};
  
const initialPanel = {
    props: {
        panelNumber: 1,
    },
    renderPanel: Panel1,
    title: "Panel 1",
};
  
function App() {
    const [activePanelOnly, setActivePanelOnly] = 
        useState(true);
    const [showHeader, setShowHeader] = useState(true);
    const [currentPanelStack, setCurrentPanelStack] = 
        useState([]);
    const addToPanelStack = useCallback(
        (newPanel) => setCurrentPanelStack((stack) => 
            [...stack, newPanel]),
        []
    );
    const removeFromPanelStack = useCallback(
        () => setCurrentPanelStack((stack) => 
            stack.slice(0, -1)),
        []
    );
  
    return (
        <div>
            <div style={{ textAlign: "center", 
                color: "green" }}>
                <h1>GeeksforGeeks</h1>
                <h2>
                    ReactJs BluePrint Panel stack v2 Component Panel
                </h2>
            </div>
            <div
                className="main"
                style={{ height: "240px", 
                    width: "300px", margin: "auto" }}
            >
                <PanelStack2
                    onOpen={addToPanelStack}
                    onClose={removeFromPanelStack}
                    renderActivePanelOnly={activePanelOnly}
                    initialPanel={initialPanel}
                />
            </div>
        </div>
    );
}
  
export default App;

App.css

CSS

.main>div {
    width: 250px;
    height: 320px;
}
  
.main>div button {
    margin: 60px auto;
    width: 100%;
}

Выход:

Пример 2. В приведенном ниже примере показано использование компонента Panel Stack v2 с пользовательскими стилями с помощью свойства className.

App.js

Javascript

import React, { useCallback, useState } from "react";
import "@blueprintjs/core/lib/css/blueprint.css";
import { Button, PanelStack2 } from "@blueprintjs/core";
import "./App.css";
  
const Panel1 = (props) => {
    const openNewPanel = () => {
        props.openPanel({
            props: {},
            renderPanel: Panel2,
            title: `Panel-2`,
        });
    };
  
    return (
        <div className="docs-panel-stack-contents-example">
            <h2>You are at Panel 1.</h2>
            <Button onClick={openNewPanel} 
                text="Open New Panel" />
        </div>
    );
};
  
const Panel2 = (props) => {
    const openNewPanel = () => {
        props.openPanel({
            props: {},
            renderPanel: Panel3,
            title: `Panel-3`,
        });
    };
  
    return (
        <div className="docs-panel-stack-contents-example">
            <h2>You are at Panel 2.</h2>
            <Button onClick={openNewPanel} 
                text="Open New Panel" />
        </div>
    );
};
  
const Panel3 = (props) => {
    const openNewPanel = () => {
        props.openPanel({
            props: {},
            renderPanel: Panel1,
            title: `Panel-1`,
        });
    };
  
    return (
        <div className="docs-panel-stack-contents-example">
            <h2>You are at Panel 3.</h2>
            <Button onClick={openNewPanel} 
                text="Open New Panel" />
        </div>
    );
};
  
const initialPanel = {
    props: {
        panelNumber: 1,
    },
    renderPanel: Panel1,
    title: "Panel 1",
};
  
function App() {
    const [activePanelOnly, setActivePanelOnly] = 
        useState(true);
    const [showHeader, setShowHeader] = useState(true);
    const [currentPanelStack, setCurrentPanelStack] = useState([]);
  
    const addToPanelStack = useCallback(
        (newPanel) => setCurrentPanelStack((stack) => 
            [...stack, newPanel]),
        []
    );
    const removeFromPanelStack = useCallback(
        () => setCurrentPanelStack((stack) => 
            stack.slice(0, -1)),
        []
    );
  
    return (
        <div>
            <div style={{ textAlign: "center", color: "green" }}>
                <h1>GeeksforGeeks</h1>
                <h2>
                    ReactJs BluePrint Panel stack v2 Component Panel
                </h2>
            </div>
            <div
                className="main"
                style={{ height: "240px", 
                    width: "300px", margin: "auto" }}
            >
                <PanelStack2
                    onOpen={addToPanelStack}
                    onClose={removeFromPanelStack}
                    renderActivePanelOnly={activePanelOnly}
                    initialPanel={initialPanel}
                    className="custom-panel"
                />
            </div>
        </div>
    );
}
  
export default App;

App.css

CSS

.main>div {
    width: 250px;
    height: 320px;
}
  
.main>div button {
    margin: 60px auto;
    width: 100%;
}
  
.custom-panel {
    font-style: italic;
    color: green;
    font-size: larger;
}

Выход:

Ссылка: https://blueprintjs.com/docs/#core/components/panel-stack2.panels

Technical Scripter Picked

Стек панелей React.js Blueprint (v2) Панели компонентов

Javascript

CSS

Javascript

CSS

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