BreezeUI
  • 简体中文

    • 卡片 Card

    通用卡片容器。

    组件特性

    • 🎨 多种变体：支持 default、outline、filled 视觉变体。
    • 📏 多种尺寸：支持 sm、md、lg 尺寸规格。
    • 🔲 多种形状：支持 rounded、square、circle 形状。
    • 📦 阴影样式：支持 none、sm、base、md、lg、xl 阴影样式。
    • ✋ 交互状态：支持悬停、激活和选中状态。
    • 🎨 主题定制：基于 BrConfigProvider 支持全局主题配置和 TailwindCSS 局部覆盖。

    基础用法

    <script setup lang="ts">
import { 
  BrCard, 
  BrCardHeader, 
  BrCardTitle, 
  BrCardDescription, 
  BrCardContent, 
  BrCardFooter, 
  BrButton,
  BrInput,
  BrLabel
} from '@breeze-ui/vue'
</script>

<template>
  <BrCard class="w-[350px]">
    <BrCardHeader>
      <BrCardTitle>Create project</BrCardTitle>
      <BrCardDescription>Deploy your new project in one-click.</BrCardDescription>
    </BrCardHeader>
    <BrCardContent>
      <form>
        <div class="grid w-full items-center gap-4">
          <div class="flex flex-col space-y-1.5">
            <BrLabel html-for="name">Name</BrLabel>
            <BrInput id="name" placeholder="Name of your project" />
          </div>
        </div>
      </form>
    </BrCardContent>
    <BrCardFooter class="flex justify-between">
      <BrButton variant="outline">Cancel</BrButton>
      <BrButton>Deploy</BrButton>
    </BrCardFooter>
  </BrCard>
</template>

    样式变体

    variant 属性控制卡片的样式风格。

    <script setup lang="ts">
import { BrCard, BrCardContent, BrCardHeader, BrCardTitle } from '@breeze-ui/vue'
</script>

<template>
  <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
    <BrCard>
      <BrCardHeader>
        <BrCardTitle>Default</BrCardTitle>
      </BrCardHeader>
      <BrCardContent>
        Standard card with border and shadow.
      </BrCardContent>
    </BrCard>

    <BrCard variant="outline">
      <BrCardHeader>
        <BrCardTitle>Outline</BrCardTitle>
      </BrCardHeader>
      <BrCardContent>
        Card with a thicker border and no shadow.
      </BrCardContent>
    </BrCard>

    <BrCard variant="ghost">
      <BrCardHeader>
        <BrCardTitle>Ghost</BrCardTitle>
      </BrCardHeader>
      <BrCardContent>
        Card with no border and no shadow.
      </BrCardContent>
    </BrCard>

    <BrCard variant="secondary">
      <BrCardHeader>
        <BrCardTitle>Secondary</BrCardTitle>
      </BrCardHeader>
      <BrCardContent>
        Card with secondary background color.
      </BrCardContent>
    </BrCard>
  </div>
</template>

    尺寸

    size 属性控制卡片的内边距和字体大小。

    <script setup lang="ts">
import { BrCard, BrCardContent, BrCardHeader, BrCardTitle } from '@breeze-ui/vue'
</script>

<template>
  <div class="flex flex-col gap-4">
    <BrCard size="xs" class="w-full max-w-sm">
      <BrCardHeader>
        <BrCardTitle>Size: XS</BrCardTitle>
      </BrCardHeader>
      <BrCardContent>Extra small padding and text size.</BrCardContent>
    </BrCard>

    <BrCard size="sm" class="w-full max-w-sm">
      <BrCardHeader>
        <BrCardTitle>Size: SM</BrCardTitle>
      </BrCardHeader>
      <BrCardContent>Small padding and text size.</BrCardContent>
    </BrCard>

    <BrCard size="md" class="w-full max-w-sm">
      <BrCardHeader>
        <BrCardTitle>Size: MD (Default)</BrCardTitle>
      </BrCardHeader>
      <BrCardContent>Medium padding and text size.</BrCardContent>
    </BrCard>

    <BrCard size="lg" class="w-full max-w-sm">
      <BrCardHeader>
        <BrCardTitle>Size: LG</BrCardTitle>
      </BrCardHeader>
      <BrCardContent>Large padding and text size.</BrCardContent>
    </BrCard>

    <BrCard size="xl" class="w-full max-w-sm">
      <BrCardHeader>
        <BrCardTitle>Size: XL</BrCardTitle>
      </BrCardHeader>
      <BrCardContent>Extra large padding and text size.</BrCardContent>
    </BrCard>

    <BrCard size="2xl" class="w-full max-w-sm">
      <BrCardHeader>
        <BrCardTitle>Size: 2XL</BrCardTitle>
      </BrCardHeader>
      <BrCardContent>2X large padding and text size.</BrCardContent>
    </BrCard>
  </div>
</template>

    交互状态

    卡片支持悬停、点击和加载状态。

    <script setup lang="ts">
import { BrCard, BrCardContent } from '@breeze-ui/vue'
</script>

<template>
  <div class="flex gap-4 flex-wrap">
    <BrCard hoverable class="w-[200px] cursor-pointer">
      <BrCardContent class="flex items-center justify-center h-[100px]">
        Hoverable Card
      </BrCardContent>
    </BrCard>

    <BrCard clickable class="w-[200px]">
      <BrCardContent class="flex items-center justify-center h-[100px]">
        Clickable Card
      </BrCardContent>
    </BrCard>

    <BrCard loading class="w-[200px]">
      <BrCardContent class="flex items-center justify-center h-[100px]">
        Loading Card
      </BrCardContent>
    </BrCard>
  </div>
</template>

    API

    BrCard

    Props

    属性名类型默认值说明
    asstring'div'渲染的 HTML 标签或组件。
    sizestring'default'尺寸变体：xs, sm, md, lg, xl, 2xl。
    shapestring'rounded'形状变体：rounded, square, circle。
    shadowstring'sm'阴影变体：none, sm, md, lg。
    variantstring'default'样式变体：default, outline, ghost, secondary。
    hoverablebooleanfalse是否开启悬停效果。
    clickablebooleanfalse是否开启点击效果。
    loadingbooleanfalse是否处于加载状态。
    disabledbooleanfalse是否禁用。

    BrCardHeader

    Props

    属性名类型默认值说明
    asstring'div'渲染的 HTML 标签或组件。

    BrCardTitle

    Props

    属性名类型默认值说明
    asstring'h3'渲染的 HTML 标签或组件。

    BrCardDescription

    Props

    属性名类型默认值说明
    asstring'p'渲染的 HTML 标签或组件。

    BrCardContent

    Props

    属性名类型默认值说明
    asstring'div'渲染的 HTML 标签或组件。

    BrCardFooter

    Props

    属性名类型默认值说明
    asstring'div'渲染的 HTML 标签或组件。