Message
v1.2.0
The message component is used to display a message to the user
Usage
First add the <RayMessages> component to your app.vue.
app.vue
<template>
<NuxtLayout>
<NuxtPage />
</NuxtLayout>
<RayMessages />
</template>
Then, use the useMessage composable to add messages to your app anywhere you want.
pages/index.vue
<script lang="ts" setup>
const message = useMessage()
const showMessage = () => {
message.add({
content: 'Hello RayineSoft',
type: 'success',
})
}
</script>
<template>
<RayButton label="Show Message" @click="showMessage" />
</template>
Type
Multiple preset styles with icons and colors.
Hello RayineSoft
<template>
<RayMessage type="info" content="Hello RayineSoft" />
</template>
Icon
Or you can use the icon prop to change the icon of the message.
Thanks for activating
<template>
<RayMessage icon="tabler:circle-key" content="Thanks for activating" />
</template>
Color
Use the color prop to change the color of the message.
Hello RayineSoft
<template>
<RayMessage color="amber" content="Hello RayineSoft" />
</template>
API
Props
| Prop | Default | Type |
|---|---|---|
| color | undefined | string | undefined |
| icon | null | string | undefined |
| type | config.default.type | "info" | "success" | "warning" | "error" | undefined |
| ui | {} | ({ wrapper?: string | undefined; container?: string | undefined; shadow?: string | undefined; rounded?: string | undefined; border?: string | undefined; background?: string | undefined; content?: string | undefined; type?: DeepPartial<...> | undefined; default?: DeepPartial<...> | undefined; } & { ...; } & { ...; })... |
| content | "" | string | undefined |
| duration | config.default.duration | number | undefined |
| id | undefined | string | undefined |
Theme
{
wrapper: 'mx-auto w-fit pointer-events-auto',
container: 'px-2 py-1.5 border flex items-center gap-1.5',
shadow: 'shadow-md shadow-{color}-100 dark:shadow-{color}-900',
rounded: 'rounded-md',
border: 'border-{color}-400 dark:border-{color}-600',
background: 'bg-{color}-50 dark:bg-{color}-900',
content: 'text-xs font-sans font-bold text-{color}-500 dark:text-{color}-300',
type: {
success: {
color: 'emerald',
icon: 'tabler:circle-check'
},
warning: {
color: 'amber',
icon: 'tabler:alert-circle'
},
error: {
color: 'red',
icon: 'tabler:circle-x'
},
info: {
color: 'blue',
icon: 'tabler:info-circle'
}
},
default: {
type: 'info',
color: 'primary',
duration: 4000
}
}