vue-skeleton
A simple skeleton component powered by vue.js
Usage
Install
npm install ve-skeleton -S
Import
Vue
Use
<template> <div id="app"> <!-- basic --> <ve-skeleton/> <!-- with avatar --> <ve-skeleton avatar/> <!-- complex combination --> <ve-skeleton avatar vertical-align="middle" :title="{width: 80}" :paragraph="{rows: 4, width: 61}"/> <!-- with slot --> <ve-skeleton :loading="loading" :avatar="{size: 100}" vertical-align="middle" :title="{width: 80}" :paragraph="{rows: 4, width: 61}"> <div class="demo"> <div class="demo-left"> <img src="./avatar.jpg"/> </div> <div class="demo-right"> <div class="title">vue-skeleton</div> <ul class="paragraph"> <li>a simple skeleton component powered by vue.js</li> <li>a simple skeleton component powered by vue.js</li> <li>a simple skeleton component powered by vue.js</li> </ul> </div> </div> </ve-skeleton> <button style="margin-top: 20px;" @click="toggle">toggle</button> </div></template> <script>export default { name: 'App', data () { return { loading: true } }, methods: { toggle () { this.loading = !this.loading } }}</script> <style lang="less">.demo { display: table; width: 100%; &-left { display: table-cell; padding-right: 16px; vertical-align: middle; img { width: 100px; height: 100px; border-radius: 50%; object-fit: cover; } } &-right { display: table-cell; width: 100%; vertical-align: middle; .title { margin-top: 16px; } ul { margin: 0; padding: 0; margin-top: 28px; li { margin-top: 12px; list-style: none; &:first-child { margin-top: 0; } } } }} </style>
Props
ve-skeleton
Attribute | Type | Description | Default | Accepted values |
---|---|---|---|---|
loading | boolean |
display the skeleton when true |
true | - |
animated | boolean |
animation effect | true | - |
avatar | boolean , object |
show avatar placeholder | false | - |
title | boolean , object |
show title placeholder | true | - |
paragraph | boolean , object , array |
show paragraph placeholder | true | - |
verical-align | string |
verical alignment | top | top, middle, bottom |
align | string |
avatar placement | left | left, right |
avatar
Attribute | Type | Description | Default | Accepted values |
---|---|---|---|---|
size | number , string |
the size of avatar, default unit is px |
40 | - |
shape | string |
the shape of avatar | circle | circle, square |
title
Attribute | Type | Description | Default | Accepted values |
---|---|---|---|---|
width | number , string |
the width of title, default unit is % |
38 | - |
paragraph
When paragraph is an
Array
, every elements have width config
Attribute | Type | Description | Default | Accepted values |
---|---|---|---|---|
rows | number |
the row count of paragraph | 3 | - |
width | number |
width of a paragraph. when paragraph is a Object , it can only set the last row width. the default unit is % |
61 | - |
Slots
Attribute | Description |
---|---|
- | displayed sub component when loading is false |
License
Copyright © 2019-present, msidolphin