logo
简体中文

导航菜单

文档

Vue

BannerBox

简介

BannerBox 组件是一个可定制的横幅容器，支持自定义背景样式。可以直接用作容器，也可以通过传入标题、描述和特性列表来显示内容。适用于创建营销横幅、特性展示、社交媒体卡片等内容。

组件特性：

  • 支持自定义背景样式（基础色、透明度、渐变色）
  • 支持标题和描述文字
  • 支持特性列表展示
  • 支持默认插槽内容
  • 响应式设计，适配不同屏幕尺寸
  • 使用 common 中的通用背景样式

案例

欢迎使用我们的产品

这是一个基础的横幅示例

<template>
  <BannerBox>
    <div class="cosy:text-center">
      <h3 class="cosy:text-2xl cosy:font-bold cosy:mb-4">欢迎使用我们的产品</h3>
      <p class="cosy:text-lg cosy:text-gray-600">这是一个基础的横幅示例</p>
    </div>
  </BannerBox>
</template>

<script setup lang="ts">
import { BannerBox } from "@coffic/cosy-ui/vue";
</script>

Props

background

背景样式，支持所有 common 中定义的背景色类型。

Primary Background
Secondary Background
Primary 50% Opacity
Sky Gradient
<template>
  <BannerBox background="primary">
    <div style="text-align: center; color: white">
      <h5 style="font-size: 1.25rem; font-weight: bold">Primary Background</h5>
    </div>
  </BannerBox>
</template>

<script setup lang="ts">
import { BannerBox } from "@coffic/cosy-ui/vue";
</script>

<template>
  <BannerBox background="secondary">
    <div style="text-align: center; color: white">
      <h5 style="font-size: 1.25rem; font-weight: bold">
        Secondary Background
      </h5>
    </div>
  </BannerBox>
</template>

<script setup lang="ts">
import { BannerBox } from "@coffic/cosy-ui/vue";
</script>

<template>
  <BannerBox background="primary/50">
    <div style="text-align: center">
      <h5 style="font-size: 1.25rem; font-weight: bold">Primary 50% Opacity</h5>
    </div>
  </BannerBox>
</template>

<script setup lang="ts">
import { BannerBox } from "@coffic/cosy-ui/vue";
</script>

<template>
  <BannerBox background="gradient-sky">
    <div style="text-align: center; color: white">
      <h5 style="font-size: 1.25rem; font-weight: bold">Sky Gradient</h5>
    </div>
  </BannerBox>
</template>

<script setup lang="ts">
import { BannerBox } from "@coffic/cosy-ui/vue";
</script>

title

横幅标题，支持长标题自动换行。

短标题

短标题示例

这是一个非常长的标题，用来测试长标题的显示效果和自动换行功能

长标题会自动换行显示

无标题横幅

不设置 title 属性时的效果

<template>
  <BannerBox title="短标题">
    <div style="text-align: center">
      <p style="font-size: 1.125rem; color: #6b7280">短标题示例</p>
    </div>
  </BannerBox>
</template>

<script setup lang="ts">
import { BannerBox } from "@coffic/cosy-ui/vue";
</script>

<template>
  <BannerBox
    title="这是一个非常长的标题，用来测试长标题的显示效果和自动换行功能"
  >
    <div style="text-align: center">
      <p style="font-size: 1.125rem; color: #6b7280">长标题会自动换行显示</p>
    </div>
  </BannerBox>
</template>

<script setup lang="ts">
import { BannerBox } from "@coffic/cosy-ui/vue";
</script>

<template>
  <BannerBox>
    <div style="text-align: center">
      <h3 style="font-size: 1.5rem; font-weight: bold; margin-bottom: 1rem">
        无标题横幅
      </h3>
      <p style="font-size: 1.125rem; color: #6b7280">
        不设置 title 属性时的效果
      </p>
    </div>
  </BannerBox>
</template>

