ChuFix UI v0.2.1
开发预览 更新于 2026-05-10

Banner 全宽提示

顶部全宽通告条 —— 6 种 tone × 2 种 variant，可关闭、可吸顶。

基础用法

最简形态 — 一段公告文案。Banner 默认 variant="subtle"：浅色底 + 强调色文字，最克制的全宽提示。

背景
系统将于今晚 22:00 - 22:30 进行维护，部分功能可能不可用。 
<script setup lang="ts">
import { CfBanner } from '@chufix-design/vue';
</script>

<template>
  <CfBanner tone="info">
    系统将于今晚 22:00 - 22:30 进行维护，部分功能可能不可用。
  </CfBanner>
</template>
<script setup>
import { CfBanner } from '@chufix-design/vue';
</script>

<template>
  <CfBanner tone="info">
    系统将于今晚 22:00 - 22:30 进行维护，部分功能可能不可用。
  </CfBanner>
</template>
<CfBanner tone="info">
系统将于今晚 22:00 - 22:30 进行维护，部分功能可能不可用。
</CfBanner>
<CfBanner tone="info">
系统将于今晚 22:00 - 22:30 进行维护，部分功能可能不可用。
</CfBanner>

6 种 tone

tone —— info（中性公告）/ success（已完成）/ warning（需注意）/ danger（紧急）/ accent（营销）/ neutral（最克制）。

背景
info — 蓝色，中性公告
success — 绿色，确认已完成
warning — 黄色，需要注意
danger — 红色，紧急中断
accent — 主色，营销 / 新版本
neutral — 灰色，与页面背景对比小
 
<script setup lang="ts">
import { CfBanner } from '@chufix-design/vue';
</script>

<template>
  <div style="display:flex; flex-direction:column; gap: 6px;">
    <CfBanner tone="info">info — 蓝色，中性公告</CfBanner>
    <CfBanner tone="success">success — 绿色，确认已完成</CfBanner>
    <CfBanner tone="warning">warning — 黄色，需要注意</CfBanner>
    <CfBanner tone="danger">danger — 红色，紧急中断</CfBanner>
    <CfBanner tone="accent">accent — 主色，营销 / 新版本</CfBanner>
    <CfBanner tone="neutral">neutral — 灰色，与页面背景对比小</CfBanner>
  </div>
</template>
<script setup>
import { CfBanner } from '@chufix-design/vue';
</script>

<template>
  <div style="display:flex; flex-direction:column; gap: 6px;">
    <CfBanner tone="info">info — 蓝色，中性公告</CfBanner>
    <CfBanner tone="success">success — 绿色，确认已完成</CfBanner>
    <CfBanner tone="warning">warning — 黄色，需要注意</CfBanner>
    <CfBanner tone="danger">danger — 红色，紧急中断</CfBanner>
    <CfBanner tone="accent">accent — 主色，营销 / 新版本</CfBanner>
    <CfBanner tone="neutral">neutral — 灰色，与页面背景对比小</CfBanner>
  </div>
</template>
<CfBanner tone="info">info</CfBanner>
<CfBanner tone="success">success</CfBanner>
<CfBanner tone="warning">warning</CfBanner>
<CfBanner tone="danger">danger</CfBanner>
<CfBanner tone="accent">accent</CfBanner>
<CfBanner tone="neutral">neutral</CfBanner>
<CfBanner tone="info">info</CfBanner>
<CfBanner tone="success">success</CfBanner>
<CfBanner tone="warning">warning</CfBanner>
<CfBanner tone="danger">danger</CfBanner>
<CfBanner tone="accent">accent</CfBanner>
<CfBanner tone="neutral">neutral</CfBanner>

实色 variant

variant="solid" 用 tone 的实色填底、白字，视觉权重最强，适合营销公告或紧急中断。

背景
新版本 v2.0 上线 — 全新主题与三套密度
您的免费额度还剩 3 天，及时升级避免服务中断。
检测到异常登录，请立即修改密码。 
<script setup lang="ts">
import { CfBanner, CfButton } from '@chufix-design/vue';
</script>

