diff --git a/packages/vuetify/src/components/VBottomNavigation/VBottomNavigation.tsx b/packages/vuetify/src/components/VBottomNavigation/VBottomNavigation.tsx index 03ee9b1410a..bb05f006109 100644 --- a/packages/vuetify/src/components/VBottomNavigation/VBottomNavigation.tsx +++ b/packages/vuetify/src/components/VBottomNavigation/VBottomNavigation.tsx @@ -51,10 +51,7 @@ export const makeVBottomNavigationProps = propsFactory({ ...makeRoundedProps(), ...makeLayoutItemProps({ name: 'bottom-navigation' }), ...makeTagProps({ tag: 'header' }), - ...makeGroupProps({ - modelValue: true, - selectedClass: 'v-btn--selected', - }), + ...makeGroupProps({ selectedClass: 'v-btn--selected' }), ...makeThemeProps(), }, 'VBottomNavigation') @@ -70,6 +67,7 @@ export const VBottomNavigation = genericComponent( props: makeVBottomNavigationProps(), emits: { + 'update:active': (value: any) => true, 'update:modelValue': (value: any) => true, }, @@ -86,7 +84,7 @@ export const VBottomNavigation = genericComponent( (props.density === 'comfortable' ? 8 : 0) - (props.density === 'compact' ? 16 : 0) )) - const isActive = useProxiedModel(props, 'modelValue', props.modelValue) + const isActive = useProxiedModel(props, 'active', props.active) const { layoutItemStyles, layoutIsReady } = useLayoutItem({ id: props.name, order: computed(() => parseInt(props.order, 10)), @@ -132,7 +130,6 @@ export const VBottomNavigation = genericComponent( layoutItemStyles.value, { height: convertToUnit(height.value), - transform: `translateY(${convertToUnit(!isActive.value ? 100 : 0, '%')})`, }, ssrBootStyles.value, props.style,