Banner
Introduction
The Banner component is used to display important notification messages at the top of the page, supporting various colors and animation effects.
Component features:
- Supports multiple preset colors (primary/secondary/success/warning/danger/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 '../../index-astro';
---
<Banner>欢迎使用我们的服务</Banner>
Color Examples
Primary Color
---
import { Banner } from '../../index-astro';
---
<Banner bgColor="primary">这是一个主要颜色的横幅</Banner>
Secondary Color
---
import { Banner } from '../../index-astro';
---
<Banner bgColor="secondary">这是一个次要颜色的横幅</Banner>
Success Color
---
import { Banner } from '../../index-astro';
---
<Banner bgColor="success">这是一个成功颜色的横幅</Banner>
Warning Color
---
import { Banner } from '../../index-astro';
---
<Banner bgColor="warning">这是一个警告颜色的横幅</Banner>
Danger Color
---
import { Banner } from '../../index-astro';
---
<Banner bgColor="error">这是一个危险颜色的横幅</Banner>
Info Color
---
import { Banner } from '../../index-astro';
---
<Banner bgColor="info">这是一个信息颜色的横幅</Banner>
Custom Styles
Customize banner styles using the class property:
---
import { Banner } from '../../index-astro';
---
<Banner
class="bg-gradient-to-r from-purple-500 to-pink-500 text-white font-bold">
这是一个自定义样式的横幅
</Banner>
Animation Control
The Banner component supports various animation effects:
Animation Effect Examples
Fade In Animation
这是一个只有淡入动画的横幅
---
import { Banner } from '../../index-astro';
---
<Banner animation="fade"> 这是一个只有淡入动画的横幅 </Banner>
Slide Up Animation
---
import { Banner } from '../../index-astro';
---
<Banner animation="slide"> 这是一个只有上滑动画的横幅 </Banner>