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.sstatic.net/8qPLJ.png

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

where you are using this b-modal ?

Niklesh Raut
– Niklesh Raut

2018-11-08 14:09:35 +00:00
Commented Nov 8, 2018 at 14:09 — Niklesh Raut
– Niklesh Raut, Commented Nov 8, 2018 at 14:09
in the <div class="wrapper">

Arian Saputra
– Arian Saputra

2018-11-08 14:13:54 +00:00
Commented Nov 8, 2018 at 14:13 — Arian Saputra
– Arian Saputra, Commented Nov 8, 2018 at 14:13
please share all code ?

Niklesh Raut
– Niklesh Raut

2018-11-08 14:16:29 +00:00
Commented Nov 8, 2018 at 14:16 — Niklesh Raut
– Niklesh Raut, Commented Nov 8, 2018 at 14:16
gist.github.com/Rhyanz46/43f9f057a0bd832627312fd4aae859b8

Arian Saputra
– Arian Saputra

2018-11-08 14:25:15 +00:00
Commented Nov 8, 2018 at 14:25 — Arian Saputra
– Arian Saputra, Commented Nov 8, 2018 at 14:25
go to this link, sir :) : link

Arian Saputra
– Arian Saputra

2018-11-08 14:26:29 +00:00
Commented Nov 8, 2018 at 14:26 — Arian Saputra
– Arian Saputra, Commented Nov 8, 2018 at 14:26

Zean · Accepted Answer · 2020-06-19 10:30:47Z

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>

edited Jun 19, 2020 at 10:30

Zean

31 silver badge3 bronze badges

answered Nov 8, 2018 at 15:43

Arian Saputra

4217 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Mahdi Rafatjah Over a year ago

Slot should be slot="footer"

timoleonn · Accepted Answer · 2021-02-10 22:52:10Z

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.

Hamilton Gabriel · Accepted Answer · 2018-11-08 17:00:55Z

0

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>

answered Nov 8, 2018 at 17:00

Hamilton Gabriel

3651 silver badge6 bronze badges

Collectives™ on Stack Overflow

Where I can edit footer of modal vue coreui?

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related