Skip to content

Commit

Permalink
Merge pull request #5 from FriedRiceNoodles/pref/completeDoc
Browse files Browse the repository at this point in the history 
complete document
  • Loading branch information
@FriedRiceNoodles
FriedRiceNoodles authored Feb 21, 2024
2 parents 8b74d8b + 76fcdc4 commit 7d49f34
Show file tree
Hide file tree
Showing 23 changed files with 251 additions and 18 deletions.
71 changes: 71 additions & 0 deletions docs/example/Button/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,10 @@ demo:

# Button 按钮

```
<b-button> | Button
```

## 介绍

不难看出，这是一个按钮
Expand All @@ -21,3 +25,70 @@ demo:
<code src="./demos/demo6.tsx"></code>
<code src="./demos/demo7.tsx"></code>
<code src="./demos/formTest.tsx"></code>

## 属性 - Attributes & Properties

| 属性 | 说明 | 类型 | 默认值 |
| -------------- | ---------------------------------- | ---------------------------------------------------------------------------- | --------- |
| type | 按钮的类型 | `default` \| `primary` \| `success` \| `warning` \| `danger` \| `dashed` | `default` |
| size | 按钮的尺寸 | `small` \| `medium` \| `large` | `medium` |
| disabled | 是否禁用按钮 | boolean | true |
| pill | 是否为药丸形状的按钮 | boolean | false |
| outline | 是否是背景透明，内容反色 | boolean | false |
| loading | 加载状态 | boolean | false |
| block | 按钮占满父容器宽度 | boolean | false |
| htmlType | `button`的原生 type 值 | string | `button` |
| name | 与`form`标签联动，表单项的名称 | string | - |
| form | 与`form`标签联动，表单容器的名称 | string | - |
| formAction | `button`的原生`formaction`属性 | string | - |
| formEnctype | `button`的原生`formenctype`属性 | `application/x-www-form-urlencoded` \| `multipart/form-data` \| `text/plain` | - |
| formMethod | `button`的原生`formmethod`属性 | `get` \| `post` | - |
| formNoValidate | `button`的原生`formnovalidate`属性 | boolean | - |
| formtarget | `button`的原生`formtarget`属性 | `_self` \| `_blank` \| `_parent` \| `_top` \| - | - |

## 插槽 - Slots

| 插槽 | 说明 |
| --------- | -------- |
| (default) | 按钮内容 |

## CSS Parts

| Part | 说明 |
| ------- | ---------------- |
| base | 包裹组件的容器 |
| loading | 按钮加载时的内容 |
| content | 按钮框的内容 |

## 样式变量

| 变量 | 说明 | 默认值 |
| ------------------------------------ | -------------------------------- | -------------------- |
| --banana-button-boder-width | 按钮边框宽度 | 1px |
| --banana-button-border-radius | 按钮圆角大小 | 3px |
| --banana-button-font-family | 按钮内容的字体 | - |
| --banana-button-font-weight | 按钮内容的字重 | 400 |
| --banana-button-border-color-default | type 为 dash 或默认时的边框颜色 | rgb(151, 154, 154) |
| --banana-color-primary-hover | hover 时的主色 | rgb( 0, 79, 179) |
| --banana-color-primary-active | active 时的主色 | rgb(0, 61, 133) |
| --banana-color-success | type 为 success 时的主色 | rgb(42, 134, 54) |
| --banana-color-success-hover | type 为 success 时 hover 的主色 | rgb(37, 117, 47) |
| --banana-color-success-active | type 为 success 时 active 的主色 | rgb(31, 101, 41) |
| --banana-color-warning | type 为 warning 的主色 | rgb(210, 103, 0) |
| --banana-color-warning-hover | type 为 warning 的 hover 时主色 | rgb(210, 103, 0, 41) |
| --banana-color-warning-active | type 为 warning 的 active 时主色 | rgb(126, 49, 0) |
| --banana-color-danger | type 为 danger 的主色 | rgb(126, 49, 0) |
| --banana-color-danger-hover | type 为 danger 的 hover 时主色 | rgb(213, 37, 5) |
| --banana-color-danger-active | type 为 danger 的 active 时主色 | rgb(178, 20, 2) |
| --banana-button-fontsize-small | size 为 small 时的字体大小 | 12px |
| --banana-button-height-small | size 为 small 时的最小高度 | 24px |
| --banana-button-padding-small | size 为 small 时的内边距 | 2px 12px |
| --banana-button-fontsize-medium | size 为 medium 时的字体大小 | 14px |
| --banana-button-height-medium | size 为 medium 时的最小高度 | 32px |
| --banana-button-padding-medium | size 为 medium 时的内边距 | 6px 12px |
| --banana-button-fontsize-large | size 为 large 的字体大小 | 16px |
| --banana-button-height-large | size 为 large 的最小高度 | 16px |
| --banana-button-padding-large | size 为 large 时的内边距 | 10px 12px |
| --button-loading-color | loading 状态时的字体颜色 | #fff |
| --button-loading-speed | loading 状态的旋转速度 | 1s |
| --button-loading-speed | loading 状态的旋转速度 | 1s |
4 changes: 4 additions & 0 deletions docs/example/Carousel/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,10 @@ group: 组件

