vue-skeleton

A simple skeleton component powered by vue.js

Usage

Install

npm install ve-skeleton -S

Import

import VueSkeleton from 've-skeleton'
import 've-skeleton/index.css'

Vue.use(VueSkeleton)

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

MIT

Copyright © 2019-present, msidolphin