logo
English

导航菜单

Documents

Vue

BannerBox

Introduction

The BannerBox component is a customizable banner container that supports custom background styles. It can be used directly as a container or display content by passing in titles, descriptions, and feature lists. Suitable for creating marketing banners, feature showcases, social media cards, and other content.

Component Features:

  • Supports custom background styles (base colors, opacity, gradients)
  • Supports title and description text
  • Supports feature list display
  • Supports default slot content
  • Responsive design that adapts to different screen sizes
  • Uses common background styles from the common directory

Example

欢迎使用我们的产品

这是一个基础的横幅示例

<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

Background style, supports all background color types defined in 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

Banner title, supports automatic line wrapping for long titles.

短标题

短标题示例

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

长标题会自动换行显示

无标题横幅

不设置 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

Banner description, supports automatic line wrapping for long descriptions.

简短描述

简短描述示例

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

长描述示例

无描述横幅

不设置 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

Feature list, each item contains emoji, title and optional 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

Banner content slot, used to place custom content.

欢迎使用我们的产品

这是一个基础的横幅示例

<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>

搜索