# Carousel 轮播图

```
<b-carousel> | Carousel
```

## 介绍

可以用它来展示多张图片，或者其他内容。
Expand Down
4 changes: 4 additions & 0 deletions docs/example/Checkbox/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,10 @@ demo:

# Checkbox 复选框

```
<b-checkbox> | Checkbox
```

复选框。又称多选框。

## 代码演示
Expand Down
4 changes: 4 additions & 0 deletions docs/example/Collapse/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,10 @@ group: 组件

# Collapse 折叠面板

```
<b-collapse> | Collapse
```

## 介绍

将复杂的内容放入折叠面板中，可保持页面的整洁。
Expand Down
4 changes: 4 additions & 0 deletions docs/example/Countdown/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,10 @@ demo:

# Countdown 倒计时

```
<b-countdown> | Countdown
```

倒计时组件,支持自定义格式化和毫秒级精度.

## 代码演示
Expand Down
4 changes: 4 additions & 0 deletions docs/example/Divider/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,10 @@ demo:

# Divider 分割线

```
<b-divider> | Divider
```

## 介绍

区隔内容的分割线。
Expand Down
4 changes: 4 additions & 0 deletions docs/example/Dropdown/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,10 @@ demo:

# Dropdown 下拉菜单

```
<b-dropdown> | Dropdown
```

## 介绍

一个用于收纳操作命令的容器。
Expand Down
4 changes: 4 additions & 0 deletions docs/example/Input/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,10 @@ demo:

# Input 输入框

```
<b-input> | Input
```

最基本的接收用户输入的组件,通常被用在表单中,当然也可以单独使用.

## 代码演示
Expand Down
4 changes: 4 additions & 0 deletions docs/example/Marquee/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,10 @@ demo:

# Marquee 跑马灯

```
<b-marquee> | Marquee
```

适合用于展示公告、中奖信息之类的长文本。

## 代码演示
Expand Down
52 changes: 52 additions & 0 deletions docs/example/Menu/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,10 +6,62 @@ demo:

# Menu 菜单

