In my project I needed to add some extra buttons to a dialog's header. The issue was that I didn't want to have the typical "X" ("Close dialog") button up there, instead I wanted to have other buttons in the header.
Since I didn't find anything helpful on the internet, I am going to post/share my solution to this problem.
Ok, what do I mean here exactly? Let me show you.
The typical dialog has got a header-title and the little "close"-button at the top right.
Now, what I was going for should have the close button at the left, then a title and at the right could be some more buttons (e.g. with the icons of a check, three bars and a heart)
I didn't find any solution online on how to achieve this, so I have tried it myself (and it works, too).
This is my code (in App.vue, or wherever you want to have it).
Code: Select all
<template>
<Button label="Show" @click="showDialog = true" />
<Dialog v-model:visible="showDialog" :closable="false">
<template #header>
<!-- Items on the left side of the header -->
<div class="flex align-items-center gap-2">
<!-- "Close the dialog"-Button -->
<Button icon="pi pi-times" text rounded @click="showDialog = false" />
<!-- Header title -->
<h3>My header</h3>
</div>
<!-- Items on the right side of the header -->
<div class="dialog-header-right flex gap-2">
<Button icon="pi pi-check" text rounded />
<Button icon="pi pi-bars" text rounded />
<Button icon="pi pi-heart" text rounded />
</div>
</template>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
</Dialog>
</template>
<script setup>
import { ref } from 'vue';
const showDialog = ref();
</script>
<style>
.dialog-header-right {
position: absolute;
right: 21px;
}
</style>
I hope someone will find this helpful!