Merge pull request #110 from FriedRiceNoodles/docs/message

docs(message): added html source code for message

docs/example/Message/demos/duration.tsx

@@ -4,19 +4,16 @@
  */
 
 import { Button, Message } from '@banana-ui/react';
-import React from 'react';
 
 export default function Duration() {
   return (
-    <div>
-      <Button
-        onClick={() => {
-          Message.info({ content: '这条提示将会被展示10秒...', duration: 10 });
-        }}
-        type="primary"
-      >
-        自定义提示时长
-      </Button>
-    </div>
+    <Button
+      onClick={() => {
+        Message.info({ content: '这条提示将会被展示10秒...', duration: 10 });
+      }}
+      type="primary"
+    >
+      自定义提示时长
+    </Button>
   );
 }

docs/example/Message/demos/loading.tsx

@@ -4,21 +4,18 @@
  */
 
 import { Button, Message } from '@banana-ui/react';
-import React from 'react';
 
 export default function Loading() {
   return (
-    <div>
-      <Button
-        onClick={() => {
-          const messageId = Message.loading({ content: '正在加载...', duration: 0 });
-          setTimeout(() => {
-            Message.closeMessage(messageId);
-          }, 5000);
-        }}
-      >
-        显示一个loading提示
-      </Button>
-    </div>
+    <Button
+      onClick={() => {
+        const messageId = Message.loading({ content: '正在加载...', duration: 0 });
+        setTimeout(() => {
+          Message.closeMessage(messageId);
+        }, 5000);
+      }}
+    >
+      显示一个loading提示
+    </Button>
   );
 }

docs/example/Message/demos/type.tsx

@@ -3,7 +3,6 @@
  */
 
 import { Button, Message } from '@banana-ui/react';
-import React from 'react';
 
 export default function Type() {
   return (

public/Message/duration.html

@@ -0,0 +1,9 @@
+<b-button type="primary">自定义提示时长</b-button>
+
+<script>
+  const button = document.querySelector('b-button');
+
+  button.addEventListener('click', () => {
+    window.BMessage.info({ content: '这条提示将会被展示10秒...', duration: 10 });
+  });
+</script>

public/Message/loading.html

@@ -0,0 +1,12 @@
+<b-button type="primary">显示一个loading提示</b-button>
+
+<script>
+  const button = document.querySelector('b-button');
+
+  button.addEventListener('click', () => {
+    const messageId = window.BMessage.loading({ content: '正在加载...', duration: 0 });
+    setTimeout(() => {
+      window.BMessage.closeMessage(messageId);
+    }, 5000);
+  });
+</script>

public/Message/type.html

@@ -0,0 +1,30 @@
+<div style="display: flex; gap: 10px; flex-wrap: wrap;">
+  <b-button id="infoBtn" type="primary">普通提示</b-button>
+  <b-button id="successBtn" type="success">成功提示</b-button>
+  <b-button id="errorBtn" type="danger">错误提示</b-button>
+  <b-button id="warningBtn" type="warning">警告提示</b-button>
+</div>
+
+
+<script>
+  function showInfo() {
+    window.BMessage.info({ content: '一个普通提示' });
+  }
+
+  function showSuccess() {
+    window.BMessage.success({ content: '一个成功提示' });
+  }
+
+  function showError() {
+    window.BMessage.error({ content: '一个错误提示' });
+  }
+
+  function showWarning() {
+    window.BMessage.warning({ content: '一个警告提示' });
+  }
+
+  document.getElementById('infoBtn').addEventListener('click', showInfo);
+  document.getElementById('successBtn').addEventListener('click', showSuccess);
+  document.getElementById('errorBtn').addEventListener('click', showError);
+  document.getElementById('warningBtn').addEventListener('click', showWarning);
+</script>