Bottom sheets

Designate a custom activator when the activator slot is not used. String can be any valid querySelector and Object can be any valid Node.

Specifies which DOM element that this component should detach to. String can be any valid querySelector and Object can be any valid Node. This will attach to the root v-app component by default.

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 targettable by classes passed directly on the component.

Applies the dark theme variant to the component. You can find more information on the Material Design documentation for dark themes.

Disables the ability to open the component.

Will force the components content to render on mounted. This is useful if you have content that will not be rendered in the DOM that you want crawled for SEO.

Changes layout for fullscreen display.

Hides the display of the overlay.

Reduces the sheet content maximum width to 70%.

Detaches the menu content inside of the component as opposed to the document.

Applies the light theme variant to the component.

Sets the maximum width for the component.

Disables the bounce effect when clicking outside of a v-dialog's content when using the persistent prop.

Designates whether component should activate when its activator is hovered.

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

Sets the overlay color.

Sets the overlay opacity.

Clicking outside of the element will not deactivate it.

Tab focus will return to the first child of the dialog by default. Disable this when using external tools that require focus such as TinyMCE or vue-clipboard.

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.

Sets the component transition. Can be one of the built in transitions or one your own.

Controls whether the component is visible or hidden.

Sets the width for the component.

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

The default Vue slot.