Container

---
/**
 * @component ContainerAspectRatio4x3
 * @description Container 组件 4:3 比例示例
 */
import { Container } from '@coffic/cosy-ui';
---

<Container aspectRatio={4 / 3} background="secondary/10" border rounded="lg">
  <p>4:3 比例的内容区域</p>
</Container>

---
/**
 * @component ContainerAspectRatio1x1
 * @description Container 组件正方形比例示例
 */
import { Container } from '@coffic/cosy-ui';
---

<Container
  aspectRatio={1}
  width="sm"
  background="accent/10"
  border
  rounded="md">
  <p>正方形内容</p>
</Container>

---
/**
 * @component ContainerAspectRatio3x2
 * @description Container 组件 3:2 比例示例
 */
import { Container } from '@coffic/cosy-ui';
---

<Container aspectRatio={3 / 2} background="neutral/10" border rounded="xl">
  <p>3:2 比例的内容区域</p>
</Container>

---
/**
 * @component ContainerAspectRatioWithHeight
 * @description Container 组件 aspectRatio + height 示例
 */
import { Container } from '@coffic/cosy-ui';
---

<Container
  aspectRatio={1 / 2}
  height="6xl"
  background="info/10"
  rounded="md"
  class="not-prose">
  <p>
    <code>height="6xl"</code>
    <code>aspectRatio="1/2"</code>
  </p>
</Container>

---
/**
 * @component ContainerAspectRatioWithWidth
 * @description Container 组件 aspectRatio + width 示例
 */
import { Container } from '@coffic/cosy-ui';
---

<Container
  aspectRatio={1 / 2}
  width="xs"
  background="success/10"
  rounded="md"
  class="not-prose">
  <p>
    <code>width="xs"</code> 和 <code>aspectRatio={1 / 2}</code> 共同作用。
  </p>
</Container>

---
/**
 * @component ContainerAspectRatioConflict
 * @description Container 组件 aspectRatio/width/height 冲突演示
 */
import { Container } from '@coffic/cosy-ui';
---

<Container
  aspectRatio={16 / 9}
  width="md"
  height="lg"
  background="warning/10"
  rounded="md"
  class="not-prose"
/>

---
import { Container } from '@coffic/cosy-ui';
---

<Container background="primary" padding="md" border rounded="md">
  <p>主要背景色 primary</p>
</Container>

---
import { Container } from '@coffic/cosy-ui';
---

<Container background="accent" padding="md" border rounded="md">
  <p>强调背景色 accent</p>
</Container>

---
import { Container } from '@coffic/cosy-ui';
---

<Container background="primary/10" padding="md" border rounded="md">
  <p>透明度背景色 primary/10</p>
</Container>

---
import { Container } from '@coffic/cosy-ui';
---

<Container background="success" padding="md" border rounded="md">
  <p>成功背景色 success</p>
</Container>

---
import { Container } from '@coffic/cosy-ui';
---

<Container width="md" background="secondary/10" border={false}>
  <p style="text-align: center;">无边框的容器 (border={false})</p>
</Container>

---
import { Container } from '@coffic/cosy-ui';
---

<Container
  width="md"
  border
  background="secondary/10"
  centered={false}
  rounded="md">
  <p style="text-align: left;">左对齐的容器 (centered={false})</p>
</Container>

---
import { Container } from '@coffic/cosy-ui';
---

<Container width="md" class="custom-advanced custom-theme">
  <p>高级容器，使用多个 class</p>
</Container>

<style>
  .custom-advanced {
    background-color: #3b82f6;
    color: white;
    border: 2px dashed #3b82f6;
  }

  .custom-theme {
    background-color: #1e40af;
    color: white;
    border: 2px dashed #1e40af;
  }
</style>

---
/**
 * @component ContainerContentBorderFalse
 * @description Container 组件 contentBorder=false 示例
 */
import { Container } from '@coffic/cosy-ui';
---

<Container
  fit="contain"
  aspectRatio={3 / 4}
  height="lg"
  background="accent/10"
  contentBorder={false}>
  <p>比例内容区域无边框</p>
