BlueprintJS is a React-based UI toolkit for the web. This library is very optimized and popular for building interfaces that are complex data-dense for desktop applications. Menu Component provides a way for users to display lists of interactive items.
The Button directly supports the ButtonGroup props. If we set these props on ButtonGroup, this will apply the same value to all buttons in the group. Most of the modifiers, which are enabled on the group, cannot be overridden on child buttons.
Button group props:
- alignText: It is used to change the default position of the text. By default, the text is aligned at the center. If we want to set the text on the right side of the page, we can set the value of alignText as right. Similarly, if we want to set the position of the text on the left side of the page, we can set the value of alignText as left.
- children: A button group in blueprint.js can have many buttons and these buttons belonging to a specific group are referred to as children of that group.
- className: It is used when we want to pass multiple classnames to a child node. The classname is stored in a list where each classname is separated by a delimiter and this list is passed along to the child node.
- fill: It is used when we want the button group to take up the full width of the container. To do so, set the value of fill as true.
- large: It is used when we want the child button to appear with large styling. To do so, set the value of fill as true.
- minimal: It is used when we want the child button to appear with minimal styling. To do so, set the value of minimal as true.
- vertical: It is used when we want the child button to appear with vertical styling. To do so, set the value of vertical as true.
Starting with react app:
Step 1: Create a React application using the following command:
npx create-react-app foldername
Step 2: After creating your project folder i.e. foldername, move to it using the following command:
cd foldername
Step 3: After creating the ReactJS application, Install the required module using the following command:
npm install @blueprintjs/core
Project Structure: It will look like the following:
Example 1: Write the following code in app.js. Set fill = “true” and vertical = “true”
Javascript
import React from 'react'import '@blueprintjs/core/lib/css/blueprint.css'; import { ButtonGroup, Button, AnchorButton } from "@blueprintjs/core"; function App() { return ( <div style={{ display: 'block', width: 400, padding: 30 }}> <h1 style={{ color: 'green' }}>neveropen</h1> <h4>React.js Blueprint Button group Component CSS</h4> <ButtonGroup fill={true} vertical={true} > <Button icon="database"> Queries</Button> <Button icon="function"> Functions</Button> <AnchorButton rightIcon="caret-down"> Options</AnchorButton> </ButtonGroup> </div > ); } export default App; |
Steps to run the application: Follow the following steps to run the application:
npm start
Output: Now open your browser and go to http://localhost:3000/, you will see the following output:
Example 2: Write the following code in app.js. Set minimal = “true”
Javascript
import React from 'react'import '@blueprintjs/core/lib/css/blueprint.css'; import { ButtonGroup, Button, AnchorButton } from "@blueprintjs/core"; function App() { return ( <div style={{ display: 'block', width: 400, padding: 30 }}> <h1 style={{ color: 'green' }}>neveropen</h1> <h4>React.js Blueprint Button group Component CSS</h4> <ButtonGroup minimal={true} > <Button icon="database"> Queries</Button> <Button icon="function"> Functions</Button> <AnchorButton rightIcon="caret-down"> Options</AnchorButton> </ButtonGroup> </div > ); } export default App; |
Steps to run the application: Follow the following steps to run the application:
npm start
Output: Now open your browser and go to http://localhost:3000/, you will see the following output:
Reference: https://blueprintjs.com/docs/#core/components/button-group.props
