Alert 消息条

<script setup lang="ts">
  import { Alert, Stack } from '@hina-ui/vue'
</script>

<template>
  <Stack class="w-full max-w-xl">
    <Alert>已保存到草稿箱。</Alert>
    <Alert tone="accent">新版本已经可用，刷新页面即可体验。</Alert>
    <Alert tone="info">本页内容来自用户投稿，尚未经过审核。</Alert>
    <Alert tone="success">文章已发布。</Alert>
    <Alert tone="warning">登录状态即将过期，请尽快保存。</Alert>
    <Alert tone="danger">发布失败，请稍后重试。</Alert>
    <Alert tone="success" :icon="false">文章已发布。</Alert>
  </Stack>
</template>

<script setup lang="ts">
  import { Alert } from '@hina-ui/vue'
  import { Sparkles } from '@lucide/vue'
</script>

<template>
  <Alert tone="accent" class="w-full max-w-xl">
    <template #icon><Sparkles class="text-accent-text mt-0.5 size-5 shrink-0" /></template>
    新版本已经可用，刷新页面即可体验。
  </Alert>
</template>

<script setup lang="ts">
  import { Alert } from '@hina-ui/vue'
</script>

<template>
  <Alert tone="warning" title="登录状态即将过期" class="w-full max-w-xl">
    请在五分钟内保存正在编辑的内容，否则需要重新登录。
  </Alert>
</template>

<script setup lang="ts">
  import { ref } from 'vue'
  import { Alert, Button, Stack } from '@hina-ui/vue'

  const open = ref(true)
</script>

<template>
  <Stack class="min-h-28 w-full max-w-xl">
    <Alert v-model:open="open" tone="success" closable>文章已发布。</Alert>
    <Button variant="soft" tone="neutral" :disabled="open" class="self-start" @click="open = true">
      再次显示
    </Button>
  </Stack>
</template>

<script setup lang="ts">
  import { Alert, Button } from '@hina-ui/vue'
</script>

<template>
  <Alert tone="info" title="有新的评论" class="w-full max-w-xl">
    你的文章收到了 3 条新评论。
    <template #actions>
      <Button size="sm" variant="soft" tone="neutral">稍后</Button>
      <Button size="sm">查看</Button>
    </template>
  </Alert>
</template>