Skip to content

Contextual Bar

App-level notification bar.

Usage

Simple Usage

preview
vue
<template>
  <p-contextual-bar
    v-model="sample"
    title="Hey! This is Title Text and telling less" />
</template>

With Icon

preview
vue
<template>
  <p-contextual-bar v-model="sample" title="Hey! This is Title Text and telling less">
    <template #icon>
      <IconInfo />
    </template>
  </p-contextual-bar>
  <p-contextual-bar v-model="sample" title="Hey! This is Title Text and telling less">
    <template #icon>
      <img src="../avatar/assets/avatar.png" />
    </template>
  </p-contextual-bar>
</template>

<script setup>
import IconInfo from '@privyid/persona-icon/vue/information-circle-solid/20.vue'
</script>

With Action Button

preview
vue
<template>
  <p-contextual-bar v-model="sample" title="Hey! This is Title Text">
    <template #action>
      <p-button size="sm" color="info">Button text</p-button>
    </template>
  </p-contextual-bar>
</template>

With Two Action

preview
vue
<template>
  <p-contextual-bar v-model="sample" message="This is Title Text">
    <template #action>
      <p-button size="sm" color="info">Button</p-button>
      <p-button size="sm" color="info" variant="outline">Button</p-button>
    </template>
  </p-contextual-bar>
</template>

Additional Description

preview
vue
<template>
  <p-contextual-bar
    v-model="sample"
    title="Hey! This is Title Text"
    message="You will be unable to sign or seal a document" />
</template>

Additional Description With Action

preview
vue
<template>
  <p-contextual-bar
    v-model="sample"
    title="Hey! This is Title Text"
    message="You will be unable to sign or seal a document">
    <template #action>
      <p-button color="info" size="sm">Button</p-button>
    </template>
  </p-contextual-bar>
</template>

Custom Background Image

preview
vue
<template>
  <p-contextual-bar
    v-model="sample"
    title="Hey! This is Title Text"
    message="You will be unable to sign or seal a document"
    background-url="/assets/images/img-contextualbar-bg.svg">
    <template #icon>
      <img src="../avatar/assets/avatar.png" />
    </template>
  </p-contextual-bar>
</template>

State

Contextual Bar have 4 state variants: error, warning, info and neutral. Default is info

preview
vue
<template>
  <p-contextual-bar
    state="error"
    v-model="sample" title="Hey! This is Title Text and telling less" />
  <p-contextual-bar
    state="warning"
    v-model="sample" title="Hey! This is Title Text and telling less" />
  <p-contextual-bar
    state="info"
    v-model="sample" title="Hey! This is Title Text and telling less" />
  <p-contextual-bar
    state="neutral"
    v-model="sample" title="Hey! This is Title Text and telling less" />
</template>

Alignment

To align Contextual Bar content, use align prop. Available value are left, right and center

preview
vue
<template>
  <p-contextual-bar
    align="left"
    v-model="sample" title="Hey! This is Title Text" />
  <p-contextual-bar
    align="center"
    v-model="sample" title="Hey! This is Title Text" />
  <p-contextual-bar
    align="right"
    v-model="sample" title="Hey! This is Title Text" />
</template>
preview

API

Props

PropsTypeDefaultDescription
stateStringinfoContextualbar state variants, valid value is error, warning, info and neutral
alignStringleftContextualbar alignment, valid value is left, center and right
dismissableBooleantrueShow / Hide dismiss button
titleString-Content or title inside of Contextualbar
messageString-Additional message of Contextualbar
background-urlString-Custom background image of Contextualbar

Slots

NameDescription
title Title content to place in Contextualbar
message Additional message content to place in Contextualbar
icon Content to place icon in Contextualbar
action Content to place button in Contextualbar

Events

NameArgumentsDescription
close-Event when close button clicked
show-Event Contextualbar shown
hide-Event Contextualbar hidden

Released under the MIT License.