Container 容器

用于承载页面内容的容器，支持多种尺寸和对齐方式。基于 BrConfigProvider 实现全局主题配置。

组件特性

📐 最大宽度：通过 maxWidth 属性控制最大宽度，支持多种宽度变体。
🌊 流体布局：设置 fluid 为 true 可实现流体布局（width: 100%）。
📏 自适应内边距：通过 padding 属性调整水平内边距，默认随屏幕断点自适应。
🎨 主题配置：基于 BrConfigProvider 实现全局主题配置。
🌓 暗黑模式：自动适配暗黑模式。

基础用法

最基础的用法，提供一个限制了最大宽度并默认居中的容器。

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

<template>
  <div class="w-full bg-muted/30 p-4 rounded-md">
    <BrContainer class="bg-primary/10 border border-primary/20 py-4 rounded-md">
      <p class="text-center text-primary font-medium">Basic Centered Container</p>
      <p class="text-center text-sm text-primary/80 mt-2">Restricts maximum width and centers display by default</p>
    </BrContainer>
  </div>
</template>

最大宽度变体

支持多种最大宽度，通过 maxWidth 属性控制，适配不同的设计场景。

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

<template>
  <div class="w-full bg-muted/30 p-4 rounded-md space-y-4 flex flex-col items-center">
    <BrContainer max-width="sm" class="bg-primary/10 border border-primary/20 py-2 rounded-md">
      <p class="text-center text-primary text-sm">sm (max-w-screen-sm)</p>
    </BrContainer>
    
    <BrContainer max-width="md" class="bg-primary/10 border border-primary/20 py-2 rounded-md">
      <p class="text-center text-primary text-sm">md (max-w-screen-md)</p>
    </BrContainer>

    <BrContainer max-width="lg" class="bg-primary/10 border border-primary/20 py-2 rounded-md">
      <p class="text-center text-primary text-sm">lg (max-w-screen-lg)</p>
    </BrContainer>
  </div>
</template>

流体布局

设置 fluid 属性为 true 可实现流体布局，容器宽度将占满可用空间（width: 100%），移除最大宽度限制。

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

<template>
  <div class="w-full bg-muted/30 p-4 rounded-md">
    <BrContainer fluid class="bg-success/10 border border-success/20 py-4 rounded-md">
      <p class="text-center text-success font-medium">Fluid Layout Container</p>
      <p class="text-center text-sm text-success/80 mt-2">Width 100%，No maximum width restriction</p>
    </BrContainer>
  </div>
</template>

自定义内边距

通过 padding 属性可以调整容器的水平内边距。默认情况下，内边距会随着屏幕断点自适应。你可以指定特定的尺寸 tokens 或设置为 none 移除内边距。

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

<template>
  <div class="w-full bg-muted/30 p-4 rounded-md space-y-4">
    <BrContainer padding="none" max-width="md" class="bg-warning/10 border border-warning/20 py-2 rounded-md">
      <div class="bg-warning/20 h-8 flex items-center justify-center text-warning text-sm">No padding (padding="none")</div>
    </BrContainer>
    
    <BrContainer padding="md" max-width="md" class="bg-info/10 border border-info/20 py-2 rounded-md">
      <div class="bg-info/20 h-8 flex items-center justify-center text-info text-sm">Medium padding (padding="md")</div>
    </BrContainer>

    <BrContainer padding="2xl" max-width="md" class="bg-primary/10 border border-primary/20 py-2 rounded-md">
      <div class="bg-primary/20 h-8 flex items-center justify-center text-primary text-sm">Extra large padding (padding="2xl")</div>
    </BrContainer>
  </div>
</template>

主题定制

全局定制 (BrConfigProvider)

通过 BrConfigProvider 的 sizing 属性可以覆盖默认的 CSS 变量，从而改变容器在特定断点下的默认宽度和内边距表现。此配置会响应式地应用到所有使用了相应变体的组件上。

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

const currentSizing = ref({
  md: { paddingX: '1rem', width: '768px' },
  lg: { paddingX: '2rem', width: '1024px' }
})

const toggleSizing = () => {
  if (currentSizing.value.md.paddingX === '1rem') {
    currentSizing.value = {
      md: { paddingX: '3rem', width: '600px' },
      lg: { paddingX: '4rem', width: '800px' }
    }
  } else {
    currentSizing.value = {
      md: { paddingX: '1rem', width: '768px' },
      lg: { paddingX: '2rem', width: '1024px' }
    }
  }
}
</script>

<template>
  <div class="space-y-4">
    <div class="flex gap-2">
      <BrButton @click="toggleSizing">Toggle global size config</BrButton>
    </div>
    
    <BrConfigProvider :sizing="currentSizing">
      <div class="w-full bg-muted/30 p-4 rounded-md space-y-4">
        <BrContainer max-width="md" padding="md" class="bg-primary/10 border border-primary/20 py-4 rounded-md transition-all duration-300">
          <p class="text-center text-primary font-medium">Use MD Container for size variables</p>
          <p class="text-center text-sm text-primary/80 mt-2">
            Current padding-x: {{ currentSizing.md.paddingX }} <br>
            Overridden --br-px-md Variable
          </p>
        </BrContainer>
        
        <BrContainer max-width="lg" padding="lg" class="bg-secondary border border-border py-4 rounded-md transition-all duration-300">
          <p class="text-center text-secondary-foreground font-medium">Use LG Container for size variables</p>
          <p class="text-center text-sm text-secondary-foreground/80 mt-2">
            Current padding-x: {{ currentSizing.lg.paddingX }} <br>
            Overridden --br-px-lg Variable
          </p>
        </BrContainer>
        
        <BrContainer class="bg-destructive/10 border border-destructive/20 py-4 rounded-md !px-0">
          <p class="text-center text-destructive font-medium">Local override style</p>
          <p class="text-center text-sm text-destructive/80 mt-2">Use TailwindCSS of !px-0 Force override padding</p>
        </BrContainer>
      </div>
    </BrConfigProvider>
  </div>
</template>

局部定制 (TailwindCSS)

可以使用 TailwindCSS 类名直接覆盖组件样式，支持响应式前缀。

<template>
  <BrContainer class="!px-0 sm:!px-4 bg-primary/10">
    局部覆盖了内边距，并在 sm 断点下改变了内边距。
  </BrContainer>
</template>

API

Props

属性名	类型	默认值	说明
as	`string`	`'div'`	渲染的 HTML 标签或组件
fluid	`boolean`	`false`	是否为流体布局（无最大宽度限制，宽度 100%）
maxWidth	`string`	`'default'`	最大宽度变体，可选值：`'sm'`, `'md'`, `'lg'`, `'xl'`, `'2xl'`, `'default'`, `'none'`
padding	`string`	`'default'`	预设内边距，可选值：`'xs'`, `'sm'`, `'md'`, `'lg'`, `'xl'`, `'2xl'`, `'default'`, `'none'`
centered	`boolean`	`true`	是否水平居中对齐（添加 `mx-auto`）

Slots

插槽名	说明
default	容器内容

#Container 容器

#组件特性

#基础用法

#最大宽度变体

#流体布局

#自定义内边距

#主题定制

#全局定制 (BrConfigProvider)

#局部定制 (TailwindCSS)

#API

#Props

#Slots