Categories
Vuetify

Vuetify — Nested Dialogs

Spread the love

Vuetify is a popular UI framework for Vue apps.

In this article, we’ll look at how to work with the Vuetify framework.

Loader Dialog

We can create a loader dialog to show a progress bar inside it.

To do that, we write:

<template>
  <v-container>
    <v-row>
      <v-col col="12">
        <div class="text-center">
          <v-btn
            :disabled="dialog"
            :loading="dialog"
            class="white--text"
            color="purple darken-2"
            @click="dialog = true"
          >Start loading</v-btn>
          <v-dialog v-model="dialog" hide-overlay persistent width="300">
            <v-card color="primary" dark>
              <v-card-text>
                Please wait
                <v-progress-linear indeterminate color="white" class="mb-0"></v-progress-linear>
              </v-card-text>
            </v-card>
          </v-dialog>
        </div>
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
export default {
  name: "HelloWorld",
  data: () => ({
    dialog: false,
  }),
  watch: {
    dialog(val) {
      if (!val) {
        return;
      }
      setTimeout(() => {
        this.dialog = false;
      }, 5000);
    },
  },
};
</script>

We added a dialog that shows a progress bar with the v-progress-linear component,

The indeterminate prop makes the progress bar move until the dialog is dismissed.

Nested Dialogs

We can open dialog boxes within another dialog.

For example, we can write:

<template>
  <v-container>
    <v-row>
      <v-col col="12">
        <div>
          <v-row justify="center">
            <v-btn color="primary" class="ma-2" dark @click="dialog = true">Open Dialog 1</v-btn>
            <v-btn color="primary" class="ma-2" dark @click="dialog2 = true">Open Dialog 2</v-btn>
            <v-btn color="primary" class="ma-2" dark @click="dialog3 = true">Open Dialog 3</v-btn>
            <v-menu bottom offset-y>
              <template v-slot:activator="{ on, attrs }">
                <v-btn class="ma-2" v-bind="attrs" v-on="on">A Menu</v-btn>
              </template>
            </v-menu>
            <v-dialog
              v-model="dialog"
              fullscreen
              hide-overlay
              transition="dialog-bottom-transition"
              scrollable
            >
              <v-card tile>
                <v-card-text>
                  <v-btn color="primary" dark class="ma-2" @click="dialog2 = !dialog2">Open Dialog 2</v-btn>
                  <v-list three-line subheader>
                    <v-subheader>User Controls</v-subheader>
                  </v-list>
                </v-card-text>

                <div style="flex: 1 1 auto;"></div>
              </v-card>
            </v-dialog>

            <v-dialog v-model="dialog2" max-width="500px">
              <v-card>
                <v-card-title>Dialog 2</v-card-title>
                <v-card-text>
                  <v-btn color="primary" dark @click="dialog3 = !dialog3">Open Dialog 3</v-btn>
                </v-card-text>
                <v-card-actions>
                  <v-btn color="primary" text @click="dialog2 = false">Close</v-btn>
                </v-card-actions>
              </v-card>
            </v-dialog>
            <v-dialog v-model="dialog3" max-width="500px">
              <v-card>
                <v-card-title>
                  <span>Dialog 3</span>
                  <v-spacer></v-spacer>
                  <v-menu bottom left>
                    <template v-slot:activator="{ on, attrs }">
                      <v-btn icon v-bind="attrs" v-on="on">
                        <v-icon>mdi-dots-vertical</v-icon>
                      </v-btn>
                    </template>
                  </v-menu>
                </v-card-title>
                <v-card-actions>
                  <v-btn color="primary" text @click="dialog3 = false">Close</v-btn>
                </v-card-actions>
              </v-card>
            </v-dialog>
          </v-row>
        </div>
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
export default {
  name: "HelloWorld",
  data: () => ({
    dialog: false,
    dialog2: false,
    dialog3: false,
    notifications: false,
    sound: true,
    widgets: false,
  }),
};
</script>

to show dialog boxes with buttons to open other dialog boxes.

They are all created with the v-dialog component.

Conclusion

We can add a dialog box to show a progress bar or other dialog boxes with Vuetify.

Leave a Reply

Your email address will not be published. Required fields are marked *