Banner
Introduction
The Banner component is used to display prominent banner messages at the top of the page, typically for important slogans, announcements, or marketing information.
Component features:
- Supports multiple preset colors (primary/secondary/success/warning/error/info)
- Customizable styles and backgrounds
- Supports various animation effects
- Responsive design, adapts to different screen sizes
Basic Usage
The simplest banner display:
---
import { Banner } from '@coffic/cosy-ui';
---
<Banner>欢迎使用我们的服务</Banner>
Color Examples
---
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>
Animation Effects
这是一个没有动画的横幅
这是一个只有淡入动画的横幅
---
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>
Custom Styles
Customize banner styles using the class property:
---
import { Banner } from '@coffic/cosy-ui';
---
<Banner
class="bg-gradient-to-r from-purple-500 to-pink-500 text-white font-bold">
这是一个自定义样式的横幅
</Banner>
Props
| Property | Description | Type | Default |
|---|---|---|---|
| class | Custom CSS class | string | - |
| bgColor | Background color | ’primary’|‘secondary’|‘accent’|‘info’|‘success’|‘warning’|‘error' | 'primary’ |
| textColor | Text color | string | auto |
| animation | Animation effect | ’none’|‘fade’|‘slide’|‘both' | 'both’ |
| animated | Deprecated, use animation instead | boolean | - |
Slots
default: Content to display inside the Banner