/ UI

A skeleton screen written in Vue.js and powered by Vuetify

A skeleton screen written in Vue.js and powered by Vuetify

vue-skeleton-screen

A skeleton screen written in Vue.js and powered by Vuetify.

Usage

//javascript
import SkeletonCard from 'vue-skeleton-screen'
...
export default{
...
	components: {
    	SkeletonCard,
	}
...
};
<!-- html -->
<skeleton-card actions round hover></skeleton-card>

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

Type: Boolean

Default: true

Description: header with or without a avatar along with a title and subtitle, set to false to hide it.

- avatar

Type: Boolean

Default: true

Description: a round avatar in header, set to false to hide it.

- media

Type: Boolean

Default: true

Description: media is a grey div stands for image to be loaded, set to false to hide it.

- actions

Type: Boolean

Default: false

Description: actions contains two action button place holders, set to true to enable it.

- lines

Type: Number

Default: 2

Description: the lines number in text section.

- round

Type: Boolean

Default: false

Description: set to true if you want rounded corner of the placeholder.

- dark (new in 0.0.4)

Type: Boolean

Default: false

Description: set to true to use dark theme.

GitHub