Banner
简介
Banner 组件用于在页面顶部显示醒目的横幅信息，通常用于展示重要的标语、公告或营销信息。
组件特性：
- 支持多种预设颜色（primary/secondary/success/warning/error/info）
- 可自定义样式和背景
- 支持多种动画效果选择
- 响应式设计，适配不同屏幕尺寸
基础用法
最简单的横幅展示：
---
import { Banner } from '@coffic/cosy-ui';
---
<Banner>欢迎使用我们的服务</Banner>
颜色示例
---
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>
动画效果
这是一个没有动画的横幅
这是一个只有淡入动画的横幅
---
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>
自定义样式
通过 class 属性自定义横幅样式：
---
import { Banner } from '@coffic/cosy-ui';
---
<Banner
class="bg-gradient-to-r from-purple-500 to-pink-500 text-white font-bold">
这是一个自定义样式的横幅
</Banner>
Props
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| class | 自定义 CSS 类名 | string | - |
| bgColor | 背景颜色 | ’primary’|‘secondary’|‘accent’|‘info’|‘success’|‘warning’|‘error' | 'primary’ |
| textColor | 文本颜色 | string | 自动 |
| animation | 动画效果类型 | ’none’|‘fade’|‘slide’|‘both' | 'both’ |
| animated | 兼容旧 animated 属性 | boolean | - |
插槽
default：Banner 中显示的文本内容