diff --git a/docs/example/Button/index.md b/docs/example/Button/index.md index b55e31ec..07ea0a3a 100644 --- a/docs/example/Button/index.md +++ b/docs/example/Button/index.md @@ -6,6 +6,10 @@ demo: # Button 按钮 +``` + | Button +``` + ## 介绍 不难看出，这是一个按钮 @@ -21,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 c69cfffc..4ec8a374 100644 --- a/docs/example/Carousel/index.md +++ b/docs/example/Carousel/index.md @@ -4,6 +4,10 @@ group: 组件 # Carousel 轮播图 +``` + | Carousel +``` + ## 介绍 可以用它来展示多张图片，或者其他内容。 diff --git a/docs/example/Checkbox/index.md b/docs/example/Checkbox/index.md index 4a6089a0..16d28205 100644 --- a/docs/example/Checkbox/index.md +++ b/docs/example/Checkbox/index.md @@ -6,6 +6,10 @@ demo: # Checkbox 复选框 +``` + | Checkbox +``` + 复选框。又称多选框。 ## 代码演示 diff --git a/docs/example/Collapse/index.md b/docs/example/Collapse/index.md index bcafbf62..ed24f4e6 100644 --- a/docs/example/Collapse/index.md +++ b/docs/example/Collapse/index.md @@ -4,6 +4,10 @@ group: 组件 # Collapse 折叠面板 +``` + | Collapse +``` + ## 介绍 将复杂的内容放入折叠面板中，可保持页面的整洁。 diff --git a/docs/example/Countdown/index.md b/docs/example/Countdown/index.md index e9d276f5..b85b63aa 100644 --- a/docs/example/Countdown/index.md +++ b/docs/example/Countdown/index.md @@ -6,6 +6,10 @@ demo: # Countdown 倒计时 +``` + | Countdown +``` + 倒计时组件,支持自定义格式化和毫秒级精度. ## 代码演示 diff --git a/docs/example/Divider/index.md b/docs/example/Divider/index.md index bcd7e357..56db8833 100644 --- a/docs/example/Divider/index.md +++ b/docs/example/Divider/index.md @@ -6,6 +6,10 @@ demo: # Divider 分割线 +``` + | Divider +``` + ## 介绍 区隔内容的分割线。 diff --git a/docs/example/Dropdown/index.md b/docs/example/Dropdown/index.md index c8bf5859..e99a71a4 100644 --- a/docs/example/Dropdown/index.md +++ b/docs/example/Dropdown/index.md @@ -6,6 +6,10 @@ demo: # Dropdown 下拉菜单 +``` + | Dropdown +``` + ## 介绍 一个用于收纳操作命令的容器。 diff --git a/docs/example/Input/index.md b/docs/example/Input/index.md index a262a660..7ceaf792 100644 --- a/docs/example/Input/index.md +++ b/docs/example/Input/index.md @@ -6,6 +6,10 @@ demo: # Input 输入框 +``` + | Input +``` + 最基本的接收用户输入的组件,通常被用在表单中,当然也可以单独使用. ## 代码演示 diff --git a/docs/example/Marquee/index.md b/docs/example/Marquee/index.md index 89a302a1..420286e9 100644 --- a/docs/example/Marquee/index.md +++ b/docs/example/Marquee/index.md @@ -6,6 +6,10 @@ demo: # Marquee 跑马灯 +``` + | Marquee +``` + 适合用于展示公告、中奖信息之类的长文本。 ## 代码演示 diff --git a/docs/example/Menu/index.md b/docs/example/Menu/index.md index 87419252..f0fbdbe2 100644 --- a/docs/example/Menu/index.md +++ b/docs/example/Menu/index.md @@ -6,6 +6,19 @@ demo: # Menu 菜单 +``` + | Menu +``` + +:::info +Menu 组件搭配 MenuItem 组件使用 + +``` + | MenuItem +``` + +::: + 菜单提供了一个选项/操作列表供用户选择。 ## 代码演示 @@ -13,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 1ea19704..09d1bd39 100644 --- a/docs/example/Message/index.md +++ b/docs/example/Message/index.md @@ -6,6 +6,10 @@ demo: # Message 提示 +``` + | Message +``` + 全局的消息提示,常用于向用户反馈操作的结果或状态的变更. ## 代码演示 diff --git a/docs/example/Modal/index.md b/docs/example/Modal/index.md index 0995d2e8..dabc065c 100644 --- a/docs/example/Modal/index.md +++ b/docs/example/Modal/index.md @@ -6,6 +6,10 @@ demo: # Modal 对话框 +``` + | Modal +``` + 模态**对话框**，当然你也可以叫它**弹窗**。 ## 代码演示 diff --git a/docs/example/Overlay/index.md b/docs/example/Overlay/index.md index 954cbb62..1a5176a8 100644 --- a/docs/example/Overlay/index.md +++ b/docs/example/Overlay/index.md @@ -4,6 +4,10 @@ group: 组件 # Overlay 遮罩层组件 +``` + | Overlay +``` + ## 介绍 这是一个遮罩层，可往其中放入子元素。 diff --git a/docs/example/Popup/index.md b/docs/example/Popup/index.md index 5892e430..3d8c9e85 100644 --- a/docs/example/Popup/index.md +++ b/docs/example/Popup/index.md @@ -4,6 +4,10 @@ group: 组件 # Popup 弹层 +``` + | Popup +``` + ## 介绍 一个从屏幕边缘弹出的弹层。 diff --git a/docs/example/Progress/index.md b/docs/example/Progress/index.md index 908897a8..0a53ca69 100644 --- a/docs/example/Progress/index.md +++ b/docs/example/Progress/index.md @@ -6,6 +6,10 @@ demo: # Progress 进度条 +``` + | Progress +``` + 可用于展示操作的进度，或用于电商的活动场景。 ## 代码演示 diff --git a/docs/example/Radio/index.md b/docs/example/Radio/index.md index f3371486..aefa9d6d 100644 --- a/docs/example/Radio/index.md +++ b/docs/example/Radio/index.md @@ -6,12 +6,17 @@ demo: # Radio 单选框 -单选框。 +``` + | Radio +``` :::info + Radio 必须配合 RadioGroup 使用。 ::: +单选框。 + ## 代码演示 diff --git a/docs/example/Rating/index.md b/docs/example/Rating/index.md index df454307..aabe1f00 100644 --- a/docs/example/Rating/index.md +++ b/docs/example/Rating/index.md @@ -6,6 +6,10 @@ demo: # Rating 评分 +``` + | Rating +``` + 评分组件。 ## 代码演示 diff --git a/docs/example/Select/index.md b/docs/example/Select/index.md index e5ee00c1..95ee220a 100644 --- a/docs/example/Select/index.md +++ b/docs/example/Select/index.md @@ -6,6 +6,10 @@ demo: # Select 选择器 +``` + | Select +``` + 下拉选择框，可以从预定的选项中选择一个或多个选项。 ## 代码演示 @@ -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) | diff --git a/docs/example/Stepper/index.md b/docs/example/Stepper/index.md index 1291849f..7395813c 100644 --- a/docs/example/Stepper/index.md +++ b/docs/example/Stepper/index.md @@ -5,11 +5,11 @@ demo: cols: 2 --- -# Stepper 数量选择器dev only +# Stepper 数量选择器 -:::warning -未完成的组件 -::: +``` + | Stepper +``` 以设定步数对数据进行加减 diff --git a/docs/example/Tooltip/index.md b/docs/example/Tooltip/index.md index 10eafa8c..389ce096 100644 --- a/docs/example/Tooltip/index.md +++ b/docs/example/Tooltip/index.md @@ -6,6 +6,10 @@ demo: # Tooltip 文字提示 +``` + | Tooltip +``` + 简单的文字提示气泡框。 ## 代码演示 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 diff --git a/packages/banana-cli/templates/docs/index.js b/packages/banana-cli/templates/docs/index.js index 255be145..60f7e366 100644 --- a/packages/banana-cli/templates/docs/index.js +++ b/packages/banana-cli/templates/docs/index.js @@ -10,6 +10,12 @@ demo: # ${toCamelCase(componentName)} ${chineseName} + +\`\`\` + | ${toCamelCase(componentName)} +\`\`\` + + ${description} ## 代码演示 diff --git a/tsconfig.json b/tsconfig.json index 30da2c03..fd9e8805 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -13,5 +13,5 @@ "@@/*": [".dumi/tmp/*"] } }, - "include": [".dumi/**/*", ".dumirc.ts", "packages/**/*", "rollup.config.mjs", "docs/**/*"] + "include": [".dumirc.ts", "packages/**/*", "rollup.config.mjs", "docs/**/*"] }