React.js蓝图面板堆栈组件

BlueprintJS 是一个基于React的用于Web的UI工具包。它是用TypeScript编写的。该库非常优化和流行，用于构建在现代Web浏览器中运行的复杂和数据密集的桌面应用程序的界面。

BlueprintJS提供的PanelStack hook： PanelStack为用户提供了一个屏幕上的面板堆栈。每个面板都有一个返回按钮，可以返回到上一个面板，而且当面板堆栈为空时，可以选择一个始终在屏幕上显示的初始面板。

PanelStack属性：

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

项目结构：

它将如下所示。

React.js蓝图面板堆栈组件

示例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, 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"> 
            <Button onClick={openNewPanel}  
                text="Open panel type 2" /> 
        </div> 
    ); 
}; 
  
const Panel2 = props => { 
    const openNewPanel = () => { 
        props.openPanel({ 
            props: {}, 
            component: 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: {}, 
            component: 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, 
    }, 
    component: 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 PanelStack API</strong> 
                <br /> 
                <br /> 
            </div> 
            <div className="container" style= 
                {{ height: '240px', width: '300px', margin: "auto" }}> 
                <PanelStack 
                    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/，你将会看到以下输出：

React.js蓝图面板堆栈组件

示例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, 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"> 
            <Button onClick={openNewPanel}  
                text="Open panel type 2" /> 
        </div> 
    ); 
}; 
  
const Panel2 = props => { 
    const openNewPanel = () => { 
        props.openPanel({ 
            props: {}, 
            component: 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: {}, 
            component: 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, 
    }, 
    component: 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 PanelStack API</strong> 
                <br /> 
                <br /> 
            </div> 
            <div className="container" style= 
                {{ height: '240px', width: '300px', margin: "auto" }}> 
                <PanelStack 
                    style={{ height: '300px' }} 
                    onOpen={addToPanelStack} 
                    onClose={removeFromPanelStack} 
                    renderActivePanelOnly={activePanelOnly} 
                    showPanelHeader={showHeader} 
                    initialPanel={initialPanel} 
                /> 
            </div> 
        </div> 
    ); 
}