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 (v2) Component Props. The panel stack(v2) 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 (v2) 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:
<PanelStack2 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. app name, 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 v2 component.
App.js
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 stack Panels (v2)
Component Props
</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
.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 v2 component.
App.js
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 stack Panels (v2)
Component Props
</h2>
</div>
<div
className= "main"
style={{ height: "240px" , width: "300px" ,
margin: "auto" }}
>
<PanelStack2
onOpen={addToPanelStack}
onClose={removeFromPanelStack}
renderActivePanelOnly={activePanelOnly}
className= "panel-stack"
showPanelHeader={showHeader}
initialPanel={initialPanel}
/>
</div>
</div>
);
} export default App;
|
App.css
.main>div { width : 250px ;
height : 320px ;
} .main>div button { margin : 60px auto ;
width : 100% ;
} .panel-stack { background-color : lightblue;
font-size : 18px ;
color : blue ;
} |
Output:
Reference: https://blueprintjs.com/docs/#core/components/panel-stack2.props