diff --git a/src/action-bar/ActionBar.tsx b/src/action-bar/ActionBar.tsx index 9f36fac3e..2e2c4fda3 100644 --- a/src/action-bar/ActionBar.tsx +++ b/src/action-bar/ActionBar.tsx @@ -19,7 +19,9 @@ export default defineComponent({ linkChildren(); return () => ( -
+
{slots.default?.()}
); diff --git a/src/action-bar/index.less b/src/action-bar/index.less index eb91a1910..b46b3b6c3 100644 --- a/src/action-bar/index.less +++ b/src/action-bar/index.less @@ -1,5 +1,4 @@ @import './var.less'; -@import '../style/mixins/safe-area.less'; :root { --van-action-bar-background-color: @action-bar-background-color; @@ -16,9 +15,4 @@ box-sizing: content-box; height: var(--van-action-bar-height); background-color: var(--van-action-bar-background-color); - .safe-area-inset-bottom(); - - &--unfit { - padding-bottom: 0; - } } diff --git a/src/action-bar/test/__snapshots__/demo.spec.ts.snap b/src/action-bar/test/__snapshots__/demo.spec.ts.snap index 1cbd0d40b..4f0f8f701 100644 --- a/src/action-bar/test/__snapshots__/demo.spec.ts.snap +++ b/src/action-bar/test/__snapshots__/demo.spec.ts.snap @@ -2,7 +2,7 @@ exports[`should render demo and match snapshot 1`] = `
-
+
-
+
-
+
-
+
+
`; diff --git a/src/action-sheet/test/__snapshots__/index.spec.ts.snap b/src/action-sheet/test/__snapshots__/index.spec.ts.snap index af511b2a5..af1a4b4b0 100644 --- a/src/action-sheet/test/__snapshots__/index.spec.ts.snap +++ b/src/action-sheet/test/__snapshots__/index.spec.ts.snap @@ -19,7 +19,7 @@ exports[`should render default slot correctly 1`] = `
-
+
Title diff --git a/src/action-sheet/test/index.spec.ts b/src/action-sheet/test/index.spec.ts index 5cbcae95b..1eb5195bb 100644 --- a/src/action-sheet/test/index.spec.ts +++ b/src/action-sheet/test/index.spec.ts @@ -248,13 +248,13 @@ test('should allow to control safe-area with safe-area-inset-bottom prop', async }); expect(wrapper.find('.van-action-sheet').classes()).toContain( - 'van-popup--safe-area-inset-bottom' + 'van-safe-area-bottom' ); await wrapper.setProps({ safeAreaInsetBottom: false, }); expect(wrapper.find('.van-action-sheet').classes()).not.toContain( - 'van-popup--safe-area-inset-bottom' + 'van-safe-area-bottom' ); }); diff --git a/src/address-list/AddressList.tsx b/src/address-list/AddressList.tsx index 847e80974..e87f2cbbb 100644 --- a/src/address-list/AddressList.tsx +++ b/src/address-list/AddressList.tsx @@ -86,7 +86,7 @@ export default defineComponent({ }; const renderBottom = () => ( -
+
-
+
-
+
-
+
diff --git a/src/calendar/test/__snapshots__/index.spec.ts.snap b/src/calendar/test/__snapshots__/index.spec.ts.snap index aaece9542..b0be25fe9 100644 --- a/src/calendar/test/__snapshots__/index.spec.ts.snap +++ b/src/calendar/test/__snapshots__/index.spec.ts.snap @@ -64,7 +64,7 @@ exports[`color prop when type is range 1`] = `
-
+
-
+
-
+
-
+
-
+
-
+
Custom Footer
diff --git a/src/calendar/test/__snapshots__/prop.spec.ts.snap b/src/calendar/test/__snapshots__/prop.spec.ts.snap index 5534021e2..da5358299 100644 --- a/src/calendar/test/__snapshots__/prop.spec.ts.snap +++ b/src/calendar/test/__snapshots__/prop.spec.ts.snap @@ -212,7 +212,7 @@ exports[`lazy-render prop 1`] = `
-
+
-
+
-
+
-
+

Custom Title diff --git a/src/style/README.md b/src/style/README.md index 6bb0ca1b4..fcbcdb223 100644 --- a/src/style/README.md +++ b/src/style/README.md @@ -49,6 +49,14 @@ Add 1px border under the Retina screen for the element, based on a pseudo elemen
``` +### Safe Area Bottom + +Enable safe area inset bottom. + +```html +
+``` + ### Animation ```html diff --git a/src/style/README.zh-CN.md b/src/style/README.zh-CN.md index ffd9bf83e..2e6e4ab68 100644 --- a/src/style/README.zh-CN.md +++ b/src/style/README.zh-CN.md @@ -47,6 +47,14 @@ Vant 中默认包含了一些常用样式，可以直接通过 className 的方
``` +### 底部安全区 + +为元素添加底部安全区适配。 + +```html +
+``` + ### 动画 可以通过 `transition` 组件使用内置的动画类。 diff --git a/src/style/base.less b/src/style/base.less index 95fcd0631..9ffd5e7eb 100644 --- a/src/style/base.less +++ b/src/style/base.less @@ -5,7 +5,73 @@ @import './var.less'; @import './css-variables.less'; @import './normalize.less'; -@import './ellipsis.less'; -@import './clearfix.less'; -@import './hairline.less'; @import './animation.less'; +@import './mixins/clearfix.less'; +@import './mixins/ellipsis.less'; +@import './mixins/hairline.less'; + +.van-clearfix { + .clearfix(); +} + +.van-ellipsis { + .ellipsis(); +} + +.van-multi-ellipsis--l2 { + .multi-ellipsis(2); +} + +.van-multi-ellipsis--l3 { + .multi-ellipsis(3); +} + +.van-safe-area-bottom { + padding-bottom: constant(safe-area-inset-bottom); + padding-bottom: env(safe-area-inset-bottom); +} + +[class*='van-hairline'] { + &::after { + .hairline(); + } +} + +.van-hairline { + &, + &--top, + &--left, + &--right, + &--bottom, + &--surround, + &--top-bottom { + position: relative; + } + + &--top::after { + border-top-width: @border-width-base; + } + + &--left::after { + border-left-width: @border-width-base; + } + + &--right::after { + border-right-width: @border-width-base; + } + + &--bottom::after { + border-bottom-width: @border-width-base; + } + + &, + &-unset { + &--top-bottom::after { + border-width: @border-width-base 0; + } + } + + &--surround::after { + border-width: @border-width-base; + } +} diff --git a/src/style/clearfix.less b/src/style/clearfix.less deleted file mode 100644 index 3780b50d2..000000000 --- a/src/style/clearfix.less +++ /dev/null @@ -1,5 +0,0 @@ -@import './mixins/clearfix'; - -.van-clearfix { - .clearfix(); -} diff --git a/src/style/ellipsis.less b/src/style/ellipsis.less deleted file mode 100644 index 0f3f282ac..000000000 --- a/src/style/ellipsis.less +++ /dev/null @@ -1,13 +0,0 @@ -@import './mixins/ellipsis'; - -.van-ellipsis { - .ellipsis(); -} - -.van-multi-ellipsis--l2 { - .multi-ellipsis(2); -} - -.van-multi-ellipsis--l3 { - .multi-ellipsis(3); -} diff --git a/src/style/hairline.less b/src/style/hairline.less deleted file mode 100644 index 31d35d57f..000000000 --- a/src/style/hairline.less +++ /dev/null @@ -1,47 +0,0 @@ -@import './var'; -@import './mixins/hairline'; - -[class*='van-hairline'] { - &::after { - .hairline(); - } -} - -.van-hairline { - &, - &--top, - &--left, - &--right, - &--bottom, - &--surround, - &--top-bottom { - position: relative; - } - - &--top::after { - border-top-width: @border-width-base; - } - - &--left::after { - border-left-width: @border-width-base; - } - - &--right::after { - border-right-width: @border-width-base; - } - - &--bottom::after { - border-bottom-width: @border-width-base; - } - - &, - &-unset { - &--top-bottom::after { - border-width: @border-width-base 0; - } - } - - &--surround::after { - border-width: @border-width-base; - } -} diff --git a/src/style/mixins/safe-area.less b/src/style/mixins/safe-area.less deleted file mode 100644 index 9fc95f9fe..000000000 --- a/src/style/mixins/safe-area.less +++ /dev/null @@ -1,4 +0,0 @@ -.safe-area-inset-bottom() { - padding-bottom: constant(safe-area-inset-bottom); - padding-bottom: env(safe-area-inset-bottom); -} diff --git a/src/submit-bar/SubmitBar.tsx b/src/submit-bar/SubmitBar.tsx index c917deffc..1daa73459 100644 --- a/src/submit-bar/SubmitBar.tsx +++ b/src/submit-bar/SubmitBar.tsx @@ -104,7 +104,9 @@ export default defineComponent({ }; return () => ( -
+
{slots.top?.()} {renderTip()}
diff --git a/src/submit-bar/index.less b/src/submit-bar/index.less index e0f43755a..ad4ba34b0 100644 --- a/src/submit-bar/index.less +++ b/src/submit-bar/index.less @@ -1,5 +1,4 @@ @import './var.less'; -@import '../style/mixins/safe-area.less'; :root { --van-submit-bar-height: @submit-bar-height; @@ -32,7 +31,6 @@ width: 100%; background-color: var(--van-submit-bar-background-color); user-select: none; - .safe-area-inset-bottom(); &__tip { padding: var(--van-submit-bar-tip-padding); @@ -98,8 +96,4 @@ background: var(--van-gradient-red); } } - - &--unfit { - padding-bottom: 0; - } } diff --git a/src/submit-bar/test/__snapshots__/demo.spec.ts.snap b/src/submit-bar/test/__snapshots__/demo.spec.ts.snap index 3d00f669a..c77b7fb27 100644 --- a/src/submit-bar/test/__snapshots__/demo.spec.ts.snap +++ b/src/submit-bar/test/__snapshots__/demo.spec.ts.snap @@ -2,7 +2,7 @@ exports[`should render demo and match snapshot 1`] = `
-
+
@@ -29,7 +29,7 @@ exports[`should render demo and match snapshot 1`] = `
-
+
@@ -64,7 +64,7 @@ exports[`should render demo and match snapshot 1`] = `
-
+
@@ -102,7 +102,7 @@ exports[`should render demo and match snapshot 1`] = `
-
+
Some tips, diff --git a/src/submit-bar/test/__snapshots__/index.spec.ts.snap b/src/submit-bar/test/__snapshots__/index.spec.ts.snap index d5adb5074..627cbf97d 100644 --- a/src/submit-bar/test/__snapshots__/index.spec.ts.snap +++ b/src/submit-bar/test/__snapshots__/index.spec.ts.snap @@ -11,7 +11,7 @@ exports[`should change the color of submit button when using button-color prop 1 `; exports[`should render button slot correctly 1`] = ` -
+
Custom button
@@ -66,7 +66,7 @@ exports[`should render suffix-label correctly 1`] = ` `; exports[`should render top slot correctly 1`] = ` -
+
Custom Top