Banner 公告条

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

<template>
  <Stack class="w-full">
    <Banner tone="neutral">本站已启用新的评论系统。</Banner>
    <Banner tone="accent">Hina UI 1.2 已发布。</Banner>
    <Banner tone="info">当前浏览的是历史版本的文档。</Banner>
    <Banner tone="success">你的邮箱已完成验证。</Banner>
    <Banner tone="warning">本站将于今晚 02:00 停机维护。</Banner>
    <Banner tone="danger">支付服务暂时不可用，我们正在处理。</Banner>
    <Banner tone="accent" :icon="false">Hina UI 1.2 已发布。</Banner>
  </Stack>
</template>

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

<template>
  <Banner>
    <template #icon><Sparkles class="size-4 shrink-0" /></template>
    周年活动进行中，全站图书限时八折。
  </Banner>
</template>

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

<template>
  <Banner tone="info">
    当前浏览的是 1.x 版本的文档。
    <Link href="#" underline>前往最新版本</Link>
  </Banner>
</template>

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

<template>
  <Banner tone="warning">
    登录状态将在 5 分钟后过期。
    <template #actions>
      <Button size="sm" tone="neutral">延长登录</Button>
    </template>
  </Banner>
</template>

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

  const open = ref(true)
</script>

<template>
  <Stack class="min-h-24 w-full">
    <Banner v-model:open="open" tone="success" closable>你的邮箱已完成验证。</Banner>
    <Button variant="soft" tone="neutral" :disabled="open" class="self-start" @click="open = true">
      再次显示
    </Button>
  </Stack>
</template>

<script setup lang="ts">
  import { Sparkles } from '@lucide/vue'
  import { Banner, Link, type BannerNotice } from '@hina-ui/vue'

  const notices: (BannerNotice & { text: string; link?: string })[] = [
    { text: 'Hina UI 1.2 已发布。', link: '查看更新说明' },
    { text: '本站将于 3 月 1 日 02:00 至 04:00 停机维护。', tone: 'warning' },
    { text: '周年活动进行中，全站图书限时八折。', link: '了解详情', icon: Sparkles },
  ]
</script>

<template>
  <Banner :items="notices" closable>
    <template #item="{ item }">
      {{ item.text }}
      <Link v-if="item.link" href="#" underline>{{ item.link }}</Link>
    </template>
  </Banner>
</template>

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

  const notices = [
    { text: '新增书评 86 条，活跃读者 1,204 人。' },
    { text: '本周最受欢迎的作品是《狼と香辛料》。' },
    { text: '书架支持按标签筛选了。' },
  ]
</script>

<template>
  <Banner :items="notices" :autoplay="4000" tone="info">
    <template #item="{ item }">{{ item.text }}</template>
  </Banner>
</template>

<script setup lang="ts">
  import {
    AppShell,
    Banner,
    Heading,
    Link,
    NavLink,
    Sidebar,
    SidebarTrigger,
    Text,
  } from '@hina-ui/vue'
</script>

<template>
  <AppShell collapsible="hidden" class="border-line h-96 w-full rounded-lg border">
    <template #banner>
      <Banner closable>
        Hina UI 1.2 已发布。
        <Link href="#" underline>查看更新说明</Link>
      </Banner>
    </template>

    <template #sidebar>
      <Sidebar>
        <NavLink href="#" active label="首页">首页</NavLink>
        <NavLink href="#" label="我的书架">我的书架</NavLink>
      </Sidebar>
    </template>

    <template #header>
      <SidebarTrigger />
      <Heading :level="2" size="sm">首页</Heading>
    </template>

    <Text size="sm" tone="muted" class="block p-6">关闭公告条后，侧栏与主区域一起上移补满。</Text>
  </AppShell>
</template>