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

38 lines
601 B
Markdown

# Use Preset Card
Modal has some presets, which means you can use props & slots of the preset after set it.
```html
<n-button
@click="modalActive = true"
>
Start Me up
</n-button>
<n-modal
v-model="modalActive"
preset="card"
overlay-style="width: 600px;"
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>
```
```js
export default {
data () {
return {
modalActive: false,
}
}
}
```