Morpheme

Appearance

Banner ​

The VBanner component is a Vue.js component that allows you to display a banner with various properties such as color, position, and transition. This component can also be made dismissible, sticky, fixed, and absolute.

Usage ​

Basic Usage ​

To use the banner component, you can use it in your template as follows:

Fixed ​

To display the banner as a fixed element at the top of the viewport, add fixed prop.

Sticky ​

To display the banner as a sticky element, which remains fixed to the top of the viewport until the user scrolls past it, add sticky prop.

Absolute ​

To display the banner as an absolutely positioned element, positioned relative to its nearest positioned ancestor, add absolute prop.

Top ​

Add top prop, to position the banner at the top of its container element.

Bottom ​

Add bottom prop, to position the banner at the bottom of its container element.

Primary ​

Displays the banner with a primary color scheme.

Secondary ​

Displays the banner with a secondary color scheme.

Info ​

Displays the banner with an informational color scheme.

Warning ​

Displays the banner with a warning color scheme.

Error ​

Displays the banner with an error color scheme.

Success ​

Displays the banner with a success color scheme.

Light ​

Displays the banner with a light color scheme.

Dark ​

Displays the banner with a dark color scheme.

White ​

Displays the banner with a white background color.

Custom Class ​

This example demonstrate how to apply custom CSS classes to the banner component to style it according to the developer's preferences.

Model Value ​

Use the v-model directive to bind the banner's visibility to a boolean value, allowing the component to be toggled on and off dynamically.

Props ​

NameTypeDefault valueDescription
modelValueBooleantrueControls whether the banner is visible or not.
colorBannerColors'primary'Specifies the color theme for the banner.
stickyBooleanfalseSets the banner to be sticky, meaning it will remain fixed in place as the user scrolls.
fixedBooleanfalseSets the banner to be fixed to the top of the viewport, regardless of scrolling.
absoluteBooleanfalseSets the banner to be positioned absolutely, relative to the nearest positioned ancestor element.
topBooleanfalsePositions the banner at the top of its parent container.
bottomBooleanfalsePositions the banner at the bottom of its parent container.
transitionString'v-banner-transition'Specifies the name of the CSS transition used when the banner appears or disappears.
centerBooleanfalseCenters the banner horizontally within its parent container.
dismissibleBooleanfalseAdds a dismiss button to the banner, allowing the user to hide it.

Events ​

NameDescription
update:modelValueEmitted whenever the value of the modelValue prop changes. The new value is passed as the first argument to the event handler.

Slots ​

NamePropsDescription
Defaultclose: Function, isOpen: BooleanThe default slot is where the content of the banner goes. It can receive a close function and an isOpen boolean as props.
prefixclose: Function, isOpen: BooleanUse this slot to add a prefix element to the banner. It can receive a close function and an isOpen boolean as props.
actionsclose: Function, isOpen: BooleanUse this slot to add actions to the banner. It can receive a close function and an isOpen boolean as props.

Standalone Installation ​

You can also install the Banner component individually via @morpheme/banner package:

bash
npm i @morpheme/banner
npm i @morpheme/banner

Then, use it like so:

vue
<script setup lang="ts">
import VBanner from '@morpheme/banner';
import '@morpheme/banner/dist/style.css';
// or load SCSS styles (requires `sass`)
import '@morpheme/banner/src/VBanner.scss';
</script>

<template>
  <VBanner color="primary">
    <VBannerText>
      Welcome to the <span class="font-semibold">Morpheme</span> Design System
    </VBannerText>
    <template #actions="{close}">
      <VBtn
        text
        flush
        @click="close"
        class="!text-white"
        prefix-icon="ri:close-line"
      />
    </template>
  </VBanner>
</template>
<script setup lang="ts">
import VBanner from '@morpheme/banner';
import '@morpheme/banner/dist/style.css';
// or load SCSS styles (requires `sass`)
import '@morpheme/banner/src/VBanner.scss';
</script>

<template>
  <VBanner color="primary">
    <VBannerText>
      Welcome to the <span class="font-semibold">Morpheme</span> Design System
    </VBannerText>
    <template #actions="{close}">
      <VBtn
        text
        flush
        @click="close"
        class="!text-white"
        prefix-icon="ri:close-line"
      />
    </template>
  </VBanner>
</template>

Storybook ​

View Storybook documentation here.