设置

步骤 1 - 导入 SkeletonScreen 模块

添加数据 SkeletonScreenModule 到您的应用模块中, 这样可以访问主机指令 .

...
import { SkeletonScreenModule } from '@daysmart/angular-skeleton-screen';
...

@NgModule({
  declarations: [
    SomeComponent
  ],
  imports: [
    ...
    SkeletonScreenModule,
    ...
  ],
  providers: []
})
export class SomeModule {}

第2步 - 将主板屏幕样式表添加到您的全局样式表列表

添加数据 skeleton-screen.scss 在您的 angular.json 文件的全局样式表列表中的文件.

{
    "projects": {
        "some-angular-proj": {
            "architect": {
                "build": {
                    "options": {
                        "styles": [
                            "node_modules/@daysmart/angular-skeleton-screen/styles/skeleton-screen.scss"
                        ]
                    }
                }
            }
        }
    }
}

使用量

指令

skeletonScreen

把这个应用到骨架屏幕的顶部. 上面的任何内容 都会传播到儿童骨架指令 并成为默认. 这个是用来包装 skeletonData 财务报告和审定财务报表 skeletonTable 并且实际上不需要这些指令. 它只是让生活更容易 在更大的骨架屏幕上.

skeletonData

将此应用到任何您想要替换为骨架屏幕的元素中 . 它会得到它的默认 从父母 skeletonScreen 指令,但可以独立设置. 您可以通过设置相同的输入来覆盖默认值 skeletonData 元素本身.

skeletonTable

将此应用到任何您想要替换为骨架屏幕的元素中 . 它会得到它的默认 从父母 skeletonScreen 指令,但可以独立设置. 您可以通过设置相同的输入来覆盖默认值 skeletonTable 元素本身.

支持输入

1. showSkeleton - 当设定为非假值时,骨架将被显示. 这得到所有指令的支持,并且可能被所有儿童指令所推翻.
2. placeholderHeight - 可以设置为数字或字符串或未设置。 当设定为数字时,单位默认为 px。使用字符串时可以提供单位。 当留下空白时,指令会尽量推断出原始元素的高度并使用. 这得到所有指令的支持,并且可能被所有儿童指令所推翻.
3. placeholderWidth - 可以设置为数字或字符串或未设置。 当设定为数字时,单位默认为 px。使用字符串时可以提供单位。 当留有空白时,指令会尽量推断出原始元素的宽度并使用. 这是 仅限 由 skeletonScreen 财务报告和审定财务报表 skeletonData 指令。 。 .
4. skeletonTableRowAmount - 以代表骨干行数量的数字显示在骨干表内。 这是 仅限 由 skeletonScreen 财务报告和审定财务报表 skeletonTable 指令。 。 .

其他说明

• 这些指令也可适用于物质部件.
• 这个 skeletonData 指令不能直接适用于自封内容(img, (中文(简体) ), input(见E/CN.4/Sub.2/2002/L.48等)。 如果您需要将指令应用到这样的元素中,它必须被应用到诸如: div 或者说 span。 。 。 .

示例

样本模板

<div
    class="info-container"
    skeletonScreen
    [showSkeleton]="isLoading"
    placeholderWidth="50%"
>
    <!-- The skeletonScreen's placeholderWidth is being overridden-->
    <span skeletonData placeholderWidth="5rem" placeholderHeight="5rem">
        <!-- The skeletonData directive does not support being applied directly to an img element -->
        <img [src]="profile.imgSrc" />
    </span>

    <!--No placeholder height, so the directive attempts to infer the correct size-->
    <!-- All the defaults set by the skeleton are being used -->
    <div class="field-container" skeletonData>
        Name:
        <span name="name">{{ profile.name }}</span>
    </div>

    <!-- The skeletonScreen's showSkeleton is being overridden-->
    <table
        skeletonTable
        [skeletonTableRowAmount]="5"
        [showSkeleton]="tableIsLoading"
    >
        ...
    </table>
</div>

样本组件

@Component({
    ...
})
export class SomeComponent implements OnInit {
    isLoading: boolean;
    profile: SomeProfile;

    constructor(
        private httpClient: SomeHttpClient
    )

    ngOnInit() {
        this.httpClient.getProfile(...)
            .pipe(
                map(profile => {
                    this.isLoading = false;
                    this.profile = profile;
                })
            );
    }

    ...
}