SusDrawer

侧边面板（库存 / 设置 / 筛选），带遮罩和 header / body / footer 插槽。

包

SusKit · 分子（商业）

在 Playground 中打开

SusKit · Molecules

属性

名称	类型	默认值
Model	Prop<bool>	false	v-model
Permanent	Prop<bool>	false	v-model
Persistent	Prop<bool>	false	v-model
Location	Prop<string>	"start"	v-model
Width	Prop<float>	280f	v-model
Rail	Prop<bool>	false	v-model

插槽

名称
header
（默认）
footer

事件

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

样式钩子

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

• sus-drawer
• sus-drawer__backdrop
• sus-drawer__body
• sus-drawer__footer
• sus-drawer__header
• sus-drawer__panel
• sus-drawer--location-end
• sus-drawer--location-start
• sus-drawer--open
• sus-drawer--permanent
• sus-drawer--rail
• sus-drawer--temporary
• sus-slot

用法

<template>
  <sus:SusDrawer :Model="Open.Value"
                 Location="start"
                 Width="240"
                 :Permanent="Permanent.Value"
                 :Persistent="Persistent.Value"
                 @opened="OnOpened"
                 @closed="OnClosed">
    <template #header>
      <ui:Label text="Inventory" />
    </template>
    <ui:Label text="Side panel — filters, settings, party list." />
    <template #footer>
      <sus:SusButton Text="Close" Variant="text" @click="Open.Value = false" />
    </template>
  </sus:SusDrawer>
</template>

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

var drawer = new SusDrawer();
drawer.Model.Value = true;
drawer.Location.Value = "start";
drawer.Width.Value = 240f;
drawer.Slot("header")?.Add(new Label("Inventory"));
drawer.Slot("default")?.Add(new Label("Side panel — filters, settings, party list."));
// Prefer Slot("default") over Add() — Add() lands on the overlay root.
drawer.Open();

备注

• Location：start · end · left · right。
• Permanent 使面板始终可见（无遮罩）。
• Persistent 阻止在点击遮罩 / 按 Escape 时关闭。
• Rail 收窄宽度，只显示图标界面。