SusBottomSheet

带遮罩、高度和 header / body / footer 插槽的底部操作面板。

包

SusKit · 分子（商业）

在 Playground 中打开

SusKit · Molecules

属性

名称	类型	默认值
Model	Prop<bool>	false	v-model
Persistent	Prop<bool>	false	v-model
Inset	Prop<bool>	false	v-model
Height	Prop<float>	280f	v-model

插槽

名称
header
（默认）
footer

事件

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

样式钩子

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

• sus-bottom-sheet
• sus-bottom-sheet__backdrop
• sus-bottom-sheet__body
• sus-bottom-sheet__footer
• sus-bottom-sheet__handle
• sus-bottom-sheet__header
• sus-bottom-sheet__panel
• sus-bottom-sheet--inset
• sus-bottom-sheet--open
• sus-slot

用法

<template>
  <sus:SusBottomSheet :Model="Open.Value"
                      Height="200"
                      :Persistent="Persistent.Value"
                      @opened="OnOpened"
                      @closed="OnClosed">
    <template #header>
      <ui:Label text="Quick actions" />
    </template>
    <ui:Label text="Trade · Invite · Report" />
    <template #footer>
      <sus:SusButton Text="Close" Variant="text" @click="Open.Value = false" />
    </template>
  </sus:SusBottomSheet>
</template>

<script>
public Prop<bool> Open = new(false);
public Prop<bool> Persistent = new(false);
void OnOpened() { }
void OnClosed() { }
</script>

var sheet = new SusBottomSheet();
sheet.Model.Value = true;
sheet.Height.Value = 200f;
sheet.OnOpened += () => { /* … */ };
sheet.Slot("header")?.Add(new Label("Quick actions"));
sheet.Slot("default")?.Add(new Label("Trade · Invite · Report"));
// Prefer Slot("default") over Add() — Add() lands on the overlay root.
sheet.Open(); // or sheet.Model.Value = true;

备注

• Persistent 使面板在点击遮罩 / 按 Escape 时保持打开。
• Inset 使面板从屏幕边缘向内收进。