Vuetify: Membuat Menu Bawah menggunakan Fab dan Bottom Sheet

Ini adalah catatan untuk membuat menu tambahan di bagian bawah menggunakan v-bottom-sheet. Menu ini akan muncul atau ditampilkan saat sebuah tombol melayang (fab) mendapat aksi klik/disentuh.

Kodingan untuk elemen:

<v-card id="bottom-sheet">
            <v-bottom-sheet v-model="sheet">
                <template v-slot:activator="{ on, attrs }">
                    <v-fab-transition>
                        <v-btn
                            v-bind="attrs"
                            v-on="on"
                            color="green darken-3"
                            dark
                            fixed
                            bottom
                            right
                            fab
                        >
                            <v-icon>mdi-launch</v-icon>
                        </v-btn>
                    </v-fab-transition>
                </template>
                <v-list dense>
                    <v-subheader>Transaksi</v-subheader>
                    <v-list-item
                        @click="openSheet(item.module, item.title)"
                        v-for="(item, index) of bottomMenu.list"
                        :key="index">
                        <v-list-item-icon>
                            <v-icon v-text="item.icon"/>
                        </v-list-item-icon>
                        <v-list-item-title v-text="item.title"/>
                    </v-list-item>

                </v-list>
            </v-bottom-sheet>
            <v-dialog
                v-model="dialog.bottomSheet"
                fullscreen
                hide-overlay
                transition="dialog-bottom-transition"
            >
                <v-card>
                    <v-toolbar
                        dark
                        color="success"
                    >

                        <v-toolbar-title v-text="bottomMenu.title"/>
                        <v-spacer></v-spacer>
                        <v-toolbar-items>
                            <v-btn
                                icon
                                dark
                                @click="dialog.bottomSheet = false;"
                            >
                                <v-icon>mdi-close</v-icon>
                            </v-btn>
                        </v-toolbar-items>
                    </v-toolbar>

                    <v-card-text class="my-3">
                        <TodayTransaction ref="history" v-if="bottomMenu.module=='history'"></TodayTransaction>
                        <Receivable v-if="bottomMenu.module=='receivable'"></Receivable>
                        <Cashflow v-if="bottomMenu.module=='cashflow'"></Cashflow>
                        <Estimation v-if="bottomMenu.module=='estimation'"></Estimation>
                        <Jobcard v-if="bottomMenu.module=='jobcard'"></Jobcard>
                        <Guarantee v-if="bottomMenu.module=='guarantee'"></Guarantee>
                        <div v-if="bottomMenu.module=='product-list'">
                            <p>Anda bisa menggunakan fasilitas ini untuk mengecek harga produk/jasa.</p>
                            <ProductList></ProductList>
                        </div>
                    </v-card-text>
                </v-card>
            </v-dialog>
        </v-card>

Kodingan untuk data

bottomMenu: {
                sheet: null,
                dialog: false,
                title: '',
                module: '',
                list: [
                    {module: 'edit', title: 'Edit Pengguna', icon: 'mdi-account-edit'},
                    {module: 'status', title: 'Ubah Status', icon: 'mdi-list-status'}
                ]
            },

Kodingan untuk method

openSheet(module, title) {
            this.dialog.bottomSheet = true
            this.bottomMenu.module = module
            this.bottomMenu.title = title
            if (module === 'history' && this.$refs.history != undefined) {
                this.$refs.history.getData()
            }
        }

Komentar