PersonaContextual Bar
App-level notification bar.
Usage
Simple Usage
vue
<template>
<p-contextual-bar
v-model="sample"
title="Hey! This is Title Text and telling less" />
</template>With Icon
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
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
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
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
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
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>Variants
Contextual Bar have 2 variants: light and dark. Default is light
vue
<template>
<p-contextual-bar
variant="light"
v-model="sample" title="Hey! This is Title Text and telling less" />
<p-contextual-bar
variant="dark"
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
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
| Props | Type | Default | Description |
|---|---|---|---|
variant | String | light | Contextualbar variants, valid value is light and dark |
align | String | left | Contextualbar alignment, valid value is left, center and right |
dismissable | Boolean | true | Show / Hide dismiss button |
title | String | - | Content or title inside of Contextualbar |
message | String | - | Additional message of Contextualbar |
background-url | String | - | Custom background image of Contextualbar |
Slots
| Name | Description |
|---|---|
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
| Name | Arguments | Description |
|---|---|---|
close | - | Event when close button clicked |
show | - | Event Contextualbar shown |
hide | - | Event Contextualbar hidden |