feat: skeleton 骨架屏组件 (#96)

* feat: 文档支持在线调试
* feat: 提交skeleton骨架屏代码提交
* fix: 提交骨架屏的review代码

src/config.json

@@ -566,6 +566,16 @@
           "show": false,
           "exportEmpty": true,
           "author": "szg2008"
+        },
+        {
+          "version": "1.0.0",
+          "name": "Skeleton",
+          "type": "component",
+          "cName": "骨架屏",
+          "desc": "在页面上待加载区域填充灰色的占位图，本质上是界面加载过程中的过渡效果。",
+          "sort": 15,
+          "show": true,
+          "author": "swag~jun"
         }
       ]
     },
@@ -625,4 +635,4 @@
       ]
     }
   ]
-}
+}

src/packages/avatar/doc.md

@@ -34,9 +34,11 @@ const App = () => {
 }
 export default App;
 ```
+:::
 
 ### 修改形状类型
 
+:::demo
 ``` tsx
 import React from "react";
 import { Avatar } from '@nutui/nutui-react';
@@ -51,9 +53,11 @@ const App = () => {
 }
 export default App;
 ```
+:::
 
 ### 修改背景色
 
+:::demo
 ``` tsx
 import React from "react";
 import { Avatar } from '@nutui/nutui-react';
@@ -70,9 +74,11 @@ const App = () => {
 }
 export default App;
 ```
+:::
 
 ### 修改背景icon
 
+:::demo
 ``` tsx
 import React from "react";
 import { Avatar } from '@nutui/nutui-react';
@@ -85,9 +91,11 @@ const App = () => {
 }
 export default App;
 ```
+:::
 
 ### 设置头像的文本内容
 
+:::demo
 ``` tsx
 import React from "react";
 import { Avatar } from '@nutui/nutui-react';
@@ -100,9 +108,11 @@ const App = () => {
 }
 export default App;
 ```
+:::
 
 ### 点击头像触发事件
 
+:::demo
 ``` tsx
 import React from "react";
 import { Avatar } from '@nutui/nutui-react';
@@ -119,7 +129,7 @@ const App = () => {
 }
 export default App;
 ```
-
+:::
 
 ### Prop
 

src/packages/barrage/doc.md

@@ -49,6 +49,7 @@ const App = () => {
 }
 export default App;
 ```
+:::
 
 
 ## API

src/packages/circleprogress/doc.md

@@ -28,8 +28,11 @@ const App = () => {
 }
 export default App;
 ```
+:::
+
 ### 环形进度条自定义样式
 
+:::demo
 ```tsx
 import React from "react";
 import { CircleProgress } from '@nutui/nutui-react';
@@ -49,8 +52,10 @@ const App = () => {
 }
 export default App;
 ```
-### 环形进度条自定义内容
+:::
 
+### 环形进度条自定义内容
+:::demo
 ```tsx
 import React from "react";
 import { CircleProgress } from '@nutui/nutui-react';
@@ -72,8 +77,10 @@ const App = () => {
 }
 export default App;
 ```
-### 动态改变环形进度条的进度
+:::
 
+### 动态改变环形进度条的进度
+:::demo
 ```tsx
 import React, { useState } from "react";
 import { Button, CircleProgress } from '@nutui/nutui-react';
@@ -137,6 +144,7 @@ const App = () => {
 }
 export default App;
 ```
+:::
 
 
 ## Prop

src/packages/infiniteloading/doc.md

@@ -89,9 +89,11 @@ const App = () => {
 }
 export default App;
 ```
+:::
 
 ### 下拉刷新
 
+:::demo
 ```tsx
 import React, { useState, useEffect } from "react";
 import { Cell, Infiniteloading } from '@nutui/nutui-react';
@@ -176,8 +178,10 @@ const App = () => {
 }
 export default App;
 ```
+:::
 ### 自定义加载文案
 
+:::demo
 ```tsx
 import React, { useState, useEffect } from "react";
 import { Cell, Infiniteloading } from '@nutui/nutui-react';
@@ -254,6 +258,8 @@ const App = () => {
 }
 export default App;
 ```
+:::
+
 ## API
 
 ### Props

src/packages/inputnumber/doc.md

@@ -40,11 +40,13 @@ const App = () => {
 }
 export default App;
 ```
+:::
 
 ### 步长设置
 
 设置步长 `step` 5 
 
+:::demo
 ```tsx
 import React, { useState } from "react";
 import { InputNumber } from '@nutui/nutui-react';
@@ -68,11 +70,13 @@ const App = () => {
 }
 export default App;
 ```
+:::
 
 ### 限制输入范围
 
 `min` 和 `max` 属性分别表示最小值和最大值
 
+:::demo
 ```tsx
 import React, { useState } from "react";
 import { InputNumber } from '@nutui/nutui-react';