</Container>

---
/**
 * @component ContainerFitCover
 * @description Container 组件 fit="cover" 示例
 */
import { Container, Heading } from '@coffic/cosy-ui';
---

<Container
  fit="cover"
  aspectRatio={4 / 3}
  height="lg"
  background="secondary/10"
  contentBorder
  rounded="md">
  <Heading level={4}>按比例铺满（cover）</Heading>
  <p>内容保持 4:3 比例，铺满可用区域，可能会被裁剪。</p>
</Container>

---
/**
 * @component ContainerFlexCol
 * @description Container 组件列布局示例
 */
import { Container, PlaceHolder } from '@coffic/cosy-ui';
---

<Container flex="col" gap="md" background="accent/40" border rounded="md">
  <PlaceHolder background="primary" class="cosy:p-2"> 项目 1 </PlaceHolder>
  <PlaceHolder background="secondary" class="cosy:p-2"> 项目 2 </PlaceHolder>
  <PlaceHolder background="accent" class="cosy:p-2"> 项目 3 </PlaceHolder>
</Container>

---
/**
 * @component ContainerFlexCenter
 * @description Container 组件居中对齐示例
 */
import { Container, PlaceHolder } from '@coffic/cosy-ui';
---

<Container
  flex="row"
  gap="md"
  items="center"
  justify="center"
  rounded="md"
  border
  background="accent/40"
  class="not-prose">
  <PlaceHolder background="primary" class="cosy:p-2"> 居中 </PlaceHolder>
  <PlaceHolder background="secondary" class="cosy:p-2"> 对齐 </PlaceHolder>
</Container>

---
/**
 * @component ContainerFlexBetween
 * @description Container 组件两端对齐示例
 */
import { Container, PlaceHolder } from '@coffic/cosy-ui';
---

<Container
  flex="row"
  gap="md"
  justify="between"
  border
  rounded="md"
  background="accent/30">
  <PlaceHolder background="primary" class="cosy:p-2"> 左侧 </PlaceHolder>
  <PlaceHolder background="secondary" class="cosy:p-2"> 右侧 </PlaceHolder>
</Container>

---
import { Container, PlaceHolder } from '@coffic/cosy-ui';
---

<Container
  width="md"
  flex="row"
  gap="sm"
  border
  rounded="md"
  background="accent/30">
  <PlaceHolder background="primary"> 项目 1 </PlaceHolder>
  <PlaceHolder background="secondary"> 项目 2 </PlaceHolder>
  <PlaceHolder background="accent"> 项目 3 </PlaceHolder>
</Container>

---
import { Container, PlaceHolder } from '@coffic/cosy-ui';
---

<Container
  width="md"
  flex="row"
  gap="md"
  border
  rounded="md"
  background="accent/30">
  <PlaceHolder background="primary"> 项目 1 </PlaceHolder>
  <PlaceHolder background="secondary"> 项目 2 </PlaceHolder>
  <PlaceHolder background="accent"> 项目 3 </PlaceHolder>
</Container>

---
import { Container, PlaceHolder } from '@coffic/cosy-ui';
---

<Container
  width="md"
  flex="row"
  gap="lg"
  border
  rounded="md"
  background="accent/30">
  <PlaceHolder background="primary"> 项目 1 </PlaceHolder>
  <PlaceHolder background="secondary"> 项目 2 </PlaceHolder>
  <PlaceHolder background="accent"> 项目 3 </PlaceHolder>
</Container>

---
import { Container, PlaceHolder } from '@coffic/cosy-ui';
---

<Container
  width="md"
  flex="row"
  gap="xl"
  border
  rounded="md"
  background="accent/30">
  <PlaceHolder background="primary"> 项目 1 </PlaceHolder>
  <PlaceHolder background="secondary"> 项目 2 </PlaceHolder>
  <PlaceHolder background="accent"> 项目 3 </PlaceHolder>
</Container>

---
import { Container } from '@coffic/cosy-ui';
---

