diff --git a/src/packages/__VUE/searchbar/doc.en-US.md b/src/packages/__VUE/searchbar/doc.en-US.md index 102f9cba11..c05d025acc 100644 --- a/src/packages/__VUE/searchbar/doc.en-US.md +++ b/src/packages/__VUE/searchbar/doc.en-US.md @@ -220,15 +220,17 @@ background | external background of the input box | string | `#fff` | | input-ba string | `#f7f7f7` | | autofocus | Whether to automatically focus | boolean | `false` | | focus-style | search box style when focused | Object | `-` | | disabled | Whether to disable the input box | boolean | `false` | | readonly| input field is read only | boolean | `false` | | input-align| alignment, optional `left` `center` `right` | string | `left` | -### Events | Event Name | Description | Callback Parameters | |--------|----------------|--------------| | change | -fires when something is entered | `val, event` | | focus | fires on focus | `val, event` | | blur | Triggered when out -of focus | `val, event` | | clear | Triggered when click clear | `val` | | search | fires when the ENTER key is pressed -| `val, event` | | click-input| Fired when the input field is clicked | `event` | | click-left-icon| Fires when the left -icon is clicked | `val, event` | | click-right-icon| Fires when the right icon is clicked | `val, event` | ### Slots | -Name | Description | |---------------|----------------------| |leftIn | left icon in the input box| |leftout | left Icon -outside the input box| |rightin | right icon in the input box| |rightout | right icon outside the input box| ## Theming -### CSS Variables The component provides the following CSS variables, which can be used to customize styles. Please -refer to [ConfigProvider component](#/en-US/component/configprovider). | Name | Default Value | | +| safe-area-inset-bottom | Whether to enable the security zone at the bottom of the full screen of iphone series | +boolean | `false` | ### Events | Event Name | Description | Callback Parameters | +|--------|----------------|--------------| | change | fires when something is entered | `val, event` | | focus | fires +on focus | `val, event` | | blur | Triggered when out of focus | `val, event` | | clear | Triggered when click clear | +`val` | | search | fires when the ENTER key is pressed | `val, event` | | click-input| Fired when the input field is +clicked | `event` | | click-left-icon| Fires when the left icon is clicked | `val, event` | | click-right-icon| Fires +when the right icon is clicked | `val, event` | ### Slots | Name | Description | +|---------------|----------------------| |leftIn | left icon in the input box| |leftout | left Icon outside the input +box| |rightin | right icon in the input box| |rightout | right icon outside the input box| ## Theming ### CSS Variables +The component provides the following CSS variables, which can be used to customize styles. Please refer to +[ConfigProvider component](#/en-US/component/configprovider). | Name | Default Value | | --------------------------------------- | -------------------------- | | --nut-searchbar-background| _var(--nut-white)_ | | --nut-searchbar-right-out-color| _var(--nut-black)_ | | --nut-searchbar-padding| _9px 16px_ | | --nut-searchbar-width| _100%_ | | --nut-searchbar-input-background| _#f7f7f7_ | | --nut-searchbar-input-padding| _0 0 0 diff --git a/src/packages/__VUE/searchbar/doc.md b/src/packages/__VUE/searchbar/doc.md index 324fb63d27..901b873df0 100644 --- a/src/packages/__VUE/searchbar/doc.md +++ b/src/packages/__VUE/searchbar/doc.md @@ -250,23 +250,24 @@ app.use(Searchbar); ### Props -| 参数 | 说明 | 类型 | 默认值 | -| ---------------- | --------------------------------------------------- | ---------------- | ------------- | -| v-model | 当前输入的值 | number \| string | `''` | -| label | 搜索框左侧文本 | string | `''` | -| shape | 搜索框形状，可选值为 `square` `round` | string | `round` | -| max-length | 最大输入长度 | number \| string | `9999` | -| input-type | 输入框类型 | string | `text` | -| placeholder | 输入框默认暗纹 | string | `请输入` | -| clearable | 是否展示清除按钮 | boolean | `true` | -| clear-icon | 自定义清除按钮图标（默认使用 `@nutui/nutui-icons`） | Object | `CircleClose` | -| background | 输入框外部背景 | string | `#fff` | -| input-background | 输入框内部背景 | string | `#f7f7f7` | -| autofocus | 是否自动聚焦 | boolean | `false` | -| focus-style | 聚焦时搜索框样式 | Object | `-` | -| disabled | 是否禁用输入框 | boolean | `false` | -| readonly | 输入框只读 | boolean | `false` | -| input-align | 对齐方式，可选`left` `center` `right` | string | `left` | +| 参数 | 说明 | 类型 | 默认值 | +| ---------------------- | --------------------------------------------------- | ---------------- | ------------- | +| v-model | 当前输入的值 | number \| string | `''` | +| label | 搜索框左侧文本 | string | `''` | +| shape | 搜索框形状，可选值为 `square` `round` | string | `round` | +| max-length | 最大输入长度 | number \| string | `9999` | +| input-type | 输入框类型 | string | `text` | +| placeholder | 输入框默认暗纹 | string | `请输入` | +| clearable | 是否展示清除按钮 | boolean | `true` | +| clear-icon | 自定义清除按钮图标（默认使用 `@nutui/nutui-icons`） | Object | `CircleClose` | +| background | 输入框外部背景 | string | `#fff` | +| input-background | 输入框内部背景 | string | `#f7f7f7` | +| autofocus | 是否自动聚焦 | boolean | `false` | +| focus-style | 聚焦时搜索框样式 | Object | `-` | +| disabled | 是否禁用输入框 | boolean | `false` | +| readonly | 输入框只读 | boolean | `false` | +| input-align | 对齐方式，可选`left` `center` `right` | string | `left` | +| safe-area-inset-bottom | 是否开启 iphone 系列全面屏底部安全区适配 | boolean | `false` | ### Events diff --git a/src/packages/__VUE/searchbar/doc.taro.md b/src/packages/__VUE/searchbar/doc.taro.md index 4217f5b937..2f8144d755 100644 --- a/src/packages/__VUE/searchbar/doc.taro.md +++ b/src/packages/__VUE/searchbar/doc.taro.md @@ -247,24 +247,25 @@ app.use(Searchbar); ### Props -| 参数 | 说明 | 类型 | 默认值 | -| ---------------- | ---------------------------------------------------------------------------------------------------------------------------- | ---------------- | ------------- | -| v-model | 当前输入的值 | number \| string | `''` | -| label | 搜索框左侧文本 | string | `''` | -| shape | 搜索框形状，可选值为 `square` `round` | string | `round` | -| max-length | 最大输入长度 | number \| string | `9999` | -| input-type | 输入框类型 | string | `text` | -| placeholder | 输入框默认暗纹 | string | `请输入` | -| clearable | 是否展示清除按钮 | boolean | `true` | -| clear-icon | 自定义清除按钮图标（默认使用 `@nutui/nutui-icons`） | Object | `CircleClose` | -| background | 输入框外部背景 | string | `#fff` | -| input-background | 输入框内部背景 | string | `#f7f7f7` | -| confirm-type | 键盘右下角按钮的文字，仅在`type='text'`时生效，可选值 `send`：发送、`search`：搜索、`next`：下一个、`go`：前往、`done`：完成 | string | `done` | -| autofocus | 是否自动聚焦 | boolean | `false` | -| focus-style | 聚焦时搜索框样式 | Object | `-` | -| disabled | 是否禁用输入框 | boolean | `false` | -| readonly | 输入框只读 | boolean | `false` | -| input-align | 对齐方式，可选 `left` `center` `right` | string | `left` | +| 参数 | 说明 | 类型 | 默认值 | +| ---------------------- | ---------------------------------------------------------------------------------------------------------------------------- | ---------------- | ------------- | +| v-model | 当前输入的值 | number \| string | `''` | +| label | 搜索框左侧文本 | string | `''` | +| shape | 搜索框形状，可选值为 `square` `round` | string | `round` | +| max-length | 最大输入长度 | number \| string | `9999` | +| input-type | 输入框类型 | string | `text` | +| placeholder | 输入框默认暗纹 | string | `请输入` | +| clearable | 是否展示清除按钮 | boolean | `true` | +| clear-icon | 自定义清除按钮图标（默认使用 `@nutui/nutui-icons`） | Object | `CircleClose` | +| background | 输入框外部背景 | string | `#fff` | +| input-background | 输入框内部背景 | string | `#f7f7f7` | +| confirm-type | 键盘右下角按钮的文字，仅在`type='text'`时生效，可选值 `send`：发送、`search`：搜索、`next`：下一个、`go`：前往、`done`：完成 | string | `done` | +| autofocus | 是否自动聚焦 | boolean | `false` | +| focus-style | 聚焦时搜索框样式 | Object | `-` | +| disabled | 是否禁用输入框 | boolean | `false` | +| readonly | 输入框只读 | boolean | `false` | +| input-align | 对齐方式，可选 `left` `center` `right` | string | `left` | +| safe-area-inset-bottom | 是否开启 iphone 系列全面屏底部安全区适配 | boolean | `false` | ### Events diff --git a/src/packages/__VUE/searchbar/index.scss b/src/packages/__VUE/searchbar/index.scss index 11dccbc881..06524247b8 100644 --- a/src/packages/__VUE/searchbar/index.scss +++ b/src/packages/__VUE/searchbar/index.scss @@ -28,6 +28,22 @@ box-sizing: border-box; color: $searchbar-input-bar-color; + &.safe-area-inset-bottom { + position: relative; + margin-bottom: constant(safe-area-inset-bottom); + margin-bottom: env(safe-area-inset-bottom); + &::after { + content: ''; + position: absolute; + left: 0; + bottom: 0; + width: 100%; + height: constant(safe-area-inset-bottom); + height: env(safe-area-inset-bottom); + background: $searchbar-background; + } + } + &::placeholder { color: $searchbar-input-bar-placeholder-color; } diff --git a/src/packages/__VUE/searchbar/index.taro.vue b/src/packages/__VUE/searchbar/index.taro.vue index ac225c3b98..2cdf858a9c 100644 --- a/src/packages/__VUE/searchbar/index.taro.vue +++ b/src/packages/__VUE/searchbar/index.taro.vue @@ -1,5 +1,5 @@