Skip to content

Commit

Permalink
Merge pull request #69 from FriedRiceNoodles/docs/dropdown
Browse files Browse the repository at this point in the history 
docs(dropdown): added html source code
  • Loading branch information
@FriedRiceNoodles
FriedRiceNoodles authored Mar 15, 2024
2 parents cfff032 + 8e311b3 commit 3fabb2f
Show file tree
Hide file tree
Showing 9 changed files with 139 additions and 7 deletions.
1 change: 0 additions & 1 deletion docs/example/Dropdown/demos/Arrow.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@
*/

import { Button, Divider, Dropdown, MenuItem } from '@banana-ui/react';
import React from 'react';

export default function Arrow() {
return (
Expand Down
1 change: 0 additions & 1 deletion docs/example/Dropdown/demos/BasicUsage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@
*/

import { Button, Divider, Dropdown, Menu, MenuItem } from '@banana-ui/react';
import React from 'react';

export default function BasicUsage() {
return (
Expand Down
1 change: 0 additions & 1 deletion docs/example/Dropdown/demos/Placement.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@
*/

import { Button, Divider, Dropdown, Menu, MenuItem } from '@banana-ui/react';
import React from 'react';

export default function BasicUsage() {
return (
Expand Down
1 change: 0 additions & 1 deletion docs/example/Dropdown/demos/triggerAction.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@
*/

import { Button, Divider, Dropdown, Menu, MenuItem } from '@banana-ui/react';
import React from 'react';

export default function TriggerAction() {
return (
Expand Down
6 changes: 3 additions & 3 deletions docs/example/Dropdown/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,9 +16,9 @@ demo:

## 代码演示

<code src="./demos/BasicUsage.tsx"></code>
<code src="./demos/Placement.tsx"></code>
<code src="./demos/Arrow.tsx"></code>
<code src="./demos/basicUsage.tsx"></code>
<code src="./demos/placement.tsx"></code>
<code src="./demos/arrow.tsx"></code>
<code src="./demos/triggerAction.tsx"></code>

## 属性 - Attributes & Properties
Expand Down
25 changes: 25 additions & 0 deletions public/Dropdown/arrow.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
<b-dropdown margin="15" style="margin-right: 10px;">
<b-button>Hover me!</b-button>
<div slot="drop" style="width: 380px; padding: 10px; box-sizing: border-box; background: #ccc;">
<b-menu-item>Option 1</b-menu-item>
<b-menu-item>Option 2</b-menu-item>
<b-divider></b-divider>
<b-menu-item>Option A</b-menu-item>
<b-menu-item>Option B</b-menu-item>
</div>
<div style="position: absolute; width: 12px; height: 12px; background-color: #ccc; z-index: -1;" class="arrow"
slot="arrow"></div>
</b-dropdown>

<b-dropdown margin="15" placement="topRight">
<b-button>topRight</b-button>
<div slot="drop" style="width: 600px; background: #ccc;">
<b-menu-item>Option 1</b-menu-item>
<b-menu-item>Option 2</b-menu-item>
<b-divider></b-divider>
<b-menu-item>Option A</b-menu-item>
<b-menu-item>Option B</b-menu-item>
</div>
<div style="position: absolute; width: 12px; height: 12px; background-color: #ccc; z-index: -1;" class="arrow"
slot="arrow"></div>
</b-dropdown>
13 changes: 13 additions & 0 deletions public/Dropdown/basicUsage.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
<b-dropdown>
<b-button>Hover me!</b-button>
<b-menu slot="drop" 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>
</b-dropdown>
85 changes: 85 additions & 0 deletions public/Dropdown/placement.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,85 @@
<div style="display: flex; gap: 10px; flex-wrap: wrap;">
<b-dropdown placement="bottomLeft">
<b-button>bottomLeft(default)</b-button>
<b-menu slot="drop" 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>
</b-dropdown>

<b-dropdown placement="bottom">
<b-button>bottom</b-button>
<b-menu slot="drop" 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>
</b-dropdown>

<b-dropdown placement="bottomRight">
<b-button>bottomRight</b-button>
<b-menu slot="drop" 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>
</b-dropdown>

<b-dropdown placement="topLeft">
<b-button>topLeft</b-button>
<b-menu slot="drop" 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>
</b-dropdown>

<b-dropdown placement="top">
<b-button>top</b-button>
<b-menu slot="drop" 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>
</b-dropdown>

<b-dropdown placement="topRight">
<b-button>topRight</b-button>
<b-menu slot="drop" 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>
</b-dropdown>
</div>
13 changes: 13 additions & 0 deletions public/Dropdown/triggerAction.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
<b-dropdown trigger-action="click">
<b-button>Click me!</b-button>
<b-menu slot="drop" 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>
</b-dropdown>

0 comments on commit 3fabb2f

Please sign in to comment.