<Container width="sm" border background="secondary/10" height="md" rounded="md">
  <p>中等高度容器</p>
</Container>

---
import { Container } from '@coffic/cosy-ui';
---

<Container width="sm" border background="accent/10" height="lg" rounded="md">
  <p>大高度容器</p>
</Container>

---
import { Container } from '@coffic/cosy-ui';
---

<Container width="sm" border background="info/10" height="2xl" rounded="md">
  <p>超大高度容器</p>
</Container>

---
import { Container } from '@coffic/cosy-ui';
---

<Container
  width="sm"
  border
  background="warning/10"
  height="screen"
  rounded="md">
  <p>屏幕高度容器</p>
</Container>

---
import { Container } from '@coffic/cosy-ui';
---

<Container width="sm" border background="success/10" rounded="md">
  <p>自动高度容器</p>
  <p>内容决定高度</p>
</Container>

---
import { Container, PlaceHolder } from '@coffic/cosy-ui';
---

<Container
  width="md"
  height="xl"
  flex="row"
  items="center"
  background="accent/40"
  border
  rounded="md">
  <PlaceHolder background="primary" class="cosy:p-2">居中对齐</PlaceHolder>
  <PlaceHolder background="secondary" class="cosy:p-2">居中对齐</PlaceHolder>
</Container>

---
import { Container, PlaceHolder } from '@coffic/cosy-ui';
---

<Container
  width="md"
  height="xl"
  flex="row"
  items="end"
  background="accent/40"
  border
  rounded="md">
  <PlaceHolder background="primary" class="cosy:p-2">底部对齐</PlaceHolder>
  <PlaceHolder background="secondary" class="cosy:p-2">底部对齐</PlaceHolder>
</Container>

---
import { Container, PlaceHolder } from '@coffic/cosy-ui';
---

<Container
  width="md"
  height="xl"
  flex="row"
  items="stretch"
  background="accent/40"
  border
  rounded="md">
  <PlaceHolder background="primary" class="cosy:p-2">拉伸对齐</PlaceHolder>
  <PlaceHolder background="secondary" class="cosy:p-2">拉伸对齐</PlaceHolder>
</Container>

---
import { Container, PlaceHolder } from '@coffic/cosy-ui';
---

<Container
  width="md"
  height="xl"
  flex="row"
  items="baseline"
  border
  rounded="md"
  background="accent/40">
  <PlaceHolder background="primary" class="cosy:p-2">基线对齐</PlaceHolder>
  <PlaceHolder background="secondary" class="cosy:p-2">基线对齐</PlaceHolder>
</Container>

---
import { Container, PlaceHolder } from '@coffic/cosy-ui';
---

<Container
  width="md"
  height="xl"
  flex="row"
  justify="center"
  border
  rounded="md"
  background="accent/40">
  <PlaceHolder background="primary" class="cosy:p-2">居中对齐</PlaceHolder>
  <PlaceHolder background="secondary" class="cosy:p-2">居中对齐</PlaceHolder>
</Container>

---
import { Container, PlaceHolder } from '@coffic/cosy-ui';
---

<Container
  width="md"
  height="xl"
  flex="row"
  justify="end"
  border
  rounded="md"
  background="accent/40">
  <PlaceHolder background="primary" class="cosy:p-2">右对齐</PlaceHolder>
  <PlaceHolder background="secondary" class="cosy:p-2">右对齐</PlaceHolder>
</Container>

---
import { Container, PlaceHolder } from '@coffic/cosy-ui';
---

<Container
  width="md"
  height="xl"
  flex="row"
  justify="between"
  background="accent/40"
  border
  rounded="md">
  <PlaceHolder background="primary" class="cosy:p-2">两端对齐</PlaceHolder>
  <PlaceHolder background="secondary" class="cosy:p-2">两端对齐</PlaceHolder>
</Container>

---
import { Container, PlaceHolder } from '@coffic/cosy-ui';
---

<Container
  width="md"
  height="xl"
  flex="row"
  justify="around"
  background="accent/40"
  border
  rounded="md">
  <PlaceHolder background="primary" class="cosy:p-2">环绕对齐</PlaceHolder>
  <PlaceHolder background="secondary" class="cosy:p-2">环绕对齐</PlaceHolder>
