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

Banner 全宽提示

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

基础用法

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

背景 视口
系统将于今晚 22:00 - 22:30 进行维护，部分功能可能不可用。
src/App.vue 
<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>
import { CfBanner } from '@chufix-design/react';

export default function Demo() {
  return (
    <>
      <CfBanner tone="info">
      系统将于今晚 22:00 - 22:30 进行维护，部分功能可能不可用。
      </CfBanner>
    </>
  );
}
import { CfBanner } from '@chufix-design/react';

export default function Demo() {
  return (
    <>
      <CfBanner tone="info">
      系统将于今晚 22:00 - 22:30 进行维护，部分功能可能不可用。
      </CfBanner>
    </>
  );
}

6 种 tone

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

背景 视口
info — 蓝色，中性公告
success — 绿色，确认已完成
warning — 黄色，需要注意
danger — 红色，紧急中断
accent — 主色，营销 / 新版本
neutral — 灰色，与页面背景对比小
src/App.vue 
<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>
import { CfBanner } from '@chufix-design/react';

export default function Demo() {
  return (
    <>
      <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>
    </>
  );
}
import { CfBanner } from '@chufix-design/react';

export default function Demo() {
  return (
    <>
      <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 天，及时升级避免服务中断。
检测到异常登录，请立即修改密码。
src/App.vue 
<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>
import { CfBanner, CfButton } from '@chufix-design/react';

export default function Demo() {
  return (
    <>
      <CfBanner
      variant="solid"
      tone="accent"
      dismissible
      action={<CfButton size="sm" variant="ghost">查看更新</CfButton>}
      >
      新版本 v2.0 上线 — 全新主题与三套密度
      </CfBanner>
    </>
  );
}
import { CfBanner, CfButton } from '@chufix-design/react';

export default function Demo() {
  return (
    <>
      <CfBanner
      variant="solid"
      tone="accent"
      dismissible
      action={<CfButton size="sm" variant="ghost">查看更新</CfButton>}
      >
      新版本 v2.0 上线 — 全新主题与三套密度
      </CfBanner>
    </>
  );
}

关闭按钮 + 操作槽

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

背景 视口
存储空间已使用 86%，请尽快清理或升级配额。
点右侧 × 可关闭，并触发 dismiss 事件。
src/App.vue 
<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>
import { CfBanner, CfButton } from '@chufix-design/react';

export default function Demo() {
  return (
    <>
      <CfBanner
      tone="warning"
      dismissible
      action={<CfButton size="sm" variant="tertiary">清理</CfButton>}
      >
      存储空间已使用 86%，请尽快清理或升级配额。
      </CfBanner>
    </>
  );
}
import { CfBanner, CfButton } from '@chufix-design/react';

export default function Demo() {
  return (
    <>
      <CfBanner
      tone="warning"
      dismissible
      action={<CfButton size="sm" variant="tertiary">清理</CfButton>}
      >
      存储空间已使用 86%，请尽快清理或升级配额。
      </CfBanner>
    </>
  );
}

吸顶滚动

sticky 给 banner 加 position: sticky; top: 0，长页面滚动时它会粘在视口顶部。需要外层容器形成滚动上下文 —— 通常是 <body> 自身，也可以是某个带 overflow: auto 的祖先。

背景 视口
存储空间已使用 86% — 滚动下方内容时 banner 会粘在顶部。

第 1 段示例正文 —— sticky banner 通过 position: sticky 实现， 必须放在一个有滚动行为的祖先容器内（这里给外层加了 overflow:auto）。

第 2 段示例正文 —— sticky banner 通过 position: sticky 实现， 必须放在一个有滚动行为的祖先容器内（这里给外层加了 overflow:auto）。

第 3 段示例正文 —— sticky banner 通过 position: sticky 实现， 必须放在一个有滚动行为的祖先容器内（这里给外层加了 overflow:auto）。

第 4 段示例正文 —— sticky banner 通过 position: sticky 实现， 必须放在一个有滚动行为的祖先容器内（这里给外层加了 overflow:auto）。

第 5 段示例正文 —— sticky banner 通过 position: sticky 实现， 必须放在一个有滚动行为的祖先容器内（这里给外层加了 overflow:auto）。

第 6 段示例正文 —— sticky banner 通过 position: sticky 实现， 必须放在一个有滚动行为的祖先容器内（这里给外层加了 overflow:auto）。

第 7 段示例正文 —— sticky banner 通过 position: sticky 实现， 必须放在一个有滚动行为的祖先容器内（这里给外层加了 overflow:auto）。

第 8 段示例正文 —— sticky banner 通过 position: sticky 实现， 必须放在一个有滚动行为的祖先容器内（这里给外层加了 overflow:auto）。

src/App.vue 
<script setup lang="ts">
import { CfBanner, CfButton } from '@chufix-design/vue';
</script>
<template>
  <div class="adm-scroll">
    <CfBanner tone="warning" sticky dismissible>
      存储空间已使用 86% — 滚动下方内容时 banner 会粘在顶部。
      <template #action>
        <CfButton size="sm" variant="tertiary">清理</CfButton>
      </template>
    </CfBanner>
    <div class="adm-body">
      <p v-for="i in 8" :key="i">
        第 {{ i }} 段示例正文 —— sticky banner 通过 <code>position: sticky</code> 实现，
        必须放在一个有滚动行为的祖先容器内（这里给外层加了 <code>overflow:auto</code>）。
      </p>
    </div>
  </div>
</template>
<style scoped>
.adm-scroll {
  height: 240px;
  overflow: auto;
  border: 1px solid var(--line-1);
  border-radius: var(--r-4);
  background: var(--bg-1);
}
.adm-body { padding: 0 16px 16px; color: var(--fg-2); line-height: 1.7; }
.adm-body p { margin: 12px 0; }
code { font-family: var(--font-mono); font-size: 0.9em; color: var(--fg-2); }
</style>
<script setup>
import { CfBanner, CfButton } from '@chufix-design/vue';
</script>
<template>
  <div class="adm-scroll">
    <CfBanner tone="warning" sticky dismissible>
      存储空间已使用 86% — 滚动下方内容时 banner 会粘在顶部。
      <template #action>
        <CfButton size="sm" variant="tertiary">清理</CfButton>
      </template>
    </CfBanner>
    <div class="adm-body">
      <p v-for="i in 8" :key="i">
        第 {{ i }} 段示例正文 —— sticky banner 通过 <code>position: sticky</code> 实现，
        必须放在一个有滚动行为的祖先容器内（这里给外层加了 <code>overflow:auto</code>）。
      </p>
    </div>
  </div>
</template>
<style scoped>
.adm-scroll {
  height: 240px;
  overflow: auto;
  border: 1px solid var(--line-1);
  border-radius: var(--r-4);
  background: var(--bg-1);
}
.adm-body { padding: 0 16px 16px; color: var(--fg-2); line-height: 1.7; }
.adm-body p { margin: 12px 0; }
code { font-family: var(--font-mono); font-size: 0.9em; color: var(--fg-2); }
</style>
import { CfBanner, CfButton } from '@chufix-design/react';

export default function Demo() {
  return (
    <>
      <CfBanner
      tone="warning"
      sticky
      dismissible
      action={<CfButton size="sm" variant="tertiary">清理</CfButton>}
      >
      存储空间已使用 86%
      </CfBanner>
    </>
  );
}
import { CfBanner, CfButton } from '@chufix-design/react';

export default function Demo() {
  return (
    <>
      <CfBanner
      tone="warning"
      sticky
      dismissible
      action={<CfButton size="sm" variant="tertiary">清理</CfButton>}
      >
      存储空间已使用 86%
      </CfBanner>
    </>
  );
}

API

Props

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

Events

Vue 事件React 回调载荷类型说明
dismissonDismiss—用户点击 × 关闭按钮时触发，组件随后自卸

Slots / Children

Slot说明
default公告正文（React 端：children）
action文案与 × 之间的操作按钮 / 链接（React 端：action prop）
icon替换默认的左侧图标（React 端：icon prop 传 ReactNode）

反馈与讨论

Banner 全宽提示 的讨论

0
0 / 600
正在加载评论...