Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/msidolphin/vue-skeleton
A simple skeleton component powered by vue.js
https://github.com/msidolphin/vue-skeleton
skeleton vue-components
Last synced: 16 days ago
JSON representation
A simple skeleton component powered by vue.js
- Host: GitHub
- URL: https://github.com/msidolphin/vue-skeleton
- Owner: msidolphin
- License: mit
- Created: 2019-09-21T04:12:18.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2019-10-22T00:33:07.000Z (about 5 years ago)
- Last Synced: 2024-09-15T02:47:26.314Z (2 months ago)
- Topics: skeleton, vue-components
- Language: JavaScript
- Size: 114 KB
- Stars: 3
- Watchers: 2
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# vue-skeleton
> A simple skeleton component powered by vue.js
## Usage
### Install
```bash
npm install ve-skeleton -S
```
### Import
```js
import VueSkeleton from 've-skeleton'
import 've-skeleton/index.css'
Vue.use(VueSkeleton)
```
### Use
```vue
vue-skeleton
- a simple skeleton component powered by vue.js
- a simple skeleton component powered by vue.js
- a simple skeleton component powered by vue.js
toggle
export default {
name: 'App',
data () {
return {
loading: true
}
},
methods: {
toggle () {
this.loading = !this.loading
}
}
}
.demo {
display: table;
width: 100%;
&-left {
display: table-cell;
padding-right: 16px;
vertical-align: middle;
img {
width: 100px;
height: 100px;
border-radius: 50%;
object-fit: cover;
}
}
&-right {
display: table-cell;
width: 100%;
vertical-align: middle;
.title {
margin-top: 16px;
}
ul {
margin: 0;
padding: 0;
margin-top: 28px;
li {
margin-top: 12px;
list-style: none;
&:first-child {
margin-top: 0;
}
}
}
}
}
```
## Props
## ve-skeleton
| Attribute | Type | Description | Default | Accepted values |
| :------ | :------ | :------ | --- | :---: |
| loading | `boolean` | display the skeleton when `true` | true | - |
| animated | `boolean` | animation effect | true | - |
| avatar | `boolean`, `object` | show avatar placeholder | false | - |
| title | `boolean`, `object` | show title placeholder | true | - |
| paragraph | `boolean`, `object`, `array` | show paragraph placeholder | true | - |
| verical-align | `string` | verical alignment | top | top, middle, bottom |
| align | `string` | avatar placement | left | left, right |
## avatar
| Attribute | Type | Description | Default | Accepted values |
| :------ | :------ | :------ | --- | :---: |
| size | `number`, `string` | the size of avatar, default unit is `px` | 40 | - |
| shape | `string` | the shape of avatar | circle | circle, square |
## title
| Attribute | Type | Description | Default | Accepted values |
| :------ | :------ | :------ | --- | :---: |
| width | `number`, `string` | the width of title, default unit is `%` | 38 | - |
## paragraph
> When paragraph is an `Array`, every elements have width config
| Attribute | Type | Description | Default | Accepted values |
| :------ | :------ | :------ | --- | :---: |
| rows | `number` | the row count of paragraph | 3 | - |
| width | `number` | width of a paragraph. when paragraph is a `Object`, it can only set the last row width. the default unit is `%` | 61 | - |
## Slots
| Attribute | Description
| :------: | :------ |
| - | displayed sub component when `loading` is `false` |
## License
[MIT](http://opensource.org/licenses/MIT)
Copyright © 2019-present, msidolphin