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

38 lines
593 B
Markdown
Raw Normal View History

2019-09-29 00:13:01 +08:00
# Basic
2020-01-30 22:45:44 +08:00
Basic usage of modal. You can put anything in modal, a card for example.
2019-09-29 00:13:01 +08:00
```html
<n-button
@click="isActive = true"
>
Start Me up
</n-button>
2019-11-15 17:44:43 +08:00
<n-modal v-model="isActive">
<n-card
style="width: 600px;"
title="Modal"
:bordered="false"
size="huge"
:segmented="{
2019-12-24 22:39:25 +08:00
content: 'soft',
footer: 'soft'
2019-11-15 17:44:43 +08:00
}"
>
2019-11-17 00:57:30 +08:00
<template v-slot:header-extra>
2019-11-15 17:44:43 +08:00
Oops!
</template>
Content
2019-11-17 00:57:30 +08:00
<template v-slot:footer>
2019-11-15 17:44:43 +08:00
Footer
</template>
</n-card>
2019-09-29 00:13:01 +08:00
</n-modal>
```
```js
export default {
data () {
return {
2020-01-30 22:45:44 +08:00
isActive: false
2019-09-29 00:13:01 +08:00
}
}
}
```