BreezeUI
  • 简体中文

    • Flex 布局

    基于 Flexbox 的布局组件，提供对方向、对齐、换行和间距的灵活控制。深度集成 BrConfigProvider，支持响应式属性和全局主题配置。

    组件特性

    • 📐 方向控制：通过 direction 属性控制主轴方向（水平/垂直）。
    • ↔️ 对齐控制：通过 justify 和 align 属性控制对齐方式。
    • 🔄 换行控制：通过 wrap 属性控制是否换行。
    • 📏 间距控制：通过 gap 属性灵活控制元素之间的间距。
    • 📱 响应式布局：direction、gap、justify、align 等核心属性支持响应式对象配置。
    • 🎨 尺寸 Token：支持引用 BrConfigProvider 中定义的尺寸 Token。
    • 🌓 暗黑模式：基于 BrConfigProvider 自动适配暗黑模式。

    基础用法

    使用 gap, justify, 和 align 属性快速构建布局。

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

<template>
  <BrFlex gap="4" justify="center" align="center" class="bg-secondary/20 p-8 rounded-lg border border-border">
    <BrButton variant="outline">Item 1</BrButton>
    <BrButton variant="outline">Item 2</BrButton>
    <BrButton variant="outline">Item 3</BrButton>
  </BrFlex>
</template>

    垂直布局

    设置 direction="col" 以切换到垂直布局。

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

<template>
  <BrFlex direction="col" gap="4" align="stretch" class="max-w-xs mx-auto border border-dashed border-border p-4 rounded-md">
    <BrButton class="w-full">Top Item</BrButton>
    <BrButton variant="secondary" class="w-full">Middle Item</BrButton>
    <BrButton variant="outline" class="w-full">Bottom Item</BrButton>
  </BrFlex>
</template>

    响应式布局

    direction, gap, justify, align 等核心属性支持响应式对象配置。你可以为不同的断点（sm, md, lg, xl, 2xl）设置不同的值。

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

<template>
  <div class="space-y-4">
    <p class="text-sm text-muted-foreground">Mobile: Column & Small Gap | Tablet+: Row & Large Gap</p>
    <BrFlex 
      :direction="{ base: 'col', sm: 'row' }" 
      :gap="{ base: '2', md: '8' }"
      align="center"
      justify="between" 
      class="bg-muted p-6 rounded-md"
    >
      <div class="p-4 bg-background rounded shadow w-full sm:w-auto text-center">Item A</div>
      <div class="p-4 bg-background rounded shadow w-full sm:w-auto text-center">Item B</div>
      <div class="p-4 bg-background rounded shadow w-full sm:w-auto text-center">Item C</div>
    </BrFlex>
  </div>
</template>

    主题与 Token

    BrFlex 的 gap 属性支持引用 BrConfigProvider 中定义的尺寸 Token。通过全局或局部配置 BrConfigProvider，你可以统一间距标准。

    在下面的例子中，我们定义了一个名为 xl (paddingX: 4rem) 的尺寸 Token，并通过 gap="xl" 直接在 BrFlex 中使用。

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

<template>
  <BrConfigProvider :sizing="{ xl: { paddingX: '4rem' } }">
    <div class="space-y-4">
      <p class="text-sm text-muted-foreground">Using global token 'xl' (defined as 4rem) for gap:</p>
      <BrFlex gap="xl" wrap="wrap" class="bg-accent/10 p-4 rounded-lg border border-accent/20">
        <BrButton>Item 1</BrButton>
        <BrButton>Item 2</BrButton>
        <BrButton>Item 3</BrButton>
      </BrFlex>
    </div>
  </BrConfigProvider>
</template>

    API

    BrFlex Props

    属性名类型默认值说明
    asstring'div'渲染的 HTML 标签或组件
    directionResponsiveProp<FlexDirection>'row'Flex 方向。可选值：row, row-reverse, col, col-reverse
    wrapResponsiveProp<FlexWrap>'nowrap'Flex 换行。可选值：nowrap, wrap, wrap-reverse
    justifyResponsiveProp<FlexJustify>'start'主轴对齐。可选值：start, end, center, between, around, evenly
    alignResponsiveProp<FlexAlign>'start'交叉轴对齐。可选值：start, end, center, baseline, stretch
    gapResponsiveProp<string | number>-间距。支持 Tailwind 数字（如 '4'）或 ConfigProvider Token（如 'md'）
    gapXResponsiveProp<string | number>-水平间距
    gapYResponsiveProp<string | number>-垂直间距
    growbooleanfalse是否放大 (flex-grow)
    shrinkbooleanfalse是否缩小 (flex-shrink)
    basisstring | number-基础尺寸 (flex-basis)

    类型说明

    ResponsiveProp<T>

    属性可以直接是值 T，或者是一个包含断点的对象：

    type ResponsiveProp<T> = T | {
  base?: T
  sm?: T
  md?: T
  lg?: T
  xl?: T
  '2xl'?: T
  [key: string]: T | undefined
}

    示例：

    <!-- 简单值 -->
<BrFlex direction="row" />

<!-- 响应式对象 -->
<BrFlex
  :direction="{ base: 'col', md: 'row' }"
  :gap="{ base: '2', lg: '4' }"
/>