Merge pull request #306 from yuanmeda/fix/doc-sticky413

docs(sticky): update docs and demo

site/mobile/mobile.config.js

@@ -105,7 +105,7 @@ export default {
     {
       title: 'Sticky 吸顶',
       name: 'sticky',
-      component: () => import('tdesign-mobile-react/sticky/_example/base.jsx'),
+      component: () => import('tdesign-mobile-react/sticky/_example/index.jsx'),
     },
     {
       title: 'BackTop 返回顶部',

src/sticky/_example/base.jsx

@@ -1,37 +1,15 @@
 import React from 'react';
 import { Sticky, Button } from 'tdesign-mobile-react';
-import TDemoBlock from '../../../site/mobile/components/DemoBlock';
-import TDemoHeader from '../../../site/mobile/components/DemoHeader';
-import './style/index.less'
+import './style/index.less';
 
 export default function Base() {
-
   return (
-    <div className='tdesign-mobile-demo'>
-      <TDemoHeader title="Sticky 吸顶" summary="用于常驻页面顶部的信息，操作展示"/>
-      <div className='tdesign-demo-block-wrap'>
-        <TDemoBlock title="01 类型" summary="基础吸顶">
-        <div className="tdesign-demo-block-1">
-          <Sticky>
-            <Button className='custom-common-button' theme='primary'>基础吸顶</Button>
-          </Sticky>
-        </div>
-        </TDemoBlock>
-        <TDemoBlock title="" summary="吸顶距离">
-          <div className="tdesign-demo-block-2">
-            <Sticky offsetTop={50}>
-              <Button className='custom-common-button' theme='danger'>吸顶距离</Button>
-            </Sticky>
-          </div>
-        </TDemoBlock>
-        <TDemoBlock title="" summary="指定容器">
-          <div className='tdesign-demo-block-3' id="container">
-            <Sticky container="#container">
-              <Button className='custom-button custom-common-button'>指定容器</Button>
-            </Sticky>
-          </div>
-        </TDemoBlock>
-      </div>
+    <div className="tdesign-demo-block-1">
+      <Sticky>
+        <Button className="custom-common-button" theme="primary">
+          基础吸顶
+        </Button>
+      </Sticky>
     </div>
   );
 }

src/sticky/_example/container.jsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { Sticky, Button } from 'tdesign-mobile-react';
+import './style/index.less';
+
+export default function Base() {
+  return (
+    <div className="tdesign-demo-block-3" id="container">
+      <Sticky container="#container">
+        <Button className="custom-button custom-common-button">指定容器</Button>
+      </Sticky>
+    </div>
+  );
+}

src/sticky/_example/index.jsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import TDemoBlock from '../../../site/mobile/components/DemoBlock';
+import TDemoHeader from '../../../site/mobile/components/DemoHeader';
+import './style/index.less';
+
+import BaseDemo from './base';
+import OffsetTopDemo from './offsetTop';
+import ContainerDemo from './container';
+
+export default function Base() {
+  return (
+    <div className="tdesign-mobile-demo">
+      <TDemoHeader title="Sticky 吸顶" summary="用于常驻页面顶部的信息，操作展示" />
+      <div className="tdesign-demo-block-wrap">
+        <TDemoBlock title="01 类型" summary="基础吸顶">
+          <BaseDemo />
+        </TDemoBlock>
+        <TDemoBlock summary="吸顶距离">
+          <OffsetTopDemo />
+        </TDemoBlock>
+        <TDemoBlock summary="指定容器">
+          <ContainerDemo />
+        </TDemoBlock>
+      </div>
+    </div>
+  );
+}

src/sticky/_example/offsetTop.jsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { Sticky, Button } from 'tdesign-mobile-react';
+import './style/index.less';
+
+export default function Base() {
+  return (
+    <div className="tdesign-demo-block-2">
+      <Sticky offsetTop={50}>
+        <Button className="custom-common-button" theme="danger">
+          吸顶距离
+        </Button>
+      </Sticky>
+    </div>
+  );
+}

src/sticky/_example/style/index.less

@@ -17,7 +17,6 @@
 
     .custom-common-button {
         color: #fff;
-        font-size: 16px;
         width: 104px;
         height: 44px;
     }

src/sticky/sticky.md

@@ -1,15 +1,4 @@
----
-title: Sticky 吸顶
-description: 用于常驻页面顶部的信息，操作展示
-spline: base
-isComponent: true
-toc: false
----
-
-## 基础用法
-
-::: demo _example/base sticky
-:::
+:: BASE_DOC ::
 
 ## API
 ### Sticky Props