显示侧边栏

横幅组件

flux:x-banner 是 Flux Pro Max 提供的横幅组件，用于在页面顶部或底部显示营销信息、公告、CTA 按钮等重要通知。支持固定定位、多种样式变体和可关闭功能。

安装步骤

如果你在项目中新增或更新了前端资源，并发现样式没有及时生效，可以重新构建资源：

1. 重新构建资源

npm run build

基础用法

使用 flux:x-banner 组件在页面顶部显示一个简单的通知横幅，包含图标、文本和关闭按钮。

<flux:x-banner
    icon="megaphone"
    title="全新品牌标识已发布"
    text="FluxProMax 库已推出全新的品牌标识设计，欢迎查看。"
/>

位置设置

通过 position 属性可以将横幅固定在页面顶部或底部。默认为 top。

<flux:x-banner
    position="bottom"
    icon="ticket"
    title="成为合作伙伴"
    text="每笔销售可获得 5% 佣金"
/>

样式变体

使用 variant 属性可以设置不同的颜色主题，包括 default、secondary、info、success、warning 和 danger。

<flux:x-banner
    variant="info"
    icon="information-circle"
    title="系统维护通知"
    text="我们将在今晚 22:00 - 23:00 进行系统维护，期间服务可能短暂中断。"
/>

<flux:x-banner
    variant="success"
    icon="check-circle"
    title="部署成功"
    text="您的应用已成功部署到生产环境。"
/>

<flux:x-banner
    variant="warning"
    icon="exclamation-triangle"
    title="订阅即将到期"
    text="您的订阅将在 3 天后到期，请及时续费以避免服务中断。"
/>

<flux:x-banner
    variant="danger"
    icon="exclamation-circle"
    title="重要安全更新"
    text="请立即更新您的密码以确保账户安全。"
/>

自定义内容

除了使用 title 和 text 属性，您也可以通过默认插槽自定义横幅内容。

<flux:x-banner icon="light-bulb" variant="secondary">
    <div class="space-y-1">
        <h3 class="font-semibold text-zinc-800 dark:text-white">集成是关键</h3>
        <p class="text-sm text-zinc-600 dark:text-zinc-300">
            您可以将 FluxProMax 与多种工具集成，让您的工作更加高效快捷。
        </p>
        <div class="flex gap-2 mt-2">
            <a href="#" class="text-sm text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300">查看集成 →</a>
        </div>
    </div>
</flux:x-banner>

禁用关闭按钮

设置 dismissible 为 false 可以隐藏关闭按钮，强制用户查看重要信息。

<flux:x-banner
    :dismissible="false"
    variant="warning"
    icon="exclamation-triangle"
    title="重要安全更新"
    text="请立即更新您的密码以确保账户安全。"
>
    <x-slot name="actions">
        <flux:button size="sm">立即更新</flux:button>
    </x-slot>
</flux:x-banner>

完整示例

以下是一些实际应用场景的完整示例。

产品发布公告

<flux:x-banner
    variant="primary"
    icon="rocket-launch"
    title="Flux UI 2.0 正式发布！"
    text="全新设计、更强性能、更多组件，立即体验。"
>
    <x-slot name="actions">
        <flux:button size="sm" variant="primary">查看新功能</flux:button>
        <flux:button size="sm" variant="ghost" href="/docs">阅读文档</flux:button>
    </x-slot>
</flux:x-banner>

系统维护通知

<flux:x-banner
    variant="info"
    icon="megaphone"
    title="系统维护通知"
    text="我们将在周末进行系统维护，届时服务可能短暂中断。"
>
    <x-slot name="actions">
        <flux:button size="sm" variant="ghost">了解详情</flux:button>
    </x-slot>
</flux:x-banner>

合规提示

<flux:x-banner
    variant="warning"
    icon="shield-exclamation"
    title="GDPR 同意即将过期"
    text="请重新确认隐私政策，以继续使用完整功能。"
>
    <x-slot name="actions">
        <flux:button size="sm" variant="ghost">查看政策</flux:button>
        <flux:button size="sm">重新授权</flux:button>
    </x-slot>
</flux:x-banner>

提示区块

使用 Callout 展示临时通知

Toast 通知

使用 Toast 展示临时通知

属性参考

以下是 flux:x-banner 组件的所有可用属性。

属性	类型	默认值	说明
title	string	null	横幅标题
text	string	null	横幅文本内容
icon	string	null	图标名称（Heroicons）
position	string	top	横幅位置：top 或 bottom
variant	string	secondary	可选值：default、secondary、info、success、warning、danger。默认值：secondary
dismissible	boolean	true	是否显示关闭按钮
dismissId	string	null	自定义横幅 ID（用于 JavaScript 操作）

插槽

插槽名称	说明
default	自定义横幅内容（替代 title 和 text）
actions	操作按钮区域