vue-content-placeholder

by StevenYuysy

Facebook content placeholder using Vue.js component

123 Stars 17 Forks Last release: over 3 years ago (1.0.5) MIT License 52 Commits 1 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

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.