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
animation
Animation effect type, options: none (no animation), fade (fade in only), slide (slide up only), both (fade in and slide up).
这是一个没有动画的横幅
这是一个只有淡入动画的横幅
---
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
Background color, supports basic colors and gradient colors.
---
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
Custom CSS class name for overriding default styles.
---
import { Banner } from '@coffic/cosy-ui';
---
<Banner
style="background: linear-gradient(to right, #8b5cf6, #ec4899); color: white; font-weight: bold;">
这是一个自定义样式的横幅
</Banner>
style
Custom CSS styles for overriding default styles.
---
import { Banner } from '@coffic/cosy-ui';
---
<Banner
style="background: linear-gradient(to right, #8b5cf6, #ec4899); color: white; font-weight: bold;">
这是一个自定义样式的横幅
</Banner>
textColor
Text color, automatically set based on background color by default, can be manually specified.
---
import { Banner } from '@coffic/cosy-ui';
---
<Banner>欢迎使用我们的服务</Banner>
Slots
default: Content to display inside the Banner