Skip to content

Commit

Permalink
feat(searchbar): 增加safe-area-inset-bottom属性(#2265) (#2558)
Browse files Browse the repository at this point in the history
  • Loading branch information
@yi-boide
yi-boide authored Sep 12, 2023
1 parent 34b65be commit 06aea52
Show file tree
Hide file tree
Showing 6 changed files with 74 additions and 46 deletions.
20 changes: 11 additions & 9 deletions src/packages/__VUE/searchbar/doc.en-US.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
35 changes: 18 additions & 17 deletions src/packages/__VUE/searchbar/doc.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
37 changes: 19 additions & 18 deletions src/packages/__VUE/searchbar/doc.taro.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
16 changes: 16 additions & 0 deletions src/packages/__VUE/searchbar/index.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down
6 changes: 5 additions & 1 deletion src/packages/__VUE/searchbar/index.taro.vue
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<template>
<view class="nut-searchbar" :style="searchbarStyle">
<view class="nut-searchbar" :class="{ 'safe-area-inset-bottom': safeAreaInsetBottom }" :style="searchbarStyle">
<view v-if="$slots.leftout" class="nut-searchbar__search-icon nut-searchbar__left-search-icon">
<slot name="leftout"></slot>
</view>
Expand Down Expand Up @@ -120,6 +120,10 @@ export default create({
confirmType: {
type: String as PropType<confirmTextType>,
default: 'done'
},
safeAreaInsetBottom: {
type: Boolean,
default: false
}
},
Expand Down
6 changes: 5 additions & 1 deletion src/packages/__VUE/searchbar/index.vue
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<template>
<view class="nut-searchbar" :style="searchbarStyle">
<view class="nut-searchbar" :class="{ 'safe-area-inset-bottom': safeAreaInsetBottom }" :style="searchbarStyle">
<span v-if="label" class="nut-searchbar__search-label">{{ label }}</span>
<view v-if="$slots.leftout" class="nut-searchbar__search-icon nut-searchbar__left-search-icon">
<slot name="leftout"></slot>
Expand Down Expand Up @@ -121,6 +121,10 @@ export default create({
inputAlign: {
type: String,
default: 'left'
},
safeAreaInsetBottom: {
type: Boolean,
default: false
}
},
Expand Down

0 comments on commit 06aea52

Please sign in to comment.