GitHub - michalsnik/vue-content-placeholders: Composable components for renderin...
source link: https://github.com/michalsnik/vue-content-placeholders
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
vue-content-placeholders
Vue addon for rendering fake content while data is fetching to provide better UX and lower bounce rate.
Installation
- via npm:
npm install vue-content-placeholders --save
- via yarn:
yarn add vue-content-placeholders
Usage
Include plugin in your main.js
file.
import Vue from 'vue'
import VueContentPlaceholders from 'vue-content-placeholders'
Vue.use(VueContentPlaceholders)
A css file is included when importing the package. You may have to setup your bundler to embed the css in your page.
Examples:
<content-placeholders>
<content-placeholders-heading :img="true" />
<content-placeholders-text :lines="3" />
</content-placeholders>
<content-placeholders :rounded="true">
<content-placeholders-img />
<content-placeholders-heading />
</content-placeholders>
Available components and properties
-
root
<content-placeholders>
- Boolean
animated
(default: true) - Boolean
rounded
(default: false) - border radius - Boolean
centered
(default: false)
these properties define how all children components will act
- Boolean
-
<content-placeholders-heading />
- Boolean
img
(default: false)
- Boolean
-
<content-placeholders-text />
- Number
lines
(default: 4)
- Number
-
<content-placeholders-img />
License
See the LICENSE file for license rights and limitations (MIT).
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK