├── .gitignore ├── .npmignore ├── demo ├── main.js └── App.vue ├── index.html ├── src └── SkeletonCard │ ├── components │ ├── CardAvatar.vue │ ├── CardMedia.vue │ ├── CardActions.vue │ ├── CardContent.vue │ ├── CardText.vue │ └── CardHeader.vue │ └── index.vue ├── package.json ├── webpack.config.js └── README.md /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/ 3 | /dist/ 4 | package-lock.json -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | index.html 3 | webpack.config.js 4 | demo/ -------------------------------------------------------------------------------- /demo/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './App.vue' 3 | 4 | Vue.config.productionTip = false 5 | 6 | new Vue({ 7 | el: '#app', 8 | render: h => h(App) 9 | }) 10 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | vue-skeleton 7 | 8 | 9 |
10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /src/SkeletonCard/components/CardAvatar.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 12 | 13 | 23 | -------------------------------------------------------------------------------- /src/SkeletonCard/components/CardMedia.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 15 | 16 | 24 | -------------------------------------------------------------------------------- /demo/App.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 18 | 19 | 29 | -------------------------------------------------------------------------------- /src/SkeletonCard/components/CardActions.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 18 | 19 | 32 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-skeleton-screen", 3 | "version": "1.1.3", 4 | "description": "a skeleton screen written in Vue.js", 5 | "main": "/src/SkeletonCard/index.vue", 6 | "scripts": { 7 | "start": "npm run dev", 8 | "dev": "webpack-dev-server --open ", 9 | "build": "cross-env NODE_ENV=production webpack --progress --hide-modules" 10 | }, 11 | "repository": { 12 | "type": "git", 13 | "url": "https://github.com/Dacredible/vue-skeleton-screen" 14 | }, 15 | "keywords": [ 16 | "skeleton", 17 | "vue" 18 | ], 19 | "author": "Dacredible", 20 | "license": "MIT", 21 | "dependencies": { 22 | "vue": "^2.6.6" 23 | }, 24 | "devDependencies": { 25 | "babel-core": "^6.26.3", 26 | "babel-loader": "^7.1.4", 27 | "cross-env": "^5.2.0", 28 | "css-loader": "^0.28.11", 29 | "vue-loader": "^15.0.0", 30 | "vue-template-compiler": "^2.5.16", 31 | "webpack": "^4.12.0", 32 | "webpack-cli": "^3.0.8", 33 | "webpack-dev-server": "^3.1.4" 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | var path = require('path') 2 | var VueLoaderPlugin = require('vue-loader/lib/plugin') 3 | 4 | module.exports = { 5 | entry: './demo/main.js', 6 | output: { 7 | path: path.resolve(__dirname, './dist'), 8 | publicPath: '/dist/', 9 | filename: 'build.js' 10 | }, 11 | mode: 'development', 12 | plugins: [ 13 | new VueLoaderPlugin() 14 | ], 15 | module: { 16 | rules: [ 17 | { 18 | test: /\.vue$/, 19 | loader: 'vue-loader' 20 | }, 21 | { 22 | test: /\.js$/, 23 | loader: 'babel-loader', 24 | exclude: /node_modules/, 25 | }, 26 | { 27 | test: /\.css$/, 28 | use: [ 29 | 'vue-style-loader', 30 | 'css-loader' 31 | ] 32 | } 33 | ] 34 | }, 35 | resolve: { 36 | alias: { 37 | 'vue$': 'vue/dist/vue.esm.js' 38 | } 39 | }, 40 | devServer: { 41 | historyApiFallback: true, 42 | noInfo: true 43 | }, 44 | performance: { 45 | hints: false 46 | }, 47 | devtool: 'inline-source-map' 48 | } 49 | -------------------------------------------------------------------------------- /src/SkeletonCard/components/CardContent.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 43 | 44 | 52 | -------------------------------------------------------------------------------- /src/SkeletonCard/components/CardText.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 34 | 35 | 55 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ## Usage 2 | 3 | ```javascript 4 | //javascript 5 | import SkeletonCard from 'vue-skeleton-screen'; 6 | ... 7 | export default{ 8 | ... 9 | components: { 10 | SkeletonCard, 11 | } 12 | ... 13 | }; 14 | ``` 15 | 16 | ```html 17 | 18 | 19 |
20 | 21 |
22 | ``` 23 | 24 | 25 | 26 | ## Installatoin 27 | 28 | Using npm: 29 | 30 | ```shell 31 | $ npm i --save vue-skeleton-screen 32 | ``` 33 | 34 | ## Dependencies 35 | 36 | - **Vue**, This is a component written in vue and can only use for Vue projects. For information, go to https://vuejs.org/. 37 | 38 | ## Api 39 | 40 | | flag | Type | Default | Description | 41 | | --------- | ------ | --------- | -------------------------------------------------------------------------------------------- | 42 | | header | Bool | **true** | header with or without a avatar along with a title and subtitle set to **false** to hide it. | 43 | | avatart | Bool | **true** | a round avatar in header, set to **false** to hide it. | 44 | | media | Bool | **true** | media is a grey div stands for image to be loaded, set to **false** to hide it. | 45 | | action | Bool | **false** | actions contains two action button placeholders, set to **true** to enable it. | 46 | | lines | Number | **2** | display how many lines in text section. | 47 | | round | Bool | **false** | set to **true** if you want rounded corner of the placeholder | 48 | | dark | Bool | **false** | set to **true** to use dark theme. | 49 | | isLoading | Bool | **false** | set to **true** to display loading animation. | 50 | -------------------------------------------------------------------------------- /src/SkeletonCard/components/CardHeader.vue: -------------------------------------------------------------------------------- 1 | 16 | 17 | 46 | 47 | 89 | -------------------------------------------------------------------------------- /src/SkeletonCard/index.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 73 | 74 | 118 | 119 | --------------------------------------------------------------------------------