SusDrawer

Side panel (inventory / settings / filters) with backdrop and header / body / footer slots.

Package

SusKit · Molecules (commercial)

SusKit · Molecules

Props

Name	Type	Default
`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

Slots

Name
`header`
`(default)`
`footer`

Events

Name	Field	Payload
`Opened`	`OnOpened`	—
`Closed`	`OnClosed`	—
`BackdropClick`	`OnBackdropClick`	—

Style hooks

USS class contract — override appearance without touching C#. States toggle via these classes:

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

Usage

xml

<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>

csharp

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();

Notes

Location: start · end · left · right.
Permanent keeps the panel always visible (no backdrop).
Persistent blocks close on backdrop / Escape.
Rail collapses width for icon-only chrome.

SusDrawer ​