Skip to content

mts88/placeholder-content-loader

Repository files navigation

Placeholder Content Loader

MIT License CircleCI Commitizen friendly semantic-release GitHub release Open Source

This library is a simple collection of placeholder components, realized with the library ngneat/content-loader.

Installation

In order to install:

npm install --save placeholder-content

How to use it?

Import the module PlaceholderContentModule where do you need:

import {
  PlaceholderContentModule,
  PlaceHolderColor,
} from 'placeholder-content';

const placeholderColorScheme: PlaceHolderColor = {
  DARK: {
    background: '#333333',
    foreground: '#373737',
  },
  LIGHT: {
    background: '#eeeeee',
    foreground: '#e3e3e3',
  },
};

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    AppRoutingModule,
    PlaceholderContentModule.forRoot({
      theme: 'dark',
      colorScheme: placeholderColorScheme,
    }),
    // other imports...
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

Usage

In your html use component:

<div>
  <mts-card-placeholder
    [theme]="'light'"
    [animate]="true"
    [speed]="2"
    [containerClass]="['custom-class-for-container']"
  ></mts-card-placeholder>
  <div></div>
</div>

You can use these input for each component:

Name Type Description
theme ThemeSchema Theme of single placeholder (override global config).
Default: 'dark'
animate boolean Animation of placeholder.
Default: true
speed number Speed of animation.
Default: 2
containerClass string or Array<string> Custom classes for placeholder container.
Default: []

Components

List of components:

Card

Card placeholder

<div>
  <mts-card-placeholder></mts-card-placeholder>
</div>

Form

Form placeholder

<div>
  <mts-form-placeholder></mts-form-placeholder>
</div>

Info

Info placeholder

<div>
  <mts-info-column-placeholder></mts-info-column-placeholder>
</div>

Table

Table placeholder

<div>
  <mts-table-placeholder></mts-table-placeholder>
</div>

Compatibility

  • @angular/core: ^11.0.0 (not tested with 9 and 10)

Credits

ngneat/content-loader

License

MIT