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. |