</Container>

---
import { Container, PlaceHolder } from '@coffic/cosy-ui';
---

<Container
  width="md"
  height="xl"
  flex="row"
  justify="evenly"
  background="accent/40"
  border
  rounded="md">
  <PlaceHolder background="primary" class="cosy:p-2">均匀对齐</PlaceHolder>
  <PlaceHolder background="secondary" class="cosy:p-2">均匀对齐</PlaceHolder>
</Container>

---
/**
 * @component ContainerMarginXs
 * @description Container 组件xs外边距示例
 */
import { Container, Heading } from '@coffic/cosy-ui';
---

<Heading level={3} margin="none" background="info" padding="sm"
  >上方内容区域</Heading
>

<Container margin="xs" background="accent/40">
  <p class="cosy:text-center">xs外边距的容器</p>
</Container>

<Heading level={3} margin="none" background="info" padding="sm"
  >下方内容区域</Heading
>

---
/**
 * @component ContainerMarginSm
 * @description Container 组件sm外边距示例
 */
import { Container, Heading } from '@coffic/cosy-ui';
---

<Heading level={3} margin="none" background="info" padding="sm"
  >上方内容区域</Heading
>

<Container margin="sm" background="accent/40">
  <p class="cosy:text-center">sm外边距的容器</p>
</Container>

<Heading level={3} margin="none" background="info" padding="sm"
  >下方内容区域</Heading
>

---
/**
 * @component ContainerMarginMd
 * @description Container 组件中等外边距示例
 */
import { Container, Heading } from '@coffic/cosy-ui';
---

<Heading level={3} margin="none" background="info" padding="sm"
  >上方内容区域</Heading
>

<Container margin="md" background="accent/40">
  <p class="cosy:text-center">中等外边距的容器</p>
</Container>

<Heading level={3} margin="none" background="info" padding="sm"
  >下方内容区域</Heading
>

---
/**
 * @component ContainerMarginLg
 * @description Container 组件lg外边距示例
 */
import { Container, Heading } from '@coffic/cosy-ui';
---

<Heading level={3} margin="none" background="info" padding="sm"
  >上方内容区域</Heading
>

<Container margin="lg" background="accent/40">
  <p class="cosy:text-center">lg外边距的容器</p>
</Container>

<Heading level={3} margin="none" background="info" padding="sm"
  >下方内容区域</Heading
>

---
/**
 * @component ContainerMarginXl
 * @description Container 组件xl外边距示例
 */
import { Container, Heading } from '@coffic/cosy-ui';
---

<Heading level={3} margin="none" background="info" padding="sm"
  >上方内容区域</Heading
>

<Container margin="xl" background="accent/40">
  <p class="cosy:text-center">xl外边距的容器</p>
</Container>

<Heading level={3} margin="none" background="info" padding="sm"
  >下方内容区域</Heading
>

---
/**
 * @component ContainerMargin2xl
 * @description Container 组件2xl外边距示例
 */
import { Container, Heading } from '@coffic/cosy-ui';
---

<Heading level={3} margin="none" background="info" padding="sm"
  >上方内容区域</Heading
>

<Container margin="2xl" background="accent/40">
  <p class="cosy:text-center">2xl外边距的容器</p>
</Container>

<Heading level={3} margin="none" background="info" padding="sm"
  >下方内容区域</Heading
>

---
/**
 * @component ContainerMargin3xl
 * @description Container 组件3xl外边距示例
 */
import { Container, Heading } from '@coffic/cosy-ui';
---

  <Heading level={3} margin="none" background="info" padding="sm"
    >上方内容区域</Heading
  >

  <Container margin="3xl" background="accent/40">
    <p class="cosy:text-center">3xl外边距的容器</p>
  </Container>

  <Heading level={3} margin="none" background="info" padding="sm"
    >下方内容区域</Heading
  >

