Banner

Platzieren Sie ein Banner oben auf Ihrer Website, um die Benutzer über wichtige Informationen zu informieren.

Bearbeiten

Titel

Verwenden Sie die title-Prop, um einen Titel auf dem Banner anzuzeigen.

title

<template>
  <UBanner title="This is a banner with an important message." />
</template>

Icon (englisch)

Verwenden Sie die icon prop, um ein Symbol auf dem Banner anzuzeigen.

icon

<template>
  <UBanner icon="i-lucide-info" title="This is a banner with an icon." />
</template>

color Bearbeiten

Verwenden Sie die color prop, um die Farbe des Banners zu ändern.

color

<template>
  <UBanner color="neutral" icon="i-lucide-info" title="This is a banner with an icon." />
</template>

Schließen

Verwenden Sie die close-Prop, um einen Button anzuzeigen, um das Banner zu schließen.

Ein close-Ereignis wird ausgegeben, wenn der Schließen-Button angeklickt wird.

<template>
  <UBanner id="example" title="This is a closable banner." close />
</template>

Beim Schließen wird banner-${id} im lokalen Speicher gespeichert, um zu verhindern, dass es erneut angezeigt wird.: br Im obigen Beispiel wird banner-example im lokalen Speicher gespeichert.

Um den Status dismissed über Seiten-Reloads hinweg beizubehalten, müssen Sie eine id-Prop angeben. Ohne ein explizites id wird das Banner nur für die aktuelle Sitzung ausgeblendet und beim Seiten-Reload wieder angezeigt.

Close Symbol

Verwenden Sie die close-icon-Prop, um die Schließen-Taste Icon. Defaults auf i-lucide-x.

<template>
  <UBanner
    title="This is a closable banner with a custom close icon."
    close
    close-icon="i-lucide-x-circle"
  />
</template>

Sie können dieses Symbol global in Ihrem app.config.ts unter der ui.icons.close-Taste.

Sie können dieses Symbol global in Ihrem vite.config.ts unter der ui.icons.close-Taste.

Actions Bearbeiten

Verwenden Sie die actions-Prop, um einige Button-Aktionen zum Banner hinzuzufügen.

<script setup lang="ts">
import type { ButtonProps } from '@nuxt/ui'

const actions = ref<ButtonProps[]>([
  {
    label: 'Action 1',
    variant: 'outline'
  },
  {
    label: 'Action 2',
    trailingIcon: 'i-lucide-arrow-right'
  }
])
</script>

<template>
  <UBanner title="This is a banner with actions." :actions="actions" />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import type { ButtonProps } from '@nuxt/ui'

const actions = ref<ButtonProps[]>([
  {
    label: 'Action 1',
    variant: 'outline'
  },
  {
    label: 'Action 2',
    trailingIcon: 'i-lucide-arrow-right'
  }
])
</script>

<template>
  <UBanner title="This is a banner with actions." :actions="actions" />
</template>

Die Aktionsbuttons sind standardmäßig color="neutral" und size="xs". Sie können diese Werte anpassen, indem Sie sie direkt an jede Aktionsschaltfläche übergeben.

Link ist

Sie können jede Eigenschaft der Komponente <NuxtLink> übergeben, z. B. to, target, rel usw.

color

<template>
  <UBanner
    to="https://nuxtlabs.com/"
    target="_blank"
    title="NuxtLabs is joining Vercel!"
    color="primary"
  />
</template>

Die NuxtLink-Komponente erbt alle anderen Attribute, die Sie an die User-Komponente übergeben.

Examples (Beispiele)

Innerhalb von `app.vue`

Verwenden Sie die Banner-Komponente in Ihrem app.vue oder in einem Layout:

app.vue

<template>
  <UApp>
    <UBanner icon="i-lucide-construction" title="Nuxt UI v4 has been released!" />

    <UHeader />

    <UMain>
      <NuxtLayout>
        <NuxtPage />
      </NuxtLayout>
    </UMain>

    <UFooter />
  </UApp>
</template>

API

Props Bearbeiten

