Merge pull request #75 from FriedRiceNoodles/docs/menu

docs(menu): added html source code, and updated docs
FriedRiceNoodles · Mar 16, 2024 · 32874d8 · 32874d8
2 parents 53548f9 + e6699c6
commit 32874d8
Show file tree

Hide file tree

Showing 7 changed files with 39 additions and 17 deletions.
diff --git a/docs/example/Menu/demos/BasicUsage.tsx → docs/example/Menu/demos/basicUsage.tsx b/docs/example/Menu/demos/BasicUsage.tsx → docs/example/Menu/demos/basicUsage.tsx
@@ -4,7 +4,6 @@
  */
 
 import { Divider, Menu, MenuItem } from '@banana-ui/react';
-import React from 'react';
 
 export default function BasicUsage() {
   return (

diff --git a/docs/example/Menu/demos/Disabled.tsx → docs/example/Menu/demos/disabled.tsx b/docs/example/Menu/demos/Disabled.tsx → docs/example/Menu/demos/disabled.tsx
@@ -4,7 +4,6 @@
  */
 
 import { Divider, Menu, MenuItem } from '@banana-ui/react';
-import React from 'react';
 
 export default function BasicUsage() {
   return (

diff --git a/docs/example/Menu/demos/Event.tsx → docs/example/Menu/demos/event.tsx b/docs/example/Menu/demos/Event.tsx → docs/example/Menu/demos/event.tsx
@@ -4,7 +4,6 @@
  */
 
 import { Divider, Menu, MenuItem } from '@banana-ui/react';
-import React from 'react';
 
 export default function BasicUsage() {
   const onSelect = (

diff --git a/docs/example/Menu/index.md b/docs/example/Menu/index.md
@@ -10,22 +10,15 @@ demo:
 <b-menu> | Menu
 ```
 
-:::info
-Menu 组件搭配 MenuItem 组件使用
-
-```
-<b-menu-item> | MenuItem
-```
-
-:::
+## 介绍
 
 菜单提供了一个选项/操作列表供用户选择。
 
 ## 代码演示
 
-<code src="./demos/BasicUsage.tsx"></code>
-<code src="./demos/Disabled.tsx"></code>
-<code src="./demos/Event.tsx"></code>
+<code src="./demos/basicUsage.tsx"></code>
+<code src="./demos/disabled.tsx"></code>
+<code src="./demos/event.tsx"></code>
 
 ## 属性 (MenuItem 菜单子项) - Attributes & Properties
 
@@ -36,9 +29,9 @@ Menu 组件搭配 MenuItem 组件使用
 
 ## 事件 - Events
 
-| 事件   | 说明       | Event Detail     |
-| ------ | ---------- | ---------------- |
-| select | 选中时触发 | `{item: string}` |
+| 事件   | 说明       | Event Detail              |
+| ------ | ---------- | ------------------------- |
+| select | 选中时触发 | `{item: {value: string}}` |
 
 ## 插槽 - Slots
 

diff --git a/public/Menu/basicUsage.html b/public/Menu/basicUsage.html
@@ -0,0 +1,11 @@
+<b-menu style="max-width: 200px;">
+  <b-menu-item>Option 1</b-menu-item>
+  <b-menu-item>Option 2</b-menu-item>
+  <b-menu-item>Option 3</b-menu-item>
+  <b-menu-item>Option 4</b-menu-item>
+  <b-menu-item>Option 5</b-menu-item>
+  <b-divider></b-divider>
+  <b-menu-item>Option A</b-menu-item>
+  <b-menu-item>Option B</b-menu-item>
+  <b-menu-item>Option C</b-menu-item>
+</b-menu>
diff --git a/public/Menu/disabled.html b/public/Menu/disabled.html
@@ -0,0 +1,7 @@
+<b-menu style="max-width: 200px;">
+  <b-menu-item>Option 1</b-menu-item>
+  <b-menu-item>Option 2</b-menu-item>
+  <b-menu-item>Option 3</b-menu-item>
+  <b-divider></b-divider>
+  <b-menu-item disabled>Disabled</b-menu-item>
+</b-menu>
diff --git a/public/Menu/event.html b/public/Menu/event.html
@@ -0,0 +1,14 @@
+<b-menu style="max-width: 200px;">
+  <b-menu-item value="opt-1">Option 1</b-menu-item>
+  <b-menu-item value="opt-2">Option 2</b-menu-item>
+  <b-menu-item value="opt-3">Option 3</b-menu-item>
+  <b-divider></b-divider>
+  <b-menu-item value="disabled" disabled>Disabled</b-menu-item>
+</b-menu>
+
+<script>
+  const menu = document.querySelector('b-menu');
+  menu.addEventListener('select', (event) => {
+    console.log(event.detail.item.value);
+  });
+</script>