Merge pull request #299 from teal-front/feature/badge-demo

feat(Badge): update demo
Tencent · Oct 26, 2022 · 6b658f2 · 6b658f2
2 parents 40cf1b5 + f4791b5
commit 6b658f2
Show file tree

Hide file tree

Showing 12 changed files with 117 additions and 272 deletions.
diff --git a/src/badge/_example/base.jsx b/src/badge/_example/base.jsx
@@ -0,0 +1,23 @@
+import React from 'react';
+import { Badge } from 'tdesign-mobile-react';
+
+export default function BadgeBaseDemo() {
+  return (
+    <div className="tdesign-mobile-demo">
+      <div className="badge-demo">
+        <div className="badge-item">
+          <Badge dot>消息</Badge>
+        </div>
+        <div className="badge-item">
+          <Badge count="16">消息</Badge>
+        </div>
+        <div className="badge-item">
+          <Badge count="NEW">消息</Badge>
+        </div>
+        <div className="badge-item">
+          <Badge count="···">消息</Badge>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/badge/_example/basic.jsx b/src/badge/_example/basic.jsx
diff --git a/src/badge/_example/button.jsx b/src/badge/_example/button.jsx
@@ -0,0 +1,40 @@
+import React from 'react';
+import { Badge, Button } from 'tdesign-mobile-react';
+
+export default function BadgeButtonDemo() {
+  return (
+    <div className="tdesign-mobile-demo">
+      <div className="badge-demo">
+        <div className="badge-item">
+          <Badge dot>
+            <Button size="small" variant="outline">
+              小按钮
+            </Button>
+          </Badge>
+        </div>
+        <div className="badge-item">
+          <Badge count="16">
+            <Button size="small" variant="outline">
+              小按钮
+            </Button>
+          </Badge>
+        </div>
+
+        <div className="badge-item">
+          <Badge count="NEW">
+            <Button size="small" variant="outline">
+              小按钮
+            </Button>
+          </Badge>
+        </div>
+        <div className="badge-item">
+          <Badge count="···">
+            <Button size="small" variant="outline">
+              小按钮
+            </Button>
+          </Badge>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/badge/_example/cell.jsx b/src/badge/_example/cell.jsx
@@ -0,0 +1,24 @@
+import React from 'react';
+import { Badge, CellGroup, Cell } from 'tdesign-mobile-react';
+
+export default function BadgeCellDemo() {
+  return (
+    <div className="tdesign-mobile-demo" style={{ paddingTop: 10 }}>
+      <CellGroup style={{ overflow: 'hidden' }}>
+        <Cell title="单行标题" arrow note={<Badge dot />}></Cell>
+        <Cell title="单行标题" arrow note={<Badge count={16} />}></Cell>
+        <Cell
+          title="单行标题"
+          arrow
+          note={
+            <>
+              <Badge count="NEW" shape="round" />
+              <Badge count="NEW" style={{ marginLeft: '8px' }} />
+            </>
+          }
+        ></Cell>
+        <Cell title="单行标题" note={<Badge count="NEW" shape="ribbon" />}></Cell>
+      </CellGroup>
+    </div>
+  );
+}
diff --git a/src/badge/_example/color.jsx b/src/badge/_example/color.jsx
diff --git a/src/badge/_example/dist.jsx b/src/badge/_example/dist.jsx
diff --git a/src/badge/_example/index.jsx b/src/badge/_example/index.jsx
@@ -1,76 +1,23 @@
 import React from 'react';
-import { Button, Badge, Cell, CellGroup } from 'tdesign-mobile-react';
 import TDemoBlock from '../../../site/mobile/components/DemoBlock';
 import TDemoHeader from '../../../site/mobile/components/DemoHeader';
-
+import BaseDemo from './base';
+import ButtonDemo from './button';
+import CellDemo from './cell';
 import './style/index.less';
 
 export default function BadgeDemo() {
   return (
-    <div className="tdesign-mobile-demo">
-      <TDemoHeader title="Badge 徽标" summary="展示新增内容的提示，用警示红色为主色，包含数字或文字提示内容" />
-
+    <div className="badge-demo">
+      <TDemoHeader title="Badge 徽标" summary="用于告知用户，该区域的状态变化或者待处理任务的数量。" />
       <TDemoBlock title="01 类型" summary="徽标主要分红点、数字、文字和角标提醒">
-        <div className="badge-demo">
-          <div className="badge-item">
-            <Badge dot>消息</Badge>
-          </div>
-          <div className="badge-item">
-            <Badge count="16">消息</Badge>
-          </div>
-          <div className="badge-item">
-            <Badge count="NEW">消息</Badge>
-          </div>
-          <div className="badge-item">
-            <Badge count="···">消息</Badge>
-          </div>
-        </div>
-        <div className="badge-demo">
-          <div className="badge-item">
-            <Badge dot>
-              <Button size="small" variant="outline">
-                小按钮
-              </Button>
-            </Badge>
-          </div>
-          <div className="badge-item">
-            <Badge count="16">
-              <Button size="small" variant="outline">
-                小按钮
-              </Button>
-            </Badge>
-          </div>
-
-          <div className="badge-item">
-            <Badge count="NEW">
-              <Button size="small" variant="outline">
-                小按钮
-              </Button>
-            </Badge>
-          </div>
-          <div className="badge-item">
-            <Badge count="···">
-              <Button size="small" variant="outline">
-                小按钮
-              </Button>
-            </Badge>
-          </div>
-        </div>
-        <CellGroup style={{ overflow: 'hidden' }}>
-          <Cell title="单行标题" arrow note={<Badge dot />}></Cell>
-          <Cell title="单行标题" arrow note={<Badge count={16} />}></Cell>
-          <Cell
-            title="单行标题"
-            arrow
-            note={
-              <>
-                <Badge count="NEW" shape="round" />
-                <Badge count="NEW" style={{ marginLeft: '8px' }} />
-              </>
-            }
-          ></Cell>
-          <Cell title="单行标题" note={<Badge count="NEW" shape="ribbon" />}></Cell>
-        </CellGroup>
+        <BaseDemo />
+      </TDemoBlock>
+      <TDemoBlock>
+        <ButtonDemo />
+      </TDemoBlock>
+      <TDemoBlock>
+        <CellDemo />
       </TDemoBlock>
     </div>
   );

diff --git a/src/badge/_example/max-count.jsx b/src/badge/_example/max-count.jsx
diff --git a/src/badge/_example/offset.jsx b/src/badge/_example/offset.jsx
diff --git a/src/badge/_example/shape.jsx b/src/badge/_example/shape.jsx
diff --git a/src/badge/_example/style/index.less b/src/badge/_example/style/index.less
@@ -1,15 +1,18 @@
-.badge-demo {
-  display: flex;
-  padding: 16px 0;
-  width: 100%;
-
-  &__container {
-    width: 24%;
-    text-align: center;
-    position: relative;
-  }
-  .badge-item {
-    width: 24%;
-    text-align: center;
-  }
-}
+.tdesign-mobile-demo {
+  .badge-demo {
+    display: flex;
+    padding: 16px 0;
+    width: 100%;
+
+    &__container {
+      width: 24%;
+      text-align: center;
+      position: relative;
+    }
+
+    .badge-item {
+      width: 24%;
+      text-align: center;
+    }
+  }
+}