Prop	Default	Type
`as`	`'div'`	`any` The element or component this component should render as.
`id`		`string` A unique id saved to local storage to remember if the banner has been dismissed. Without an explicit id, the banner will not be persisted and will reappear on page reload.
`icon`		`any` The icon displayed next to the title.
`title`		`string`
`actions`		`ButtonProps[]` Display a list of actions next to the title. `{ color: 'neutral', size: 'xs' }`
`to`		`string \| it \| et`
`target`		`null \| "_blank" \| "_parent" \| "_self" \| "_top" \| string`
`color`	`'primary'`	`"error" \| "primary" \| "secondary" \| "success" \| "info" \| "warning" \| "neutral"`
`close`	`false`	`boolean \| Omit<ButtonProps, LinkPropsKeys>` Display a close button to dismiss the banner. `{ size: 'md', color: 'neutral', variant: 'ghost' }`
`closeIcon`	`appConfig.ui.icons.close`	`any` The icon displayed in the close button.
`ui`		`{ root?: SlotClass; container?: SlotClass; left?: SlotClass; center?: SlotClass; right?: SlotClass; icon?: SlotClass; title?: SlotClass; actions?: SlotClass; close?: SlotClass; }`

Slots Bearbeiten

Slot	Type
`leading`	`{ ui: object; }`
`title`	`{}`
`actions`	`{}`
`close`	`{ ui: object; }`

Emits (englisch)

Event	Type
`close`	`[]`

Theme Bearbeiten

app.config.ts

export default defineAppConfig({
  ui: {
    banner: {
      slots: {
        root: [
          'relative z-50 w-full',
          'transition-colors'
        ],
        container: 'flex items-center justify-between gap-3 h-12',
        left: 'hidden lg:flex-1 lg:flex lg:items-center',
        center: 'flex items-center gap-1.5 min-w-0',
        right: 'lg:flex-1 flex items-center justify-end',
        icon: 'size-5 shrink-0 text-inverted pointer-events-none',
        title: 'text-sm text-inverted font-medium truncate',
        actions: 'flex gap-1.5 shrink-0 isolate',
        close: 'text-inverted hover:bg-default/10 focus-visible:bg-default/10 -me-1.5 lg:me-0'
      },
      variants: {
        color: {
          primary: {
            root: 'bg-primary'
          },
          secondary: {
            root: 'bg-secondary'
          },
          success: {
            root: 'bg-success'
          },
          info: {
            root: 'bg-info'
          },
          warning: {
            root: 'bg-warning'
          },
          error: {
            root: 'bg-error'
          },
          neutral: {
            root: 'bg-inverted'
          }
        },
        to: {
          true: {
            root: 'outline-(--ui-bg)/25 -outline-offset-3 has-[>a:focus-visible]:outline-3'
          }
        }
      },
      compoundVariants: [
        {
          color: 'primary',
          to: true,
          class: {
            root: 'hover:bg-primary/90'
          }
        },
        {
          color: 'neutral',
          to: true,
          class: {
            root: 'hover:bg-inverted/90'
          }
        }
      ],
      defaultVariants: {
        color: 'primary'
      }
    }
  }
})

vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'

export default defineConfig({
  plugins: [
    vue(),
    ui({
      ui: {
        banner: {
          slots: {
            root: [
              'relative z-50 w-full',
              'transition-colors'
            ],
            container: 'flex items-center justify-between gap-3 h-12',
            left: 'hidden lg:flex-1 lg:flex lg:items-center',
            center: 'flex items-center gap-1.5 min-w-0',
            right: 'lg:flex-1 flex items-center justify-end',
            icon: 'size-5 shrink-0 text-inverted pointer-events-none',
            title: 'text-sm text-inverted font-medium truncate',
            actions: 'flex gap-1.5 shrink-0 isolate',
            close: 'text-inverted hover:bg-default/10 focus-visible:bg-default/10 -me-1.5 lg:me-0'
          },
          variants: {
            color: {
              primary: {
                root: 'bg-primary'
              },
              secondary: {
                root: 'bg-secondary'
              },
              success: {
                root: 'bg-success'
              },
              info: {
                root: 'bg-info'
              },
              warning: {
                root: 'bg-warning'
              },
              error: {
                root: 'bg-error'
              },
              neutral: {
                root: 'bg-inverted'
              }
            },
            to: {
              true: {
                root: 'outline-(--ui-bg)/25 -outline-offset-3 has-[>a:focus-visible]:outline-3'
              }
            }
          },
          compoundVariants: [
            {
              color: 'primary',
              to: true,
              class: {
                root: 'hover:bg-primary/90'
              }
            },
            {
              color: 'neutral',
              to: true,
              class: {
                root: 'hover:bg-inverted/90'
              }
            }
          ],
          defaultVariants: {
            color: 'primary'
          }
        }
      }
    })
  ]
})

Some colors in compoundVariants are omitted for readability. Check out the source code on GitHub.

Changelog (englisch)

No recent changes

Badge

A short text to represent a status or a category.

Button

A button element that can act as a link or trigger an action.