Need help with vue-content-placeholder?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

StevenYuysy
123 Stars 17 Forks MIT License 52 Commits 2 Opened issues

Description

Facebook content placeholder using Vue.js component

Services available

!
?

Need anything else?

Contributors list

# 27,662
hackern...
js
HTML
vue-rou...
43 commits
# 12,531
CSS
Electro...
Three.j...
callbac...
4 commits
# 310,741
HTML
Shell
C#
Vue.js
1 commit

vue-content-placeholder

travis-ci

Inspired by Facebook content placeholder deconstruction

Get stared

Here is DEMO.

How does it work?

You can check out the article above. The difference is that I use the property of

flex
instead of
absolute
in every row.

The boxes can be custom height and custom width, you can choose a fixed height with

px
, or just use Number to declare its
flex-basis
or use
%
,
em
...

How to use?

ES6

/* in xxx.vue */


import ContentPlaceholder from 'vue-content-placeholder'

export default { ... data () { return { placeholderRows: [ { height: '25px', boxes: [[0, '100px']] }, { height: '25px', boxes:[[0, '100px'], ['10%', 1]] }, { height: '25px', boxes: [[0, '100px']] }, { height: '25px', boxes:[[0, '100px'], ['10%', 2]] }, { height: '2rem', boxes: [[0, 0]] }, { height: '1rem', boxes: [[0, 5]] }, { height: '1rem', boxes: [[0, 0]] }, { height: '1rem', boxes: [[0, '50%']] }, { height: '1rem', boxes: [[0, 0]] }, { height: '1rem', boxes: [[0, '10em']] } ] } }, components: { ContentPlaceholder }, ... }

Option

| Options | type | discription| | -- | -- | -- | | rows | Array | The property of the component | | row | Object | The element of the rows | | row.height | String | The height of the row, support

px
,
rem
,
em
,
%
| | row.boxes | Array | The transition boxes of the row | | box | Array | The box in the row.boxes | | box[0] | String or Number | To declare the width of the left gutter | | box[1] | String or Number | To declare the width of the box | | size | String | Control the animation, such as 250% or 900px |

Contribution

  • Fork it
  • PR

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.