uisuite v0.0.21

uisuite

Now Support Angular 18 

A Comprehensive Angular Library for Seamless Design Integration

Welcome to uisuite, a developer-friendly Angular library designed to simplify the process of incorporating stylish design elements into your projects. Tailored with developers in mind, uisuite not only provides an effortless way to integrate frontend components but also offers the convenience of utilizing components with pre-defined logic.

Key Features:

• Ease of Use: Enjoy a seamless experience while adding visually appealing frontend components to your Angular projects.

• Developer-Centric Design: Crafted with developers in mind, uisuite prioritizes user-friendly integration and customization.

• Predefined Logic: Accelerate your development process by leveraging components that come with pre-established logic.

Elevate your Angular projects with uisuite – where design meets functionality effortlessly.

Available Components:

ui-avatar Component

How to Use:

The ui-avatar component in uisuite is designed to provide a customizable avatar for your application. It accepts the following parameters:

• name: 'Required' The name or initials to be displayed in the avatar.
• variant: 'default', 'rounded', 'circle'.
• size: The size of the avatar Accepts only unit values e.g. 20px, 2rem etc.
• border: The border Color of the avatar.
• radius: The border-radius of the avatar.
• background: The background color of the avatar.
• color: The text color of the avatar.
• fontSize: The font size of the text in the avatar.
• text: Text style of the avatar (bold, normal).

Example:

<uAvatar
name="Kunal Sindhi"
radius="20px"
variant="circle"
size="80px"
fontSize="40px"
background="red"
color="yellow"></uAvatar> 

ui-heading Component

How to Use:

The ui-heading component in uisuite is designed to provide a customizable avatar for your application. It accepts the following parameters:

• tag: 'Required' Accepts any HTML heading tag (h1, h2, h3, h4, h5, h6).
• title: Accepts a string to set the heading text..
• size: font size of the heading Accepts only unit values e.g. 20px, 2rem etc.
• color: The text color of the heading.
• truncate: When set to true, truncates the text with ellipsis for better UI presentation.
• text: Supports text alignment options - left, center, or right.

Example:

<uis-heading
  [tag]="'h1'"
  [title]="'Hello World'"
  [spaceTop]="'30px'"
  [bold]="'600'"
  [color]="'blue'"
></uis-heading>

ui-table Component

How to Use:

The ui-table component in uisuite is designed to provide a customizable simple table with light and dark modeIt accepts the following parameters:

• theme: light or dark.
• striped: Turn odd rows to have different color..

Example:

<uTable>
  <thead>
    <tr>
      <th></th>
      <th></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td></td>
      <td></td>
    </tr>
  </tbody>
</uTable>

Keywords

Angular ui, angular ui library, ui design Library, frontend library, angular library, angular table