[new feature] add skeleton component

packages/skeleton/demo/index.vue

@@ -0,0 +1,102 @@
+<template>
+  <demo-section>
+    <demo-block :title="$t('basicUsage')">
+      <van-skeleton
+        title
+        :row="3"
+      />
+    </demo-block>
+
+    <demo-block :title="$t('showAvatar')">
+      <van-skeleton
+        title
+        avatar
+        :row="3"
+      />
+    </demo-block>
+
+    <demo-block :title="$t('showChildren')">
+      <van-switch
+        v-model="show"
+        size="24px"
+      />
+      <van-skeleton
+        title
+        avatar
+        :row="3"
+        :loading="!show"
+      >
+        <div class="demo-preview">
+          <img src="//img.yzcdn.cn/public_files/2017/12/18/fd78cf6bb5d12e2a119d0576bedfd230.png">
+          <div class="demo-content">
+            <h3>{{ $t('title') }}</h3>
+            <p>{{ $t('desc') }}</p>
+          </div>
+        </div>
+      </van-skeleton>
+    </demo-block>
+  </demo-section>
+</template>
+
+<script>
+export default {
+  i18n: {
+    'zh-CN': {
+      showAvatar: '显示头像',
+      showChildren: '显示子组件',
+      title: '关于 Vant',
+      desc: 'Vant 是一套轻量、可靠的移动端 Vue 组件库，提供了丰富的基础组件和业务组件，帮助开发者快速搭建移动应用。'
+    },
+    'en-US': {
+      showAvatar: 'Show Avatar',
+      showChildren: 'Show Children',
+      title: 'About Vant',
+      desc: 'Vant is a set of Mobile UI Components built on Vue.'
+    }
+  },
+
+  data() {
+    return {
+      show: false
+    };
+  }
+};
+</script>
+
+<style lang="less">
+.demo-skeleton {
+  background-color: #fff;
+
+  .van-switch {
+    margin: 0 15px 10px;
+  }
+
+  .demo-preview {
+    display: flex;
+    padding: 0 15px;
+
+    .demo-content {
+      padding-top: 6px;
+
+      h3 {
+        margin: 0;
+        font-size: 18px;
+        line-height: 20px;
+      }
+
+      p {
+        font-size: 14px;
+        line-height: 20px;
+        margin: 13px 0 0;
+      }
+    }
+
+    img {
+      width: 32px;
+      height: 32px;
+      flex-shrink: 0;
+      margin-right: 15px;
+    }
+  }
+}
+</style>