Where I can edit footer of modal vue coreui?

Question

I get some code like in the below from coreui vue template,

<b-modal title="Modal title" class="modal-success" v-model="successModal" @ok="successModal = false" ok-variant="success">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</b-modal>`

And the result is like in the below:

https://i.stack.imgur.com/8qPLJ.png

the question: How I can edit the two buttons (cancel and OK) in the footer of that modal?

Answer 1

I know. this is to use a slot,

you can put the slot for footer like in the below code

<div slot="modal-footer" class="w-100">
   <p class="float-left">Modal Footer Content</p>
   <b-btn size="sm" class="float-right" variant="primary" @click="show=false">
      Close
   </b-btn>
</div>

Answer 2

Remove button through hide-footer, add the button the way you want it. on the button we use the float-right class to direct the buttons to the right. Example:

<template>
  <div>
    <b-button @click="showModal">
      Open Modal
    </b-button>
    <b-modal ref="myModalRef" hide-footer title="Using Component Methods">
      <div class="d-block text-center">
        <h3>Alteration</h3>
      </div>
      <b-btn class="float-right" @click="hideModal">Test</b-btn>
    </b-modal>
  </div>
</template>

<script>
  export default {
    methods: {
      showModal () {
        this.$refs.myModalRef.show()
      },
      hideModal () {
        this.$refs.myModalRef.hide()
      }
    }
  }
</script>

Answer 3

For anyone that's stumbling upon this question, here's is another answer.

<CModal title="Delete scraper?" :show.sync="dangerModal" color="danger">
            By deleting this scraper, you will delete all the jobs and results that
            are related to this scraper.<br><br>
            <span class="font-weight-bold">Are you sure you would want to delete this scraper?</span>
            <div slot="footer" class="w-100">
                <CButton style="border-radius: .2rem; color: white;" color="danger" class="ml-1 mr-1 float-right" @click="dangerModal = true">
                    <i class="fas fa-trash"></i>
                </CButton>
                <CButton style="border-radius: .2rem; color: white;" color="danger" class="ml-1 mr-1 float-right" @click="dangerModal = true">
                    <i class="fas fa-trash"></i>
                </CButton>
            </div>
        </CModal>

By adding a div element with the slot name.

OR

You can do this, which is way cleaner and easier:

<CModal title="Delete scraper?" :show.sync="dangerModal" color="danger">
            By deleting this scraper, you will delete all the jobs and results that
            are related to this scraper.<br><br>
            <span class="font-weight-bold">Are you sure you would want to delete this scraper?</span>
            <template #footer>
                <CButton @click="dangerModal = false" color="danger">Discard</CButton>
                <CButton @click="dangerModal = false" color="success">Accept</CButton>
            </template>
        </CModal>

Just use template element with the hashtag of the slot you want to use. In this case, I did #footer, to change the footer of the modal.

The slot names are listed in the official CoreUI Vue documentation here.