naive-ui/demo/documentation/components/modal/zhCN/presetCard.demo.md
07akioni 487001d697 build: add changelog to site, refactor loader based on suffix
.demo.md for component demo
.demo-entry.md for demo entry
.md for common docs
2020-08-19 23:30:04 +08:00

603 B

使用 Card 预设

Modal 有一些预设,让你在设定之后可以使用对应的 Slots 还有 Props。

<n-button
  @click="modalActive = true"
>
  来吧
</n-button>
<n-modal
  v-model="modalActive"
  preset="card"
  overlay-style="width: 600px;"
  title="卡片预设"
  :bordered="false"
  size="huge"
  :segmented="{
    content: 'soft',
    footer: 'soft'
  }"
>
  <template v-slot:header-extra>
    噢!
  </template>
  内容
  <template v-slot:footer>
    尾部
  </template>
</n-modal>
export default {
  data () {
    return {
      modalActive: false,
    }
  }
}