VSlideGroup API

Props

name	type	default
`center-active`	boolean	false
Forces the selected component to be centered.
`content-class` New in v3.9.0	any	undefined
Adds classes to the slide group item.
`direction`	'vertical' \| 'horizontal'	'horizontal'
Switch between horizontal and vertical modes.
`disabled`	boolean	false
Puts all children components into a disabled state.
`mandatory`	boolean \| 'force'	false
Forces at least one item to always be selected (if available).
`max`	number	undefined
Sets a maximum number of selections that can be made.
`mobile`	boolean	null
Determines the display mode of the component. If true, the component will be displayed in mobile mode. If false, the component will be displayed in desktop mode. If null, will be based on the current mobile-breakpoint
`mobile-breakpoint`	number \| 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'xxl'	undefined
Sets the designated mobile breakpoint for the component.
`model-value`	unknown	undefined
The v-model value of the component. If component supports the multiple prop, this defaults to an empty array.
`multiple`	boolean	false
Allows one to select multiple items.
`next-icon`	\| string \| (string \| [string, number])[] \| (new () => any) \| FunctionalComponent	'$next'
The appended slot when arrows are shown.
`prev-icon`	\| string \| (string \| [string, number])[] \| (new () => any) \| FunctionalComponent	'$prev'
The prepended slot when arrows are shown.
`scroll-to-active` New in v3.10.6	boolean	true
Keeps the last active element visible when resizing the scrollable container.
`selected-class`	string	'v-slide-group-item--active'
Configure the active CSS class applied when an item is selected.
`show-arrows`	string \| boolean	false
Change when the overflow arrow indicators are shown. By default, arrows always display on Desktop when the container is overflowing. When the container overflows on mobile, arrows are not shown by default. A show-arrows value of `true` allows these arrows to show on Mobile if the container overflowing. A value of `desktop` always displays arrows on Desktop while a value of `mobile` always displays arrows on Mobile. A value of `always` always displays arrows on Desktop and Mobile. Use never to turn arrows off. Find more information on how to customize breakpoint thresholds on the breakpoints page.
`symbol`	any	undefined
The Symbol used to hook into group functionality for components like v-btn-toggle and v-bottom-navigation.
`tag`	string \| (new () => any) \| FunctionalComponent	'div'
Specify a custom tag used on the root element.

Events

name	type
`update:modelValue`	[unknown]
Event that is emitted when the component’s model changes.

Slots

{
  next: () => void
  prev: () => void
  select: (id: string, value: boolean) => void
  isSelected: (id: string) => boolean
}

{
  next: () => void
  prev: () => void
  select: (id: string, value: boolean) => void
  isSelected: (id: string) => boolean
}

{
  next: () => void
  prev: () => void
  select: (id: string, value: boolean) => void
  isSelected: (id: string) => boolean
}

`default`
The default Vue slot.
`next`
The next slot.
`prev`
The prev slot.

Exposed

(location: 'prev' | 'next' | 'first' | 'last') => void

boolean

boolean

number

(location: 'prev' | 'next') => void

string[]

`focus`
Focus the component.
`hasNext`
Returns true if there are items after current index.
`hasPrev`
Returns true if there are items before current index.
`scrollOffset`
Scroll the component to a given index.
`scrollTo`
Scroll the component to a given index.
`selected`
Get the selected component index.

SASS Variables

name	default
`$slide-group-prev-basis`	52px

#VSlideGroup API

VSlideGroup API