UXP Skeleton

A customizable Angular Skeleton is a placeholder to display instead of the actual content.

Installation Guide

To use the UXP ruc-lib Skeleton Library, you can install the entire RUC library or just this specific component.

$3

``bash
npm install @uxpractice/ruc-lib
`

$3

If you only need the Skeleton component:

For Angular 15:
`bash
npm install @ruc-lib/skeleton@3.2.0 @angular/material@^15.0.0 @angular/cdk@^15.0.0
`

For Angular 16:
`bash
npm install @ruc-lib/skeleton@3.2.0 @angular/material@^16.0.0 @angular/cdk@^16.0.0
`

For Angular 17:
`bash
npm install @ruc-lib/skeleton@4.0.0 @angular/material@^17.0.0 @angular/cdk@^17.0.0
`

For Angular 18:
`bash
npm install @ruc-lib/skeleton@4.0.0 @angular/material@^18.0.0 @angular/cdk@^18.0.0
`

For Angular 19:
`bash
npm install @ruc-lib/skeleton@4.0.0 @angular/material@^19.0.0 @angular/cdk@^19.0.0
`

For Angular 20:
`bash
npm install @ruc-lib/skeleton@4.0.0
`

> Note: When installing in Angular 15-19 apps, you must specify the matching @angular/material and @angular/cdk versions to avoid peer dependency conflicts. Angular 20 will automatically use the correct versions.

Version Compatibility

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

| Angular Version | Compatible @ruc-lib/skeleton Version |
|--------------------|--------------------------------------------|
| 15.x.x | npm install @ruc-lib/skeleton@^3.2.0 |
| 16.x.x | npm install @ruc-lib/skeleton@^3.2.0 |
| 17.x.x | npm install @ruc-lib/skeleton@^4.0.0 |
| 18.x.x | npm install @ruc-lib/skeleton@^4.0.0 |
| 19.x.x | npm install @ruc-lib/skeleton@^4.0.0 |
| 20.x.x | npm install @ruc-lib/skeleton@^4.0.0 |

Usage

$3

In your Angular component file (e.g., app.component.ts), import the RuclibSkeletonComponent:

`typescript
import { Component } from '@angular/core';

// For Complete Library
import { RuclibSkeletonComponent } from '@uxpractice/ruc-lib/skeleton';

// For Individual Package
import { RuclibSkeletonComponent } from '@ruc-lib/skeleton';

@Component({
selector: 'app-root',
imports: [RuclibSkeletonComponent],
templateUrl: './app.component.html',
})
export class AppComponent {
// Component code here
}
`

$3

In your component's template, use the selector and pass the configuration object to the rucInputData input.

`html

`

API Reference

$3

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

$3

This is the main configuration object for the progress bar.

| Property | Type | Description |
|-------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------|-------------------------------------------------------------------|
| shape | 'rectangle' \| 'rounded-rectangle' \| 'square' \| 'circle' \| 'triangle' \| 'arrow-left' \| 'arrow-right' \| 'arrow-up' \| 'arrow-down' \| 'loader' | The Shape of the Skeleton . |
| width | string | To set the width of skeleton not applicable to loader. |
| height | string | To set the height of skeleton not applicable to loader. |
| borderRadius | string | To set the borderRadius of skeleton not applicable to loader bar. |
| class | string | To set a custom class of skeleton not applicable to loader . |
| tooltip | boolean | If true, displays the tooltip labels. |
| tooltipText | string | To set a tooltip text of skeleton not applicable to loader. |
| tooltipPosition | 'above' \| 'below' \| 'left' \| 'right' | To set a tooltip position of skeleton not applicable to loader. |
| isLoader | boolean | true , fasle when loader shape is selected labels. |
| loaderPosition | 'page' \| 'section' \| 'inline' \| 'newline' | Loader Position labels. |
| loaderCustomText | string | loader custom text. |
| loaderSpinnerLogoUrl | string | loader image if user want. |

Example Configuration

Here's an example of how to configure the Skeleton in your component's TypeScript file.

`typescript
import { Component } from '@angular/core';

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
})
export class AppComponent {
skeletonData = {
shape: 'circle',
width: "50px",
height: "50px",
borderRadius: '',
class: '',
tooltip: false,
tooltipText : '',
tooltipPosition: '',
isLoader: false
};
}
``

Contribution

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

Acknowledgements

Thank you for choosing the Skeleton library. If you have any feedback or suggestions, please let us know!