diff --git a/ej2-angular-toc.html b/ej2-angular-toc.html index cca574550f..e262be39e0 100644 --- a/ej2-angular-toc.html +++ b/ej2-angular-toc.html @@ -138,6 +138,13 @@ <li><a href="/ej2-angular/visual-studio-integration/upgrade-project">Upgrade Project</a></li> </ul> </li> +<li> +UI Kit +<ul> + <li><a href="/ej2-angular/ui-kit/overview">Overview</a></li> + <li><a href="/ej2-angular/ui-kit/getting-started">Getting Started</a></li> +</ul> +</li> <li> 3D Chart <ul> diff --git a/ej2-angular/ui-kit/getting-started.md b/ej2-angular/ui-kit/getting-started.md new file mode 100644 index 0000000000..4a4dd03519 --- /dev/null +++ b/ej2-angular/ui-kit/getting-started.md @@ -0,0 +1,66 @@ +# Getting Started with Essential UI Kit for Angular + +Follow the steps below to get started with Essential UI Kit for Angular. You can begin in one of two ways: + +- **Download the App from GitHub**: Get the full source code and run the app locally to explore the blocks. +- **View the Online Demo**: Alternatively, you can try out the blocks directly through the online demo to see them in action without needing to download anything. + +## Get Started by Downloading the App from GitHub + +### Step 1: Download and Open the App in Visual Studio Code + +Download the app from the GitHub [link](https://github.com/syncfusion/essential-ui-kit-for-angular), and then open the project folder in Visual Studio Code to start working with it. + + + +### Step 2: Open a New Terminal + +In Visual Studio Code, go to the **Terminal** menu and select **New Terminal** to open the integrated terminal. + + + +### Step 3: Install Dependencies and Run the App +Run the following commands one after the other in the terminal: + +1. **Install project dependencies** + Run the command below to install all necessary packages related to the Angular project, the sample browser, and the Syncfusion Angular components. + +  + + This will download and install all the dependencies listed in the **package.json** file. + +2. **Serve the App Locally** + After the dependencies are installed, you can run the app locally by starting the Angular local development server. + + Run the following command: + +  + + This command will start the local development server, and you'll see an output in the terminal indicating the application is running. Typically, it will display a local host URL like this: + +  + + To view the app in your browser, simply **Ctrl + Click** (or **Cmd + Click** on macOS) on the local host URL displayed in the terminal. This will open the app in your default browser, allowing you to interact with the blocks. + +### Step 4: License Key Requirement + +The blocks include several Syncfusion Angular components that require an active license key for proper display and usage. To activate the license, refer to the topics below: + +#### How to Obtain the License Key +To obtain the license key, visit the following page: [Syncfusion License](https://ej2.syncfusion.com/angular/documentation/licensing/overview). + +#### How to Register the License Key in the App +Once you have your license key, add it to the `src/main.ts` file for seamless browsing and usage of the blocks. + +```typescript +import { registerLicense } from '@syncfusion/ej2-base'; + +registerLicense('Your-License-Key'); +``` +Replace `'Your-License-Key'` with the actual license key you received from Syncfusion. + +By adding the license key, you ensure that the blocks are fully functional and free from licensing issues. + +## Get Started by Viewing the Online Demo + +If you prefer a quick demo instead of downloading the app, you can explore the blocks directly through the online demo. Simply visit the official [Essential UI Kit for Angular](#) website to interact with the blocks. diff --git a/ej2-angular/ui-kit/images/1.PNG b/ej2-angular/ui-kit/images/1.PNG new file mode 100644 index 0000000000..cbe5875100 Binary files /dev/null and b/ej2-angular/ui-kit/images/1.PNG differ diff --git a/ej2-angular/ui-kit/images/2.PNG b/ej2-angular/ui-kit/images/2.PNG new file mode 100644 index 0000000000..320602fef7 Binary files /dev/null and b/ej2-angular/ui-kit/images/2.PNG differ diff --git a/ej2-angular/ui-kit/images/3.PNG b/ej2-angular/ui-kit/images/3.PNG new file mode 100644 index 0000000000..3d8c75c4d2 Binary files /dev/null and b/ej2-angular/ui-kit/images/3.PNG differ diff --git a/ej2-angular/ui-kit/images/4.PNG b/ej2-angular/ui-kit/images/4.PNG new file mode 100644 index 0000000000..7887c9f85a Binary files /dev/null and b/ej2-angular/ui-kit/images/4.PNG differ diff --git a/ej2-angular/ui-kit/images/5.PNG b/ej2-angular/ui-kit/images/5.PNG new file mode 100644 index 0000000000..699e4bbceb Binary files /dev/null and b/ej2-angular/ui-kit/images/5.PNG differ diff --git a/ej2-angular/ui-kit/overview.md b/ej2-angular/ui-kit/overview.md new file mode 100644 index 0000000000..262687c558 --- /dev/null +++ b/ej2-angular/ui-kit/overview.md @@ -0,0 +1,49 @@ +# Overview: Essential UI Kit for Angular + +The Essential UI Kit for Angular comprises over 120 responsive, ready-to-use, easy-to-implement, and customizable blocks designed to help you quickly build web applications. These blocks are developed using HTML, CSS, TypeScript, and Syncfusion Angular components, delivering robust functionality and ease of use. They are compatible with both Tailwind and Bootstrap 5.3 CSS frameworks, supporting light and dark modes to offer flexibility and seamless integration across different user preferences. The UI kit includes blocks for the following categories: + +| **Category** | **Blocks** | +|-------------------|----------------------------------------------------------| +| **Authentication**| Sign In | +| | Sign Up | +| | Mobile - Sign In | +| | OTP - Sign In | +| | Forgot Password | +| | Sign Out | +| | Unlock Session | +| **Layouts** | Navigation Bar | +| | Sidebar | +| | Floating Menu | +| | Search | +| | Grid | +| | List View | +| | Tile View | +| | Calendar | +| | Cards | +| | Pagination | +| | Footer | +| **E-commerce** | Pricing Card | +| | Plan and Price Comparison | +| | Checkout Page | +| | Product Return Page | +| **Communication** | Email | +| | Chat | + +> These provide pre-designed blocks for the quick implementation of web applications. However, customization and the integration of business logic must be handled on your end to meet your specific requirements. + +## Supported Angular Versions +The blocks designed and showcased are built using Angular 18, but you can use other versions of Angular as well, since they are primarily developed with HTML, CSS, and TypeScript to facilitate building your web applications. Additionally, for using Syncfusion Angular components, the compatible Angular and Syncfusion versions are outlined in this [link](https://ej2.syncfusion.com/angular/documentation/system-requirement#angular-supported-versions) for your reference. + +## Supported Browsers + +- Google Chrome +- Microsoft Edge +- Safari +- Mozilla Firefox + +## Supported CSS Frameworks + +- Tailwind CSS +- Bootstrap 5.3 + +Both **Tailwind CSS** and **Bootstrap 5.3** support **Light** and **Dark** modes, allowing you to seamlessly adapt the blocks to your web applications based on user preferences or system settings. This flexibility ensures a consistent and optimal user experience across different environments and devices. \ No newline at end of file