customize T-Modal VueTailwind

I am using VueTailwind and I wanted to customize a modal: I would like to put an icon in the header but I have no idea how to do it and customize the footer by giving it more padding but I don't know how to customize the v-slot footer.

the example of my modal:

<t-modal
  header="Title of the modal"
<!--    here I would like to put an icon-->
>
  Content of the modal.
	<!--    give the right footer padding, but I don't know how to customize the v-slot -->
  <template v-slot:footer>
    <div class="flex justify-between">
      <t-button type="button">
        Cancel
      </t-button>
      <t-button type="button">
        Ok
      </t-button>
    </div>
  </template>
</t-modal>

aleahy

3 years ago

Level 25

Customising your footer would just involve applying the relevant tailwind classes to the elements that need it. You are in control of the content. Eg: you could apply the padding to the containing div inside the template element. Eg:

<template v-slot:footer>
   <div class="flex justify-between p-6">
   ...
   </div>
</template>

As for the header, if you look at the docs, there is a named slot for the header. So you could use that instead of the header prop to define your header. Create it the same way you have done so for the footer, using the icon that you require.

gianmarx

3 years ago

Level 1

@aleahy exactly as I tried to do, only if I try to padding the footer the link / button comes out and it has no background.

I have read the documentation. I have read that there is a props header but I have no idea how to customize it

gianmarx

3 years ago

Level 1

how can i define a custom header? @aleahy

aleahy

3 years ago

Best Answer

Level 25

The component is just using named slots. You can learn how to use them here: https://v2.vuejs.org/v2/guide/components-slots.html#Named-Slots

You won't be able to do what you want using the playground they have. It doesn't let you put in headers, etc. Only play with the classes.

But essentially you just need to define a template inside t-modal named header just like you have a template named footer.

<t-modal>
<template v-slot:header>
<div>
   <span>Title of modal</span>
   <span>Your icon goes here</span>
</div>
</template>

<template v-slot:footer>
Footer stuff goes here
<template>
</t-modal>

I have no idea what you are trying to achieve with your css. You will need to sort it out yourself.

Keep in mind that there is a bunch of tailwind classes that are assigned by default or assigned as settings when you import the component that you need to take into account. You may need to modify these to get the effect you want. The docs tell you the default value for these.

Please or to participate in this conversation.