Skeleton
Rows
Defines the number of rows in the skeleton, typically for simulating text content.
<script setup lang="ts">
import { NmorphSkeleton } from "@nmorph/nmorph-ui-kit";
</script><template>
<div class="skeleton-rows-overview">
<NmorphSkeleton :rows="3" :loading="true" />
</div>
</template>Animated
Enables animation for the skeleton component if set to true.
Animated
<script setup lang="ts">
import {
NmorphAvatar,
NmorphSkeleton,
NmorphSkeletonItem,
NmorphSwitch,
NmorphImage,
} from "@nmorph/nmorph-ui-kit";
const animated = ref(true);
</script><template>
<div class="skeleton-animated-overview">
<div class="switch">
<span>Animated</span>
<NmorphSwitch v-model="animated" />
</div>
<NmorphSkeleton :loading="true" :animated="animated">
<template #template>
<NmorphSkeletonItem variant="rect" width="100%" height="14px" />
<NmorphSkeletonItem
variant="image"
width="200px"
height="200px"
:style="{ 'margin-bottom': '8px' }"
/>
<NmorphSkeletonItem variant="circle" width="50px" height="50px" />
</template><template #default>
<span>Lorem</span>
<NmorphImage
src="./image.jpg"
:style="{
width: '200px',
height: '200px',
'margin-bottom': '8px',
}"
/>
<NmorphAvatar
src="./avatar.jpg"
:style="{
width: '50px',
height: '50px',
}"
/>
</template>Loading
Controls the display of the skeleton.
Loading state
<script setup lang="ts">
import {
NmorphImage,
NmorphSkeleton,
NmorphSkeletonItem,
NmorphSwitch,
} from "@nmorph/nmorph-ui-kit";
import { Winter } from "@/assets/images";
const loading = ref(true);
</script><template>
<div class="skeleton-loading-overview">
<div class="switch">
<span>Loading state</span>
<NmorphSwitch v-model="loading" />
</div>
<NmorphSkeleton :loading="loading">
<template #template>
<NmorphSkeletonItem
variant="image"
width="200px"
height="200px"
:style="{ 'margin-bottom': '8px' }"
/>
<NmorphSkeletonItem variant="rect" width="100%" height="14px" />
</template><template #default>
<NmorphImage
:src="Winter"
:style="{
width: '200px',
height: '200px',
'margin-bottom': '5px',
}"
/>
<span>Lorem</span>
</template>