<script setup lang="ts">
import { BannerBox } from "@coffic/cosy-ui/vue";
</script>

description

横幅描述，支持长描述自动换行。

简短描述

简短描述示例

这是一个非常长的描述文字，用来测试长描述的显示效果。描述文字会自动换行，并且有合适的行间距，确保良好的阅读体验。

长描述示例

无描述横幅

不设置 description 属性时的效果

<template>
  <BannerBox description="简短描述">
    <div style="text-align: center">
      <h3 style="font-size: 1.5rem; font-weight: bold; margin-bottom: 1rem">
        简短描述示例
      </h3>
    </div>
  </BannerBox>
</template>

<script setup lang="ts">
import { BannerBox } from "@coffic/cosy-ui/vue";
</script>

<template>
  <BannerBox
    description="这是一个非常长的描述文字，用来测试长描述的显示效果。描述文字会自动换行，并且有合适的行间距，确保良好的阅读体验。"
  >
    <div style="text-align: center">
      <h3 style="font-size: 1.5rem; font-weight: bold; margin-bottom: 1rem">
        长描述示例
      </h3>
    </div>
  </BannerBox>
</template>

<script setup lang="ts">
import { BannerBox } from "@coffic/cosy-ui/vue";
</script>

<template>
  <BannerBox>
    <div style="text-align: center">
      <h3 style="font-size: 1.5rem; font-weight: bold; margin-bottom: 1rem">
        无描述横幅
      </h3>
      <p style="font-size: 1.125rem; color: #6b7280">
        不设置 description 属性时的效果
      </p>
    </div>
  </BannerBox>
</template>

<script setup lang="ts">
import { BannerBox } from "@coffic/cosy-ui/vue";
</script>

features

特性列表，每项包含 emoji、title 和可选的 link。

基础特性

🚀

高性能

⚡

快速响应

🔒

安全可靠

无特性列表

无特性列表横幅

不设置 features 属性时的效果

<template>
  <BannerBox title="基础特性" :features="basicFeatures" />
</template>

<script setup lang="ts">
import { BannerBox } from "@coffic/cosy-ui/vue";

const basicFeatures = [
	{ emoji: "🚀", title: "高性能" },
	{ emoji: "⚡", title: "快速响应" },
	{ emoji: "🔒", title: "安全可靠" },
];
</script>

<template>
  <BannerBox title="带链接的特性" :features="featuresWithLinks" />
</template>

<script setup lang="ts">
import { BannerBox } from "@coffic/cosy-ui/vue";

const featuresWithLinks = [
	{ emoji: "💡", title: "智能分析", link: "#" },
	{ emoji: "🛠️", title: "专业支持", link: "#" },
	{ emoji: "📊", title: "数据洞察", link: "#" },
	{ emoji: "🌐", title: "全球服务", link: "#" },
];
</script>

<template>
  <BannerBox title="无特性列表">
    <div style="text-align: center">
      <h3 style="font-size: 1.5rem; font-weight: bold; margin-bottom: 1rem">
        无特性列表横幅
      </h3>
      <p style="font-size: 1.125rem; color: #6b7280">
        不设置 features 属性时的效果
      </p>
    </div>
  </BannerBox>
</template>

<script setup lang="ts">
import { BannerBox } from "@coffic/cosy-ui/vue";
</script>

Slots

default

横幅内容插槽，用于放置自定义内容。

欢迎使用我们的产品

这是一个基础的横幅示例

<template>
  <BannerBox>
    <div class="cosy:text-center">
      <h3 class="cosy:text-2xl cosy:font-bold cosy:mb-4">欢迎使用我们的产品</h3>
      <p class="cosy:text-lg cosy:text-gray-600">这是一个基础的横幅示例</p>
    </div>
  </BannerBox>
</template>

<script setup lang="ts">
import { BannerBox } from "@coffic/cosy-ui/vue";
</script>

搜索