SusModal

带遮罩、焦点陷阱和 header / body / footer 插槽的模态对话框。

包

SusKit · 分子（商业）

在 Playground 中打开

SusKit · Molecules

属性

名称	类型	默认值
Model	Prop<bool>	false	v-model
Persistent	Prop<bool>	false	v-model
Width	Prop<float>	500f	v-model
Fullscreen	Prop<bool>	false	v-model
Scrollable	Prop<bool>	false	v-model
Transition	Prop<string>	"fade"	v-model

插槽

名称
header
（默认）
footer

事件

名称	字段	载荷
Opened	OnOpened	—
Closed	OnClosed	—
BackdropClick	OnBackdropClick	—

样式钩子

USS 类契约 — 无需改 C# 即可覆盖外观。状态通过这些类切换：

• modal-content
• modal-scrim
• modal-wrapper
• sus-button
• sus-confirm-modal__card
• sus-confirm-modal__title
• sus-modal
• sus-modal__backdrop
• sus-modal__body
• sus-modal__card
• sus-modal__footer
• sus-modal__footer-slot
• sus-modal__header
• sus-modal__hint
• sus-modal__message
• sus-modal__table-frame
• sus-modal__title
• sus-modal__wrapper
• sus-modal--fullscreen
• sus-modal--scrollable
• sus-modal--transition
• sus-modal--w-200
• sus-modal--w-220
• sus-modal--w-240
• sus-modal--w-260
• sus-modal--w-280
• sus-modal--w-300
• sus-modal--w-320
• sus-modal--w-340
• sus-modal--w-360
• sus-modal--w-380
• sus-modal--w-400
• sus-modal--w-420
• sus-modal--w-440
• sus-modal--w-460
• sus-modal--w-480
• sus-modal--w-500
• sus-modal--w-520
• sus-modal--w-540
• sus-modal--w-560
• sus-modal--w-580
• sus-modal--w-600
• sus-modal--w-620
• sus-modal--w-640
• sus-modal--w-660
• sus-modal--w-680
• sus-modal--w-700
• sus-modal--w-720
• sus-modal--w-740
• sus-modal--w-760
• sus-modal--w-780
• sus-modal--w-800
• sus-modal--w-820
• sus-modal--w-840
• sus-modal--w-860
• sus-modal--w-880
• sus-modal--w-900
• sus-modal--w-920
• sus-modal--w-940
• sus-modal--w-960
• sus-router-modal
• sus-router-modal--panel
• sus-slot
• sus-table-pick-modal__body
• sus-table-pick-modal__card
• sus-table-pick-modal__header
• sus-table-pick-modal__table
• sus-table-pick-modal__title

用法

<template>
  <sus:SusModal :Model="Open.Value" Width="480" @opened="OnOpened">
    <template #header>
      <ui:Label text="Confirm" />
    </template>
    <ui:Label text="Are you sure?" />
    <template #footer>
      <sus:SusButton Text="Cancel" Variant="text" @click="Open.Value = false" />
      <sus:SusButton Text="OK" @click="Confirm" />
    </template>
  </sus:SusModal>
</template>

<script>
public Prop<bool> Open = new(false);
void OnOpened() { }
void Confirm() { Open.Value = false; }
</script>

设置 Persistent 使模态框在点击遮罩 / 按 Escape 时保持打开。