AisBanner

The AisBanner is intended to be used for a couple different purposes. The first of which is identifying which environment your app is running in (dev, test, etc.). The second is for notifying customers of some important message, like upcoming maintenance.

Props

Env

A shortcut for displaying the application environment.

TEST Environment

<template>
  <AisBanner env="test"></AisBanner>
</template>

<script setup>
  import { AisBanner } from "@ais-public/ais-components";
</script>

<script>
export default {
  name: "AisBannerEnv"
}
</script>

Message

A shortcut for displaying a message in the banner.

Maintenance Scheduled for 05/25/2022 from 12:00am-2:00am

<template>
  <AisBanner message="Maintenance Scheduled for 05/25/2022 from 12:00am-2:00am"></AisBanner>
</template>

<script setup>
  import { AisBanner } from "@ais-public/ais-components";
</script>

<script>
export default {
  name: "AisBannerMessage"
}
</script>

Context & Variant

A shortcut for displaying key/value pairs. Each key/value pair will be displayed as "key: value". Each key/value pair will be separated/delimited by " ~ ".

TEST Environment

db: MAUITST ~ redis: instance123

<template>
  <AisBanner env="test"
             variant="danger"
             :context="{ db: 'MAUITST', redis: 'instance123' }"
  ></AisBanner>
</template>

<script setup>
  import { AisBanner } from "@ais-public/ais-components";
</script>

<script>
export default {
  name: "AisBannerContext"
}
</script>

Using Default Slot

The default slot is available to override the default layout for the banner.

Maintenance Scheduled for 05/25/2024 from 12:00am-2:00am

<template>
  <AisBanner>
    <div class="w-full p-1.5 flex items-center justify-center gap-8 bg-primary font-bold animate-pulse">
      <AisIcon :icon="faWrench"/>
      Maintenance Scheduled for 05/25/2024 from 12:00am-2:00am
      <AisIcon :icon="faWrench"/>
    </div>
  </AisBanner>
</template>

<script setup>
  import { AisBanner } from "@ais-public/ais-components";
  import { AisIcon } from "@ais-public/ais-components";
  import { faWrench } from '@fortawesome/free-solid-svg-icons';
  import { library } from '@fortawesome/fontawesome-svg-core';
  library.add(faWrench);
</script>

Component Reference

Props

Property	Type(s)	Required	Default	Description	Deprecated
context	Object		{}	An object of key/value pairs. Each key/value pair will be displayed as "key: value". Each key/value pair will be separated/delimited by " ~ ".	false
env	String		''	Shortcut for displaying the application environment. This value is capitalized and prepended to ' Environment'. For example, env="test" will result in "TEST Environment".	false
message	String		''	Shortcut for displaying a message in the banner.	false
padding	String		'p-1'	Applies the padding class(es) for the banner.	false
variant	String		undefined	Applies one of the theme color variants to the component.	false

Slots

Name	Scoped	Description
default	No	Default slot for custom rendering the banner

Events

Event	Arguments	Description