@@ -100,11 +104,13 @@ const App = () => {
 }
 export default App;
 ```
+:::
 
 ### 禁用状态
 
 `disabled` 禁用状态下无法点击按钮或修改输入框。
 
+:::demo
 ```tsx
 import React, { useState } from "react";
 import { InputNumber } from '@nutui/nutui-react';
@@ -128,11 +134,13 @@ const App = () => {
 }
 export default App;
 ```
+:::
 
 ### 只读禁用输入框
 
 `readonly` 设置只读禁用输入框输入行为
 
+:::demo
 ```tsx
 import React, { useState } from "react";
 import { InputNumber } from '@nutui/nutui-react';
@@ -156,11 +164,13 @@ const App = () => {
 }
 export default App;
 ```
+:::
 
 ### 支持小数点
 
 设置步长 `step` 0.1  `decimal-places` 小数保留1位
 
+:::demo
 ```tsx
 import React, { useState } from "react";
 import { InputNumber } from '@nutui/nutui-react';
@@ -184,10 +194,12 @@ const App = () => {
 }
 export default App;
 ```
+:::
 ### 支持异步修改
 
 通过 `change` 事件和 `model-value` 进行异步修改
 
+:::demo
 ```tsx
 import React, { useState } from "react";
 import { InputNumber, Toast } from '@nutui/nutui-react';
@@ -219,11 +231,13 @@ const App = () => {
 }
 export default App;
 ```
+:::
 
 ### 自定义按钮大小
 
 设置步长 `step` 0.1  `decimal-places` 小数保留1位
 
+:::demo
 ```tsx
 import React, { useState } from "react";
 import { InputNumber, Toast } from '@nutui/nutui-react';
@@ -247,6 +261,7 @@ const App = () => {
 }
 export default App;
 ```
+:::
 
 ## API
 

src/packages/overlay/doc.md

@@ -39,9 +39,11 @@ const App = () => {
 }
 export default App;
 ```
+:::
 
 ### 嵌套内容
 
+:::demo
 ```tsx
 import React, { useState } from "react";
 import { Button, Overlay } from '@nutui/nutui-react';
@@ -85,6 +87,7 @@ const App = () => {
 }
 export default App;
 ```
+:::
 
 ## API
 

src/packages/skeleton/demo.scss

@@ -0,0 +1,24 @@
+.content {
+  .nut-switch {
+    display: flex;
+    margin: 0 16px 8px 0;
+  }
+  .container {
+    display: flex;
+    .right-content {
+      margin-left: 19px;
+      font-family: PingFangSC;
+      display: flex;
+      flex-direction: column;
+      .title {
+        font-size: 14px;
+        color: rgba(51, 51, 51, 1);
+      }
+      .desc {
+        margin-top: 10px;
+        font-size: 13px;
+        color: rgba(154, 155, 157, 1);
+      }
+    }
+  }
+}

src/packages/skeleton/demo.tsx

@@ -0,0 +1,47 @@
+import React, { useState } from 'react'
+import { Skeleton } from './skeleton'
+import Switch from '@/packages/switch'
+import Avatar from '@/packages/avatar'
+import './demo.scss'
+
+const SkeletonDemo = () => {
+  const [checked, setChecked] = useState(false)
+  const changeStatus = (value: boolean, event: React.MouseEvent<Element, MouseEvent>) => {
+    console.log(`触发了change事件，开关状态：${value}`)
+    setChecked(value)
+  }
+  return (
+    <>
+      <div className="demo">
+        <h2>基础用法</h2>
+        <Skeleton width={250} height={15} animated></Skeleton>
+        <h2>传入多行</h2>
+        <Skeleton width={250} height={15} row={3} title animated></Skeleton>
+        <h2>显示头像</h2>
+        <Skeleton width={250} height={15} row={3} title animated avatar></Skeleton>
+        <h2>标题段落圆角风格</h2>
+        <Skeleton width={250} height={15} animated round></Skeleton>
+        <h2>显示子组件</h2>
+        <div className="content">
+          <Switch size="15px" change={(value, event) => changeStatus(value, event)}></Switch>
+          <Skeleton width={250} height={15} title animated avatar row={3} loading={checked}>
+            <div className="container">
+              <Avatar
+                size="50"
+                icon="https://img14.360buyimg.com/imagetools/jfs/t1/167902/2/8762/791358/603742d7E9b4275e3/e09d8f9a8bf4c0ef.png"
+              />
+              <div className="right-content">
+                <span className="title">NutUI-React</span>
+                <div className="desc">
+                  一套京东风格的轻量级移动端React组件库，提供丰富的基础组件和业务组件，帮助开发者快速搭建移动应用。
+                </div>
+              </div>
+            </div>
+          </Skeleton>
+        </div>
+      </div>
+    </>
+  )
+}
+
+export default SkeletonDemo