Merge pull request #304 from yuanmeda/fix/doc-fab413

docs(fab): update docs ande demo
Tencent · Oct 27, 2022 · b7ee5a6 · b7ee5a6
2 parents cf26b3d + ea1fce1
commit b7ee5a6
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 3 deletions.
diff --git a/src/fab/_example/index.jsx b/src/fab/_example/index.jsx
@@ -1,10 +1,15 @@
-import React from 'react';
+import React, { useState } from 'react';
+import { Button } from 'tdesign-mobile-react';
 import TDemoBlock from '../../../site/mobile/components/DemoBlock';
 import TDemoHeader from '../../../site/mobile/components/DemoHeader';
 import './style/index.less';
 import BaseDemo from './display';
+import TextDemo from './text';
 
 export default function FabDemo() {
+  const [type, setType] = useState('base');
+
+  const changeType = (type) => setType(type);
   return (
     <div className="tdesign-mobile-demo">
       <TDemoHeader
@@ -13,8 +18,32 @@ export default function FabDemo() {
       />
 
       <TDemoBlock title="01 类型" summary="纯图标悬浮按钮">
-        <BaseDemo />
+        <ul className="fab-container">
+          <li>
+            <Button
+              className="fab-btn"
+              theme="primary"
+              variant="outline"
+              size="large"
+              onClick={() => changeType('base')}
+            >
+              基础使用
+            </Button>
+          </li>
+          <li>
+            <Button
+              className="fab-btn"
+              theme="primary"
+              variant="outline"
+              size="large"
+              onClick={() => changeType('advance')}
+            >
+              进阶使用
+            </Button>
+          </li>
+        </ul>
       </TDemoBlock>
+      {type === 'base' ? <BaseDemo /> : <TextDemo />}
     </div>
   );
 }
diff --git a/src/fab/_example/style/index.less b/src/fab/_example/style/index.less
@@ -1,3 +1,18 @@
 .tdesign-mobile-demo {
   background-color: #f6f6f6;
 }
+
+.fab-container {
+  li {
+    display: flex;
+    justify-content: center;
+    margin-bottom: 12px;
+
+    .fab-btn {
+      width: 350px;
+      border: 1px solid #dcdcdc;
+      color: #000;
+      font-size: 16px;
+    }
+  }
+}
diff --git a/src/fab/_example/text.jsx b/src/fab/_example/text.jsx
@@ -8,7 +8,13 @@ export default function () {
   };
   return (
     <>
-      <Fab icon={<Icon name="add" />} text="按钮文字" style={{ right: '16px', bottom: '32px' }} onClick={onClick} />
+      <Fab
+        icon={<Icon name="add" />}
+        text="按钮文字"
+        style={{ right: '16px', bottom: '32px' }}
+        buttonProps={{ variant: 'outline' }}
+        onClick={onClick}
+      />
     </>
   );
 }