BlogPlaygroundOne

VBottomSheet API

ads via vuetify

Props
name
type
default
absolute
boolean

false

Applies position: absolute to the content element.

activator
Element | (string & {}) | 'parent' | ComponentPublicInstance

undefined

Explicitly sets the overlay’s activator.

activator-props
unknown

{}

Apply custom properties to the activator.

attach
string | boolean | Element

false

Specifies which DOM element the overlay content should teleport to. Can be a direct element reference, querySelector string, or true to disable teleporting. Uses body by default.

capture-focus
boolean

true

When enabled, focus will be trapped within the component’s content, preventing Tab navigation from moving focus outside. Useful for modals, dialogs, and overlays to maintain accessibility.

close-delay
string | number

undefined

Milliseconds to wait before closing component. Only applies to hover and focus events.

close-on-back
boolean

true

Closes the overlay content when the browser’s back button is pressed or $router.back() is called, cancelling the original navigation. persistent overlays will cancel navigation and animate as if they were clicked outside instead of closing.

close-on-content-click
boolean

false

Closes component when you click on its content.

contained
boolean

false

Limits the size of the component and scrim to its offset parent. Implies absolute and attach. (Note: The parent element must have position: relative.).

content-class
any

undefined

Applies a custom class to the detached element. This is useful because the content is moved to the beginning of the v-app component (unless the attach prop is provided) and is not targetable by classes passed directly on the component.

content-props
any

undefined

Apply custom properties to the content.

disabled
boolean

false

Removes the ability to click or target the component.

eager
boolean

false

Forces the component’s content to render when it mounts. This is useful if you have content that will not be rendered in the DOM that you want crawled for SEO.

fullscreen
boolean

false

Changes layout for fullscreen display.

height
string | number

undefined

Sets the height for the component.

inset
boolean

false

Reduces the sheet content maximum width to 70%.

location
Anchor

'bottom'

Specifies the anchor point for positioning the component, using directional cues to align it either horizontally, vertically, or both…

location-strategy
'static' | 'connected' | LocationStrategyFunction

'static'

A function used to specifies how the component should position relative to its activator.

max-height
string | number

undefined

Sets the maximum height for the component.

max-width
string | number

undefined

Sets the maximum width for the component.

min-height
string | number

undefined

Sets the minimum height for the component.

min-width
string | number

undefined

Sets the minimum width for the component.

model-value
boolean

false

The v-model value of the component. If component supports the multiple prop, this defaults to an empty array.

no-click-animation
boolean

false

Disables the bounce effect when clicking outside of the content element when using the persistent prop.

offset
string | number | number[]

undefined

Increases distance from the target. When passed as a pair of numbers, the second value shifts anchor along the side and away from the target.

opacity
string | number

undefined

Sets the opacity of the scrim element. Only applies if scrim is enabled.

open-delay
string | number

undefined

Milliseconds to wait before opening component. Only applies to hover and focus events.

open-on-click
boolean

undefined

Activate the component when the activator is clicked.

open-on-focus
boolean

undefined

Activate the component when the activator is focused.

open-on-hover
boolean

false

Activate the component when the activator is hovered.

origin
Anchor | 'auto' | 'overlap'

'center center'

Sets the transition origin on the element. You can find more information on the MDN documentation for transition origin.

persistent
boolean

false

Clicking outside of the element or pressing esc key will not deactivate it.

retain-focus
boolean

true

Captures and keeps focus within the content element when using Tab and Shift+Tab. Recommended to be false when using external tools that require focus such as TinyMCE or vue-clipboard.

scrim
string | boolean

true

Accepts true/false to enable background, and string to define color.

scrollable
boolean

false

When set to true, expects a v-card and a v-card-text component with a designated height. For more information, check out the scrollable example.

scroll-strategy
'close' | 'block' | 'none' | 'reposition' | ScrollStrategyFunction

'block'

Strategy used when the component is activate and user scrolls.

stick-to-target
boolean

false

