Getting started in EJ2 TypeScript Card control
3 Nov 20235 minutes to read
This section explains how to create a simple Card using styles by configuring the structure for the header, content, using Essential JS 2 quickstart seed repository.
This application is integrated with the
webpack.config.js
configuration and uses the latest version of the webpack-cli. It requires nodev14.15.0
or higher. For more information about webpack and its features, refer to the webpack documentation.
Dependencies
The Card is pure CSS component so no other package dependencies are needed to render the Card.
|-- @syncfusion/ej2-layouts
Set up development environment
Open the command prompt from the required directory, and run the following command to clone the Syncfusion JavaScript (Essential JS 2) quickstart project from GitHub.
git clone https://github.com/SyncfusionExamples/ej2-quickstart-webpack- ej2-quickstart
After cloning the application in the ej2-quickstart
folder, run the following command line to navigate to the ej2-quickstart
folder.
cd ej2-quickstart
Add Syncfusion JavaScript packages
Syncfusion JavaScript (Essential JS 2) packages are available on the npmjs.com public registry. You can install all Syncfusion JavaScript (Essential JS 2) controls in a single @syncfusion/ej2 package or individual packages for each control.
The quickstart application is preconfigured with the dependent @syncfusion/ej2 package in the ~/package.json
file. Use the following command to install the dependent npm packages from the command prompt.
npm install
Import the Syncfusion CSS styles
The Card CSS files are available in the ej2-layouts
package folder. This can be referenced in the ~/src/styles/styles.css
file of your application using the following code.
@import '../../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../../node_modules/@syncfusion/ej2-layouts/styles/material.css';
Adding a simple Card
- Add the HTML
div
element withe-card
class into yourindex.html
.
[src/index.html]
<div class = "e-card">
Sample Card
</div>
Adding a header and content
You can create Card with a header in a specific structure. For adding header you need to create a div
element with e-card-header
class added.
- You can include heading inside the Card header by adding a
div
element withe-card-header-caption
class, and also content will be added by adding element withe-card-content
. For detailed information, refer to the Header and Content.
<div class = "e-card"> --> Root Element
<div class="e-card-header"> --> Root Header Element
<div class="e-card-header-caption"> --> Root Heading Element
<div class="e-card-header-title"></div> --> Heading Title Element
</div>
<div class="e-card-content"></div> --> Card content Element
</div>
</div>
- Now, run the application in the browser using the following command.
npm start
Output will be as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Essential JS 2 Card Component</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
<meta name="description" content="Essential JS 2" />
<meta name="author" content="Syncfusion" />
<link rel="shortcut icon" href="resources/favicon.ico" />
<link href="index.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.1.48/material.css" rel="stylesheet" />
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div style="margin: 50px;">
<!--element which is going to render the Card-->
<div tabindex="0" class="e-card" id="basic">
<div class="e-card-header">
<div class="e-card-header-caption">
<div class="e-card-header-title">Advanced UWP</div>
</div>
</div>
<div class="e-card-content">
Communicating with Windows 10 and Other Apps, the second in a five-part series written by Succinctly series
author Matteo Pagani. To download the complete white paper, and other papers in the series, visit
the White Paper section of Syncfusion’s Technology Resource Portal.
</div>
</div>
</div>
</body>
</html>