stevenyuysy/vue-content-placeholder

Facebook content placeholder using Vue.js component

vue-content-placeholder

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 */
<content-placeholder :rows="placeholderRows"></content-placeholder>

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

vue-content-placeholder's Issues

isFlexBasis function breaking on IE

Whilst testing in IE the browser seems to flag up a syntax error regarding the isFlexBasis function, which is in fact breaking the rest of the sites JS making it impossible to use this package until this is fixed. This particular syntax error doesn't appear to be an issue in other browsers I have tested in though.

readme typo

Inispried => Inspired
differnce => difference

CSS Styling ?

Hello,

Is it possible to change the various colors programatically or via css classes ?

formateRows and formatRows

typo in component vue file

Container class and animated-backgroup-size

I think is better remove the container class and make this dev responsibility. Because in my case i don't need this class and i think also is a good idea can set animated-background-size with a prop in component. Can useful?

UI Break on iOS 10

=======================================================================

on iOS 10, all box is Combined, show only one box.
I discover it on [iPhone - iOS 10 Chrome, Safari].

New project

@StevenYuysy good job with your project!

Recently I built at the same library but to React and using SVG and it was very funny and I can learn a lot!

What do you think about the approach that I used? Maybe we can work together to build a new great library using vanilla JS...

Do you have some experience with SVG? I have some problems in my project that I need to solve 😄

Just to say thank you!

You rock! :D

SSR not working

im using vue-content-placeholder with vue SSR and got this error:

2017-06-11T10:42:28.442Z - error: ReferenceError: document is not defined
    at addStyle (eval at <anonymous> (/node_modules/vue-content-placeholder/dist/vue-content-placeholder.min.js:130:1), <anonymous>:116:22)
    at addStylesToDom (eval at <anonymous> node_modules/vue-content-placeholder/dist/vue-content-placeholder.min.js:130:1), <anonymous>:100:20)

Usage

Could you provide usage examples in the README please?

Thank's

NPM Package

Would you like to publish this on NPM ?

By the way, thank you for this awesome component!

Instaling release 1.1.0, /node_module/vue-content-loader seems empty.

Hello, I tried to install the latest version of your library and I encountered a problem.

When I try to run npm install --save vue-content-loader , my /node_modules/vue-content-loader appears empty, causing "Cannot resolve module 'vue-content-loader'".

Solution:
I had to install an older version by running:
npm install --save [email protected]

and works fine! Thank you bro!