Window | AppBar

`AppBar`#

Description#

Window bar on any of the four sides, with slots for identity, title, content, center and actions.

Props#

position (PosicionDeLaBarra | null) — Bar position. Defaults to the surrounding frame’s position. Default: null.
title (string) — Window title. Default: ''.
minimizeLabel (string) — Accessible name for the minimize button.
maximizeLabel (string) — Accessible name for the maximize button.
closeLabel (string) — Accessible name for the close button.
controls (ControlDeVentana[]) — Which of the three window buttons are shown. Default: all three.

Emits#

minimize — Emitted when minimize is clicked.
maximize — Emitted when maximize is clicked.
close — Emitted when close is clicked.

Usage#

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
<script setup lang="ts">
import AppBar from '../window/AppBar.vue'
</script>

<template>
  <AppBar title="My application" position="top">
    <template #identidad>
      <img src="/logo.svg" alt="Logo" />
    </template>
    <template #acciones>
      <button>Settings</button>
    </template>
  </AppBar>
</template>