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 }