rt-skeleton v1.4.2

RT_SKELETON

• Version 1.1.0 - Add rtSkeletonPlaceholderContainer directive
• Version 1.1.1 - Fix export rtSkeletonPlaceholderContainer directive
• Version 1.1.2 - Edit readme
• Version 1.1.3 - Changed removing elements on display none
• Version 1.1.4 - Change display block on flex for rtSkeletonPlaceholderContainer
• Version 1.2.0 - Add rightSkeleton option for rtSkeletonPlaceholder directive
• Version 1.3.0 - Changed rightSkeleton option on marginSkeleton for rtSkeletonPlaceholder directive
• Version 1.3.1 - Fix bug with marginSkeleton option for rtSkeletonPlaceholder directive
• Version 1.3.2 - Fix bug with marginSkeleton option for rtSkeletonPlaceholder directive
• Version 1.3.3 - Fix bug with marginSkeleton option for rtSkeletonPlaceholder directive
• Version 1.3.4 - Fix bug with marginSkeleton option for rtSkeletonPlaceholder directive
• Version 1.3.5 - Fix bug with marginSkeleton option for rtSkeletonPlaceholder directive
• Version 1.3.6 - Optimization for rtSkeletonPlaceholder directive
• Version 1.3.7 - Set pointer-events none for rtSkeletonPlaceholder directive
• Version 1.4.0 - Add rtSkeletonIf directive
• Version 1.4.1 - Fix a bug related to remapping in rtSkeletonIf directive
• Version 1.4.2 - Fix bug related visibility for rtSkeletonIf directive (Added detectChanges)

Install

npm i rt-skeleton

yarn add rt-skeleton

Usage

rtSkeletonPlaceholderContainer

This directive sets the attribute for removing elements from DOM after loaded

rtSkeletonContainer

This directive sets the attribute for removing elements from DOM after loaded

rtSkeletonPlaceholder directive

rtSkeletonContainer directive

*rtForSkeleton extended by *ngFor directive

Import or add global style for skeleton placeholder

@import 'node_modules/rt-skeleton/styles/styles.scss';

.rt-skeleton-segment {

  background: linear-gradient(0.85turn, rgba(39, 39, 39, 0.09), rgba(39, 39, 39, 0.03), rgba(39, 39, 39, 0.09));
  animation: colorChange 2s infinite linear;

  @keyframes colorChange {
    from {
      background-position: top 0 left 0;
      background-size: 1000%
    }
    50% {
      background-position: top center;
      background-size: 1000%
    }
    to {
      background-position: top 0 right 0;
      background-size: 1000%
    }
  }
}

Use for single item

• Note that we are creating a *rtSkeletonIf="item$ | async as data" object instead of the usual *ngIf="item$ | async"

<div rtSkeletonContainer [while]="inProgress$ | async">
    <div
            *rtSkeletonIf="item$ | async as data; else emptyList"
            class="rt-skeleton__item"
    >
        <div
                class="item__avatar"
                rtSkeletonPlaceholder
                radiusPlaceholder="50%"
                widthSkeleton="50px"
                heightSkeleton="50px"
        >
            <img class="item__avatar" src="/assets/icons/avatar_1.png" alt="">
        </div>

        <div class="item-group"><span>Name: </span>
            <div rtSkeletonPlaceholder widthSkeleton="150px"
                 class="item__value">{{data.name.first_name}}
            </div>
        </div>
        <div class="item-group"><span>Age: </span>
            <div rtSkeletonPlaceholder widthSkeleton="150px" class="item__value">{{data.age}}</div>
        </div>
        <div class="item-group"><span>address: </span>
            <div rtSkeletonPlaceholder widthSkeleton="150px" class="item__value">{{data.address}}</div>
        </div>

        <div class="item-group"><span>phone: </span>
            <div rtSkeletonPlaceholder widthSkeleton="150px" class="item__value">{{data.phone}}</div>
        </div>


    </div>
    <ng-template #emptyList>The list is empty</ng-template>
</div>

Use for list

<div
  rtSkeletonContainer
  [iterations]="5"
  [while]="inProgress$ | async"
  class="rt-skeleton-example__container"
>
  <div
    class="rt-skeleton__item"
    *rtForSkeleton="let data of items$ | async;"
  >
    <div
      rtSkeletonPlaceholder
      radiusPlaceholder="50%"
      widthSkeleton="50px"
      heightSkeleton="50px"
      class="item__avatar"
    >
      <img class="item__avatar" src="/assets/images/profile/avatar-list/avatar_1.png" alt="">
    </div>

    <div class="item-group">
      <div>Name:</div>
      <div class="item__value" rtSkeletonPlaceholder widthSkeleton="150px">{{data.name.first_name}}</div>
    </div>
    <div class="item-group">
      <div>Age:</div>
      <div class="item__value" rtSkeletonPlaceholder widthSkeleton="150px">{{data.age}}</div>
    </div>
    <div class="item-group">
      <div>Address:</div>
      <div class="item__value" rtSkeletonPlaceholder widthSkeleton="150px">{{data.address}}</div>
    </div>
    <div class="item-group">
      <div>Phone:</div>
      <div class="item__value" rtSkeletonPlaceholder widthSkeleton="150px">{{data.phone}}</div>
    </div>

  </div>
</div>

https://www.regulus.team/