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

Properties

Name
Type
Default
Value
bottom
Boolean
false
closeButtonTitle
String
Close
parent
String
show
Boolean
false

Emits

Event
open
close

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>
Improve this page
Last Updated:
Contributors: Stefan Pfaffel