vue-blog-placeholders

    0.1.4 • Public • Published

    vue-blog-placeholders

    npm vue2

    Vue plugin package for a placeholder of your content to a demonstration before content loads.

    example


    Installation

    • via npm: npm install vue-blog-placeholders --save

    Usage

    Include plugin in your app.js file.

    import Vue from 'vue'
    import VueBlogPlaceholders from 'vue-blog-placeholders'
     
    Vue.use(VueBlogPlaceholders)

    A css file is included when importing the package. You may have to setup your bundler to embed the css in your page.

    Examples:

    <content-placeholders>
      <content-placeholders-img :height="14"/>
      <content-placeholders-heading />
    </content-placeholders>

    rendered example

    <content-placeholders>
        <content-placeholders-list-item :items="3">
            <content-placeholders-img :height="5"/>
            <content-placeholders-text :lines="2"/>
        </content-placeholders-list-item>
    </content-placeholders>

    rendered example

    <content-placeholders :rounded="15">
        <content-placeholders-img :height="12"/>
    </content-placeholders>
    <content-placeholders :centered="true">
        <content-placeholders-text :lines="3" :thickness="25"/>
    </content-placeholders>

    rendered example

    <content-placeholders>
      <content-placeholders-text :lines="6" :thickness="30"/>
    </content-placeholders>

    rendered example

    Available components and properties

    • wrap component <content-placeholders>

      • Boolean animated (default: true)
      • Boolean rounded (default: 10px) - border radius in px
      • Boolean centered (default: false)
      • String gradient-color (default: #ccc)
      • String background-color (default: #eee)

      these properties will effect the inner components

    • <content-placeholders-heading />

      • Boolean img (default: false)
    • <content-placeholders-text />

      • Number lines (default: 4)
      • Number thickness (default: 15) - in px
      • Boolean center (default: false)
    • <content-placeholders-img />

      • Number height (default: 2) - in em
    • <content-placeholders-list-item />

      • Number items (default: 4)

    License

    See the LICENSE file for license rights and limitations (MIT). This package inspired by vue-content-placeholders.

    Install

    npm i vue-blog-placeholders

    DownloadsWeekly Downloads

    1

    Version

    0.1.4

    License

    none

    Unpacked Size

    47 kB

    Total Files

    18

    Last publish

    Collaborators

    • omegion-org