All Projects → FrancescoSaverioZuppichini → Skeleton Card Vuejs

FrancescoSaverioZuppichini / Skeleton Card Vuejs

A reusable skeleton card component written in Vuejs

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to Skeleton Card Vuejs

Awesome Vuetify
🎉 The best resources related to Vuetify
Stars: ✭ 1,189 (+749.29%)
Mutual labels:  vuetify
Multivisor
Centralized supervisor WebUI and CLI
Stars: ✭ 104 (-25.71%)
Mutual labels:  vuetify
Vue Expenses
A simple expense tracking application
Stars: ✭ 117 (-16.43%)
Mutual labels:  vuetify
Boilerplate Vue Apollo Graphql Mongodb
Start your magical stack journey!
Stars: ✭ 85 (-39.29%)
Mutual labels:  vuetify
Ui Ux Designer Roadmap
Roadmap on becoming a UI/UX designer in 2017
Stars: ✭ 1,357 (+869.29%)
Mutual labels:  ux-design
Laravel Vuetify Spa Starter
Laravel Vuetify Starter SPA built with Laravel 6.0, JWT Auth, Vue 2, Vue Router 3, Vuex 3, Axios, Vuetify 2
Stars: ✭ 115 (-17.86%)
Mutual labels:  vuetify
Purify
All-in-one tool for managing vulnerability reports from AppSec pipelines
Stars: ✭ 72 (-48.57%)
Mutual labels:  vuetify
Vuetify Datetime Picker
DatetimePicker component for Vuetify.js. https://darrenfang.github.io/vuetify-datetime-picker/
Stars: ✭ 123 (-12.14%)
Mutual labels:  vuetify
Selection
✨ Selection - A simple and lightweight library to add a visual way of selecting elements, just like on your Desktop. Zero dependencies. Full mobile and scroll support.
Stars: ✭ 1,371 (+879.29%)
Mutual labels:  ux-design
Fanray
A blog built with ASP.NET Core
Stars: ✭ 117 (-16.43%)
Mutual labels:  vuetify
Beautify With Vuetify
Learn how to create beautiful web applications with Vuetify!
Stars: ✭ 92 (-34.29%)
Mutual labels:  vuetify
Vuetify Vscode
Vuetify vscode extension
Stars: ✭ 98 (-30%)
Mutual labels:  vuetify
Vue Telescope Analyzer
Detect Vue technologies running on a website ✨
Stars: ✭ 117 (-16.43%)
Mutual labels:  vuetify
Patternfly Design
Use this repo to file all new feature or design change requests for the PatternFly project
Stars: ✭ 82 (-41.43%)
Mutual labels:  ux-design
Theme Blog
A Free Material Blog Theme for Vuetify
Stars: ✭ 123 (-12.14%)
Mutual labels:  vuetify
Laravel Vuetify Spa
Laravel-Vue SPA starter project template with Vuetify frontend.
Stars: ✭ 73 (-47.86%)
Mutual labels:  vuetify
Sysmon
A B/S mode system monitor for linux (demo http://199.247.1.240:2048)
Stars: ✭ 110 (-21.43%)
Mutual labels:  vuetify
Inshop Crm Client
Inshop CRM / ERP Client. It's powerful framework allows to build systems for business with different workflows. It has on board multi language support, clients management, projects & tasks, documents, simple accounting, inventory management, orders & invoice management, possibilities to integrate with third party software, REST API, and many other features.
Stars: ✭ 135 (-3.57%)
Mutual labels:  vuetify
Periodicity
A modern, powerful periodic table
Stars: ✭ 123 (-12.14%)
Mutual labels:  vuetify
Vuetify Swipeout
👆 A swipe out example built with Vue CLI 3 + Vuetify + Swiper.
Stars: ✭ 117 (-16.43%)
Mutual labels:  vuetify

skeleton-card-vuejs

A reusable skeleton card component written in Vuejs

alt text

Motivation

Loader spinner are boring. A skeleton card gives to the user a clue of what the content will look like.

Usage

The package can be installed using npm

npm install -S skeleton-card-vuejs

Then you just need to import it has a normal vuejs component

import SkeletonCard from 'skeleton-card-vuejs'

It provides a customisable skeleton card to be display as feedback while loading a content

It needs Vuetify in order to work, you can find more about it:

https://vuetifyjs.com/quick-start

If you want to know more, you can read the medium article about it:

https://medium.com/js-dojo/async-in-vue-js-part-1-28d96f751a2e

API

The compononent's shape can be customise using the following props:

hasHeader: Boolean

If true the header with the avatar is displayed

hasMedia: Boolean

If true the media is displayed

hasText: Boolean

If true the thext is displayed

hasActions: Boolean

If true the actions are displayed after the content

lines: Int

The number of text linest to be showed

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].