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:

RUC Library 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 complete library

npm install @uxpractice/ruc-lib

Install individual component

If users only need the dataflow component, they can install it separately

npm install @ruc-lib/tab

Usage

To use the tab component in your project, follow the integration guidelines provided in the documentation. Customize the tab as per your requirements by adjusting the configuration options.

import required modules

Import ContextModule into app.module.ts file.

for library

import { RuclibTabModule } from '@uxpractice/ruc-lib/tab'

for seperate package

import { RuclibTabModule } from '@ruc-lib/tab'

Use component selector

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

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.

rucInputData (sample object)

Default value be like –

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,
};

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!