From be25a478dfbc599cdb27ba09d2d72858037c1700 Mon Sep 17 00:00:00 2001 From: chenjiahan Date: Sun, 8 Nov 2020 16:14:40 +0800 Subject: [PATCH] feat(NavBar): add safe-area-inset-top prop --- src/nav-bar/README.md | 1 + src/nav-bar/README.zh-CN.md | 3 +- src/nav-bar/index.js | 33 +++++++++++++----- src/nav-bar/index.less | 34 ++++++++++++------- .../test/__snapshots__/index.spec.js.snap | 26 ++++++++------ src/nav-bar/test/index.spec.js | 20 ++++++++--- 6 files changed, 79 insertions(+), 38 deletions(-) diff --git a/src/nav-bar/README.md b/src/nav-bar/README.md index 0a6e7fe44..3462c6ea0 100644 --- a/src/nav-bar/README.md +++ b/src/nav-bar/README.md @@ -63,6 +63,7 @@ export default { | fixed | Whether to fixed top | _boolean_ | `false` | | placeholder `v2.5.9` | Whether to generage a placeholder element when fixed | _boolean_ | `false` | | z-index | Z-index | _number \| string_ | `1` | +| safe-area-inset-top `v2.10.13` | Whether to enable top safe area adaptation | _boolean_ | `false` | ### Slots diff --git a/src/nav-bar/README.zh-CN.md b/src/nav-bar/README.zh-CN.md index 104f7022d..cfad84e35 100644 --- a/src/nav-bar/README.zh-CN.md +++ b/src/nav-bar/README.zh-CN.md @@ -64,7 +64,8 @@ export default { | border | 是否显示下边框 | _boolean_ | `true` | | fixed | 是否固定在顶部 | _boolean_ | `false` | | placeholder `v2.5.9` | 固定在顶部时，是否在标签位置生成一个等高的占位元素 | _boolean_ | `false` | -| z-index | 元素 z-index | _number \| string_ | `1` | +| z-index | 导航栏 z-index | _number \| string_ | `1` | +| safe-area-inset-top `v2.10.13` | 是否开启顶部安全区适配 | _boolean_ | `false` | ### Slots diff --git a/src/nav-bar/index.js b/src/nav-bar/index.js index 24eeb92b1..3e43cf120 100644 --- a/src/nav-bar/index.js +++ b/src/nav-bar/index.js @@ -16,6 +16,7 @@ export default createComponent({ rightText: String, leftArrow: Boolean, placeholder: Boolean, + safeAreaInsetTop: Boolean, border: { type: Boolean, default: true, @@ -65,17 +66,31 @@ export default createComponent({
- {this.hasLeft() &&
- {this.genLeft()} -
} -
- {this.slots('title') || this.title} +
+ {this.hasLeft() && ( +
+ {this.genLeft()} +
+ )} +
+ {this.slots('title') || this.title} +
+ {this.hasRight() && ( +
+ {this.genRight()} +
+ )}
- {this.hasRight() &&
- {this.genRight()} -
}
); }, diff --git a/src/nav-bar/index.less b/src/nav-bar/index.less index 4bd86e708..1a876357f 100644 --- a/src/nav-bar/index.less +++ b/src/nav-bar/index.less @@ -1,25 +1,12 @@ @import '../style/var'; .van-nav-bar { - position: relative; z-index: @nav-bar-z-index; - display: flex; - align-items: center; - height: @nav-bar-height; line-height: 1.5; text-align: center; background-color: @nav-bar-background-color; user-select: none; - .van-icon { - color: @nav-bar-icon-color; - } - - &__arrow { - margin-right: @padding-base; - font-size: @nav-bar-arrow-size; - } - &--fixed { position: fixed; top: 0; @@ -27,6 +14,27 @@ width: 100%; } + &--safe-area-inset-top { + padding-top: constant(safe-area-inset-bottom); + padding-top: env(safe-area-inset-bottom); + } + + .van-icon { + color: @nav-bar-icon-color; + } + + &__content { + position: relative; + display: flex; + align-items: center; + height: @nav-bar-height; + } + + &__arrow { + margin-right: @padding-base; + font-size: @nav-bar-arrow-size; + } + &__title { max-width: 60%; margin: 0 auto; diff --git a/src/nav-bar/test/__snapshots__/index.spec.js.snap b/src/nav-bar/test/__snapshots__/index.spec.js.snap index d4f4630a6..9598fcd54 100644 --- a/src/nav-bar/test/__snapshots__/index.spec.js.snap +++ b/src/nav-bar/test/__snapshots__/index.spec.js.snap @@ -1,23 +1,29 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`placeholder prop 1`] = ` -
-
+exports[`should allow render left/right slot 1`] = ` +
+
+
Custom Left
+
Custom Right
`; -exports[`render left & right slot 1`] = ` +exports[`should allow render title slot 1`] = `
-
Custom Left
-
-
Custom Right
+
+
Custom Title
+
`; -exports[`render title slot 1`] = ` -
-
Custom Title
+exports[`should render placeholder element when enabling placeholder prop 1`] = ` +
+
+
+
+
+
`; diff --git a/src/nav-bar/test/index.spec.js b/src/nav-bar/test/index.spec.js index 63149c6e0..59eb2176b 100644 --- a/src/nav-bar/test/index.spec.js +++ b/src/nav-bar/test/index.spec.js @@ -1,7 +1,7 @@ import NavBar from '..'; import { mount, mockGetBoundingClientRect } from '../../../test'; -test('render left & right slot', () => { +test('should allow render left/right slot', () => { const wrapper = mount(NavBar, { scopedSlots: { left: () => 'Custom Left', @@ -12,7 +12,7 @@ test('render left & right slot', () => { expect(wrapper).toMatchSnapshot(); }); -test('render title slot', () => { +test('should allow render title slot', () => { const wrapper = mount(NavBar, { scopedSlots: { title: () => 'Custom Title', @@ -22,7 +22,7 @@ test('render title slot', () => { expect(wrapper).toMatchSnapshot(); }); -test('placeholder prop', () => { +test('should render placeholder element when enabling placeholder prop', () => { const restore = mockGetBoundingClientRect({ height: 50 }); const wrapper = mount(NavBar, { @@ -37,7 +37,7 @@ test('placeholder prop', () => { restore(); }); -test('click-left event', () => { +test('should emit click-left event when clicking left text', () => { const wrapper = mount(NavBar, { propsData: { leftText: 'left', @@ -48,7 +48,7 @@ test('click-left event', () => { expect(wrapper.emitted('click-left')).toBeTruthy(); }); -test('click-right event', () => { +test('should emit click-right event when clicking right text', () => { const wrapper = mount(NavBar, { propsData: { rightText: 'right', @@ -58,3 +58,13 @@ test('click-right event', () => { wrapper.find('.van-nav-bar__right').trigger('click'); expect(wrapper.emitted('click-right')).toBeTruthy(); }); + +test('should add safe-area-inset-top classname when using safe-area-inset-top prop', () => { + const wrapper = mount(NavBar, { + propsData: { + safeAreaInsetTop: true, + }, + }); + + expect(wrapper.contains('.van-nav-bar--safe-area-inset-top')).toBeTruthy(); +});