naive-ui/demo/documentation/components/modal/enUS/basic.demo.md

Basic

Basic usage of modal. You can put anything in modal, a card for example.

<n-button @click="modalActive = true"> Start Me up </n-button>
<n-modal v-model:show="modalActive">
  <n-card
    style="width: 600px;"
    title="Modal"
    :bordered="false"
    size="huge"
    :segmented="{
      content: 'soft',
      footer: 'soft'
    }"
  >
    <template #header-extra> Oops! </template>
    Content
    <template #footer> Footer </template>
  </n-card>
</n-modal>

export default {
  data () {
    return {
      modalActive: false
    }
  }
}