Shapes in Vue Skeleton component

11 Jun 20248 minutes to read

The Skeleton control support various built-in shape variants to design layout of the page. You can use the shape property to create a preview of any layout.

The Skeleton component supports the following content shapes:

Circle skeleton shape

<template>
    <div>
        <ejs-skeleton shape= 'Circle' width= "48px"></ejs-skeleton>
    </div>
</template>

<script setup>
    
    import { SkeletonComponent } from "@syncfusion/ej2-vue-notifications";

    

    export default { }
</script>

<style>
    @import "../node_modules/@syncfusion/ej2-base/styles/material.css";
    @import "../node_modules/@syncfusion/ej2-notifications/styles/material.css";
</style>

Square skeleton shape

<template>
    <div>
        <ejs-skeleton shape= 'Square' width= "48px"></ejs-skeleton>
    </div>
</template>

<script setup>
    
    import { SkeletonComponent } from "@syncfusion/ej2-vue-notifications";

    

    export default { }
</script>

<style>
    @import "../node_modules/@syncfusion/ej2-base/styles/material.css";
    @import "../node_modules/@syncfusion/ej2-notifications/styles/material.css";
</style>

Rectangle skeleton shape

<template>
    <div>
        <ejs-skeleton shape= 'Rectangle' width= "50px"></ejs-skeleton>
    </div>
</template>

<script setup>
    
    import { SkeletonComponent } from "@syncfusion/ej2-vue-notifications";

    

    export default { }
</script>

<style>
    @import "../node_modules/@syncfusion/ej2-base/styles/material.css";
    @import "../node_modules/@syncfusion/ej2-notifications/styles/material.css";
</style>

Text skeleton shape

<template>
    <div>
        <ejs-skeleton shape= 'Text' width= "15px"></ejs-skeleton>
    </div>
</template>

<script setup>
    
    import { SkeletonComponent } from "@syncfusion/ej2-vue-notifications";

    

    export default { }
</script>

<style>
    @import "../node_modules/@syncfusion/ej2-base/styles/material.css";
    @import "../node_modules/@syncfusion/ej2-notifications/styles/material.css";
</style>

Below example demonstrates the above functionalities of a Skeleton component.

Composition API (~/src/App.vue)

<template>
    <div>
        <div id="skeletonCard">
            <div class='cardProfile'>
                <ejs-skeleton id="cardProfile" shape="Circle" width="60px"></ejs-skeleton>
            </div>
            <div class="cardinfo">
                <ejs-skeleton id="text1" width="30%" height='15px'></ejs-skeleton><br/>
                <ejs-skeleton id="text2" width="15%" height='15px'></ejs-skeleton>
            </div>
            <div class="cardContent">
                <ejs-skeleton id="cardImage" shape="Rectangle" width="100%" height='150px'></ejs-skeleton>
            </div>
            <div class="cardoptions">
                <ejs-skeleton id="rightOption" shape="Rectangle" width="20%" height='32px'></ejs-skeleton>
                <ejs-skeleton id="leftOption" shape="Rectangle" width="20%" height='32px'></ejs-skeleton>
            </div>
        </div>
    </div>
</template>

<script setup>
    
import { SkeletonComponent as EjsSkeleton } from "@syncfusion/ej2-vue-notifications";

</script>

<style>
    @import "../node_modules/@syncfusion/ej2-base/styles/material.css";
    @import "../node_modules/@syncfusion/ej2-notifications/styles/material.css";

    #skeletonCard {
      padding: 10px;
      line-height: inherit;
      height: 330px;
    }

    #skeletonCard .cardProfile {
      float: left;
      margin-right: 15px;
    }

    #skeletonCard .cardinfo {
      margin-top: 10px;
      overflow: hidden;
    }

    #skeletonCard .cardContent {
      margin: 20px 0px 20px;
    }

    #skeletonCard .cardoptions {
      display: flex;
      justify-content: space-between;
    }

</style>

Options API (~/src/App.vue)

<template>
    <div>
        <div id="skeletonCard">
            <div class='cardProfile'>
                <ejs-skeleton id="cardProfile" shape="Circle" width="60px"></ejs-skeleton>
            </div>
            <div class="cardinfo">
                <ejs-skeleton id="text1" width="30%" height='15px'></ejs-skeleton><br/>
                <ejs-skeleton id="text2" width="15%" height='15px'></ejs-skeleton>
            </div>
            <div class="cardContent">
                <ejs-skeleton id="cardImage" shape="Rectangle" width="100%" height='150px'></ejs-skeleton>
            </div>
            <div class="cardoptions">
                <ejs-skeleton id="rightOption" shape="Rectangle" width="20%" height='32px'></ejs-skeleton>
                <ejs-skeleton id="leftOption" shape="Rectangle" width="20%" height='32px'></ejs-skeleton>
            </div>
        </div>
    </div>
</template>

<script>
    
import { SkeletonComponent } from "@syncfusion/ej2-vue-notifications";

export default {
    name: "App",
    components: {
        "ejs-skeleton":SkeletonComponent,
    },
    data: function () {
        return {};
    }
}
</script>

<style>
    @import "../node_modules/@syncfusion/ej2-base/styles/material.css";
    @import "../node_modules/@syncfusion/ej2-notifications/styles/material.css";

    #skeletonCard {
      padding: 10px;
      line-height: inherit;
      height: 330px;
    }

    #skeletonCard .cardProfile {
      float: left;
      margin-right: 15px;
    }

    #skeletonCard .cardinfo {
      margin-top: 10px;
      overflow: hidden;
    }

    #skeletonCard .cardContent {
      margin: 20px 0px 20px;
    }

    #skeletonCard .cardoptions {
      display: flex;
      justify-content: space-between;
    }

</style>