---
/**
 * @component ContainerMargin4xl
 * @description Container 组件4xl外边距示例
 */
import { Container, Heading } from '@coffic/cosy-ui';
---

<Heading level={3} margin="none" background="info" padding="sm"
  >上方内容区域</Heading
>

<Container margin="4xl" background="accent/40">
  <p class="cosy:text-center">4xl外边距的容器</p>
</Container>

<Heading level={3} margin="none" background="info" padding="sm"
  >下方内容区域</Heading
>

---
/**
 * @component ContainerMargin5xl
 * @description Container 组件5xl外边距示例
 */
import { Container, Heading } from '@coffic/cosy-ui';
---

<Heading level={3} margin="none" background="info" padding="sm"
  >上方内容区域</Heading
>

<Container margin="5xl" background="accent/40">
  <p class="cosy:text-center">5xl外边距的容器</p>
</Container>

<Heading level={3} margin="none" background="info" padding="sm"
  >下方内容区域</Heading
>

---
/**
 * @component ContainerMargin6xl
 * @description Container 组件6xl外边距示例
 */
import { Container, Heading } from '@coffic/cosy-ui';
---

<Heading level={3} margin="none" background="info" padding="sm"
  >上方内容区域</Heading
>

<Container margin="6xl" background="accent/40">
  <p class="cosy:text-center">6xl外边距的容器</p>
</Container>

<Heading level={3} margin="none" background="info" padding="sm"
  >下方内容区域</Heading
>

---
/**
 * @component ContainerPaddingSm
 * @description Container 组件小内边距示例
 */
import { Container } from '@coffic/cosy-ui';
---

<Container padding="sm" background="accent/40" border rounded="md">
  <p>小内边距</p>
</Container>

---
/**
 * @component ContainerPaddingMd
 * @description Container 组件中等内边距示例
 */
import { Container } from '@coffic/cosy-ui';
---

<Container padding="md" background="accent/40" border rounded="md">
  <p>中等内边距</p>
</Container>

---
/**
 * @component ContainerPaddingLg
 * @description Container 组件大内边距示例
 */
import { Container } from '@coffic/cosy-ui';
---

<Container padding="lg" background="accent/40" border rounded="md">
  <p>大内边距</p>
</Container>

---
/**
 * @component ContainerPaddingXl
 * @description Container 组件超大内边距示例
 */
import { Container } from '@coffic/cosy-ui';
---

<Container padding="xl" background="accent/40" border rounded="md">
  <p>超大内边距</p>
</Container>

---
import { Container } from '@coffic/cosy-ui';
---

<Container rounded="sm" border background="accent/10">
  <p>小圆角</p>
</Container>

---
import { Container } from '@coffic/cosy-ui';
---

<Container rounded="md" border background="accent/10">
  <p>中等圆角</p>
</Container>

---
import { Container } from '@coffic/cosy-ui';
---

<Container rounded="lg" border background="accent/10">
  <p>大圆角</p>
</Container>

---
import { Container } from '@coffic/cosy-ui';
---

<Container rounded="xl" border background="accent/10">
  <p>超大圆角</p>
</Container>

---
import { Container } from '@coffic/cosy-ui';
---

<Container rounded="full" border background="accent/10">
  <p>完全圆角</p>
</Container>

---
import { Container } from '@coffic/cosy-ui';
---

<Container width="sm" border background="accent/10" rounded="md">
  <p>小宽度容器</p>
</Container>

---
import { Container } from '@coffic/cosy-ui';
---

<Container width="md" border background="accent/10" rounded="md">
  <p>中等宽度容器</p>
</Container>

---
import { Container } from '@coffic/cosy-ui';
---

<Container width="lg" border background="accent/10" rounded="md">
  <p>大宽度容器</p>
</Container>

---
import { Container } from '@coffic/cosy-ui';
---

<Container width="xl" border background="accent/10" rounded="md">
  <p>超大宽度容器</p>
</Container>

---
import { Container } from '@coffic/cosy-ui';
---

<Container width="full" border background="accent/10" rounded="md">
  <p>全宽容器</p>
</Container>