A vue component about toy bricks of skeleton screen loading

A vue component about toy bricks of skeleton screen loading

a vue component about toy bricks of skeleton screen loading.

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, circlerectradius 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

Github Repository