Vuetify dialog: Is there a "small" & "large" equivalent of Bootstrap dialog?

Question

I'm learning Vuetify, coming from Bootstrap. I got to dialogs and got them working nicely.

However, in the docs, it says width or max-width props also take strings.

I tried and it seems css width measurements work: both numbers (px) worked and percentages too. Didn't go further because I stopped at this logical "measurement" I'm used to from Bootstrap: I'd like to set the dialog to be "small" or "large", as in Bootstrap.

I have found that width also takes "unset" as parameter, but I couldn't find any documentation on what other constants it takes.

So, are there any "large" , "small" equivalents? Or documentation showing the possibilities?

Answer 1

In vuetify v-dialog component there are no direct analogues of "large" and "small". But you can simply make it by yourself.

By example, you can create some global variables:

Vue.prototype.$dialogSmall = 300;
Vue.prototype.$dialogLarge = 800;

Ant then use it in your v-dialog component:

<v-dialog
  v-model="dialog"
  :width="$dialogSmall"
  :max-width="$dialogSmall"
>
  ...
</v-dialog>

Check this Codesandbox I made as demo.

---

You also have some doubts about the documentation of width and max-width. So let's check sources!

Take a look at VDialog.ts. You can see that some convertToUnit function is applied for both width and max-width properties when the component is created.

Then take a look at convertToUnit definition at helpers.ts. There's no magic here. It just applies Numbers like 500 or Strings like "500" (that is converted to "500px"), "700px", "100%", ... . You can also put any of special CSS keywords that are allowed for width/max-width CSS property. They are listed here at MDN.