React.js Blueprint is a front-end UI toolkit. It is very optimized and popular for building interfaces that are complex data-dense for desktop applications.
The React.js Blueprint Card Component is used when the user wants to display content related to a single subject in a rectangular box.
Syntax:
<Card elevation={}>
Prerequisite:
- Introduction and Installation reactJS
- React.js Blueprint Card Component
Creating React Application and Module installation:
Step 1: Create the react project folder, for that open the terminal, and write the command npm create-react-app folder name, if you have already installed create-react-app globally. If you haven’t, install create-react-app globally using the command npm -g create-react-app or install locally by npm i create-react-app.
npm create-react-app project
Step 2: After creating your project folder(i.e. project), move to it by using the following command.
cd project
Step 3: now install the dependency by using the following command:
npm install @blueprintjs/core
Project Structure: It will look like this:
Example 1: We are importing the Card and Classes from “@blueprintjs/core”. To apply the default styles of the components we are importing “@blueprintjs/core/lib/css/blueprint.css”.
We are adding the Card Component with an <h1> and <p> tag in it, to the Card Component, we are passing value Classes.ELEVATION_3 to className.
App.js
import React from "react"; import "@blueprintjs/core/lib/css/blueprint.css"; import { Card, Classes } from "@blueprintjs/core"; function App() { return ( <div style={{ margin: 30, }} > <h4> ReactJS Blueprint Card Component Elevation </h4> <Card className={Classes.ELEVATION_3}> <h1>Welcome to neveropen</h1> <p>Let's explore ...</p> </Card> </div> ); } export default App; |
Step to Run Application: Run the application using the following command from the project’s root directory.
npm start
Output:
Example 2: We are importing the Card and Elevation from “@blueprintjs/core”. To apply the default styles of the components we are importing “@blueprintjs/core/lib/css/blueprint.css”. To the elevation prop, we are passing state num, the num state is created using react useState hook initialized with ” – “.
A dropdown is created that takes certain values whenever any change is made in the drop-down an onChange function naming onHandleChange gets triggered that set the value of num and accordingly the value of the elevation prop changes.
App.js
import React, { useState } from "react"; import "@blueprintjs/core/lib/css/blueprint.css"; import { Card, Elevation } from "@blueprintjs/core"; function App() { const [num, setNum] = useState(" - "); const onHandleChange = (e) => { setNum(e.target.value); }; return ( <div style={{ margin: 30, }} > <h4> ReactJS Blueprint Card Component Elevation </h4> <select name="elevation" id="elevation" style={{ marginLeft: 20 }} onChange={onHandleChange} > <option value=" - "> - </option> <option value={Elevation.TWO}>2</option> <option value={Elevation.THREE}>3</option> <option value={Elevation.FOUR}>4</option> </select> <p style={{ marginLeft: 80 }}> elevation =<b style={{ color: "red" }}> {num} </b> </p> <Card elevation={num}> <h1>Welcome to neveropen</h1> <p>Let's explore ...</p> </Card> </div> ); } export default App; |
Step to Run Application: Run the application using the following command from the project’s root directory.
npm start
Output:
Reference: https://blueprintjs.com/docs/#core/components/card.elevation
