SusModal

Модальный диалог с backdrop, focus trap и слотами header / body / footer.

Пакет

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

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

SusKit · Molecules

Свойства

Имя	Тип	По умолчанию
Model	Prop<bool>	false	v-model
Persistent	Prop<bool>	false	v-model
Width	Prop<float>	500f	v-model
Fullscreen	Prop<bool>	false	v-model
Scrollable	Prop<bool>	false	v-model
Transition	Prop<string>	"fade"	v-model

Слоты

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

События

Имя	Поле	Payload
Opened	OnOpened	—
Closed	OnClosed	—
BackdropClick	OnBackdropClick	—

Хуки стиля

Контракт USS-классов — внешний вид переопределяется без правки C#. Состояния переключаются этими классами:

• modal-content
• modal-scrim
• modal-wrapper
• sus-button
• sus-confirm-modal__card
• sus-confirm-modal__title
• sus-modal
• sus-modal__backdrop
• sus-modal__body
• sus-modal__card
• sus-modal__footer
• sus-modal__footer-slot
• sus-modal__header
• sus-modal__hint
• sus-modal__message
• sus-modal__table-frame
• sus-modal__title
• sus-modal__wrapper
• sus-modal--fullscreen
• sus-modal--scrollable
• sus-modal--transition
• sus-modal--w-200
• sus-modal--w-220
• sus-modal--w-240
• sus-modal--w-260
• sus-modal--w-280
• sus-modal--w-300
• sus-modal--w-320
• sus-modal--w-340
• sus-modal--w-360
• sus-modal--w-380
• sus-modal--w-400
• sus-modal--w-420
• sus-modal--w-440
• sus-modal--w-460
• sus-modal--w-480
• sus-modal--w-500
• sus-modal--w-520
• sus-modal--w-540
• sus-modal--w-560
• sus-modal--w-580
• sus-modal--w-600
• sus-modal--w-620
• sus-modal--w-640
• sus-modal--w-660
• sus-modal--w-680
• sus-modal--w-700
• sus-modal--w-720
• sus-modal--w-740
• sus-modal--w-760
• sus-modal--w-780
• sus-modal--w-800
• sus-modal--w-820
• sus-modal--w-840
• sus-modal--w-860
• sus-modal--w-880
• sus-modal--w-900
• sus-modal--w-920
• sus-modal--w-940
• sus-modal--w-960
• sus-router-modal
• sus-router-modal--panel
• sus-slot
• sus-table-pick-modal__body
• sus-table-pick-modal__card
• sus-table-pick-modal__header
• sus-table-pick-modal__table
• sus-table-pick-modal__title

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

<template>
  <sus:SusModal :Model="Open.Value" Width="480" @opened="OnOpened">
    <template #header>
      <ui:Label text="Confirm" />
    </template>
    <ui:Label text="Are you sure?" />
    <template #footer>
      <sus:SusButton Text="Cancel" Variant="text" @click="Open.Value = false" />
      <sus:SusButton Text="OK" @click="Confirm" />
    </template>
  </sus:SusModal>
</template>

<script>
public Prop<bool> Open = new(false);
void OnOpened() { }
void Confirm() { Open.Value = false; }
</script>

Установите Persistent, чтобы модал оставался открытым при клике на backdrop / нажатии Escape.