Blueprint is a React-based UI toolkit for the web. This library is very optimized and popular for building interfaces that are complex and data-dense for desktop applications.
In this article, we’ll discuss React.js Blueprint stack Panels Component Props. The panel stack is used in managing a stack of panels and displays only the topmost panel. In a panel, each panel consists of a header containing a back button to return to the previous panel. The panel stack can be operated as a controlled or uncontrolled component.
React.js BluePrint stack Panels Component Props:
- className: It is used to denote the list of class names to pass to the child components.
- initialPanel: It s used to denote the initial panel that displays when the stack is empty.
- onClose: It s used to denote the callback function that is invoked when a panel is closed.
- onOpen: It s used to denote the callback function that is invoked when a panel is opened.
- renderActivePanelOnly: It determines whether PanelStack would render all panels in the stack to the DOM.
- showPanelHeader: It determines whether to show the back button in the header of each panel.
- stack: It s used to denote the list of all the panels.
Syntax:
<PanelStack
onOpen={addToPanelStack}
onClose={removeFromPanelStack}
renderActivePanelOnly={activePanelOnly}
initialPanel={initialPanel}
/>
Creating React Application And Installing Module:
Step 1: Create a React application using the following command:
npm create-react-app appname
Step 2: After creating your project folder i.e. appname, move to it using the following command:
cd appname
Step 3: After creating the ReactJS application, Install the required module using the following command:
npm install @blueprintjs/core
Project Structure:
Step 4: Run the project as follows:
npm start
Example 1: The below example demonstrates the usage of the onOpen, onClose, renderActivePanelOnly, showPanelHeader props of the Panel Stack component.
App.js
Javascript
import { useCallback, useState } from "react"; import "@blueprintjs/datetime/lib/css/blueprint-datetime.css"; import "@blueprintjs/core/lib/css/blueprint.css"; import { Button, PanelStack } from "@blueprintjs/core"; import "./App.css"; const Panel1 = (props) => { const openNewPanel = () => { props.openPanel({ props: {}, component: 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: {}, component: 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: {}, component: 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, }, component: 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>neveropen</h1> <h2> ReactJs BluePrint stack Panels Component Props </h2> </div> <div className="main" style={{ height: "240px", width: "300px", margin: "auto" }} > <PanelStack 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%; } |
Output:
Example 2: The below example demonstrates the usage of the showPanelHeader and className props of the Panel Stack component.
App.js
Javascript
import { useCallback, useState } from "react"; import "@blueprintjs/datetime/lib/css/blueprint-datetime.css"; import "@blueprintjs/core/lib/css/blueprint.css"; import { Button, PanelStack } from "@blueprintjs/core"; import "./App.css"; const Panel1 = (props) => { const openNewPanel = () => { props.openPanel({ props: {}, component: 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: {}, component: 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: {}, component: 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, }, component: 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>neveropen</h1> <h2> ReactJs BluePrint stack Panels Component Props </h2> </div> <div className="main" style={{ height: "240px", width: "300px", margin: "auto" }} > <PanelStack onOpen={addToPanelStack} onClose={removeFromPanelStack} renderActivePanelOnly={activePanelOnly} className="panel-stack" showPanelHeader={showHeader} initialPanel={initialPanel} /> </div> </div> ); } export default App; |
App.css
CSS
.main>div { width: 250px; height: 320px; } .main>div button { margin: 60px auto; width: 100%; } .panel-stack { background-color: green; font-size: 20px; color: green; } |
Output:
Reference: https://blueprintjs.com/docs/#core/components/panel-stack.props
Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, neveropen Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!
