Banner

Stable

A conatiner including some info, warnings, errors or success messages.

<script setup lang="ts">
import { HBanner } from '@holistics/design-system'
</script>

<template>
  <HBanner
    type="info"
    title="A Design System for Holistics!"
    class="w-[36rem]"
  >
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </HBanner>
</template>

Examples

Types

<script setup lang="ts">
import { BANNER_TYPES, HBanner } from '@holistics/design-system'
</script>

<template>
  <div class="flex flex-wrap items-center justify-center gap-4">
    <HBanner
      v-for="type in BANNER_TYPES"
      :key="type"
      :type="type"
      :title="type.toUpperCase()"
      class="w-[28rem]"
    >
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </HBanner>
  </div>
</template>

With Button

<script setup lang="ts">
import { ALERT_TYPES, HAlert } from '@holistics/design-system'
</script>

<template>
  <div class="flex flex-wrap items-center justify-center gap-4">
    <HAlert
      v-for="type in ALERT_TYPES"
      :key="type"
      :type="type"
      :title="type.toUpperCase()"
      button="Clear"
      class="w-[28rem]"
    >
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </HAlert>
  </div>
</template>

Dismissible

<script setup lang="ts">
import {
  BANNER_TYPES, type BannerType, HBanner, HButton, type ButtonType,
} from '@holistics/design-system'
import { ref } from 'vue'

let id = 0

const baseBanners = BANNER_TYPES.map((type) => ({
  id: id++,
  type,
  title: type.toUpperCase(),
}))

const alerts = ref(baseBanners.slice())

function getButtonType (type: BannerType): ButtonType {
  switch (type) {
    case 'info': return 'outline-highlight'
    case 'neutral': return 'secondary-default'
    default: return `outline-${type}`
  }
}
function addBanner (type: BannerType) {
  alerts.value.push({
    ...baseBanners.find(((al) => al.type === type))!,
    id: id++,
  })
}

function onDismiss (i: number) {
  alerts.value.splice(i, 1)
}
</script>

<template>
  <div class="grid grid-cols-5 gap-x-4 gap-y-2">
    <HButton
      v-for="type in BANNER_TYPES"
      :key="type"
      :type="getButtonType(type)"
      icon="add"
      @click="addBanner(type)"
    >
      {{ type.toUpperCase() }}
    </HButton>
  </div>

  <div
    v-if="alerts.length"
    class="mt-8 space-y-2"
  >
    <HBanner
      v-for="(al, i) in alerts"
      :key="al.id"
      :type="al.type"
      :title="al.title"
      dismissible
      class="w-[32rem]"
      @dismiss="onDismiss(i)"
    >
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </HBanner>
  </div>
</template>

🗑️ Destroy component after dismiss!

Even though the component destroys its DOMs, its internal states still persist in VDOM. Therefore, you should manually unmount the component on @dismiss event.

Why? This is because a component cannot control its life-cycle, otherwise race conditions and memory leaks could happen!

API

Pass-through: <div>

What does this mean?

All props, events, and attrs that are not specified in the tables below will be passed to the element/component described above.

Props

Name	Type	Description
type *	"info" | "success" | "warning" | "danger" | "neutral"
theme	"inline" | "full-width" = "inline"
title	string
description	string
hideIcon	boolean
dismissible	boolean
dismissable	boolean
button	string | ButtonPropsPreTyped

Events

Name	Parameters	Description
@buttonClick	[e: MouseEvent]
@dismiss	[]

Slots

Name	Scoped	Description
#header	any
#default	any