tb-skeleton

a vue component about toy bricks of skeleton screen loading

install

$ npm i tb-skeleton -s

use npm

  import Vue from 'vue'
  import skeleton from 'tb-skeleton'
  import  'tb-skeleton/dist/skeleton.css'
  Vue.use(skeleton)

use cdn

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/tb-skeleton.min.js"></script>
<link ref="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/skeleton.css"></script>

live example

simple demo, page demo

start

<template>
  <div width="20%">
    <tb-skeleton :aspect-ratio="1" :theme="opacity" :shape="circle" bg-color="#dcdbdc"></tb-skeleton>
  </div>
</template>
<script>
</script>

use skeleton

use skeleton component, you can set common props

<template>
  <div>
    <skeleton :theme="opacity" :shape="radius" :bg-color="#dcdbdc">
     <tb-skeleton  width="30%" :aspect-ratio="1"  :shape="circle" bg-color="#eee"></tb-skeleton>
     <tb-skeleton  width="30%" :aspect-ratio=".3"></tb-skeleton>
     <tb-skeleton  width="30%" :aspect-ratio=".3"></tb-skeleton>
   </skeleton>
  </div>
</template>
<script>
  import {TbSkeleton,Skeleton} from 'tb-skeleton'
  export default {
    components: {
      TbSkeleton,
      Skeleton
    }
  }
</script>

use grid layout

about grid layout,please see simple-grid

<template>
<skeleton theme="opacity" style="width:200px" shape="radius" bg-color="#dcdbdc">
    <row>
      <col :span="8">
        <tb-skeleton :aspect-ratio="1" shape="circle">
        </tb-skeleton>
      </col>
      <col :span="16">
        <row>
          <col :span="12" style="padding-left: 10px;margin-top: 5px">
            <tb-skeleton :aspect-ratio="0.2"></tb-skeleton>
          </col>
          <col :span="24" style="padding-left: 10px;margin-top: 10px">
            <tb-skeleton :aspect-ratio="0.1"></tb-skeleton>
          </col>
          <col :span="24" style="padding-left: 10px;margin-top: 10px">
            <tb-skeleton :aspect-ratio="0.1"></tb-skeleton>
          </col>
        </row>
      </col>
    </row>
  </skeleton>
</template>
<script>
  import {Col,Row} from 'simple-grid'
  import {TbSkeleton,Skeleton} from 'tb-skeleton'
  export default {
    components: {
      tb-skeleton,
      skeleton,
      Col,
      Row
    }
  }
</script>

skeleton Component

props

param	description	type	default
theme	opacity,gradient,flex-outer,flex-inner, normal	String	normal
shape	tb-skeleton shape, circle、rect、radius	String
bgColor	tb-skeleton background-color	String
duration	tb-skeleton animation duration	String,Number

tb-skeleton Component

props

param	description	type	default
theme	the same as skeleton theme	String	normal
shape	the same as skeleton shape	String	rect
bgColor	the same as skeleton bgColor	String
aspectRatio	ratio about width,height	Number
height	the tb-skeleton height	Number,String
width	the tb-skeleton width	Number,String	100%
duration	the tb-skeleton animation duration	String,Number