BreezeUI
  • 简体中文

    • Stack 堆叠布局

    用于垂直或水平排列元素的布局组件，基于 Flexbox。支持响应式布局并通过 BrConfigProvider 进行全局主题配置。

    组件特性

    • ↕️ 双向布局：支持垂直（默认）和水平排列，通过 direction 控制。
    • ↔️ 对齐控制：通过 align 和 justify 控制对齐方式。
    • 📏 间距控制：通过 gap 属性控制堆叠元素之间的间距。
    • 📱 响应式布局：支持响应式属性（对象语法）配置不同断点下的行为。
    • 🎛️ 多态渲染：通过 as 属性更改底层 HTML 元素，实现语义化标记。
    • 🎨 样式定制：支持圆角、阴影、内边距等自定义样式。
    • 🌓 暗黑模式：基于 BrConfigProvider 自动适配暗黑模式。

    基础用法

    垂直堆叠

    默认情况下，BrStack 垂直排列元素（flex-col）。

    <script setup lang="ts">
import { BrStack } from '@breezeui/vue'
</script>

<template>
  <BrStack gap="4">
    <div class="h-12 w-full rounded bg-primary/90 flex items-center justify-center text-primary-foreground">Item 1</div>
    <div class="h-12 w-full rounded bg-primary/70 flex items-center justify-center text-primary-foreground">Item 2</div>
    <div class="h-12 w-full rounded bg-primary/50 flex items-center justify-center text-primary-foreground">Item 3</div>
  </BrStack>
</template>

    水平堆叠与对齐

    使用 direction="horizontal" 进行水平排列，并通过 align 和 justify 控制对齐。

    <script setup lang="ts">
import { BrStack } from '@breezeui/vue'
</script>

<template>
  <BrStack direction="horizontal" gap="4" align="center" justify="between">
    <div class="h-12 w-12 rounded bg-primary/90 flex items-center justify-center text-primary-foreground">1</div>
    <div class="h-8 w-8 rounded bg-primary/70 flex items-center justify-center text-primary-foreground">2</div>
    <div class="h-16 w-16 rounded bg-primary/50 flex items-center justify-center text-primary-foreground">3</div>
  </BrStack>
</template>

    响应式与自定义样式

    BrStack 支持响应式属性（对象语法）和样式定制（圆角、阴影、内边距）。

    <script setup lang="ts">
import { BrStack } from '@breezeui/vue'
</script>

<template>
  <BrStack 
    :direction="{ default: 'vertical', md: 'horizontal' }" 
    gap="4" 
    padding="6" 
    radius="lg" 
    shadow="md"
    class="bg-card border border-border text-card-foreground"
  >
    <div class="h-12 w-24 rounded bg-primary flex items-center justify-center text-primary-foreground">Item 1</div>
    <div class="h-12 w-24 rounded bg-primary flex items-center justify-center text-primary-foreground">Item 2</div>
    <div class="h-12 w-24 rounded bg-primary flex items-center justify-center text-primary-foreground">Item 3</div>
  </BrStack>
</template>

    多态渲染

    使用 as 属性更改 Stack 的底层 HTML 元素，例如 ul、li 或 section 以实现语义化标记。

    <script setup lang="ts">
import { BrStack } from '@breezeui/vue'
</script>

<template>
  <BrStack gap="8">
    <!-- Render as a list -->
    <BrStack as="ul" gap="2" class="list-disc pl-5">
      <BrStack as="li">Item 1 (rendered as li)</BrStack>
      <BrStack as="li">Item 2 (rendered as li)</BrStack>
      <BrStack as="li">Item 3 (rendered as li)</BrStack>
    </BrStack>

    <!-- Render as a section -->
    <BrStack as="section" gap="4" class="border p-4 rounded-lg bg-gray-50">
      <h3 class="text-lg font-bold">Section Title</h3>
      <p>This entire stack is rendered as a &lt;section&gt; element.</p>
    </BrStack>
  </BrStack>
</template>

    主题定制

    Stack 的全局基础样式（如圆角）可以通过 BrConfigProvider 控制。

    <script setup lang="ts">
import { BrStack, BrConfigProvider } from '@breezeui/vue'
</script>

<template>
  <BrStack gap="8">
    <!-- Default Theme -->
    <BrConfigProvider>
      <BrStack gap="4" radius="md" class="border p-4 bg-background">
        <div>Default Theme (Radius: 0.5rem)</div>
      </BrStack>
    </BrConfigProvider>

    <!-- Custom Theme -->
    <BrConfigProvider :theme="{ radius: 1.0 }">
      <BrStack gap="4" radius="md" class="border p-4 bg-background">
        <div>Custom Theme (Radius: 1.0rem)</div>
      </BrStack>
    </BrConfigProvider>
  </BrStack>
</template>

    API

    属性名说明类型默认值
    as渲染的 HTML 标签stringdiv
    direction布局方向'vertical' | 'horizontal' | ResponsiveProp'vertical'
    gap元素间距string | number | ResponsiveProp-
    align交叉轴对齐'start' | 'end' | 'center' | 'baseline' | 'stretch' | ResponsiveProp'stretch'
    justify主轴对齐'start' | 'end' | 'center' | 'between' | 'around' | 'evenly' | ResponsiveProp'start'
    wrap换行行为'nowrap' | 'wrap' | 'wrap-reverse' | ResponsiveProp'nowrap'
    padding内边距string | number | ResponsiveProp-
    radius圆角string | number | ResponsiveProp-
    shadow阴影string | ResponsiveProp-