Enables the overlay content to go off-screen when scrolling.

target
  | Element
  | (string & {})
  | 'parent'
  | 'cursor'
  | ComponentPublicInstance
  | [number, number]

undefined

For locationStrategy=“connected”, specify an element or array of x,y coordinates that the overlay should position itself relative to. This will be the activator element by default.

theme
string

undefined

Specify a theme for this component and all of its children.

transition
  | string
  | boolean
  | (TransitionProps & { component: Component })
  | {
      component: ComponentPublicInstanceConstructor<
        CreateComponentPublicInstanceWithMixins<
          {} & { target?: HTMLElement | [x: number, y: number] | undefined } & {
            $children?:
              | VNodeChild
              | { $stable?: boolean | undefined }
              | (() => VNodeChild)
              | { default?: (() => VNodeChild) | undefined }
            'v-slots'?:
              | { default?: false | (() => VNodeChild) | undefined }
              | undefined
          } & { 'v-slot:default'?: false | (() => VNodeChild) | undefined },
          () => JSX.Element,
          unknown,
          {},
          {},
          ComponentOptionsMixin,
          ComponentOptionsMixin,
          Record<string, any>,
          PublicProps,
          {},
          true,
          {},
          SlotsType<Partial<MakeSlots<{ default: never }>>>,
          GlobalComponents,
          GlobalDirectives,
          string,
          {},
          any,
          ComponentProvideOptions,
          OptionTypesType<{}, {}, {}, {}, {}, {}>,
          {} & { target?: HTMLElement | [x: number, y: number] | undefined } & {
            $children?:
              | VNodeChild
              | { $stable?: boolean | undefined }
              | (() => VNodeChild)
              | { default?: (() => VNodeChild) | undefined }
            'v-slots'?:
              | { default?: false | (() => VNodeChild) | undefined }
              | undefined
          } & { 'v-slot:default'?: false | (() => VNodeChild) | undefined },
          () => JSX.Element,
          {},
          {},
          {},
          {}
        >,
        any,
        any,
        any,
        ComputedOptions,
        MethodOptions
      > &
        ComponentOptionsBase<
          {} & { target?: HTMLElement | [x: number, y: number] | undefined } & {
            $children?:
              | VNodeChild
              | { $stable?: boolean | undefined }
              | (() => VNodeChild)
              | { default?: (() => VNodeChild) | undefined }
            'v-slots'?:
              | { default?: false | (() => VNodeChild) | undefined }
              | undefined
          } & { 'v-slot:default'?: false | (() => VNodeChild) | undefined },
          () => JSX.Element,
          unknown,
          {},
          {},
          ComponentOptionsMixin,
          ComponentOptionsMixin,
          Record<string, any>,
          string,
          {},
          {},
          string,
          SlotsType<Partial<MakeSlots<{ default: never }>>>,
          GlobalComponents,
          GlobalDirectives,
          string,
          ComponentProvideOptions
        > &
        VNodeProps &
        AllowedComponentProps &
        ComponentCustomProps & {
          filterProps: (props: T) => Partial<Pick<T, U>>
        }
    }

'bottom-sheet-transition'

Sets the component transition. Can be one of the built in or custom transition.

viewport-margin
string | number

12

Sets custom viewport margin for the overlay content

width
string | number

undefined

Sets the width for the component.

z-index
string | number

2400

The z-index used for the component.

Events
name
type
update:modelValue
[boolean]

Event that is emitted when the component’s model changes.

Slots
{ isActive: boolean props: Record<string, any> targetRef: TemplateRef }
{ isActive: Ref<boolean, boolean> }
activator

When used, will activate the component when clicked (or hover for specific components). This manually stops the event propagation. Without this slot, if you open the component through its model, you will need to manually stop the event propagation.

default

The default Vue slot.

SASS Variables
name
default
$bottom-sheet-border-radius
0
$bottom-sheet-elevation
4
$bottom-sheet-inset-width
70%
$bottom-sheet-transition-duration
.2s