130 |
131 | ```
132 |
133 | ### Skeleton props
134 | | props | description | type | default |
135 | | -------- | --------------------------------------------- | ------- | --------- |
136 | | count | 单个组件里面显示的数量 | number | 1 |
137 | | duration | 动画过渡时间，0的时候为关闭动画 | number | 1.5 |
138 | | width | 组件长度 | string | |
139 | | height | 组件高度 | string | |
140 | | circle | 设置为圆形 | boolean | false |
141 | | loading | 组件加载状态，使用这个props时候不会检测子节点 | boolean | undefined |
142 |
143 | ### SkeletonTheme props
144 | | props | description | type | default |
145 | | --------- | ------------------------------ | ------- | --------- |
146 | | color | 骨架的颜色 | string | #eeeeee |
147 | | highlight | 动画高亮颜色 | string | #f5f5f5 |
148 | | duration | 设置所有骨架组件的动画过渡时间 | number | 1.5 |
149 | | loading | 控制所有骨架组件加载状态 | boolean | undefined |
150 | | tag | 容器标签 | string | div |
151 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # 💅🏻 Vue-loading-skeleton
2 |
3 | Make beautiful loading skeleton that automatically adapt your vue app.
4 |
5 | [💡Demos of storybook](https://kitwon.github.io/vue-loading-skeleton/)
6 |
7 | [📕中文文档](https://github.com/kitwon/vue-loading-skeleton/blob/master/README-CN.md)
8 |
9 | ## Install
10 | yarn
11 | `yarn add vue-loading-skeleton@next`
12 | or npm
13 | `npm install vue-loading-skeleton@next`
14 |
15 | ## Base usage
16 | Install by `npm`/`yarn` with vue-loading-skeleton
17 |
18 | ```jsx
19 | import { Skeleton } from 'vue-loading-skeleton';
20 | import "vue-loading-skeleton/dist/style.css"
21 |
22 | // In jsx template
23 |
24 |
25 | ```
26 |
27 | Or register for global component
28 |
29 | ```jsx
30 | import Vue from 'vue';
31 | import Skeleton from 'vue-loading-skeleton';
32 | import "vue-loading-skeleton/dist/style.css"
33 |
34 | Vue.use(Skeleton)
35 |
36 | // In jsx template
37 |
38 |
39 | ```
40 |
41 | ## 🌈 Introduction
42 |
43 | ### Adapts to the styles you have defined
44 | The `` component is design to used directly in your vue component. It can replace the main content while page still in loading. So you don't need to prepare a skeleton screen meticulously to match the `font-size`, `margin` or another style your content takes on, wrap the content with the `` component, it will automatically fill the correct dimensions.
45 |
46 | For example:
47 | ```html
48 |
49 |
50 |
51 | {{ props.data.img }}
52 |
53 |
54 |
55 |
56 | {{ props.data.title }}
57 |
58 |
59 | {{ props.data.body }}
60 |
61 |
62 |
63 | ```
64 |
65 | ### ⚠️ Notice
66 | The skeleton component will check the `tag` and `text` in the first child node. If you find the component work is not in expect, you should use `v-if` or `loading props`, and report the issues to me.
67 |
68 | ## 📔Usage
69 |
70 | ### Base usage
71 | ```html
72 |
73 |
74 | {{ content }}
75 |
76 |
77 | ```
78 |
79 | ### Use v-if
80 | ```html
81 |
82 | {{ content }}
83 |
84 |
85 | ```
86 |
87 | ### List Skeleton
88 | In many cases, you need a skeleton list to fulfill a listing page. You can set the list data default to the number. Such as:
89 |
90 | ```html
91 |
92 |
93 | {{ item.content }}
94 |
95 |
96 | ```
97 |
98 | ```javascript
99 | export default {
100 | data() {
101 | return {
102 | data: 10
103 | }
104 | },
105 | async created() {
106 | // some data fetch action
107 | const { data } = await fetchData();
108 | this.data = data;
109 | }
110 | }
111 | ```
112 |
113 | ### Theming
114 | Using the `` component, you can change the color, duration of all skeleton components below it:
115 |
116 | ```jsx
117 | import { Skeleton, Skeleton } form 'vue-loading-skeleton';
118 |
119 |
120 |