Banner
简介
Banner 组件用于在页面顶部显示醒目的横幅信息，通常用于展示重要的标语、公告或营销信息。
组件特性：
- 支持多种预设颜色（primary/secondary/success/warning/error/info）
- 可自定义样式和背景
- 支持多种动画效果选择
- 响应式设计，适配不同屏幕尺寸
Props
animation
动画效果类型，可选值：none（无动画）、fade（仅淡入）、slide（仅上滑）、both（淡入和上滑）。
这是一个没有动画的横幅
这是一个只有淡入动画的横幅
---
import { Banner } from "@coffic/cosy-ui";
---
<Banner animation="none">这是一个没有动画的横幅</Banner>
---
import { Banner } from "@coffic/cosy-ui";
---
<Banner animation="fade">这是一个只有淡入动画的横幅</Banner>
---
import { Banner } from "@coffic/cosy-ui";
---
<Banner animation="slide">这是一个只有上滑动画的横幅</Banner>
---
import { Banner } from "@coffic/cosy-ui";
---
<Banner animation="both">这是一个同时有淡入和上滑动画的横幅</Banner>
bgColor
背景颜色，支持基础颜色和渐变色彩。
---
import { Banner } from "@coffic/cosy-ui";
---
<Banner bgColor="primary">这是一个主要颜色的横幅</Banner>
---
import { Banner } from "@coffic/cosy-ui";
---
<Banner bgColor="secondary">这是一个次要颜色的横幅</Banner>
---
import { Banner } from "@coffic/cosy-ui";
---
<Banner bgColor="success">这是一个成功颜色的横幅</Banner>
---
import { Banner } from "@coffic/cosy-ui";
---
<Banner bgColor="warning">这是一个警告颜色的横幅</Banner>
---
import { Banner } from "@coffic/cosy-ui";
---
<Banner bgColor="error">这是一个危险颜色的横幅</Banner>
---
import { Banner } from "@coffic/cosy-ui";
---
<Banner bgColor="info">这是一个信息颜色的横幅</Banner>
---
import { Banner } from "@coffic/cosy-ui";
---
<Banner bgColor="gradient-sky">天空渐变横幅</Banner>
---
import { Banner } from "@coffic/cosy-ui";
---
<Banner bgColor="gradient-sunset">日落渐变横幅</Banner>
---
import { Banner } from "@coffic/cosy-ui";
---
<Banner bgColor="gradient-forest">森林渐变横幅</Banner>
---
import { Banner } from "@coffic/cosy-ui";
---
<Banner bgColor="gradient-ocean">海洋渐变横幅</Banner>
---
import { Banner } from "@coffic/cosy-ui";
---
<Banner bgColor="gradient-mountain">山脉渐变横幅</Banner>
---
import { Banner } from "@coffic/cosy-ui";
---
<Banner bgColor="gradient-flower">花朵渐变横幅</Banner>
---
import { Banner } from "@coffic/cosy-ui";
---
<Banner bgColor="gradient-watermelon">西瓜渐变横幅</Banner>
---
import { Banner } from "@coffic/cosy-ui";
---
<Banner bgColor="gradient-lemon">柠檬渐变横幅</Banner>
---
import { Banner } from "@coffic/cosy-ui";
---
<Banner bgColor="gradient-grape">葡萄渐变横幅</Banner>
---
import { Banner } from "@coffic/cosy-ui";
---
<Banner bgColor="gradient-blueberry">蓝莓渐变横幅</Banner>
---
import { Banner } from "@coffic/cosy-ui";
---
<Banner bgColor="gradient-mango">芒果渐变横幅</Banner>
---
import { Banner } from "@coffic/cosy-ui";
---
<Banner bgColor="gradient-kiwi">奇异果渐变横幅</Banner>
---
import { Banner } from "@coffic/cosy-ui";
---
<Banner bgColor="gradient-pitaya">火龙果渐变横幅</Banner>
---
import { Banner } from "@coffic/cosy-ui";
---
<Banner bgColor="gradient-banana">香蕉渐变横幅</Banner>
class
自定义 CSS 类名，用于覆盖默认样式。
---
import { Banner } from "@coffic/cosy-ui";
---
<Banner class="cosy:border cosy:border-base-300 cosy:rounded-2xl">
使用 class 增加边框与更大圆角
</Banner>
---
import { Banner } from "@coffic/cosy-ui";
---
<Banner class="cosy:shadow-lg cosy:hover:shadow-xl">
使用 class 增强阴影与悬停效果
</Banner>
style
自定义 CSS 样式，用于覆盖默认样式。
---
import { Banner } from "@coffic/cosy-ui";
---
<Banner
style="background: linear-gradient(135deg, #60a5fa, #c084fc, #f472b6); color: white;">
使用 style 设置线性渐变背景
</Banner>
---
import { Banner } from "@coffic/cosy-ui";
---
<Banner style="border-radius: 24px; box-shadow: 0 10px 25px rgba(0,0,0,0.12);">
使用 style 自定义圆角与阴影
</Banner>
textColor
文本颜色，默认根据背景色自动设置，可手动指定颜色值。
---
import { Banner } from "@coffic/cosy-ui";
---
<Banner bgColor="gradient-blueberry" textColor="white">
textColor="white" 用于深色渐变背景
</Banner>
---
import { Banner } from "@coffic/cosy-ui";
---
<Banner bgColor="base-100" textColor="gray-800">
textColor="gray-800" 用于浅色背景
</Banner>
Slots
default：Banner 中显示的文本内容