From f012055756d645520c2eba519943852728f1582f Mon Sep 17 00:00:00 2001 From: "zia.huang" Date: Sun, 18 Feb 2024 17:30:48 +0800 Subject: [PATCH 1/6] perf: add useful component name in example --- docs/example/Button/index.md | 8 ++++++++ docs/example/Carousel/index.md | 8 ++++++++ docs/example/Checkbox/index.md | 8 ++++++++ docs/example/Collapse/index.md | 8 ++++++++ docs/example/Countdown/index.md | 8 ++++++++ docs/example/Divider/index.md | 8 ++++++++ docs/example/Dropdown/index.md | 8 ++++++++ docs/example/Input/index.md | 8 ++++++++ docs/example/Marquee/index.md | 8 ++++++++ docs/example/Menu/index.md | 8 ++++++++ docs/example/Message/index.md | 8 ++++++++ docs/example/Modal/index.md | 8 ++++++++ docs/example/Overlay/index.md | 8 ++++++++ docs/example/Popup/index.md | 8 ++++++++ docs/example/Progress/index.md | 8 ++++++++ docs/example/Radio/index.md | 5 +++++ docs/example/Rating/index.md | 8 ++++++++ docs/example/Select/index.md | 8 ++++++++ docs/example/Stepper/index.md | 10 +++++++--- docs/example/Tooltip/index.md | 8 ++++++++ packages/banana-cli/templates/docs/index.js | 11 +++++++++++ 21 files changed, 167 insertions(+), 3 deletions(-) diff --git a/docs/example/Button/index.md b/docs/example/Button/index.md index b55e31ec..0af0a064 100644 --- a/docs/example/Button/index.md +++ b/docs/example/Button/index.md @@ -6,6 +6,14 @@ demo: # Button 按钮 +:::info + +``` + | Button +``` + +::: + ## 介绍 不难看出，这是一个按钮 diff --git a/docs/example/Carousel/index.md b/docs/example/Carousel/index.md index c69cfffc..c84e991b 100644 --- a/docs/example/Carousel/index.md +++ b/docs/example/Carousel/index.md @@ -4,6 +4,14 @@ group: 组件 # Carousel 轮播图 +:::info + +``` + | Carousel +``` + +::: + ## 介绍 可以用它来展示多张图片，或者其他内容。 diff --git a/docs/example/Checkbox/index.md b/docs/example/Checkbox/index.md index 4a6089a0..98947928 100644 --- a/docs/example/Checkbox/index.md +++ b/docs/example/Checkbox/index.md @@ -6,6 +6,14 @@ demo: # Checkbox 复选框 +:::info + +``` + | Checkbox +``` + +::: + 复选框。又称多选框。 ## 代码演示 diff --git a/docs/example/Collapse/index.md b/docs/example/Collapse/index.md index bcafbf62..04ad83f9 100644 --- a/docs/example/Collapse/index.md +++ b/docs/example/Collapse/index.md @@ -4,6 +4,14 @@ group: 组件 # Collapse 折叠面板 +:::info + +``` + | Collapse +``` + +::: + ## 介绍 将复杂的内容放入折叠面板中，可保持页面的整洁。 diff --git a/docs/example/Countdown/index.md b/docs/example/Countdown/index.md index e9d276f5..1720f0b8 100644 --- a/docs/example/Countdown/index.md +++ b/docs/example/Countdown/index.md @@ -6,6 +6,14 @@ demo: # Countdown 倒计时 +:::info + +``` + | Countdown +``` + +::: + 倒计时组件,支持自定义格式化和毫秒级精度. ## 代码演示 diff --git a/docs/example/Divider/index.md b/docs/example/Divider/index.md index bcd7e357..16882097 100644 --- a/docs/example/Divider/index.md +++ b/docs/example/Divider/index.md @@ -6,6 +6,14 @@ demo: # Divider 分割线 +:::info + +``` + | Divider +``` + +::: + ## 介绍 区隔内容的分割线。 diff --git a/docs/example/Dropdown/index.md b/docs/example/Dropdown/index.md index c8bf5859..a1207c3b 100644 --- a/docs/example/Dropdown/index.md +++ b/docs/example/Dropdown/index.md @@ -6,6 +6,14 @@ demo: # Dropdown 下拉菜单 +:::info + +``` + | Dropdown +``` + +::: + ## 介绍 一个用于收纳操作命令的容器。 diff --git a/docs/example/Input/index.md b/docs/example/Input/index.md index a262a660..c7b718e1 100644 --- a/docs/example/Input/index.md +++ b/docs/example/Input/index.md @@ -6,6 +6,14 @@ demo: # Input 输入框 +:::info + +``` + | Input +``` + +::: + 最基本的接收用户输入的组件,通常被用在表单中,当然也可以单独使用. ## 代码演示 diff --git a/docs/example/Marquee/index.md b/docs/example/Marquee/index.md index 89a302a1..6c89e32f 100644 --- a/docs/example/Marquee/index.md +++ b/docs/example/Marquee/index.md @@ -6,6 +6,14 @@ demo: # Marquee 跑马灯 +:::info + +``` + | Marquee +``` + +::: + 适合用于展示公告、中奖信息之类的长文本。 ## 代码演示 diff --git a/docs/example/Menu/index.md b/docs/example/Menu/index.md index 87419252..186ab913 100644 --- a/docs/example/Menu/index.md +++ b/docs/example/Menu/index.md @@ -6,6 +6,14 @@ demo: # Menu 菜单 +:::info + +``` + | Menu +``` + +::: + 菜单提供了一个选项/操作列表供用户选择。 ## 代码演示 diff --git a/docs/example/Message/index.md b/docs/example/Message/index.md index 1ea19704..6627acd9 100644 --- a/docs/example/Message/index.md +++ b/docs/example/Message/index.md @@ -6,6 +6,14 @@ demo: # Message 提示 +:::info + +``` + | Message +``` + +::: + 全局的消息提示,常用于向用户反馈操作的结果或状态的变更. ## 代码演示 diff --git a/docs/example/Modal/index.md b/docs/example/Modal/index.md index 0995d2e8..7227fda5 100644 --- a/docs/example/Modal/index.md +++ b/docs/example/Modal/index.md @@ -6,6 +6,14 @@ demo: # Modal 对话框 +:::info + +``` + | Modal +``` + +::: + 模态**对话框**，当然你也可以叫它**弹窗**。 ## 代码演示 diff --git a/docs/example/Overlay/index.md b/docs/example/Overlay/index.md index 954cbb62..3e3c653f 100644 --- a/docs/example/Overlay/index.md +++ b/docs/example/Overlay/index.md @@ -4,6 +4,14 @@ group: 组件 # Overlay 遮罩层组件 +:::info + +``` + | Overlay +``` + +::: + ## 介绍 这是一个遮罩层，可往其中放入子元素。 diff --git a/docs/example/Popup/index.md b/docs/example/Popup/index.md index 5892e430..2d036cf0 100644 --- a/docs/example/Popup/index.md +++ b/docs/example/Popup/index.md @@ -4,6 +4,14 @@ group: 组件 # Popup 弹层 +:::info + +``` + | Popup +``` + +::: + ## 介绍 一个从屏幕边缘弹出的弹层。 diff --git a/docs/example/Progress/index.md b/docs/example/Progress/index.md index 908897a8..6593055a 100644 --- a/docs/example/Progress/index.md +++ b/docs/example/Progress/index.md @@ -6,6 +6,14 @@ demo: # Progress 进度条 +:::info + +``` + | Progress +``` + +::: + 可用于展示操作的进度，或用于电商的活动场景。 ## 代码演示 diff --git a/docs/example/Radio/index.md b/docs/example/Radio/index.md index f3371486..dc4f23c8 100644 --- a/docs/example/Radio/index.md +++ b/docs/example/Radio/index.md @@ -9,6 +9,11 @@ demo: 单选框。 :::info + +``` + | Radio +``` + Radio 必须配合 RadioGroup 使用。 ::: diff --git a/docs/example/Rating/index.md b/docs/example/Rating/index.md index df454307..40537a54 100644 --- a/docs/example/Rating/index.md +++ b/docs/example/Rating/index.md @@ -6,6 +6,14 @@ demo: # Rating 评分 +:::info + +``` + | Rating +``` + +::: + 评分组件。 ## 代码演示 diff --git a/docs/example/Select/index.md b/docs/example/Select/index.md index e5ee00c1..87459e64 100644 --- a/docs/example/Select/index.md +++ b/docs/example/Select/index.md @@ -6,6 +6,14 @@ demo: # Select 选择器 +:::info + +``` + | Select +``` + +::: + 下拉选择框，可以从预定的选项中选择一个或多个选项。 ## 代码演示 diff --git a/docs/example/Stepper/index.md b/docs/example/Stepper/index.md index 1291849f..32c4ffb0 100644 --- a/docs/example/Stepper/index.md +++ b/docs/example/Stepper/index.md @@ -5,10 +5,14 @@ demo: cols: 2 --- -# Stepper 数量选择器dev only +# Stepper 数量选择器 + +:::info + +``` + | Stepper +``` -:::warning -未完成的组件 ::: 以设定步数对数据进行加减 diff --git a/docs/example/Tooltip/index.md b/docs/example/Tooltip/index.md index 10eafa8c..6c6ae790 100644 --- a/docs/example/Tooltip/index.md +++ b/docs/example/Tooltip/index.md @@ -6,6 +6,14 @@ demo: # Tooltip 文字提示 +:::info + +``` + | Tooltip +``` + +::: + 简单的文字提示气泡框。 ## 代码演示 diff --git a/packages/banana-cli/templates/docs/index.js b/packages/banana-cli/templates/docs/index.js index 255be145..f38b93e7 100644 --- a/packages/banana-cli/templates/docs/index.js +++ b/packages/banana-cli/templates/docs/index.js @@ -10,6 +10,17 @@ demo: # ${toCamelCase(componentName)} ${chineseName} +:::info + +\`\`\` + | ${toCamelCase(componentName)} +\`\`\` + +::: + + + + ${description} ## 代码演示 From dd51291ae104e53cf98e25f40fa05116b56bf7ec Mon Sep 17 00:00:00 2001 From: "zia.huang" Date: Mon, 19 Feb 2024 17:01:03 +0800 Subject: [PATCH 2/6] perf(doc): complete component doc --- docs/example/Button/index.md | 71 +++++++++++++++++++-- docs/example/Carousel/index.md | 4 -- docs/example/Checkbox/index.md | 4 -- docs/example/Collapse/index.md | 4 -- docs/example/Countdown/index.md | 4 -- docs/example/Divider/index.md | 4 -- docs/example/Dropdown/index.md | 4 -- docs/example/Input/index.md | 4 -- docs/example/Marquee/index.md | 4 -- docs/example/Menu/index.md | 46 ++++++++++++- docs/example/Message/index.md | 4 -- docs/example/Modal/index.md | 4 -- docs/example/Overlay/index.md | 4 -- docs/example/Popup/index.md | 4 -- docs/example/Progress/index.md | 4 -- docs/example/Radio/index.md | 8 +-- docs/example/Rating/index.md | 4 -- docs/example/Select/index.md | 57 ++++++++++++----- docs/example/Stepper/index.md | 4 -- docs/example/Tooltip/index.md | 4 -- packages/banana-cli/templates/docs/index.js | 5 -- 21 files changed, 157 insertions(+), 94 deletions(-) diff --git a/docs/example/Button/index.md b/docs/example/Button/index.md index 0af0a064..07ea0a3a 100644 --- a/docs/example/Button/index.md +++ b/docs/example/Button/index.md @@ -6,14 +6,10 @@ demo: # Button 按钮 -:::info - ``` | Button ``` -::: - ## 介绍 不难看出，这是一个按钮 @@ -29,3 +25,70 @@ demo: + +## 属性 - 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 | diff --git a/docs/example/Carousel/index.md b/docs/example/Carousel/index.md index c84e991b..4ec8a374 100644 --- a/docs/example/Carousel/index.md +++ b/docs/example/Carousel/index.md @@ -4,14 +4,10 @@ group: 组件 # Carousel 轮播图 -:::info - ``` | Carousel ``` -::: - ## 介绍 可以用它来展示多张图片，或者其他内容。 diff --git a/docs/example/Checkbox/index.md b/docs/example/Checkbox/index.md index 98947928..16d28205 100644 --- a/docs/example/Checkbox/index.md +++ b/docs/example/Checkbox/index.md @@ -6,14 +6,10 @@ demo: # Checkbox 复选框 -:::info - ``` | Checkbox ``` -::: - 复选框。又称多选框。 ## 代码演示 diff --git a/docs/example/Collapse/index.md b/docs/example/Collapse/index.md index 04ad83f9..ed24f4e6 100644 --- a/docs/example/Collapse/index.md +++ b/docs/example/Collapse/index.md @@ -4,14 +4,10 @@ group: 组件 # Collapse 折叠面板 -:::info - ``` | Collapse ``` -::: - ## 介绍 将复杂的内容放入折叠面板中，可保持页面的整洁。 diff --git a/docs/example/Countdown/index.md b/docs/example/Countdown/index.md index 1720f0b8..b85b63aa 100644 --- a/docs/example/Countdown/index.md +++ b/docs/example/Countdown/index.md @@ -6,14 +6,10 @@ demo: # Countdown 倒计时 -:::info - ``` | Countdown ``` -::: - 倒计时组件,支持自定义格式化和毫秒级精度. ## 代码演示 diff --git a/docs/example/Divider/index.md b/docs/example/Divider/index.md index 16882097..56db8833 100644 --- a/docs/example/Divider/index.md +++ b/docs/example/Divider/index.md @@ -6,14 +6,10 @@ demo: # Divider 分割线 -:::info - ``` | Divider ``` -::: - ## 介绍 区隔内容的分割线。 diff --git a/docs/example/Dropdown/index.md b/docs/example/Dropdown/index.md index a1207c3b..e99a71a4 100644 --- a/docs/example/Dropdown/index.md +++ b/docs/example/Dropdown/index.md @@ -6,14 +6,10 @@ demo: # Dropdown 下拉菜单 -:::info - ``` | Dropdown ``` -::: - ## 介绍 一个用于收纳操作命令的容器。 diff --git a/docs/example/Input/index.md b/docs/example/Input/index.md index c7b718e1..7ceaf792 100644 --- a/docs/example/Input/index.md +++ b/docs/example/Input/index.md @@ -6,14 +6,10 @@ demo: # Input 输入框 -:::info - ``` | Input ``` -::: - 最基本的接收用户输入的组件,通常被用在表单中,当然也可以单独使用. ## 代码演示 diff --git a/docs/example/Marquee/index.md b/docs/example/Marquee/index.md index 6c89e32f..420286e9 100644 --- a/docs/example/Marquee/index.md +++ b/docs/example/Marquee/index.md @@ -6,14 +6,10 @@ demo: # Marquee 跑马灯 -:::info - ``` | Marquee ``` -::: - 适合用于展示公告、中奖信息之类的长文本。 ## 代码演示 diff --git a/docs/example/Menu/index.md b/docs/example/Menu/index.md index 186ab913..f0fbdbe2 100644 --- a/docs/example/Menu/index.md +++ b/docs/example/Menu/index.md @@ -6,10 +6,15 @@ demo: # Menu 菜单 +``` + | Menu +``` + :::info +Menu 组件搭配 MenuItem 组件使用 ``` - | Menu + | MenuItem ``` ::: @@ -21,3 +26,42 @@ demo: + +## 属性 (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 | diff --git a/docs/example/Message/index.md b/docs/example/Message/index.md index 6627acd9..09d1bd39 100644 --- a/docs/example/Message/index.md +++ b/docs/example/Message/index.md @@ -6,14 +6,10 @@ demo: # Message 提示 -:::info - ``` | Message ``` -::: - 全局的消息提示,常用于向用户反馈操作的结果或状态的变更. ## 代码演示 diff --git a/docs/example/Modal/index.md b/docs/example/Modal/index.md index 7227fda5..dabc065c 100644 --- a/docs/example/Modal/index.md +++ b/docs/example/Modal/index.md @@ -6,14 +6,10 @@ demo: # Modal 对话框 -:::info - ``` | Modal ``` -::: - 模态**对话框**，当然你也可以叫它**弹窗**。 ## 代码演示 diff --git a/docs/example/Overlay/index.md b/docs/example/Overlay/index.md index 3e3c653f..1a5176a8 100644 --- a/docs/example/Overlay/index.md +++ b/docs/example/Overlay/index.md @@ -4,14 +4,10 @@ group: 组件 # Overlay 遮罩层组件 -:::info - ``` | Overlay ``` -::: - ## 介绍 这是一个遮罩层，可往其中放入子元素。 diff --git a/docs/example/Popup/index.md b/docs/example/Popup/index.md index 2d036cf0..3d8c9e85 100644 --- a/docs/example/Popup/index.md +++ b/docs/example/Popup/index.md @@ -4,14 +4,10 @@ group: 组件 # Popup 弹层 -:::info - ``` | Popup ``` -::: - ## 介绍 一个从屏幕边缘弹出的弹层。 diff --git a/docs/example/Progress/index.md b/docs/example/Progress/index.md index 6593055a..0a53ca69 100644 --- a/docs/example/Progress/index.md +++ b/docs/example/Progress/index.md @@ -6,14 +6,10 @@ demo: # Progress 进度条 -:::info - ``` | Progress ``` -::: - 可用于展示操作的进度，或用于电商的活动场景。 ## 代码演示 diff --git a/docs/example/Radio/index.md b/docs/example/Radio/index.md index dc4f23c8..aefa9d6d 100644 --- a/docs/example/Radio/index.md +++ b/docs/example/Radio/index.md @@ -6,17 +6,17 @@ demo: # Radio 单选框 -单选框。 - -:::info - ``` | Radio ``` +:::info + Radio 必须配合 RadioGroup 使用。 ::: +单选框。 + ## 代码演示 diff --git a/docs/example/Rating/index.md b/docs/example/Rating/index.md index 40537a54..aabe1f00 100644 --- a/docs/example/Rating/index.md +++ b/docs/example/Rating/index.md @@ -6,14 +6,10 @@ demo: # Rating 评分 -:::info - ``` | Rating ``` -::: - 评分组件。 ## 代码演示 diff --git a/docs/example/Select/index.md b/docs/example/Select/index.md index 87459e64..95ee220a 100644 --- a/docs/example/Select/index.md +++ b/docs/example/Select/index.md @@ -6,14 +6,10 @@ demo: # Select 选择器 -:::info - ``` | Select ``` -::: - 下拉选择框，可以从预定的选项中选择一个或多个选项。 ## 代码演示 @@ -65,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) | diff --git a/docs/example/Stepper/index.md b/docs/example/Stepper/index.md index 32c4ffb0..7395813c 100644 --- a/docs/example/Stepper/index.md +++ b/docs/example/Stepper/index.md @@ -7,14 +7,10 @@ demo: # Stepper 数量选择器 -:::info - ``` | Stepper ``` -::: - 以设定步数对数据进行加减 ## 代码演示 diff --git a/docs/example/Tooltip/index.md b/docs/example/Tooltip/index.md index 6c6ae790..389ce096 100644 --- a/docs/example/Tooltip/index.md +++ b/docs/example/Tooltip/index.md @@ -6,14 +6,10 @@ demo: # Tooltip 文字提示 -:::info - ``` | Tooltip ``` -::: - 简单的文字提示气泡框。 ## 代码演示 diff --git a/packages/banana-cli/templates/docs/index.js b/packages/banana-cli/templates/docs/index.js index f38b93e7..60f7e366 100644 --- a/packages/banana-cli/templates/docs/index.js +++ b/packages/banana-cli/templates/docs/index.js @@ -10,16 +10,11 @@ demo: # ${toCamelCase(componentName)} ${chineseName} -:::info \`\`\` | ${toCamelCase(componentName)} \`\`\` -::: - - - ${description} From d55c1fb06254287fdc386faed350ca910dc3a9ae Mon Sep 17 00:00:00 2001 From: "BugMaker.Huang" Date: Mon, 19 Feb 2024 15:40:57 +0800 Subject: [PATCH 3/6] feat(doc site): wip --- .dumi/tsconfig.json | 6 ++++++ tsconfig.json | 13 ++++++++++--- 2 files changed, 16 insertions(+), 3 deletions(-) create mode 100644 .dumi/tsconfig.json diff --git a/.dumi/tsconfig.json b/.dumi/tsconfig.json new file mode 100644 index 00000000..79711a82 --- /dev/null +++ b/.dumi/tsconfig.json @@ -0,0 +1,6 @@ +{ + "extends": "../tsconfig.json", + "include": [ + "**/*" + ] +} \ No newline at end of file diff --git a/tsconfig.json b/tsconfig.json index 30da2c03..033692df 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -10,8 +10,15 @@ "moduleResolution": "node", "baseUrl": "./", "paths": { - "@@/*": [".dumi/tmp/*"] + "@@/*": [ + ".dumi/tmp/*" + ] } }, - "include": [".dumi/**/*", ".dumirc.ts", "packages/**/*", "rollup.config.mjs", "docs/**/*"] -} + "include": [ + ".dumirc.ts", + "packages/**/*", + "rollup.config.mjs", + "docs/**/*" + ] +} \ No newline at end of file From bdff66c7665ea50694649a7c7b3258ec4f8917a5 Mon Sep 17 00:00:00 2001 From: "zia.huang" Date: Mon, 19 Feb 2024 17:01:03 +0800 Subject: [PATCH 4/6] perf(doc): complete component doc --- docs/forceRender.md | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 docs/forceRender.md diff --git a/docs/forceRender.md b/docs/forceRender.md new file mode 100644 index 00000000..bf1da5f1 --- /dev/null +++ b/docs/forceRender.md @@ -0,0 +1,6 @@ +--- + debug: true +--- + + 1708334209227 + \ No newline at end of file From 2e27c6066da45afd6ce91322066f540f5745a87d Mon Sep 17 00:00:00 2001 From: "zia.huang" Date: Tue, 20 Feb 2024 09:51:31 +0800 Subject: [PATCH 5/6] chore: merge master branch code --- .gitignore | 1 + 1 file changed, 1 insertion(+) diff --git a/.gitignore b/.gitignore index 9ca27f4d..0b54b1a2 100644 --- a/.gitignore +++ b/.gitignore @@ -6,6 +6,7 @@ dist .DS_Store umd types +forceRender.md coverage .idea node From 76fcdc4f5e5e4ab6f2daa309bbf6fa58c5359646 Mon Sep 17 00:00:00 2001 From: "zia.huang" Date: Wed, 21 Feb 2024 09:34:25 +0800 Subject: [PATCH 6/6] chore: remove some inviable file or file content --- .dumi/tsconfig.json | 6 ------ .gitignore | 1 - tsconfig.json | 13 +++---------- 3 files changed, 3 insertions(+), 17 deletions(-) delete mode 100644 .dumi/tsconfig.json diff --git a/.dumi/tsconfig.json b/.dumi/tsconfig.json deleted file mode 100644 index 79711a82..00000000 --- a/.dumi/tsconfig.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "extends": "../tsconfig.json", - "include": [ - "**/*" - ] -} \ No newline at end of file diff --git a/.gitignore b/.gitignore index 0b54b1a2..9ca27f4d 100644 --- a/.gitignore +++ b/.gitignore @@ -6,7 +6,6 @@ dist .DS_Store umd types -forceRender.md coverage .idea node diff --git a/tsconfig.json b/tsconfig.json index 033692df..fd9e8805 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -10,15 +10,8 @@ "moduleResolution": "node", "baseUrl": "./", "paths": { - "@@/*": [ - ".dumi/tmp/*" - ] + "@@/*": [".dumi/tmp/*"] } }, - "include": [ - ".dumirc.ts", - "packages/**/*", - "rollup.config.mjs", - "docs/**/*" - ] -} \ No newline at end of file + "include": [".dumirc.ts", "packages/**/*", "rollup.config.mjs", "docs/**/*"] +}