```
<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>

## 属性 (MenuItem 菜单子项) - Attributes & Properties

| 属性 | 说明 | 类型 | 默认值 |
| -------- | ------------------- | ------- | ------ |
| value | MenuItem 的唯一标识 | string | - |
| disabled | MenuItem 是否禁用 | boolean | false |

## 事件 - Events

| 事件 | 说明 | Event Detail |
| ------ | ---------- | ---------------- |
| select | 选中时触发 | `{item: string}` |

## 插槽 - Slots

| 插槽 | 说明 |
| --------- | ---------- |
| (default) | 菜单的内容 |

## 插槽（MenuItem 菜单子项） - Slots

| 插槽 | 说明 |
| --------- | ---------------------------------------------------- |
| (default) | 菜单子项的内容，一般写入 MenuItem 或者分割线 Divider |

## CSS Parts (MenuItem 菜单子项)

| Part | 说明 |
| ---- | -------------- |
| base | 包裹组件的容器 |

## 样式变量

| 变量 | 说明 | 默认值 |
| ------------------------ | -------------- | ---------------------------- |
| --banana-menu-background | 菜单的背景颜色 | #fff |
| --banana-menu-border | 菜单边框样式 | 1px solid rgb(229, 231, 233) |
| --banana-menu-padding | 菜单内边距 | 6px 0 |
4 changes: 4 additions & 0 deletions docs/example/Message/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,10 @@ demo:

# Message 提示

```
<b-message> | Message
```

全局的消息提示,常用于向用户反馈操作的结果或状态的变更.

## 代码演示
Expand Down
4 changes: 4 additions & 0 deletions docs/example/Modal/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,10 @@ demo:

# Modal 对话框

```
<b-modal> | Modal
```

模态**对话框**，当然你也可以叫它**弹窗**。

## 代码演示
Expand Down
4 changes: 4 additions & 0 deletions docs/example/Overlay/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,10 @@ group: 组件

# Overlay 遮罩层组件

```
<b-overlay> | Overlay
```

## 介绍

这是一个遮罩层，可往其中放入子元素。
Expand Down
4 changes: 4 additions & 0 deletions docs/example/Popup/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,10 @@ group: 组件

# Popup 弹层

```
<b-popup> | Popup
```

## 介绍

一个从屏幕边缘弹出的弹层。
Expand Down
4 changes: 4 additions & 0 deletions docs/example/Progress/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,10 @@ demo:

# Progress 进度条

```
<b-progress> | Progress
```

可用于展示操作的进度，或用于电商的活动场景。

## 代码演示
Expand Down
7 changes: 6 additions & 1 deletion docs/example/Radio/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,12 +6,17 @@ demo:

# Radio 单选框

单选框。
```
<b-radio> | Radio
```

:::info

Radio 必须配合 RadioGroup 使用。
:::

单选框。

## 代码演示

<code src="./demos/basicUsage.tsx"></code>
Expand Down
4 changes: 4 additions & 0 deletions docs/example/Rating/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,10 @@ demo:

# Rating 评分

```
<b-rating> | Rating
```

评分组件。

## 代码演示
Expand Down
57 changes: 45 additions & 12 deletions docs/example/Select/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,10 @@ demo:

# Select 选择器

```
<b-select> | Select
```

下拉选择框，可以从预定的选项中选择一个或多个选项。

## 代码演示
Expand Down Expand Up @@ -57,21 +61,50 @@ demo:

## 插槽 - Slots

| 插槽 | 说明 |
| --------- | -------------- |
| (default) | 默认插槽的说明 |
| title | 标题区域 |
| 插槽 | 说明 |
| --------- | ---------- |
| (default) | 选择器内容 |

## CSS Parts

| Part | 说明 |
| ------ | ------------------ |
| base | 包裹组件的容器 |
| header | 组件的 header 区域 |
| Part | 说明 |
| ------- | -------------- |
| base | 包裹组件的容器 |
| listbox | 选择器展开部分 |

## 样式变量

| 变量 | 说明 | 默认值 |
| ---------------------------- | ------------------ | ------ |
| --banana-xxx-title-padding | 标题的 padding | 16px |
| --banana-xxx-content-padding | 展开区域的 padding | 16px |
| 变量 | 说明 | 默认值 |
| ------------------------------------------------- | ----------------------------------------- | ---------------------------- |
| --banana-select-selector-border | 边框样式 | 1px solid rgb(151, 154, 154) |
| --banana-select-disabled-color | 禁用状态字体颜色 | rgba(0, 0, 0, 0.25) |
| --banana-select-disabled-background-color | 禁用状态背景颜色 | rgba(0, 0, 0, 0.03) |
| --banana-select-disabled-border-color | 禁用状态边框颜色 | rgba(179, 182, 183) |
| --banana-select-selector-font-size-small | small 尺寸选择器字体大小 | 14px |
| --banana-select-selector-height-small | small 尺寸选择器最小高度 | 24px |
| --banana-select-selector-padding-small | small 尺寸选择器内边距 | 0 24px 0 12px |
| --banana-select-selector-border-radius-small | small 尺寸选择器圆角大小 | 4px |
| --banana-select-selector-font-size-medium | medium 尺寸选择器字体大小 | 14px |
| --banana-select-selector-height-medium | medium 尺寸选择器最小高度 | 32px |
| --banana-select-selector-padding-medium | medium 尺寸选择器内边距 | 0 24px 0 12px |
| --banana-select-selector-border-radius-medium | medium 尺寸选择器圆角大小 | 6px |
| --banana-select-selector-font-size-large | large 尺寸选择器字体大小 | 16px |
| --banana-select-selector-height-large | large 尺寸选择器最小高度 | 40px |
| --banana-select-selector-padding-large | large 尺寸选择器内边距 | 0 24px 0 12px |
| --banana-select-selector-border-radius-large | large 尺寸选择器圆角大小 | 8px |
| --banana-color-primary-hover | hover 颜色 | rgba(0, 79, 179) |
| --banana-color-primary-active | active 颜色 | rgba(0, 61, 133) |
| --banana-select-placeholder-color | placeholder 文字颜色 | rgba(151, 154, 154) |
| --banana-select-expand-icon-color | 选择器展开 icon 颜色 | rgba(151, 154, 154) |
| --banana-select-clear-icon-color | 清空 icon 颜色 | rgba(179, 182, 183) |
| --banana-select-clear-icon-hover-color | 清空 icon hover 时颜色 | rgba(46, 50, 56) |
| --banana-select-border-radius | 展开面板圆角大小 | 6px |
| --banana-select-list-padding | 展开面板内边距 | 4px |
| --banana-select-list-max-height | 展开面板最大高度 | 260px |
| --banana-select-multiple-option-background-color | 多选情况下，每个选项的背景色 | rgba(229, 231, 233, 0.65) |
| --banana-select-multiple-option-border-radius | 多选情况下，每个选项的圆角大小 | 4px |
| --banana-select-multiple-option-height-small | 多选情况下且尺寸为 small，每个选项的高度 | 16px |
| --banana-select-multiple-option-height-medium | 多选情况下且尺寸为 medium，每个选项的高度 | 24px |
| --banana-select-multiple-option-height-large | 多选情况下且尺寸为 large，每个选项的高度 | 32px |
| --banana-select-multiple-option-close-color | 多选情况下，删除选项 icon 颜色 | rgba(179, 182, 183) |
| --banana-select-multiple-option-close-hover-color | 多选情况下，删除选项 icon hover 时的颜色 | rgba(46, 50, 56) |
Loading

0 comments on commit 7d49f34

Please sign in to comment.