Usage
Example alert
<template>
<CAlert title="Example alert">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</CAlert>
</template>
Title
Use the title prop to display a title.
Alert example
<template>
<CAlert title="Alert example" />
</template>
Text
Use the text prop to display content. You can also use the #default slot for this.
Alert title
<template>
<CAlert title="Alert title" text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." />
</template>
Dismissable
Use the dismissable prop to display a close button. This will emit an @dismiss event on click.
Alert title
<template>
<CAlert title="Alert title" dismissable>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</CAlert>
</template>
Variants
Use the variant prop to display different Alert variants such as error.
Alert title
<template>
<CAlert title="Alert title" variant="error"
>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua.</CAlert
>
</template>
Slots
icon
Use the #icon slot to use a custom icon.
Props
| Prop | Default | Type |
|---|---|---|
title | string | |
text | string | |
variant | 'info' | "error" | "info" | "warning" | "success" |
items | [] | string[] |
dismissable | boolean | |
icon | string |