How do I insert an element into the header of an antdv a-drawer

Question

How to put an element inside the header of antdv a-drawer. Vue 2.7 Composition API

<a-drawer
        title="TRANSCRIPT DRAWER"
        placement="bottom"
        :closable="true"
        :visible="userTranscriptsVisible"
        :get-container="false"
        @close="closeDrawer"
        :mask="false"
        wrapClassName="userTranscriptsPanel"
        :height="transcriptDrawerHeight"
      > 
        <div slot="title">
          <!-- Your content here -->
          Swag
        </div>
</a-drawer>

I want to put the div with swag. Inside the header portion of this. so its inline with the title "TRANSCRIPT DRAWER".

I've tried:

    <template slot="title">
      <div>
        <!-- Your content here -->
        Swag
      </div>
    </template>

and

        <div slot="title">
          <!-- Your content here -->
          Swag
        </div>

score 0 · Answer 1 · answered May 29 '23 at 07:00

If the title attribute is present in the <a-drawer> tag properties, the slot will not take effect. You need to remove the title attribute.

and, To use the slot, you should not use slot="title", but instead use:

<template v-slot:title>

Or

<template #title>

How do I insert an element into the header of an antdv a-drawer

1 Answers1