Merge pull request #305 from yuanmeda/fix/doc-divider413

docs(divider): update docs and demo and md

site/mobile/mobile.config.js

@@ -6,9 +6,9 @@ export default {
       component: () => import('tdesign-mobile-react/button/_example/index.jsx'),
     },
     {
-      title: 'Divider 分割线',
+      title: 'Divider 分割符',
       name: 'divider',
-      component: () => import('tdesign-mobile-react/divider/_example/base.jsx'),
+      component: () => import('tdesign-mobile-react/divider/_example/index.jsx'),
     },
     {
       title: 'Icon 图标',

src/divider/_example/align.jsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { Divider } from 'tdesign-mobile-react';
+import './style/index.less';
+
+export default function Content() {
+  return (
+    <div className="divider-demo-container">
+      <h3>文字+直线</h3>
+      <div className="t-demo1">
+        <Divider align="center" content="文字信息"></Divider>
+      </div>
+
+      <h3>文字+虚线</h3>
+      <div className="t-demo1">
+        <Divider align="center" dashed>
+          文字信息
+        </Divider>
+      </div>
+    </div>
+  );
+}

src/divider/_example/base.jsx

@@ -1,60 +1,30 @@
 import React from 'react';
 import { Divider } from 'tdesign-mobile-react';
-import TDemoBlock from '../../../site/mobile/components/DemoBlock';
-import TDemoHeader from '../../../site/mobile/components/DemoHeader';
-import Content from './content';
-import Normal from './normal';
-import NormalDashed from './normal-dashed';
-import PureContent from './pure-content';
 
 import './style/index.less';
-import Vertical from './vertical';
 
 export default function Base() {
   return (
-    <div className="tdesign-mobile-demo">
-      <TDemoHeader title="Divider 分割线" summary="用于分割、组织、细化有一定逻辑的组织元素内容和页面结构。" />
-      <TDemoBlock title="01 类型" summary="直线拉通">
-        <Normal></Normal>
-      </TDemoBlock>
-      <TDemoBlock summary="虚线拉通">
-        <NormalDashed></NormalDashed>
-      </TDemoBlock>
-      <TDemoBlock summary="左右间距">
-        <div className="t-demo1">
-          <NormalDashed></NormalDashed>
-        </div>
-      </TDemoBlock>
-      <TDemoBlock summary="右侧拉通">
-        <div className="t-demo2">
-          <NormalDashed></NormalDashed>
-        </div>
-      </TDemoBlock>
-      <TDemoBlock summary="定义左侧距离">
-        <div className="t-demo3">
-          <NormalDashed></NormalDashed>
-        </div>
-      </TDemoBlock>
-      <TDemoBlock summary="垂直分割">
-        <Vertical></Vertical>
-      </TDemoBlock>
-      <TDemoBlock summary="文字+直线">
-        <div className="t-demo1">
-          <Content></Content>
-        </div>
-      </TDemoBlock>
-      <TDemoBlock summary="文字+虚线">
-        <div className="t-demo1">
-          <Divider align="center" dashed>
-            文字信息
-          </Divider>
-        </div>
-      </TDemoBlock>
-      <TDemoBlock summary="纯文字">
-        <div className="t-demo1">
-          <PureContent></PureContent>
-        </div>
-      </TDemoBlock>
+    <div className="divider-demo-container">
+      <h3>直线拉通</h3>
+      <Divider />
+
+      <h3>虚线拉通</h3>
+      <Divider dashed />
+
+      <h3>左右间距</h3>
+      <div className="t-demo1">
+        <Divider />
+      </div>
+
+      <h3>右侧拉通</h3>
+      <div className="t-demo2">
+        <Divider />
+      </div>
+      <h3>自定义左侧距离</h3>
+      <div className="t-demo3">
+        <Divider />
+      </div>
     </div>
   );
 }

src/divider/_example/index.jsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import TDemoBlock from '../../../site/mobile/components/DemoBlock';
+import TDemoHeader from '../../../site/mobile/components/DemoHeader';
+import Vertical from './vertical';
+import BaseDemo from './base';
+import AlignDemo from './align';
+
+import './style/index.less';
+
+export default function Base() {
+  return (
+    <div className="tdesign-mobile-demo">
+      <TDemoHeader title="Divider 分割符" summary="用于分割、组织、细化有一定逻辑的组织元素内容和页面结构。" />
+      <TDemoBlock title="01 类型" summary="分割符主要是由直线和文字组成">
+        <BaseDemo />
+        <AlignDemo />
+        <Vertical />
+      </TDemoBlock>
+    </div>
+  );
+}

src/divider/_example/style/index.less

@@ -1,5 +1,16 @@
 .tdesign-mobile-demo {
   background-color: #fff;
+  padding-bottom: 16px;
+
+  .divider-demo-container {
+    h3 {
+      font-size: 12px;
+      font-weight: 400;
+      font-family: 'PingFang SC';
+      color: #a9a9a9;
+      padding: 16px;
+    }
+  }
 }
 
 .t-demo1 {

src/divider/_example/vertical.jsx

@@ -4,12 +4,22 @@ import './style/index.less';
 
 export default function Vertical() {
   return (
-    <div className="vertical-panel">
-      <text>文字信息</text>
-      <Divider layout="vertical"></Divider>
-      <text>文字信息</text>
-      <Divider layout="vertical"></Divider>
-      <text>文字信息</text>
+    <div className="divider-demo-container">
+      <h3>纯文字</h3>
+      <div className="t-demo1">
+        <Divider align="center" lineColor="transparent">
+          没有更多了～
+        </Divider>
+      </div>
+
+      <h3>垂直分割</h3>
+      <div className="vertical-panel">
+        <text>文字信息</text>
+        <Divider layout="vertical"></Divider>
+        <text>文字信息</text>
+        <Divider layout="vertical"></Divider>
+        <text>文字信息</text>
+      </div>
     </div>
   );
 }

src/divider/divider.md

@@ -1,38 +1,4 @@
----
-title: Divider 分割线
-description: 用于分割、组织、细化有一定逻辑的组织元素内容和页面结构。
-spline: base
-isComponent: true
-toc: false
----
-
-## 用法
-
-### 直线分割线
-
-::: demo _example/normal
-:::
-
-### 虚线分割线
-
-::: demo _example/normal-dashed
-:::
-
-### 垂直分割线
-
-::: demo _example/vertical
-:::
-
-### 带文字分割线
-
-::: demo _example/content
-:::
-
-### 纯文字分割线
-
-::: demo _example/pure-content
-:::
-
+:: BASE_DOC ::
 ## API
 ### Divider Props