React.js Blueprint Button group Component Usage with popovers
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 Button group Component Usage with popovers. A button group is used to arrange multiple buttons in a horizontal or vertical group. The popovers enables button group to make all buttons expand equally to fill the available space.
Syntax:
<Popover content={ } renderTarget={ <ButtonGroup> <Button>...</Button> <Button>...</Button> </ButtonGroup> } />
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 basic usage of the Button Group with the Popover component.
Javascript
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>w3wiki</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>w3wiki</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; |
Output:
Example 2: The below example demonstrates the basic usage of the Button Group with the Popover with the help of fill and vertical props of the component.
Javascript
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>w3wiki</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>w3wiki</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; |
Output:
Reference: https://blueprintjs.com/docs/#core/components/button-group.usage-with-popovers