Panel

Titled box with actions, toggleable

A titled box of related content inside a page — a settings group, a side summary. It is a section named by its title. For the page's own sections, use Section; for items in a set, Card.

Basic

On air

TOKYO MX 木曜 24:00〜 · BS11 金曜 23:30〜

updated 2019.09.25

Staff

原作：丸戸史明 · 監督：亀井幹太

<script setup lang="ts">
import { BlessButton, BlessPanel } from "blessing-ui";
</script>

<template>
  <div class="row" style="align-items: flex-start">
    <BlessPanel title="On air" style="width: 300px">
      TOKYO MX 木曜 24:00〜 · BS11 金曜 23:30〜
      <template #footer>updated 2019.09.25</template>
    </BlessPanel>
    <BlessPanel title="Staff" toggleable surface="surface" style="width: 300px">
      <template #actions><BlessButton size="sm" variant="ghost">Edit</BlessButton></template>
      原作：丸戸史明 · 監督：亀井幹太
    </BlessPanel>
  </div>
</template>

• level sets the title's heading level (3 by default) so it fits the page's outline.
• toggleable adds a button named by the title that collapses the body (v-model:collapsed); #actions sits beside it.

Usage

import { BlessPanel } from "blessing-ui";

API

Props

Name	Type	Default	Description
title	string	—
toggleable	boolean	—
surface	"surface" | "bg"	"bg"
level	2 | 3 | 4 | 5 | 6	3	heading level of the title, to fit the page's outline
collapsed	boolean	false

Events

Name	Payload	Description
update:collapsed	[value: boolean]

Slots

Name	Scope	Description
title	—
actions	—
default	—
footer	—