К содержимому

SusDrawer

SusDrawer

Боковая панель (инвентарь / настройки / фильтры) с backdrop и слотами header / body / footer.

Пакет

SusKit · Молекулы (коммерческий)

Открыть в песочнице

SusKit · Molecules

Свойства

ИмяТипПо умолчанию
ModelProp<bool>falsev-model
PermanentProp<bool>falsev-model
PersistentProp<bool>falsev-model
LocationProp<string>"start"v-model
WidthProp<float>280fv-model
RailProp<bool>falsev-model

Слоты

Имя
header
(по умолчанию)
footer

События

ИмяПолеPayload
OpenedOnOpened
ClosedOnClosed
BackdropClickOnBackdropClick

Хуки стиля

Контракт 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

Использование

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.