Skip to content

Commit 2f2bdf1

Browse files
chouchoujichouchouji
authored
feat(bottom-navigation): support animated (#1939)
* feat(bottom-navigation): support animated * docs(bottom-navigation): update docs * test(bottom-navigation): update snapshot * chore(bottom-navigation): update type
1 parent 847170e commit 2f2bdf1

9 files changed

Lines changed: 31 additions & 10 deletions

File tree

‎packages/varlet-ui/src/bottom-navigation-item/BottomNavigationItem.vue‎

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,15 @@
11
<template>
22
<button
33
v-ripple
4-
:class="classes(n(), n('$--box'), [variant, n('--variant-padding')], [isActive && !variant, n('--active')])"
4+
:class="
5+
classes(
6+
n(),
7+
n('$--box'),
8+
[variant, n('--variant-padding')],
9+
[isActive && !variant, n('--active')],
10+
[animated, n('--animated')],
11+
)
12+
"
513
:style="{
614
color: isActive ? activeColor : inactiveColor,
715
}"
@@ -69,7 +77,7 @@ export default defineComponent({
6977
const isActive = computed<boolean>(() => [name.value, index.value].includes(active.value))
7078
const badgeProps = computed(() => (props.badge === true ? defaultBadgeProps : props.badge) as BadgeProps)
7179
const { index, bottomNavigation, bindBottomNavigation } = useBottomNavigation()
72-
const { active, activeColor, inactiveColor, variant } = bottomNavigation
80+
const { animated, active, activeColor, inactiveColor, variant } = bottomNavigation
7381
const bottomNavigationItemProvider: BottomNavigationItemProvider = {
7482
name,
7583
index,
@@ -85,6 +93,7 @@ export default defineComponent({
8593
}
8694
8795
return {
96+
animated,
8897
activeColor,
8998
inactiveColor,
9099
badgeProps,

‎packages/varlet-ui/src/bottom-navigation-item/bottomNavigationItem.less‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,9 @@
4444
color: var(--bottom-navigation-item-active-color);
4545
background-color: var(--bottom-navigation-item-active-background-color);
4646
transition: background-color 250ms;
47+
}
4748

49+
&--animated {
4850
.var-bottom-navigation-item__label {
4951
font-size: calc(var(--bottom-navigation-item-font-size) * 1.16);
5052
}

‎packages/varlet-ui/src/bottom-navigation/BottomNavigation.vue‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,7 @@ export default defineComponent({
5757
props,
5858
setup(props, { slots }) {
5959
const bottomNavigationDom = ref<HTMLElement | null>(null)
60+
const animated = computed<boolean>(() => props.animated)
6061
const active = computed<number | string | undefined>(() => props.active)
6162
const activeColor = computed<string | undefined>(() => props.activeColor)
6263
const inactiveColor = computed<string | undefined>(() => props.inactiveColor)
@@ -66,6 +67,7 @@ export default defineComponent({
6667
const { length, bottomNavigationItems, bindBottomNavigationItem } = useBottomNavigationItems()
6768
6869
const bottomNavigationProvider: BottomNavigationProvider = {
70+
animated,
6971
active,
7072
activeColor,
7173
inactiveColor,

‎packages/varlet-ui/src/bottom-navigation/__tests__/__snapshots__/index.spec.js.snap‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,17 @@
11
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
22

33
exports[`test bottom-navigation component props > variant mode 1`] = `
4-
"<div class="var-bottom-navigation var--box" style="z-index: 1;"><button class="var-bottom-navigation-item var--box">
4+
"<div class="var-bottom-navigation var--box" style="z-index: 1;"><button class="var-bottom-navigation-item var--box var-bottom-navigation-item--animated">
55
<div class="var-bottom-navigation-item__icon-container">
66
<div class="var-badge var--box"><i class="var-icon var-icon--set var-icon-home var-bottom-navigation-item__icon" style="transition-duration: 0ms;" var-bottom-navigation-item-cover=""></i>
77
<transition-stub name="var-badge-fade" appear="false" persisted="true" css="true"><span class="var-badge__content var-badge--default var-badge--right-top var-badge--dot var-bottom-navigation-item__badge" style="--badge-offset-y: 0px; --badge-offset-x: 0px;" var-bottom-navigation-item-cover=""><!--v-if--><!--v-if--></span></transition-stub>
88
</div>
99
</div><span class="var-bottom-navigation-item__label">tag 1</span>
10-
</button><button class="var-bottom-navigation-item var--box">
10+
</button><button class="var-bottom-navigation-item var--box var-bottom-navigation-item--animated">
1111
<div class="var-bottom-navigation-item__icon-container"><i class="var-icon var-icon--set var-icon-magnify var-bottom-navigation-item__icon" style="transition-duration: 0ms;" var-bottom-navigation-item-cover=""></i></div><span class="var-bottom-navigation-item__label">tag 2</span>
12-
</button><button class="var-bottom-navigation-item var--box">
12+
</button><button class="var-bottom-navigation-item var--box var-bottom-navigation-item--animated">
1313
<div class="var-bottom-navigation-item__icon-container"><i class="var-icon var-icon--set var-icon-heart var-bottom-navigation-item__icon" style="transition-duration: 0ms;" var-bottom-navigation-item-cover=""></i></div><span class="var-bottom-navigation-item__label">tag 3</span>
14-
</button><button class="var-bottom-navigation-item var--box">
14+
</button><button class="var-bottom-navigation-item var--box var-bottom-navigation-item--animated">
1515
<div class="var-bottom-navigation-item__icon-container"><i class="var-icon var-icon--set var-icon-account-circle var-bottom-navigation-item__icon" style="transition-duration: 0ms;" var-bottom-navigation-item-cover=""></i></div><span class="var-bottom-navigation-item__label">tag 4</span>
1616
</button>
1717
<!--v-if-->
@@ -20,17 +20,17 @@ exports[`test bottom-navigation component props > variant mode 1`] = `
2020
`;
2121

2222
exports[`test bottom-navigation component props > variant mode 2`] = `
23-
"<div class="var-bottom-navigation var--box var-bottom-navigation--variant" style="z-index: 1;"><button class="var-bottom-navigation-item var--box var-bottom-navigation-item--variant-padding">
23+
"<div class="var-bottom-navigation var--box var-bottom-navigation--variant" style="z-index: 1;"><button class="var-bottom-navigation-item var--box var-bottom-navigation-item--variant-padding var-bottom-navigation-item--animated">
2424
<div class="var-bottom-navigation-item__icon-container var-bottom-navigation-item--variant-icon-container">
2525
<div class="var-badge var--box"><i class="var-icon var-icon--set var-icon-home var-bottom-navigation-item__icon" style="transition-duration: 0ms;" var-bottom-navigation-item-cover=""></i>
2626
<transition-stub name="var-badge-fade" appear="false" persisted="true" css="true"><span class="var-badge__content var-badge--default var-badge--right-top var-badge--dot var-bottom-navigation-item__badge" style="--badge-offset-y: 0px; --badge-offset-x: 0px;" var-bottom-navigation-item-cover=""><!--v-if--><!--v-if--></span></transition-stub>
2727
</div>
2828
</div><span class="var-bottom-navigation-item__label">tag 1</span>
29-
</button><button class="var-bottom-navigation-item var--box var-bottom-navigation-item--variant-padding">
29+
</button><button class="var-bottom-navigation-item var--box var-bottom-navigation-item--variant-padding var-bottom-navigation-item--animated">
3030
<div class="var-bottom-navigation-item__icon-container var-bottom-navigation-item--variant-icon-container"><i class="var-icon var-icon--set var-icon-magnify var-bottom-navigation-item__icon" style="transition-duration: 0ms;" var-bottom-navigation-item-cover=""></i></div><span class="var-bottom-navigation-item__label">tag 2</span>
31-
</button><button class="var-bottom-navigation-item var--box var-bottom-navigation-item--variant-padding">
31+
</button><button class="var-bottom-navigation-item var--box var-bottom-navigation-item--variant-padding var-bottom-navigation-item--animated">
3232
<div class="var-bottom-navigation-item__icon-container var-bottom-navigation-item--variant-icon-container"><i class="var-icon var-icon--set var-icon-heart var-bottom-navigation-item__icon" style="transition-duration: 0ms;" var-bottom-navigation-item-cover=""></i></div><span class="var-bottom-navigation-item__label">tag 3</span>
33-
</button><button class="var-bottom-navigation-item var--box var-bottom-navigation-item--variant-padding">
33+
</button><button class="var-bottom-navigation-item var--box var-bottom-navigation-item--variant-padding var-bottom-navigation-item--animated">
3434
<div class="var-bottom-navigation-item__icon-container var-bottom-navigation-item--variant-icon-container"><i class="var-icon var-icon--set var-icon-account-circle var-bottom-navigation-item__icon" style="transition-duration: 0ms;" var-bottom-navigation-item-cover=""></i></div><span class="var-bottom-navigation-item__label">tag 4</span>
3535
</button>
3636
<!--v-if-->

‎packages/varlet-ui/src/bottom-navigation/docs/en-US.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -204,6 +204,7 @@ const active = ref(0)
204204
| `placeholder` ***3.2.11*** | Whether to generate placeholder elements of the same height at the bottom (`fixed` required) | _boolean_ | `false` |
205205
| `fab-props` | Fab button props | _ButtonProps_ | `{ type: 'primary' }` |
206206
| `variant` ***3.2.0*** | Variant mode | _boolean_ | `false` |
207+
| `animated` ***3.13.1*** | Whether to enable content switching animation | _boolean_ | `true` |
207208

208209
#### BottomNavigationItem Props
209210

‎packages/varlet-ui/src/bottom-navigation/docs/zh-CN.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -206,6 +206,7 @@ const active = ref(0)
206206
| `placeholder` ***3.2.11*** | 是否在底部生成相同高度的占位元素(需设置 `fixed`) | _boolean_ | `false` |
207207
| `fab-props` | 悬浮按钮属性 | _ButtonProps_ | `{ type: 'primary' }` |
208208
| `variant` ***3.2.0*** | 变体模式 | _boolean_ | `false` |
209+
| `animated` ***3.13.1*** | 是否启用内容切换动画 | _boolean_ | `true` |
209210

210211
#### BottomNavigationItem Props
211212

‎packages/varlet-ui/src/bottom-navigation/props.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,10 @@ export const props = {
1111
type: [Number, String] as PropType<number | string>,
1212
default: 1,
1313
},
14+
animated: {
15+
type: Boolean,
16+
default: true,
17+
},
1418
fixed: Boolean,
1519
border: Boolean,
1620
variant: Boolean,

‎packages/varlet-ui/src/bottom-navigation/provide.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { useChildren } from '@varlet/use'
33
import { type BottomNavigationItemProvider } from '../bottom-navigation-item/provide'
44

55
export interface BottomNavigationProvider {
6+
animated: ComputedRef<boolean>
67
active: ComputedRef<number | string | undefined>
78
activeColor: ComputedRef<string | undefined>
89
inactiveColor: ComputedRef<string | undefined>

‎packages/varlet-ui/types/bottomNavigation.d.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import { BasicAttributes, ListenerProp, SetPropsDefaults, VarComponent } from '.
55
export declare const bottomNavigationProps: Record<keyof BottomNavigationProps, any>
66

77
export interface BottomNavigationProps extends BasicAttributes {
8+
animated?: boolean
89
active?: number | string
910
fixed?: boolean
1011
border?: boolean

0 commit comments

Comments
 (0)