Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

https://github.com/anthinkingcoder/tb-skeleton

a vue component about toy bricks of skeleton screen loading
https://github.com/anthinkingcoder/tb-skeleton

Last synced: about 1 month ago
JSON representation

a vue component about toy bricks of skeleton screen loading

Lists

README 

        
# tb-skeleton

a vue component about toy bricks of skeleton screen loading



# install

 ```bash

 $ npm i tb-skeleton -s

 ```

 

# use npm

```js

  import Vue from 'vue'

  import skeleton from 'tb-skeleton'

  import  'tb-skeleton/dist/skeleton.css'

  Vue.use(skeleton)

```



# use cdn

```html



```

# live example

> [simple demo](https://codepen.io/zhoulin/pen/ajRzBL), [page demo](https://codepen.io/zhoulin/pen/ajRzJV)



# start

```html



  


    

  



```



# use skeleton

> use skeleton component, you can  set common props

```html



  


    

     

     

     

   

  



  import {TbSkeleton,Skeleton} from 'tb-skeleton'

  export default {

    components: {

      TbSkeleton,

      Skeleton

    }

  }



```



# use grid layout

> about grid layout,please see [simple-grid](https://github.com/anthinkingcoder/simple-grid)

```html



    

      

        

        

      

      

        

          

            

          

          

            

          

          

            

          

        

      

    

  



  import {Col,Row} from 'simple-grid'

  import {TbSkeleton,Skeleton} from 'tb-skeleton'

  export default {

    components: {

      tb-skeleton,

      skeleton,

      Col,

      Row

    }

  }



```



# 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 |  |