ruclib-tab

This library provides a flexible and customizable tab component for your Angular applications. Users can integrate the tab component using Angular services or selectors with ease. Below are the features, usage instructions, and integration details:

Installation Guide

Users can easily install the RUC (Ruxptest Library) from npm. Additionally, they can also choose to install individual components based on their requirements.

Install the Entire Library

npm install @uxpractice/ruc-lib

Install Individual Component

If you only need the Metered Progress Bar component:

npm install @ruc-lib/tab

Version Compatibility

Please ensure you install the correct version of @ruc-lib/tab based on your Angular version.

| Angular Version | Compatible @ruc-lib/tab Version | |--------------------|---------------------------------------------| | 15.x.x | npm install @ruc-lib/tab@^3.0.0 | | 16.x.x | npm install @ruc-lib/tab@^3.0.0 |

Usage

1. Import the Module

In your Angular module file (e.g., app.module.ts), import the RuclibTabModule:

import { RuclibTabModule } from '@ruc-lib/tab';
import { AppComponent } from './app.component';
import { NgModule } from '@angular/core';
import { MatIconModule } from '@angular/material/icon';
import { MatCardModule } from '@angular/material/card';
import { BrowserModule } from '@angular/platform-browser';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    RuclibTabModule,
    MatIconModule,
    MatCardModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

2. Use the Component

In your component's template, use the <uxp-ruclib-tab> selector and pass the configuration object to the rucInputData input.

<uxp-ruclib-tab [rucInputData]="rucinputObjectDataTab" [dataSource]="dataSourceTab" [customTheme]="customTheme" (rucEvent)="passEvent($event)"></uxp-ruclib-tab>

API Reference

Component Inputs

| Input | Type | Description | |----------------|--------------------|----------------------------------------------| | rucInputData | tabDefaultConfig | The main configuration object for the component. | | customTheme | string | An optional CSS class for custom theming. |

tabDefaultConfig

This is the main configuration object for the tab.

| Property | Type | Description | |-----------------------------|--------------------------------------------------|---------------------------------------------------------------------------------------------------------| | tabId | number | An optional unique identifier for the tab | | tabName | string | The mandatory text label that appears on the tab | | tabContent | string | The mandatory content to be displayed when this tab is active. This can be plain text or HTML. | | isDisabled | boolean | Determines if the tab is disabled. When true, the tab cannot be selected and appears visually disabled. | | isActive | boolean | Indicates whether the tab is currently active. Only one tab should be active at a time. | | iconName | string |The name of the icon to display in the tab header. Should be a valid icon name from the icon library being used (e.g., Material Icons). | | closeIcon | boolean | The name of the close icon to display in the tab header.This is typically shown for closable tabs. If not provided, a default close icon will be used. labels. |

tabDefaultDataSource

This object defines the configuration for dataSource for tab.

| Property | Type | Description | |-----------|------------------------------------|--------------------------------------------------------------------------| | animationDuration | number | The duration of the animation when switching between tabs, in milliseconds.This controls the speed of the tab transition effect. | | alignTabs | string |Specifies the alignment of the tab headers within the tab container.Common values include 'start', 'center', 'end', or 'stretch'. | | headerPosition | string | Determines the position of the tab headers relative to the tab content.Possible values: 'above', 'below', 'left', 'right'. | | backgroundColor | string | The background color of the tab component. Can be any valid CSS color value (hex, rgb, rgba, named colors, etc.). | | color | string | The text color of the tab headers. Can be any valid CSS color value. | | isActivetabIndex | number | The index of the tab that should be active by default (zero-based).If not specified, the first tab (index 0) will be active by default. |

Input and Output

Inputs:

• dataSource -> Data to be passed to the tab.
[i.e- tabId, tabName, tabContent, isDisabled, isActive, iconName, closeIcon].

• rucInputData -> Input Data to be passed to the tab.
[i.e- animationDuration, alignTabs, headerPosition, isActivetabIndex].

• customTheme: Custom styling/theme for the tab.

Outputs:

• rucEvent -> Event emitted from the tab.

Example Configuration

export const mockDataForDataSourceTab = [
{ tabId: 1,
tabName: 'tabName1',
tabContent: 'tabContent1',
isDisabled: false,
isActive: true,
iconName: 'book',
closeIcon: false,
},
{
tabId: 2,
tabName: 'tabName2',
tabContent: 'tabContent2',
isDisabled: false,
isActive: false,
iconName: 'cloud',
closeIcon: false,
},
];

export const mockDataForRucinputObjectDataTab = {
animationDuration: 2000,
alignTabs: 'start',
headerPosition: 'top',
isActivetabIndex: 2,
};

⚠️ IMPORTANT: Custom Theme Usage in Angular Material

When implementing custom themes, such as:

.custom-theme-1 {
  @include angular-material-theme($custom-theme);
}

// You must also include the typography mixin to ensure text styles are applied correctly as shown below:
.custom-theme-1 {
  @include angular-material-theme($custom-theme);
  @include mat.typography-level($theme-custom-typography-name, body-1);
}

Contribution

Contributions are welcome! Feel free to open issues or pull requests for any enhancements or fixes.

Acknowledgements

Thank you for choosing the Tab Component Library. If you have any feedback or suggestions, please let us know!