naive-ui/demo/documentation/components/modal/enUS/preset-card.demo.md

Use Preset Card

Modal has some presets, which means you can use props & slots of the preset after set it.

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

export default {
  data () {
    return {
      bodyStyle: {
        width: '600px'
      },
      modalActive: false,
    }
  }
}