NcModal

Props

Prop name	Description	Type	Values	Default
title	Title to be shown with the modal	string	-	''
hasPrevious	Declare if a previous slide is available	boolean	-	false
hasNext	Declare if a next slide is available	boolean	-	false
outTransition	Declare if hiding the modal should be animated	boolean	-	false
enableSlideshow	Declare if the slideshow functionality should be enabled	boolean	-	false
slideshowDelay	Declare the slide interval	number	-	5000
slideshowPaused	Allow to pause an ongoing slideshow	boolean	-	false
enableSwipe	Enable swipe between slides	boolean	-	true
spreadNavigation		boolean	-	false
size	Defines the modal size. Default is 'normal'. Available are 'small', 'normal', 'large' and 'full'. All sizes except 'small' change automatically to full-screen on mobile.	string	-	'normal'
canClose	Declare if the modal can be closed	boolean	-	true
dark	Makes the modal backdrop black if true	boolean	-	false
container	Selector for the modal container, pass `null` to prevent automatic container mounting	string\|null	-	'body'
closeButtonContained	Pass in false if you want the modal 'close' button to be displayed outside the modal boundaries, in the top right corner of the window	boolean	-	true
additionalTrapElements	Additional elements to add to the focus trap	array	-	[]
inlineActions	Display x items inline<br/>`@see` Actions component usage	number	-	0

Events

Event name	Properties	Description
previous
next
close		Emitted when the closing animation is finished

Slots

Name	Description	Bindings
actions	List of actions to show
default	Modal content to render

vue

<template>
  <div>
    <NcButton @click="showModal">Show Modal</NcButton>
    <NcModal
      v-if="modal"
      @close="closeModal"
      size="small"
      title="Title"
      :outTransition="true"
      :hasNext="true"
      :hasPrevious="true"
    >
      <div class="modal__content">Hello world</div>
    </NcModal>
  </div>
</template>
<script>
export default {
  data() {
    return {
      modal: false
    };
  },
  methods: {
    showModal() {
      this.modal = true;
    },
    closeModal() {
      this.modal = false;
    }
  }
};
</script>
<style scoped>
.modal__content {
  margin: 50px;
  text-align: center;
}
</style>

vue

<template>
  <div>
    <NcButton @click="showModal">Show Modal with fields</NcButton>
    <NcModal v-if="modal" @close="closeModal" title="Title inside modal">
      <div class="modal__content">
        <h2>Please enter your name</h2>
        <NcTextField label="First Name" :value.sync="firstName" />
        <NcTextField label="Last Name" :value.sync="lastName" />
        <NcButton
          :disabled="!this.firstName || !this.lastName"
          @click="closeModal"
          type="primary"
        >
          Submit
        </NcButton>
      </div>
    </NcModal>
  </div>
</template>
<script>
import NcButton from "../NcButton/index.js";
import NcTextField from "../NcTextField/index.js";

export default {
  components: {
    NcButton,
    NcTextField
  },
  data() {
    return {
      modal: false,
      firstName: "",
      lastName: ""
    };
  },
  methods: {
    showModal() {
      this.firstName = "";
      this.lastName = "";
      this.modal = true;
    },
    closeModal() {
      this.modal = false;
    }
  }
};
</script>
<style scoped>
.modal__content {
  margin: 50px;
  text-align: center;
}

.input-field {
  margin: 12px 0px;
}
</style>

Set container property to .modal-mask to inject popover context of the modal:

vue

<template>
  <div>
    <NcButton @click="showModal">Show Modal</NcButton>
    <NcModal v-if="modal" @close="closeModal" size="small">
      <NcEmojiPicker container=".modal-mask" @select="select">
        <NcButton>Select emoji {{ emoji }}</NcButton>
      </NcEmojiPicker>
    </NcModal>
  </div>
</template>
<script>
export default {
  data() {
    return {
      emoji: "😛",
      modal: false
    };
  },
  methods: {
    showModal() {
      this.modal = true;
    },
    closeModal() {
      this.modal = false;
    },
    select(emoji) {
      this.emoji = emoji;
    }
  }
};
</script>
<style scoped>
.modal__content {
  margin: 50px;
  text-align: center;
}
</style>

NcModal #

Props #

Events #

Slots #

Modal with more properties #

Usage of popover in modal #

NcModal

Props

Events

Slots

Modal with more properties

Usage of popover in modal