# Modal extension

# Basic Usage

<us-modal v-model="showModal" title="A simple modal" @ok="" @cancel="">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis earum tenetur quo cupiditate, eaque qui officia recusandae. Excepturi nobis dolores molestias! Quas quisquam a officia eos.
</us-modal>
<us-button v-if="!showModal" variant="primary" @click="showModal = true">Show</us-button>
<us-button v-else variant="primary" @click="showModal = false">Hide</us-button>
1
2
3
4
5

# Component Reference

# <us-modal>

# Properties

Property Type Default Description
show boolean false This prop is used to hide and show the modal
title string 'Confirm' The modal title
btn-ok string 'Ok' The affirmative button content
btn-cancel string 'Cancel' The cancel button content

# Events

Slot Name Arguments Description
ok none Emitted when the affirmative button is clicked
cancel none Emitted when the cancel button is clicked

# Slots

Slot Name Arguments Description
title none Content for the header slot
buttons onAffirmative, onCancel Replace the standard buttons, passed the onAffirmative and onCancel functions
Last Updated: 2/2/2022, 2:29:19 PM