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