Панели

Для организации контента можете использовать панели

<div class="panel pad">
  Обычная панель
</div>

Обычная панель

Сворачиваемая панель

<script setup lang="ts">
import { TogglePanel } from "luna";
</script>
<template>
  <TogglePanel store-key="my-panel" :init-state="false" title="Сворачиваемая панель">
    <template v-slot:actions>
      <button type="button"
              class="button button-icon button-transparent icon-plus"
              title="Действие"></button>
    </template>
    Содержимое панели
  </TogglePanel>
</template>

Сворачиваемая панель

Содержимое панели

Стилизованная панель

Вы можете добавлять классы или стили напрямую к TogglePanel

<script setup lang="ts">
import { TogglePanel } from "luna";
</script>
<template>
  <TogglePanel class="panel" :init-state="false"
                              title="Сворачиваемая панель">
    <template v-slot:actions>
      <button type="button"
              class="button button-icon button-transparent icon-plus"
              title="Действие"></button>
    </template>
    Содержимое панели
  </TogglePanel>
</template>

Сворачиваемая панель

Содержимое панели

Параметры

store-key: string - если задан, то будет хранить состояние панели в localStorage.

init-state: boolean - Исходное состояние панели. true - раскрыта, false - свернута.

События

@toggle: boolean - вызывается при изменении состояния панели