HoshinoSuzumi/rayine-ui
1
0
Fork 0
mirror of https://github.com/HoshinoSuzumi/rayine-ui.git synced 2025-04-25 11:36:55 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

💄 Adjust message styles

Browse Source
This commit is contained in:
Timothy Yin 2024-11-16 17:01:26 +08:00
parent cc57e2e473
commit 6daefcfc69
2 changed files with 19 additions and 13 deletions
.playground/pages
index.vue
components/overlays
Message.vue

24
.playground/pages/index.vue
View File

@ -1,11 +1,5 @@
<script lang="ts" setup> <script lang="ts" setup>
const message = useMessage(); const message = useMessage();
const count = ref(1)
const info = () => {
message.info(`message ${count.value++}`);
}
</script> </script>
<template> <template>
@ -36,11 +30,23 @@ const info = () => {
</div> </div>
<div class="border border-neutral-200 dark:border-neutral-700 rounded-lg"> <div class="border border-neutral-200 dark:border-neutral-700 rounded-lg">
<div class="p-4 border-b border-neutral-200 dark:border-neutral-700"> <div class="p-4 border-b border-neutral-200 dark:border-neutral-700">
<button class="bg-indigo-400 text-white border border-indigo-400 px-2 py-0.5 rounded-lg" <div class="flex items-center gap-2">
@click="info">info</button> <button class="bg-indigo-400 text-white text-sm border border-indigo-400 px-2.5 py-1 rounded-lg"
@click="message.info('message info', 10000)">Info 10s</button>
<button class="bg-indigo-400 text-white text-sm border border-indigo-400 px-2.5 py-1 rounded-lg"
@click="message.success('message success')">Success</button>
<button class="bg-indigo-400 text-white text-sm border border-indigo-400 px-2.5 py-1 rounded-lg"
@click="message.warning('message warning')">Warning</button>
<button class="bg-indigo-400 text-white text-sm border border-indigo-400 px-2.5 py-1 rounded-lg"
@click="message.error('message error')">Error</button>
</div>
</div> </div>
<div class="p-4"> <div class="p-4">
<Shiki class="text-sm" lang="ts" :code="`const message = useMessage();\n\nmessage.info('Hello Rayine');`" /> <Shiki class="text-sm" lang="ts" :code="`const message = useMessage();\n
message.info('message info', 10000);
message.success('message success');
message.warning('message warning');
message.error('message error');`" />
</div> </div>
</div> </div>

8
components/overlays/Message.vue
View File

@ -21,10 +21,6 @@ onMounted(() => {
<template> <template>
<div class="message" :class="{ <div class="message" :class="{
'!text-blue-500 !border-blue-400 !bg-blue-50': message.type === 'info',
'!text-emerald-500 !border-emerald-400 !bg-emerald-50': message.type === 'success',
'!text-orange-500 !border-orange-400 !bg-orange-50': message.type === 'warning',
'!text-rose-500 !border-rose-400 !bg-rose-50': message.type === 'error',
[message.type]: message.type [message.type]: message.type
}"> }">
<IconCircleSuccess v-if="message.type === 'success'" class="text-xl" /> <IconCircleSuccess v-if="message.type === 'success'" class="text-xl" />
@ -46,17 +42,21 @@ onMounted(() => {
.message.info { .message.info {
box-shadow: 0 4px 12px rgba(59, 130, 246, .2); box-shadow: 0 4px 12px rgba(59, 130, 246, .2);
@apply !text-blue-500 !border-blue-400 !bg-blue-50 dark:!text-blue-300 dark:!border-blue-600 dark:!bg-blue-900;
} }
.message.success { .message.success {
box-shadow: 0 4px 12px rgba(16, 185, 129, .2); box-shadow: 0 4px 12px rgba(16, 185, 129, .2);
@apply !text-emerald-500 !border-emerald-400 !bg-emerald-50 dark:!text-emerald-300 dark:!border-emerald-600 dark:!bg-emerald-900;
} }
.message.warning { .message.warning {
box-shadow: 0 4px 12px rgba(249, 115, 22, .2); box-shadow: 0 4px 12px rgba(249, 115, 22, .2);
@apply !text-orange-500 !border-orange-400 !bg-orange-50 dark:!text-orange-300 dark:!border-orange-600 dark:!bg-orange-900;
} }
.message.error { .message.error {
box-shadow: 0 4px 12px rgba(244, 63, 94, .2); box-shadow: 0 4px 12px rgba(244, 63, 94, .2);
@apply !text-rose-500 !border-rose-400 !bg-rose-50 dark:!text-rose-300 dark:!border-rose-600 dark:!bg-rose-900;
} }
</style> </style>