1.1.3 • Published 5 years ago
vue-skeleton-screen v1.1.3
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. |