SwDrawer
Боковая шторка (panel/sheet). В отличие от SwMessage (центральный <dialog>), выезжает слева или справа. v-model — открыт/закрыт; Escape и клик по маске закрывают.
Свойства / Properties
| Имя | Тип | По умолчанию | Описание |
|---|---|---|---|
class | String | `` | Класс маски. |
title | String | `` | Заголовок (или slot #header). |
placement | String | right | 'left' / 'right'. |
size | String | 30% | Ширина панели (CSS width). |
after | String | `` | Иконка закрытия в header. |
modal | Boolean | false | Затемнение backdrop (glass + blur). |
closeOnClickModal | Boolean | true | Закрывать по клику на backdrop. |
Слоты
Default — тело; #header, #footer.
Пример
<script setup>
import { ref } from 'vue'
const open = ref(false)
const close = 'https://cdn.jsdelivr.net/npm/@tabler/icons@3.19.0/icons/outline/x.svg'
</script>
<sw-button type="primary" @click="open = true">Открыть</sw-button>
<sw-drawer v-model="open" title="Шторка" :after="close">
Контент
<template #footer>
<sw-button size="small" @click="open = false">OK</sw-button>
</template>
</sw-drawer>