vue-skeleton-screen

a skeleton screen written in Vue.js
3,665 21
vue skeleton
Install
npm install vue-skeleton-screen
Latest Version:1.1.3
Vue:2
License:MIT
Last Updated:Aug 28, 2019
Links: GitHub  ·  npm
Maintainer: dacredible

Usage

//javascript
import SkeletonCard from 'vue-skeleton-screen';
...
export default{
...
	components: {
    	SkeletonCard,
	}
...
};

<!-- html -->
<!-- the width of the card will determined by its parent -->
<div class="container">
  <skeleton-card actions round hover></skeleton-card>
</div>

Installatoin

Using npm:

$ npm i --save vue-skeleton-screen

Dependencies

  • Vue, This is a component written in vue and can only use for Vue projects. For information, go to https://vuejs.org/.

Api

flag Type Default Description
header Bool true header with or without a avatar along with a title and subtitle set to false to hide it.
avatart Bool true a round avatar in header, set to false to hide it.
media Bool true media is a grey div stands for image to be loaded, set to false to hide it.
action Bool false actions contains two action button placeholders, set to true to enable it.
lines Number 2 display how many lines in text section.
round Bool false set to true if you want rounded corner of the placeholder
dark Bool false set to true to use dark theme.
isLoading Bool false set to true to display loading animation.

Related Packages

tb-skeleton

a toy bricks of skeleton

20,107 90
skeleton vue
vueleton

Vue components with only core features.

17,333 4
skeleton vue
vue-loading-skeleton

Make beautiful loading skeleton that automatically adapt your vue app.

123,094
skeleton vue vuejs
vue-cosk

Vue content skeleton

859 1
skeleton vue content
@shimmer-from-structure/vue

Vue 3 adapter for shimmer-from-structure

102,593 1,125
skeleton vue loading shimmer

Version History

Version Released Vue License
1.1.3 ^2.6.6 MIT
1.1.2 ^2.6.6 MIT
1.1.1 ^2.6.6 MIT
1.1.0 ^2.6.6 MIT
1.0.1 ^2.6.6 MIT