瀏覽代碼

:memo: add md-viewer & on-click demo

Jeremy Zheng 3 年之前
父節點
當前提交
3a96aef0d3

+ 19 - 6
dashboard/src/pages/nut/index.tsx

@@ -1,14 +1,27 @@
+import ReactMarkdown from "react-markdown";
+import { Tag } from "antd";
+
 import HeadBar from "../../components/library/HeadBar";
 import Footer from "../../components/library/Footer";
 
 const Widget = () => {
   return (
-	<div>
-		<HeadBar  />
-		<div>Home Page</div>
-		<Footer />
-	</div>
-  	
+    <div>
+      <HeadBar />
+      <div>Home Page</div>
+      <ReactMarkdown>- Hello, **mint**!</ReactMarkdown>
+
+      <div>
+        <Tag
+          onClick={() => {
+            console.log("test tag was clicked");
+          }}
+        >
+          Test
+        </Tag>
+      </div>
+      <Footer />
+    </div>
   );
 };
 

+ 12 - 2
documents/development/frontend/README.md

@@ -53,6 +53,16 @@ yarn start
 
 ### 其它例子
 
-- img 组件
+- 常见组件
 
-  ![img](img.png)
+  - img
+
+    ![img](demo/img.png)
+
+  - Markdown
+
+    ![markdown viewer](demo/md-view.png)
+
+  - on click event
+
+    ![on click](demo/on-click.png)

+ 0 - 0
documents/development/frontend/img.png → documents/development/frontend/demo/img.png


二進制
documents/development/frontend/demo/md-view.png


二進制
documents/development/frontend/demo/on-click.png