SusDrawer

Боковая панель (инвентарь / настройки / фильтры) с backdrop и слотами header / body / footer.
Пакет
SusKit · Молекулы (коммерческий)
Свойства
| Имя | Тип | По умолчанию | |
|---|---|---|---|
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 |
События
| Имя | Поле | Payload |
|---|---|---|
Opened | OnOpened | — |
Closed | OnClosed | — |
BackdropClick | OnBackdropClick | — |
Хуки стиля
Контракт USS-классов — внешний вид переопределяется без правки C#. Состояния переключаются этими классами:
sus-drawersus-drawer__backdropsus-drawer__bodysus-drawer__footersus-drawer__headersus-drawer__panelsus-drawer--location-endsus-drawer--location-startsus-drawer--opensus-drawer--permanentsus-drawer--railsus-drawer--temporarysus-slot
Использование
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();Заметки
Location:start·end·left·right.Permanentдержит панель всегда видимой (без backdrop).Persistentблокирует закрытие по клику на backdrop / Escape.Railсжимает ширину до иконок-only.