BreezeUI
  • English

    • Stack

    A layout component for arranging elements vertically or horizontally, based on Flexbox. It supports responsive layouts and global theme configuration via BrConfigProvider.

    Component Features

    • ↕️ Dual Layout: Supports vertical (default) and horizontal arrangement via direction prop.
    • ↔️ Alignment Control: Controls alignment via align and justify props.
    • 📏 Gap Control: Controls spacing between stacked elements via gap prop.
    • 📱 Responsive Layout: Supports responsive props (object syntax) for different breakpoints.
    • 🎛️ Polymorphic Rendering: Changes the underlying HTML element via as prop for semantic markup.
    • 🎨 Style Customization: Supports custom styles for rounded corners, shadows, and padding.
    • 🌓 Dark Mode: Based on BrConfigProvider for automatic dark mode adaptation.

    Basic Usage

    Vertical Stack

    By default, BrStack arranges elements vertically (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>

    Horizontal Stack & Alignment

    Use direction="horizontal" for horizontal arrangement, and control alignment with align and 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>

    Responsive & Custom Styles

    BrStack supports responsive properties (object syntax) and style customization (radius, shadow, padding).

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

    Polymorphic Rendering

    Use the as prop to change the underlying HTML element of the Stack, such as ul, li, or section for semantic markup.

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

    Theming

    Global base styles for Stack (like border radius) can be controlled via 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

    PropDescriptionTypeDefault
    asHTML tag to renderstringdiv
    directionLayout direction'vertical' | 'horizontal' | ResponsiveProp'vertical'
    gapSpacing between itemsstring | number | ResponsiveProp-
    alignCross-axis alignment'start' | 'end' | 'center' | 'baseline' | 'stretch' | ResponsiveProp'stretch'
    justifyMain-axis alignment'start' | 'end' | 'center' | 'between' | 'around' | 'evenly' | ResponsiveProp'start'
    wrapWrap behavior'nowrap' | 'wrap' | 'wrap-reverse' | ResponsiveProp'nowrap'
    paddingInner paddingstring | number | ResponsiveProp-
    radiusBorder radiusstring | number | ResponsiveProp-
    shadowBox shadowstring | ResponsiveProp-