极客教程React.js蓝图面板堆栈（v2）组件
BlueprintJS是基于React的Web用户界面工具包。它使用TypeScript编写。该库非常优化和流行，用于构建在现代Web浏览器中运行的桌面应用程序的复杂且数据密集的界面。
BlueprintJS提供的PanelStack2 Hook： PanelStack2为用户提供了一个面板堆栈在屏幕上显示。每个面板都有一个返回按钮，用于返回上一个面板，当面板堆栈为空时，始终在屏幕上显示一个可选的初始面板。
PanelStack2 props：
- className : 它表示要传递给子组件的类名列表
- initialPanel : 它表示当堆栈为空时显示的初始面板
- onClose : 它表示当关闭面板时调用的回调函数
- onOpen : 它表示当打开面板时调用的回调函数
- renderActivePanelOnly : 它确定PanelStack是否将所有面板都呈现到DOM中。
- showPanelHeader : 它确定是否在每个面板的标题栏中显示返回按钮
- stack : 它表示所有面板的列表。
创建React应用程序并安装模块：
步骤1： 使用以下命令创建一个React应用程序:
npx create-react-app foldername
步骤2： 在创建项目文件夹即foldername后，使用以下命令进入该文件夹：
cd foldername
步骤3： 创建ReactJS应用程序后，使用以下命令安装所需的模块：
npm install @blueprintjs/core
项目结构：
它将如下所示。
示例1： 在本例中，我们将尝试创建一个简单的应用程序，将面板数字显示在屏幕上的堆栈。
现在在App.js文件中写下以下代码。这里，App是我们的默认组件，我们在这里编写了代码：
App.js
import { useCallback, useState } from "react";
import '@blueprintjs/datetime/lib/css/blueprint-datetime.css';
import '@blueprintjs/core/lib/css/blueprint.css';
import { Button, H5, 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">
<Button onClick={openNewPanel}
text="Open panel type 2" />
</div>
);
};
const Panel2 = props => {
const openNewPanel = () => {
props.openPanel({
props: {},
renderPanel: Panel3,
title: `Panel 3`,
});
};
return (
<div className="docs-panel-stack-contents-example">
<h5>Parent counter was {props.counter}</h5>
<Button onClick={openNewPanel}
text="Open panel type 3" />
</div>
);
};
const Panel3 = props => {
const openNewPanel = () => {
props.openPanel({
props: {},
renderPanel: Panel1,
title: `Panel 1`,
});
};
return (
<div className="docs-panel-stack-contents-example">
<Button onClick={openNewPanel}
text="Open panel type 1" />
</div>
);
};
const initialPanel = {
props: {
panelNumber: 1,
},
renderPanel: Panel1,
title: "Panel 1",
};
export default function App() {
const [activePanelOnly, setActivePanelOnly] =
useState(false);
const [showHeader, setShowHeader] =
useState(true);
const [currentPanelStack, setCurrentPanelStack] =
useState([initialPanel]);
const addToPanelStack = useCallback(
(newPanel) => setCurrentPanelStack(stack =>
[...stack, newPanel]),
[],
);
const removeFromPanelStack = useCallback(() =>
setCurrentPanelStack(stack =>
stack.slice(0, -1)), []);
return (
<div>
<div
className="head"
style={{
width: "fit-content",
margin: "auto",
}}
>
<h1
style={{
color: "green",
}}
>
GeeksforGeeks
</h1>
<strong>React blueprint PanelStack2 API</strong>
<br />
<br />
</div>
<div className="container" style={{ height: '240px',
width: '300px', margin: 'auto' }}>
<PanelStack2
style={{ height: '300px' }}
onOpen={addToPanelStack}
onClose={removeFromPanelStack}
renderActivePanelOnly={activePanelOnly}
showPanelHeader={showHeader}
stack={currentPanelStack}
/>
</div>
</div>
);
}
此外，还要包含一些用于应用程序样式的CSS代码。
App.css
.container > div {
width: 240px;
height: 300px;
}
.container > div button {
margin: 50px auto;
width: 100%;
}
运行应用程序的步骤： 从项目的根目录中使用以下命令运行应用程序：
npm start
输出 ：现在打开浏览器并访问 http://localhost:3000/，你将看到以下输出：
示例2： 在这个示例中，让我们给stacks添加一个initialPanel，这样无论面板堆栈是否为空，我们都有一个UI。将你的App.js更改为以下内容。
App.js
import { useCallback, useState } from "react";
import '@blueprintjs/datetime/lib/css/blueprint-datetime.css';
import '@blueprintjs/core/lib/css/blueprint.css';
import { Button, H5, 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">
<Button onClick={openNewPanel}
text="Open panel type 2" />
</div>
);
};
const Panel2 = props => {
const openNewPanel = () => {
props.openPanel({
props: {},
renderPanel: Panel3,
title: `Panel 3`,
});
};
return (
<div className="docs-panel-stack-contents-example">
<H5>Parent counter was {props.counter}</H5>
<Button onClick={openNewPanel}
text="Open panel type 3" />
</div>
);
};
const Panel3 = props => {
const openNewPanel = () => {
props.openPanel({
props: {},
renderPanel: Panel1,
title: `Panel 1`,
});
};
return (
<div className="docs-panel-stack-contents-example">
<Button onClick={openNewPanel}
text="Open panel type 1" />
</div>
);
};
const initialPanel = {
props: {
panelNumber: 1,
},
renderPanel: Panel1,
title: "Panel 1",
};
export default 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
className="head"
style={{
width: "fit-content",
margin: "auto",
}}
>
<h1
style={{
color: "green",
}}
>
GeeksforGeeks
</h1>
<strong>React blueprint PanelStack2 API</strong>
<br />
<br />
</div>
<div className="container" style={{
height: '240px',
width: '300px', margin: 'auto'
}}>
<PanelStack2
style={{ height: '300px' }}
onOpen={addToPanelStack}
onClose={removeFromPanelStack}
renderActivePanelOnly={activePanelOnly}
showPanelHeader={showHeader}
initialPanel={initialPanel}
/>
</div>
</div>
);
}
运行应用程序的步骤： 从项目的根目录下使用以下命令运行应用程序：
npm start
输出:
参考: https://blueprintjs.com/docs/#core/components/panel-stack2