Стек панелей React.js Blueprint (v2) Панели компонентов
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