Banner (横幅)

<script setup lang="ts">
import { ref } from 'vue'

const open = ref(true)
</script>

<template>
  <div class="border-default-200 bg-background w-full overflow-hidden rounded-lg border">
    <KunBanner
      v-model="open"
      icon="lucide:info"
      text="论坛将于 9 月 28 日 02:00–04:00 停机维护,期间无法发帖和上传图片。"
    />
    <header class="border-default-200 flex items-center justify-between border-b px-4 py-3">
      <span class="font-bold">Kun<span class="text-primary-text">Gal</span></span>
      <nav class="text-foreground-muted flex gap-4 text-sm">
        <span>话题</span><span>Galgame</span><span>排行</span>
      </nav>
    </header>
    <div class="flex items-center justify-between gap-3 p-4 text-sm">
      <p class="text-default-600">点右侧的 × 关闭横幅,下面的内容会平滑上移。</p>
      <KunButton v-if="!open" size="sm" variant="flat" @click="open = true">
        重新显示
      </KunButton>
    </div>
  </div>
</template>

<template>
  <div class="border-default-200 w-full space-y-px overflow-hidden rounded-lg border">
    <KunBanner
      color="primary"
      :closable="false"
      text="新版本已上线,刷新页面即可体验。"
    />
    <KunBanner
      color="warning"
      icon="lucide:triangle-alert"
      :closable="false"
      text="图片上传暂时变慢,我们正在排查。"
    />
    <KunBanner
      color="danger"
      icon="lucide:circle-x"
      :closable="false"
      text="支付通道维护中,充值功能暂停使用。"
    />
    <KunBanner
      color="success"
      variant="flat"
      icon="lucide:circle-check"
      :closable="false"
      text="你的邮箱已验证,现在可以发帖了。"
    />
    <KunBanner
      color="default"
      variant="flat"
      :closable="false"
      text="本站仅收录已发售作品的资料。"
    />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const open = ref(true)
</script>

<template>
  <div class="border-default-200 bg-background w-full overflow-hidden rounded-lg border">
    <!-- actions 插槽拿到 dismiss:点"去投票"也会关闭横幅(并触发 close)。 -->
    <KunBanner v-model="open" color="primary" variant="flat">
      2026 年度 Galgame 投票开始了,<a href="#">查看规则</a>。
      <template #actions="{ dismiss }">
        <KunButton size="xs" color="primary" @click="dismiss">去投票</KunButton>
      </template>
    </KunBanner>
    <div class="flex items-center justify-between gap-3 p-4 text-sm">
      <p class="text-default-600">横幅里的链接自动沿用横幅的文字颜色并加下划线。</p>
      <KunButton v-if="!open" size="sm" variant="flat" @click="open = true">
        重新显示
      </KunButton>
    </div>
  </div>
</template>

<script setup lang="ts">
const sizes = ['md', 'sm'] as const
</script>

<template>
  <div class="w-full space-y-4">
    <figure v-for="size in sizes" :key="size" class="space-y-2">
      <figcaption class="text-foreground-muted text-xs">
        size="{{ size }}"{{ size === 'md' ? '(默认)' : '' }}
      </figcaption>
      <div class="border-default-200 bg-background overflow-hidden rounded-lg border">
        <KunBanner
          :size="size"
          color="danger"
          variant="flat"
          icon="lucide:eye-off"
          :closable="false"
          text="当前为全年龄模式,R18 内容已隐藏 — 可在右上角切换为「模糊」或「直接显示」。"
        />
        <header class="border-default-200 flex items-center justify-between border-b px-4 py-3">
          <span class="font-bold">Kun<span class="text-primary-text">Gal</span></span>
          <nav class="text-foreground-muted flex gap-4 text-sm">
            <span>话题</span><span>Galgame</span>
          </nav>
        </header>
        <p class="text-default-600 p-4 text-sm">横幅一直显示时,在窄屏上用 sm 少占一截高度。</p>
      </div>
    </figure>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const open = ref(true)
</script>

<template>
  <div class="border-default-200 bg-background w-full overflow-hidden rounded-lg border">
    <!-- 换一条公告就换一个 storage-key,关过旧公告的人会重新看到新的。 -->
    <KunBanner
      v-model="open"
      storage-key="docs-demo-2026-09"
      icon="lucide:info"
      text="关闭这条横幅后刷新页面,它不会再出现。"
    />
    <div class="flex items-center justify-between gap-3 p-4 text-sm">
      <p class="text-default-600">
        {{ open ? '横幅显示中。' : '已关闭,记录在 localStorage 里,刷新页面试试。' }}
      </p>
      <KunButton v-if="!open" size="sm" variant="flat" @click="open = true">
        重新显示
      </KunButton>
    </div>
  </div>
</template>