Merge pull request #106 from FriedRiceNoodles/docs/modal

docs(modal): add html source code

docs/example/Modal/demos/basicUsage.tsx

@@ -9,7 +9,7 @@ export default function BasicUsage() {
   const [visible, setVisible] = useState(false);
 
   return (
-    <div>
+    <>
       <Button type="primary" onClick={() => setVisible(true)}>
         Open Modal
       </Button>
@@ -28,6 +28,6 @@ export default function BasicUsage() {
         <div>Some contents...</div>
         <div>Some contents...</div>
       </Modal>
-    </div>
+    </>
   );
 }

docs/example/Modal/demos/buttonStatus.tsx

@@ -4,14 +4,14 @@
  */
 
 import { Button, Message, Modal } from '@banana-ui/react';
-import React, { useState } from 'react';
+import { useState } from 'react';
 
 export default function ButtonStatus() {
   const [visible, setVisible] = useState(false);
   const [loading, setLoading] = useState(false);
 
   return (
-    <div>
+    <>
       <Button type="primary" onClick={() => setVisible(true)}>
         自定义按钮状态
       </Button>
@@ -37,6 +37,6 @@ export default function ButtonStatus() {
         <div>Some contents...</div>
         <div>Some contents...</div>
       </Modal>
-    </div>
+    </>
   );
 }

docs/example/Modal/demos/buttonText.tsx

@@ -4,13 +4,13 @@
  */
 
 import { Button, Message, Modal } from '@banana-ui/react';
-import React, { useState } from 'react';
+import { useState } from 'react';
 
 export default function ButtonText() {
   const [visible, setVisible] = useState(false);
 
   return (
-    <div>
+    <>
       <Button type="primary" onClick={() => setVisible(true)}>
         Open Modal
       </Button>
@@ -29,6 +29,6 @@ export default function ButtonText() {
       >
         是否开通连续包月？
       </Modal>
-    </div>
+    </>
   );
 }

docs/example/Modal/demos/customFooter.tsx

@@ -4,13 +4,13 @@
  */
 
 import { Button, Message, Modal } from '@banana-ui/react';
-import React, { useState } from 'react';
+import { useState } from 'react';
 
 export default function CustomFooter() {
   const [visible, setVisible] = useState(false);
 
   return (
-    <div>
+    <>
       <Button type="primary" onClick={() => setVisible(true)}>
         自定义Footer
       </Button>
@@ -33,6 +33,6 @@ export default function CustomFooter() {
           </Button>
         </div>
       </Modal>
-    </div>
+    </>
   );
 }

docs/example/Modal/demos/customWidth.tsx

@@ -12,7 +12,7 @@ export default function CustomWidth() {
   const [visible3, setVisible3] = useState(false);
 
   return (
-    <div>
+    <>
       <Button onClick={() => setVisible(true)} style={{ marginRight: '20px' }}>
         一个300px宽度的Modal
       </Button>
@@ -67,6 +67,6 @@ export default function CustomWidth() {
         <div>Some contents...</div>
         <div>Some contents...</div>
       </Modal>
-    </div>
+    </>
   );
 }

docs/example/Modal/demos/overflow.tsx

@@ -4,13 +4,13 @@
  */
 
 import { Button, Message, Modal } from '@banana-ui/react';
-import React, { useState } from 'react';
+import { useState } from 'react';
 
 export default function Overflow() {
   const [visible, setVisible] = useState(false);
 
   return (
-    <div>
+    <>
       <Button type="primary" onClick={() => setVisible(true)}>
         Open Modal
       </Button>
@@ -30,6 +30,6 @@ export default function Overflow() {
           <span>Hi~ o(*￣▽￣*)ブ</span>
         </div>
       </Modal>
-    </div>
+    </>
   );
 }

public/Modal/basicUsage.html

@@ -0,0 +1,26 @@
+<b-button type="primary">
+  Open Modal
+</b-button>
+<b-modal title="I am a Modal~">
+  <div>Some contents...</div>
+  <div>Some contents...</div>
+  <div>Some contents...</div>
+</b-modal>
+
+<script>
+  const button = document.querySelector('b-button');
+  const modal = document.querySelector('b-modal');
+
+  button.addEventListener('click', () => {
+    modal.open = true;
+  });
+
+  modal.addEventListener('ok', () => {
+    modal.open = false;
+    window.BMessage.success({ content: "OK~" })
+  });
+
+  modal.addEventListener('cancel', () => {
+    modal.open = false;
+  });
+</script>

public/Modal/buttonStatus.html

@@ -0,0 +1,32 @@
+<b-button type="primary">
+  自定义按钮状态
+</b-button>
+<b-modal title="I am a Modal~">
+  <div>Some contents...</div>
+  <div>Some contents...</div>
+  <div>Some contents...</div>
+</b-modal>
+
+<script>
+  const button = document.querySelector('b-button');
+  const modal = document.querySelector('b-modal');
+
+  button.addEventListener('click', () => {
+    modal.open = true;
+  });
+
+  modal.addEventListener('ok', () => {
+    modal.okButtonLoading = true;
+    modal.cancelButtonDisabled = true;
+    setTimeout(() => {
+      modal.okButtonLoading = false;
+      modal.cancelButtonDisabled = false;
+      modal.open = false;
+      window.BMessage.success({ content: "OK~" })
+    }, 3000);
+  });
+
+  modal.addEventListener('cancel', () => {
+    modal.open = false;
+  });
+</script>

public/Modal/buttonText.html

@@ -0,0 +1,24 @@
+<b-button type="primary">
+  Open Modal
+</b-button>
+<b-modal title="会员畅享内容" ok-text="没问题！" cancel-text="算了">
+  是否开通连续包月？
+</b-modal>
+
+<script>
+  const button = document.querySelector('b-button');
+  const modal = document.querySelector('b-modal');
+
+  button.addEventListener('click', () => {
+    modal.open = true;
+  });
+
+  modal.addEventListener('ok', () => {
+    modal.open = false;
+    window.BMessage.success({ content: "OK~" })
+  });
+
+  modal.addEventListener('cancel', () => {
+    modal.open = false;
+  });
+</script>

public/Modal/customFooter.html

@@ -0,0 +1,34 @@
+<b-button type="primary" id="open-button">自定义Footer</b-button>
+<b-modal title="删除数据">
+  <p>是否删除数据？</p>
+  <div slot="footer">
+    <b-button id="cancel-button" style="margin-right: 10px;">取消</b-button>
+    <b-button type="danger" id="delete-button">删除</b-button>
+  </div>
+</b-modal>
+
+<script>
+  const button = document.querySelector('#open-button');
+  const modal = document.querySelector('b-modal');
+  const cancelButton = document.querySelector('#cancel-button');
+  const deleteButton = document.querySelector('#delete-button');
+
+  button.addEventListener('click', () => {
+    modal.open = true;
+  });
+
+  // 自定义的Footer中的按钮被点击后不会触发ok或cancel事件，需要手动关闭Modal
+  // 但是点击Modal的遮罩层会或按ESC键或点击Modal的关闭按钮仍然会触发cancel事件
+  modal.addEventListener('cancel', () => {
+    modal.open = false;
+  });
+
+  cancelButton.addEventListener('click', () => {
+    modal.open = false;
+  });
+
+  deleteButton.addEventListener('click', () => {
+    modal.open = false;
+    window.BMessage.success({ content: "已删除数据" })
+  });
+</script>

public/Modal/customWidth.html

@@ -0,0 +1,70 @@
+<b-button id="open-button1" style="margin-right: 20px;">一个300px宽度的Modal</b-button>
+<b-button id="open-button2">一个50vw宽度的Modal</b-button>
+<p>你甚至可以使用`css变量`来设置宽度</p>
+<b-button id="open-button3">使用css变量设置宽度</b-button>
+
+<b-modal id="modal1" title="一个300px宽度的Modal" width="300">
+  <p>Some contents...</p>
+  <p>Some contents...</p>
+  <p>Some contents...</p>
+</b-modal>
+
+<b-modal id="modal2" title="一个50vw宽度的Modal" width="50vw">
+  <p>Some contents...</p>
+  <p>Some contents...</p>
+  <p>Some contents...</p>
+</b-modal>
+
+<b-modal id="modal3" title="使用css变量设置宽度" style="--banana-modal-width: 50vw;">
+  <p>Some contents...</p>
+  <p>Some contents...</p>
+  <p>Some contents...</p>
+</b-modal>
+
+<script>
+  const button1 = document.querySelector('#open-button1');
+  const button2 = document.querySelector('#open-button2');
+  const button3 = document.querySelector('#open-button3');
+  const modal1 = document.querySelector('#modal1');
+  const modal2 = document.querySelector('#modal2');
+  const modal3 = document.querySelector('#modal3');
+
+  button1.addEventListener('click', () => {
+    modal1.open = true;
+  });
+
+  button2.addEventListener('click', () => {
+    modal2.open = true;
+  });
+
+  button3.addEventListener('click', () => {
+    modal3.open = true;
+  });
+
+  modal1.addEventListener('ok', () => {
+    modal1.open = false;
+    window.BMessage.success({ content: "OK~" })
+  });
+
+  modal2.addEventListener('ok', () => {
+    modal2.open = false;
+    window.BMessage.success({ content: "OK~" })
+  });
+
+  modal3.addEventListener('ok', () => {
+    modal3.open = false;
+    window.BMessage.success({ content: "OK~" })
+  });
+
+  modal1.addEventListener('cancel', () => {
+    modal1.open = false;
+  });
+
+  modal2.addEventListener('cancel', () => {
+    modal2.open = false;
+  });
+
+  modal3.addEventListener('cancel', () => {
+    modal3.open = false;
+  });
+</script>

public/Modal/overflow.html

@@ -0,0 +1,26 @@
+<b-button type="primary">Open Modal</b-button>
+
+<b-modal title="I am a Modal~">
+  <div style="padding: 30px 20px; border: 1px dashed #ccc">
+    <div style="height: 200vh">往下滚动试试~👇🏻👇👇🏻👇👇🏻👇</div>
+    <span>Hi~ o(*￣▽￣*)ブ</span>
+  </div>
+</b-modal>
+
+<script>
+  const button = document.querySelector('b-button');
+  const modal = document.querySelector('b-modal');
+
+  button.addEventListener('click', () => {
+    modal.open = true;
+  });
+
+  modal.addEventListener('ok', () => {
+    modal.open = false;
+    window.BMessage.success({ content: "OK~" })
+  });
+
+  modal.addEventListener('cancel', () => {
+    modal.open = false;
+  });
+</script>