<template>
  <div style="display:flex; flex-direction:column; gap: 8px;">
    <CfBanner variant="solid" tone="accent" dismissible>
      新版本 v2.0 上线 — 全新主题与三套密度
      <template #action>
        <CfButton size="sm" variant="ghost" style="color: inherit;">查看更新</CfButton>
      </template>
    </CfBanner>
    <CfBanner variant="solid" tone="warning" dismissible>
      您的免费额度还剩 3 天，及时升级避免服务中断。
    </CfBanner>
    <CfBanner variant="solid" tone="danger">
      检测到异常登录，请立即修改密码。
    </CfBanner>
  </div>
</template>
<script setup>
import { CfBanner, CfButton } from '@chufix-design/vue';
</script>

<template>
  <div style="display:flex; flex-direction:column; gap: 8px;">
    <CfBanner variant="solid" tone="accent" dismissible>
      新版本 v2.0 上线 — 全新主题与三套密度
      <template #action>
        <CfButton size="sm" variant="ghost" style="color: inherit;">查看更新</CfButton>
      </template>
    </CfBanner>
    <CfBanner variant="solid" tone="warning" dismissible>
      您的免费额度还剩 3 天，及时升级避免服务中断。
    </CfBanner>
    <CfBanner variant="solid" tone="danger">
      检测到异常登录，请立即修改密码。
    </CfBanner>
  </div>
</template>
<CfBanner
variant="solid"
tone="accent"
dismissible
action={<CfButton size="sm" variant="ghost">查看更新</CfButton>}
>
新版本 v2.0 上线 — 全新主题与三套密度
</CfBanner>
<CfBanner
variant="solid"
tone="accent"
dismissible
action={<CfButton size="sm" variant="ghost">查看更新</CfButton>}
>
新版本 v2.0 上线 — 全新主题与三套密度
</CfBanner>

关闭按钮 + 操作槽

dismissible 在右侧加 × 关闭按钮 — 点击后整个 banner 移除并触发 dismiss / onDismiss。action 槽 / prop 在文案与 × 之间放一个操作按钮（清理 / 查看 / 续费）。

背景
存储空间已使用 86%，请尽快清理或升级配额。
点右侧 × 可关闭，并触发 dismiss 事件。 
<script setup lang="ts">
import { CfBanner, CfButton } from '@chufix-design/vue';
</script>

<template>
  <div style="display:flex; flex-direction:column; gap: 6px;">
    <CfBanner tone="warning" dismissible>
      存储空间已使用 86%，请尽快清理或升级配额。
      <template #action>
        <CfButton size="sm" variant="tertiary">清理</CfButton>
      </template>
    </CfBanner>
    <CfBanner tone="info" dismissible>
      点右侧 × 可关闭，并触发 dismiss 事件。
    </CfBanner>
  </div>
</template>
<script setup>
import { CfBanner, CfButton } from '@chufix-design/vue';
</script>

<template>
  <div style="display:flex; flex-direction:column; gap: 6px;">
    <CfBanner tone="warning" dismissible>
      存储空间已使用 86%，请尽快清理或升级配额。
      <template #action>
        <CfButton size="sm" variant="tertiary">清理</CfButton>
      </template>
    </CfBanner>
    <CfBanner tone="info" dismissible>
      点右侧 × 可关闭，并触发 dismiss 事件。
    </CfBanner>
  </div>
</template>
<CfBanner
tone="warning"
dismissible
action={<CfButton size="sm" variant="tertiary">清理</CfButton>}
>
存储空间已使用 86%，请尽快清理或升级配额。
</CfBanner>
<CfBanner
tone="warning"
dismissible
action={<CfButton size="sm" variant="tertiary">清理</CfButton>}
>
存储空间已使用 86%，请尽快清理或升级配额。
</CfBanner>

API

属性类型默认值说明
tone'info' | 'success' | 'warning' | 'danger' | 'accent' | 'neutral''info'语义色
variant'subtle' | 'solid''subtle'视觉模式
dismissiblebooleanfalse显示关闭 ×
iconbooleantrue是否显示左侧图标（Vue 端默认 true，可用 #icon slot 替换；React 端用 icon prop 传节点）
stickybooleanfalse是否吸顶（position: sticky）

事件：dismiss（React 端：onDismiss）。Slot：默认内容、action、icon（Vue）。

反馈与讨论

Banner 全宽提示 的讨论

0
0 / 600
一键发送
正在加载评论...