React.js Blueprint Button group Component Usage with popovers
Last Updated :
31 Oct, 2022
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>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;
|
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>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;
|
Output:
Reference: https://blueprintjs.com/docs/#core/components/button-group.usage-with-popovers
Share your thoughts in the comments
Please Login to comment...