React.js Blueprint Card Component Elevation
Last Updated :
03 Aug, 2022
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:
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 GeeksforGeeks</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 GeeksforGeeks</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
Share your thoughts in the comments
Please Login to comment...