diff --git a/src/packages/searchbar/demo.taro.tsx b/src/packages/searchbar/demo.taro.tsx
index 7e06e80f08..64db4c9710 100644
--- a/src/packages/searchbar/demo.taro.tsx
+++ b/src/packages/searchbar/demo.taro.tsx
@@ -12,6 +12,7 @@ import Demo4 from './demos/taro/demo4'
import Demo5 from './demos/taro/demo5'
import Demo6 from './demos/taro/demo6'
import Demo7 from './demos/taro/demo7'
+import Demo8 from './demos/taro/demo8'
import Demo10 from './demos/taro/demo10'
const SearchBarDemo = () => {
@@ -25,6 +26,7 @@ const SearchBarDemo = () => {
title5: '自定义图标设置',
title6: '数据改变监听',
title7: '自定义设置',
+ title8: 'InputProps扩展属性',
},
'zh-TW': {
title1: '基礎用法',
@@ -35,6 +37,7 @@ const SearchBarDemo = () => {
title5: '自定義圖標設定',
title6: '數據改變監聽',
title7: '自定義設定',
+ title8: 'InputProps擴展屬性',
},
'en-US': {
title1: 'Basic Usage',
@@ -45,6 +48,7 @@ const SearchBarDemo = () => {
title5: 'Custom Icon Settings',
title6: 'Data Change Monitoring',
title7: 'Custom Settings',
+ title8: 'InputProps Extension Attributes',
},
})
@@ -71,6 +75,8 @@ const SearchBarDemo = () => {
>
)}
+ {translated.title8}
+
{translated.title6}
diff --git a/src/packages/searchbar/demo.tsx b/src/packages/searchbar/demo.tsx
index c51863b781..7646b80db6 100644
--- a/src/packages/searchbar/demo.tsx
+++ b/src/packages/searchbar/demo.tsx
@@ -8,6 +8,7 @@ import Demo4 from './demos/h5/demo4'
import Demo5 from './demos/h5/demo5'
import Demo6 from './demos/h5/demo6'
import Demo7 from './demos/h5/demo7'
+import Demo8 from './demos/h5/demo8'
import Demo10 from './demos/h5/demo10'
const SearchBarDemo = () => {
@@ -21,6 +22,7 @@ const SearchBarDemo = () => {
title5: '自定义图标设置',
title6: '数据改变监听',
title7: '自定义设置',
+ title8: 'InputProps扩展属性',
},
'zh-TW': {
title1: '基礎用法',
@@ -31,6 +33,7 @@ const SearchBarDemo = () => {
title5: '自定義圖標設定',
title6: '數據改變監聽',
title7: '自定義設定',
+ title8: 'InputProps擴展屬性',
},
'en-US': {
title1: 'Basic Usage',
@@ -41,6 +44,7 @@ const SearchBarDemo = () => {
title5: 'Custom Icon Settings',
title6: 'Data Change Monitoring',
title7: 'Custom Settings',
+ title8: 'InputProps Extension Attributes',
},
})
@@ -61,6 +65,8 @@ const SearchBarDemo = () => {
{translated.title7}
+ {translated.title8}
+
{translated.title6}
diff --git a/src/packages/searchbar/demos/h5/demo8.tsx b/src/packages/searchbar/demos/h5/demo8.tsx
new file mode 100644
index 0000000000..32b7bbc0ab
--- /dev/null
+++ b/src/packages/searchbar/demos/h5/demo8.tsx
@@ -0,0 +1,33 @@
+import React from 'react'
+import { Scan } from '@nutui/icons-react'
+import { SearchBar } from '@nutui/nutui-react'
+
+const Demo = () => {
+ return (
+ <>
+
+ }
+ placeholder="自定义input类型和属性"
+ inputProps={{
+ type: 'search',
+ autoComplete: 'on',
+ }}
+ />
+
+ >
+ )
+}
+export default Demo
diff --git a/src/packages/searchbar/demos/taro/demo8.tsx b/src/packages/searchbar/demos/taro/demo8.tsx
new file mode 100644
index 0000000000..6f490c3077
--- /dev/null
+++ b/src/packages/searchbar/demos/taro/demo8.tsx
@@ -0,0 +1,33 @@
+import React from 'react'
+import { Scan } from '@nutui/icons-react-taro'
+import { SearchBar } from '@nutui/nutui-react-taro'
+
+const Demo = () => {
+ return (
+ <>
+
+ }
+ placeholder="自定义confirmType为search"
+ inputProps={{
+ confirmType: 'search',
+ type: 'text',
+ }}
+ />
+
+ >
+ )
+}
+export default Demo
diff --git a/src/packages/searchbar/doc.en-US.md b/src/packages/searchbar/doc.en-US.md
index 81f2089885..2894295f25 100644
--- a/src/packages/searchbar/doc.en-US.md
+++ b/src/packages/searchbar/doc.en-US.md
@@ -78,6 +78,17 @@ import { SearchBar } from '@nutui/nutui-react'
:::
+
+### InputProps Extension Attributes
+
+`SearchBar`'s `inputProps` property can extend the attributes of the underlying input element, supporting all attributes of the native input element.
+
+:::demo
+
+
+
+:::
+
### Data change monitoring
`SearchBar`'s `onChange` You can get the input content.
@@ -88,6 +99,7 @@ import { SearchBar } from '@nutui/nutui-react'
:::
+
## SearchBar
### Props
@@ -113,6 +125,7 @@ import { SearchBar } from '@nutui/nutui-react'
| onClear | triggered when clicking clear | `(event: MouseEvent) => void` | `-` |
| onSearch | trigger when confirming search | `(val: string) => void` | `-` |
| onInputClick | triggered when clicking the input area | `(event: MouseEvent) => void` | `-` |
+| inputProps | Extend the underlying input element attributes, supporting all attributes of the native input element | `Partial>` | `-` |
## Theming
diff --git a/src/packages/searchbar/doc.md b/src/packages/searchbar/doc.md
index eca6026a15..d1ef4c9e74 100644
--- a/src/packages/searchbar/doc.md
+++ b/src/packages/searchbar/doc.md
@@ -76,6 +76,16 @@ import { SearchBar } from '@nutui/nutui-react'
:::
+### InputProps扩展属性
+
+`SearchBar` 的 `inputProps` 属性可以扩展底层输入框的属性,支持传入原生input元素的所有属性。
+
+:::demo
+
+
+
+:::
+
### 数据改变监听
`SearchBar` 的 `onChange` 可获取输入的内容。
@@ -86,6 +96,8 @@ import { SearchBar } from '@nutui/nutui-react'
:::
+
+
## SearchBar
### Props
@@ -106,6 +118,7 @@ import { SearchBar } from '@nutui/nutui-react'
| right | 搜搜框右侧区域 | `ReactNode` | `-` |
| leftIn | 输入框内左侧区域 | `ReactNode` | `` |
| rightIn | 输入框内右侧区域 | `ReactNode` | `-` |
+| inputProps | 扩展底层输入框属性,支持传入原生input元素的所有属性 | `Partial>` | `-` |
| onChange | 输入内容时触发 | `(value: string, event: ChangeEvent) => void` | `-` |
| onFocus | 聚焦时触发 | `(value: string, event: FocusEvent) => void` | `-` |
| onBlur | 失焦时触发 | `(value: string, event: FocusEvent) => void` | `-` |
diff --git a/src/packages/searchbar/doc.taro.md b/src/packages/searchbar/doc.taro.md
index 88e64d1e28..6a131ddfa3 100644
--- a/src/packages/searchbar/doc.taro.md
+++ b/src/packages/searchbar/doc.taro.md
@@ -78,6 +78,16 @@ import { SearchBar } from '@nutui/nutui-react-taro'
:::
+### InputProps扩展属性
+
+`SearchBar` 的 `inputProps` 属性可以扩展底层TaroInput组件的属性,支持传入TaroInput组件的所有属性。
+
+:::demo
+
+
+
+:::
+
### 数据改变监听
`SearchBar` 的 `onChange` 可获取输入的内容。
@@ -108,6 +118,7 @@ import { SearchBar } from '@nutui/nutui-react-taro'
| right | 搜搜框右侧区域 | `ReactNode` | `-` |
| leftIn | 输入框内左侧区域 | `ReactNode` | `` |
| rightIn | 输入框内右侧区域 | `ReactNode` | `-` |
+| inputProps | 扩展底层TaroInput组件属性,支持传入TaroInput组件的所有属性 | `Partial` | `-` |
| onChange | 输入内容时触发 | `(value: string, event: ChangeEvent) => void` | `-` |
| onFocus | 聚焦时触发 | `(value: string, event: FocusEvent) => void` | `-` |
| onBlur | 失焦时触发 | `(value: string, event: FocusEvent) => void` | `-` |
diff --git a/src/packages/searchbar/doc.zh-TW.md b/src/packages/searchbar/doc.zh-TW.md
index 270bdca29c..606cd34306 100644
--- a/src/packages/searchbar/doc.zh-TW.md
+++ b/src/packages/searchbar/doc.zh-TW.md
@@ -78,6 +78,16 @@ import { SearchBar } from '@nutui/nutui-react'
:::
+### InputProps擴展屬性
+
+`SearchBar` 的 `inputProps` 屬性可以擴展底層輸入框的屬性,支持傳入原生input元素的所有屬性。
+
+:::demo
+
+
+
+:::
+
### 數據改變監聽
`SearchBar` 的 `onChange` 可獲取輸入的內容。
@@ -108,6 +118,7 @@ import { SearchBar } from '@nutui/nutui-react'
| right | 搜搜框右側區域 | `ReactNode` | `-` |
| leftIn | 輸入框內左側區域 | `ReactNode` | `` |
| rightIn | 輸入框內右側區域 | `ReactNode` | `-` |
+| inputProps | 擴展底層輸入框屬性,支持傳入原生input元素的所有屬性 | `Partial>` | `-` |
| onChange | 輸入內容時觸發 | `(value: string, event: ChangeEvent) => void` | `-` |
| onFocus | 聚焦時觸發 | `(value: string, event: FocusEvent) => void` | `-` |
| onBlur | 失焦時觸發 | `(value: string, event: FocusEvent) => void` | `-` |
diff --git a/src/packages/searchbar/searchbar.taro.tsx b/src/packages/searchbar/searchbar.taro.tsx
index 4e05814891..d5f24c9a68 100644
--- a/src/packages/searchbar/searchbar.taro.tsx
+++ b/src/packages/searchbar/searchbar.taro.tsx
@@ -65,6 +65,7 @@ export const SearchBar: FunctionComponent<
leftIn,
rightIn,
tag,
+ inputProps,
onChange,
onFocus,
onBlur,
@@ -189,6 +190,7 @@ export const SearchBar: FunctionComponent<
onBlur={handleBlur}
onClick={onInputClick}
onConfirm={onConfirm}
+ {...inputProps}
/>
) : (
)}
>
diff --git a/src/packages/searchbar/searchbar.tsx b/src/packages/searchbar/searchbar.tsx
index bed1d7cb40..a88e5832e5 100644
--- a/src/packages/searchbar/searchbar.tsx
+++ b/src/packages/searchbar/searchbar.tsx
@@ -58,6 +58,7 @@ export const SearchBar: FunctionComponent<
leftIn,
rightIn,
tag,
+ inputProps,
onChange,
onFocus,
onBlur,
@@ -186,6 +187,7 @@ export const SearchBar: FunctionComponent<
onFocus={handleFocus}
onBlur={handleBlur}
onClick={handleInputClick}
+ {...inputProps}
/>
)
}
diff --git a/src/types/spec/searchbar/h5.ts b/src/types/spec/searchbar/h5.ts
index cea52a71ff..b533361f57 100644
--- a/src/types/spec/searchbar/h5.ts
+++ b/src/types/spec/searchbar/h5.ts
@@ -1,4 +1,4 @@
-import type { ChangeEvent, FocusEvent, MouseEvent } from 'react'
+import type { ChangeEvent, FocusEvent, MouseEvent, InputHTMLAttributes } from 'react'
import { BaseSearchBar } from './base'
export interface WebSearchBarProps
@@ -11,4 +11,5 @@ export interface WebSearchBarProps
onBlur?: (value: string, event: FocusEvent) => void
onClear?: (event: MouseEvent) => void
onInputClick?: (event: MouseEvent) => void
+ inputProps?: Partial>
}
diff --git a/src/types/spec/searchbar/taro.ts b/src/types/spec/searchbar/taro.ts
index 568a9d60e4..667cfabdc4 100644
--- a/src/types/spec/searchbar/taro.ts
+++ b/src/types/spec/searchbar/taro.ts
@@ -15,4 +15,5 @@ export interface TaroSearchBarProps
onBlur?: (value: string, event: BaseEventOrig) => void
onClear?: (event: ITouchEvent) => void
onInputClick?: (event: ITouchEvent) => void
+ inputProps?: Partial
}