Banner since v0.11.0

A banner can show context-specific information. It can be closed programmatically, or by the user. If the parent prop is specified, the element will be appended to the parent element. Thus, the parent element must exist before we render the Banner. If parent is falsy, the Banner will be added at the current position in the element tree.

Uses Teleport under the hood.

Preview

Example

<template>
    <Banner :show="true">
        Please confirm your email address by clicking 
        the link in the confirmation email.
    </Banner>
</template>

<script setup lang="ts">
import { Banner } from '@discue/ui-components';
</script>