Skip to content

Commit

Permalink
Merge pull request #96 from FriedRiceNoodles/docs/input
Browse files Browse the repository at this point in the history 
docs(input): wip: docs of input
  • Loading branch information
@FriedRiceNoodles
FriedRiceNoodles authored Mar 24, 2024
2 parents ddc50eb + d2805b2 commit e8d94ab
Showing 1 changed file with 38 additions and 27 deletions.
65 changes: 38 additions & 27 deletions docs/example/Input/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,42 +20,53 @@ demo:

## 属性 - Attributes & Properties

| 属性 | 说明 | 类型 | 默认值 |
| ----- | ------ | --------- | ------ |
| prop1 | 属性 1 | `string` | '' |
| prop2 | 属性 2 | `boolean` | false |
| 属性 | 说明 | 类型 | 默认值 |
| ------------ | ------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------- | -------- |
| value | 输入框的值 | `string` | - |
| disabled | 是否禁用输入框 | `boolean` | false |
| placeholder | value 为空时，出现在输入框中的文字 | `string` | - |
| size | 输入框的尺寸 | `small` \| `medium` \| `large` | `medium` |
| type | 输入框的[类型](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#input_types) | `text` \| `password` \| `email` \| `number` \| `tel` \| `url` \| `search` | `text` |
| name | 用于表单提交的字段名 | `string` | - |
| required | 是否必填 | `boolean` | false |
| controlled | 是否受控 | `boolean` | false |
| autocomplete | https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete | `HTMLInputElement['autocomplete']` | - |
| pattern | https://developer.mozilla.org/zh-CN/docs/Web/HTML/Attributes/pattern | `string` | - |
| minlength | https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/minlength | `number` | - |
| maxlength | https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/maxlength | `number` | - |
| min | https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/min | `number` \| `string` | - |
| max | https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/min | `number` \| `string` | - |

## 方法 - Methods

| 方法 | 说明 | 参数 |
| --------- | -------------- | ---- |
| method1() | 供调用的方法 1 | - |
| method2() | 供调用的方法 2 | - |
| 方法 | 说明 | 参数 |
| ---------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---- |
| reportValidity() | 触发合法性校验，返回输入框当前的值是否合法，如果是不合法的值，会弹出提示。[查看 MDN 相关文档。](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/reportValidity) | - |
| checkValidity() | 返回输入框当前的值是否合法。[查看 MDN 相关文档。](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/checkValidity) | - |

## 事件 - Events

| 事件 | 说明 | Event Detail |
| ------ | -------------- | ------------ |
| 事件 1 | 开始展开时触发 | - |
| 事件 2 | 开始收起时触发 | - |

## 插槽 - Slots

| 插槽 | 说明 |
| --------- | -------------- |
| (default) | 默认插槽的说明 |
| title | 标题区域 |
| 事件 | 说明 | Event Detail |
| ------ | ------------------------ | ----------------- |
| change | 输入框的值发生改变时触发 | `{value: string}` |
| focus | 输入框聚焦时触发 | - |
| blur | 输入框失焦时触发 | - |

## CSS Parts

| Part | 说明 |
| ------ | ------------------ |
| base | 包裹组件的容器 |
| header | 组件的 header 区域 |
| Part | 说明 |
| ----- | --------------------------- |
| base | 包裹组件的容器 |
| input | 输入框的原生 input 标签部分 |

## 样式变量

| 变量 | 说明 | 默认值 |
| ---------------------------- | ------------------ | ------ |
| --banana-xxx-title-padding | 标题的 padding | 16px |
| --banana-xxx-content-padding | 展开区域的 padding | 16px |
| 变量 | 说明 | 默认值 |
| --------------------------------- | --------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------- |
| --banana-input-border-width | 输入框边框宽度 | 1px |
| --banana-input-border-color | 输入框边框颜色 | rgb(229, 231, 233) |
| --banana-input-font-family | 输入框的字体 | Inter, AppleSystem, BlinkMacSystemFont, Segoe UI, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Helvetica Neue, Helvetica, Arial, sansSerif |
| --banana-input-background-color | 输入框的背景色 | #fff |
| --banana-input-border-hover-color | 输入框 hover 状态的边框颜色 | rgb(151, 154, 154) |

// css 变量文档待补完.........

0 comments on commit e8d94ab

Please sign in to comment.