React.js Blueprint Button组件与popovers的使用

Blueprint 是一个基于React的用于Web的UI工具包。这个库非常优化和流行，适用于构建复杂而数据密集的桌面应用程序接口。

在本文中，我们将讨论React.js Blueprint Button组件与popovers的使用。按钮组用于将多个按钮按水平或垂直方式排列在一起。popovers使按钮组能够让所有按钮均匀地扩展以填充可用空间。

语法：

<Popover
    content={ }
    renderTarget={
        <ButtonGroup>
            <Button>...</Button>
            <Button>...</Button>
        </ButtonGroup>
    }
/>

创建React应用并安装模块：

步骤1： 使用以下命令创建一个React应用：

npm create-react-app appname

步骤2： 创建您的项目文件夹，例如 appname，并使用以下命令进入：

cd appname

步骤3： 在创建ReactJS应用程序之后，使用以下命令安装所需的模块：

npm install @blueprintjs/core

项目结构：

React.js Blueprint Button组件与popovers的使用

步骤4： 按照以下步骤运行该项目：

npm start

示例1： 下面的示例演示了如何在弹出窗口组件中基本使用按钮组。

import React from "react"; 
import "@blueprintjs/core/lib/css/blueprint.css"; 
import { Button, ButtonGroup } from "@blueprintjs/core"; 
import { Popover2 } from "@blueprintjs/popover2"; 
import "@blueprintjs/popover2/lib/css/blueprint-popover2.css"; 
  
function App() { 
    return ( 
        <div> 
            <div style={{ textAlign: "center", color: "green" }}> 
                <h1>GeeksforGeeks</h1> 
                <h2> 
                    ReactJs BluePrint Button group Component  
                    Usage with popovers 
                </h2> 
            </div> 
            <div style={{ textAlign: "center" }}> 
                <Popover2 
                    interactionKind="click"
                    position="bottom"
                    content={ 
                        <div style={{ backgroundColor: 'lightgreen',  
                            padding: 20 }}> 
                            <p>GeeksforGeeks</p> 
                        </div> 
                    } 
                    renderTarget={({ isOpen, ref, ...targetProps }) => ( 
                        <ButtonGroup> 
                            <Button 
                                {...targetProps} 
                                elementRef={ref} 
                                text="Click"
                                icon="add"
                            /> 
                            <Button 
                                {...targetProps} 
                                elementRef={ref} 
                                text="Download"
                                icon="download"
                            /> 
                        </ButtonGroup> 
                    )} 
                /> 
            </div> 
        </div> 
    ); 
} 
  
export default App;

输出：

React.js Blueprint Button组件与popovers的使用

示例2：

下面的示例演示了使用按钮组和弹出框组件的基本用法，借助组件的fill和vertical属性。

import React from "react"; 
import "@blueprintjs/core/lib/css/blueprint.css"; 
import { Button, ButtonGroup } from "@blueprintjs/core"; 
import { Popover2 } from "@blueprintjs/popover2"; 
import "@blueprintjs/popover2/lib/css/blueprint-popover2.css"; 
  
function App() { 
    return ( 
        <div> 
            <div style={{ textAlign: "center", color: "green" }}> 
                <h1>GeeksforGeeks</h1> 
                <h2> 
                    ReactJs BluePrint Button group Component  
                    Usage with popovers 
                </h2> 
            </div> 
            <div style={{ textAlign: "center" }}> 
                <Popover2 
                    interactionKind="click"
                    position="bottom"
                    content={ 
                        <div style={{ backgroundColor: 'lightgreen',  
                            padding: 20 }}> 
                            <p>GeeksforGeeks</p> 
                        </div> 
                    } 
                    renderTarget={({ isOpen, ref,  
                        ...targetProps }) => ( 
                        <ButtonGroup vertical fill> 
                            <Button 
                                {...targetProps} 
                                elementRef={ref} 
                                text="Click"
                                icon="add"
                            /> 
                            <Button 
                                {...targetProps} 
                                elementRef={ref} 
                                text="Download"
                                icon="download"
                            /> 
                        </ButtonGroup> 
                    )} 
                /> 
            </div> 
        </div> 
    ); 
} 
  
export default App;