Banner
简介
Banner 组件用于在页面顶部显示醒目的横幅信息，通常用于展示重要的标语、公告或营销信息。
组件特性：
- 支持多种预设颜色（primary/secondary/success/warning/error/info）
- 可自定义样式和背景
- 支持多种动画效果选择
- 响应式设计，适配不同屏幕尺寸
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
style="background: linear-gradient(to right, #8b5cf6, #ec4899); color: white; font-weight: bold;">
这是一个自定义样式的横幅
</Banner>
style
自定义 CSS 样式，用于覆盖默认样式。
---
import { Banner } from '@coffic/cosy-ui';
---
<Banner
style="background: linear-gradient(to right, #8b5cf6, #ec4899); color: white; font-weight: bold;">
这是一个自定义样式的横幅
</Banner>
textColor
文本颜色，默认根据背景色自动设置，可手动指定颜色值。
---
import { Banner } from '@coffic/cosy-ui';
---
<Banner>欢迎使用我们的服务</Banner>
插槽
default：Banner 中显示的文本内容