Container

Introduction

The Container component is a basic layout container used to limit content width and center display. It provides various sizes and padding options, suitable for different layout needs.

Examples

这是一个基础的容器，内容被限制在合理宽度内。

Props

aspectRatio

Aspect ratio (width/height), when set, the container will maintain this ratio, such as 16/9, 4/3, 1, etc.

16:9 比例的内容区域

4:3 比例的内容区域

正方形内容

3:2 比例的内容区域

width="xs" 和 aspectRatio=0.5 共同作用。

不能同时设置 aspectRatio、width 与 height。可两两组合，但不能同时设置3个。

16:9 比例的内容区域

4:3 比例的内容区域

正方形内容

3:2 比例的内容区域

height="6xl"aspectRatio="1/2"

width="xs" 和 aspectRatio={1 / 2} 共同作用。

不能同时设置 aspectRatio、width 与 height。可两两组合，但不能同时设置3个。

---



/**
 * @component ContainerAspectRatio16x9
 * @description Container 组件 16:9 比例示例
 */
import { Container } from "@coffic/cosy-ui";
---

<Container aspectRatio={16 / 9} background="primary/90" rounded="md">
    <p>16:9 比例的内容区域</p>
</Container>

---



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

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

---



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

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

---



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

<Container aspectRatio={3 / 2} background="neutral/90" 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/90"
    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/90"
    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/90"
    rounded="md"
    class="not-prose"
/>

<script setup lang="ts">
import { Container } from '@coffic/cosy-ui/vue';
</script>
<template>
  <Container :aspectRatio="16 / 9" background="primary/90" rounded="md">
    <p>16:9 比例的内容区域</p>
  </Container>
</template>

<script setup lang="ts">
import { Container } from '@coffic/cosy-ui/vue';
</script>
<template>
  <Container :aspectRatio="4 / 3" background="secondary/90" rounded="lg">
    <p>4:3 比例的内容区域</p>
  </Container>
</template>

<script setup lang="ts">
import { Container } from '@coffic/cosy-ui/vue';
</script>
<template>
  <Container :aspectRatio="1" width="sm" background="accent/90" border="sm" rounded="md">
    <p>正方形内容</p>
  </Container>
</template>

<script setup lang="ts">
import { Container } from '@coffic/cosy-ui/vue';
</script>
<template>
  <Container :aspectRatio="3 / 2" background="neutral/90" rounded="xl">
    <p>3:2 比例的内容区域</p>
  </Container>
</template>

<script setup lang="ts">
import { Container } from '@coffic/cosy-ui/vue';
</script>
<template>
  <Container
    :aspectRatio="1 / 2"
    height="6xl"
    background="info/90"
    rounded="md"
    class="not-prose"
  >
    <p>
      <code>height="6xl"</code>
      <code>aspectRatio="1/2"</code>
    </p>
  </Container>
</template>

<script setup lang="ts">
import { Container } from '@coffic/cosy-ui/vue';
</script>
<template>
  <Container
    :aspectRatio="1 / 2"
    width="xs"
    background="success/90"
    rounded="md"
    class="not-prose"
  >
    <p>
      <code>width="xs"</code> 和 <code>aspectRatio={1 / 2}</code> 共同作用。
    </p>
  </Container>
</template>

<script setup lang="ts">
import { Container } from '@coffic/cosy-ui/vue';
</script>
<template>
  <Container
    :aspectRatio="16 / 9"
    width="md"
    height="lg"
    background="warning/90"
    rounded="md"
    class="not-prose"
  />
</template>

background

Background color type, supports all Tailwind background colors and opacity variants, such as: base-100, primary, secondary, accent, neutral, info, success, warning, error, and opacity variants like primary/10, secondary/20, etc.

基础背景色 base-100

主要背景色 primary

强调背景色 accent

透明度背景色 primary/90

成功背景色 success

基础背景色 base-100

主要背景色 primary

强调背景色 accent

透明度背景色 primary/10

成功背景色 success

---



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

<Container background="base-100" padding="md" border rounded="md">
  <p>基础背景色 base-100</p>
</Container>

---



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/90" padding="md" border rounded="md">
    <p>透明度背景色 primary/90</p>
</Container>

---



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

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

<template>
  <Container background="base-100" padding="md" border="sm" rounded="md">
    <p>基础背景色 base-100</p>
  </Container>
</template>

<script setup lang="ts">
import { Container } from "@coffic/cosy-ui/vue";
</script>

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

<script setup lang="ts">
import { Container } from "@coffic/cosy-ui/vue";
</script>

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

<script setup lang="ts">
import { Container } from "@coffic/cosy-ui/vue";
</script>

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

<script setup lang="ts">
import { Container } from "@coffic/cosy-ui/vue";
</script>

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

<script setup lang="ts">
import { Container } from "@coffic/cosy-ui/vue";
</script>

backgroundImage

Background image source (local ImageMetadata or remote URL). When provided, it will be used as the background image.

本地图片背景

第一个容器

第二个容器

远程图片背景

本地图片背景

第一个容器

第二个容器

---



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

<Container
  backgroundImage="https://picsum.photos/1200/600"
  padding="md"
  rounded="md">
  <PlaceHolder width="full" height="2xl" padding="md" background="accent/30">
    <Heading>远程图片背景</Heading>
  </PlaceHolder>
</Container>

---



import { Container, PlaceHolder } from "@coffic/cosy-ui";
import bg from "@/assets/factory.png";
---

<Container
    backgroundImage={bg}
    padding="md"
    rounded="md"
    width="full"
    height="4xl">
    <PlaceHolder width="sm" height="xl" padding="md" background="primary">
        <p>本地图片背景</p>
    </PlaceHolder>
</Container>

---



import { Container, PlaceHolder } from "@coffic/cosy-ui";
import bg from "@/assets/factory.png";
import bg2 from "@/assets/hero.png";
---

<div class="cosy:space-y-md">
    <Container backgroundImage={bg} padding="md" rounded="md" width="full">
        <PlaceHolder
            width="full"
            height="2xl"
            padding="md"
            background="accent/60">
            第一个容器
        </PlaceHolder>
    </Container>

    <Container
        backgroundImage={bg2}
        padding="md"
        rounded="md"
        width="full"
        height="4xl">
        <PlaceHolder
            width="sm"
            height="xl"
            padding="md"
            background="primary/60">
            第二个容器
        </PlaceHolder>
    </Container>
</div>

<script setup lang="ts">
import { Container, Heading, PlaceHolder } from '@coffic/cosy-ui/vue';
</script>
<template>
  <Container
    backgroundImage="https://picsum.photos/1200/600"
    padding="md"
    rounded="md"
  >
    <PlaceHolder width="full" height="2xl" padding="md" background="accent/30">
      <Heading>远程图片背景</Heading>
    </PlaceHolder>
  </Container>
</template>

<script setup lang="ts">
import { Container, PlaceHolder } from '@coffic/cosy-ui/vue';
</script>
<template>
  <Container
    backgroundImage="/assets/factory.png"
    padding="md"
    rounded="md"
    width="full"
    height="4xl"
  >
    <PlaceHolder width="sm" height="xl" padding="md" background="primary">
      <p>本地图片背景</p>
    </PlaceHolder>
  </Container>
</template>

<script setup lang="ts">
import { Container, PlaceHolder } from '@coffic/cosy-ui/vue';
</script>
<template>
  <div class="cosy:space-y-md">
    <Container backgroundImage="/assets/factory.png" padding="md" rounded="md" width="full">
      <PlaceHolder
        width="full"
        height="2xl"
        padding="md"
        background="accent/60"
      >
        第一个容器
      </PlaceHolder>
    </Container>

    <Container
      backgroundImage="/assets/hero.png"
      padding="md"
      rounded="md"
      width="full"
      height="4xl"
    >
      <PlaceHolder
        width="sm"
        height="xl"
        padding="md"
        background="primary/60"
      >
        第二个容器
      </PlaceHolder>
    </Container>
  </div>
</template>

border

Border size, optional values: none, sm, md, lg, xl.

无边框的容器 (border="none")

细边框的容器 (border="sm")

中等边框的容器 (border="md")

粗边框的容器 (border="lg")

超粗边框的容器 (border="xl")

无边框的容器 (border="none")

细边框的容器 (border="sm")

中等边框的容器 (border="md")

粗边框的容器 (border="lg")

超粗边框的容器 (border="xl")

---



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

<Container width="md" border="none" background="base-100" rounded="md">
    <p style="text-align: center;">无边框的容器 (border="none")</p>
</Container>

---



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

<Container width="md" border="sm" background="primary/90" rounded="md">
    <p style="text-align: center;">细边框的容器 (border="sm")</p>
</Container>

---



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

<Container width="md" border="md" background="secondary/90" rounded="md">
    <p style="text-align: center;">中等边框的容器 (border="md")</p>
</Container>

---



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

<Container width="md" border="lg" background="accent/90" rounded="md">
    <p style="text-align: center;">粗边框的容器 (border="lg")</p>
</Container>

---



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

<Container width="md" border="xl" background="neutral/90" rounded="md">
    <p style="text-align: center;">超粗边框的容器 (border="xl")</p>
</Container>

<template>
  <Container width="md" border="none" background="primary/10" rounded="md">
    <p style="text-align: center;">无边框的容器 (border="none")</p>
  </Container>
</template>

<script setup lang="ts">
import { Container } from "@coffic/cosy-ui/vue";
</script>

<template>
  <Container width="md" border="sm" background="primary/10" rounded="md">
    <p style="text-align: center;">细边框的容器 (border="sm")</p>
  </Container>
</template>

<script setup lang="ts">
import { Container } from "@coffic/cosy-ui/vue";
</script>

<template>
  <Container width="md" border="md" background="primary/10" rounded="md">
    <p style="text-align: center;">中等边框的容器 (border="md")</p>
  </Container>
</template>

<script setup lang="ts">
import { Container } from "@coffic/cosy-ui/vue";
</script>

<template>
  <Container width="md" border="lg" background="primary/10" rounded="md">
    <p style="text-align: center;">粗边框的容器 (border="lg")</p>
  </Container>
</template>

<script setup lang="ts">
import { Container } from "@coffic/cosy-ui/vue";
</script>

<template>
  <Container width="md" border="xl" background="primary/10" rounded="md">
    <p style="text-align: center;">超粗边框的容器 (border="xl")</p>
  </Container>
</template>

<script setup lang="ts">
import { Container } from "@coffic/cosy-ui/vue";
</script>

centered

Whether to center display, when set to false, the container will be left-aligned.

class

Custom CSS class name for adding additional styles.

基础容器，使用 class="custom-basic"

高级容器，使用多个 class

基础容器，使用 class="custom-basic"

高级容器，使用 class="custom-advanced"

---



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

<Container width="md" class="custom-basic">
  <p>基础容器，使用 class="custom-basic"</p>
</Container>

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

---



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>

<template>
  <Container width="md" class="custom-basic">
    <p>基础容器，使用 class="custom-basic"</p>
  </Container>
</template>

<script setup lang="ts">
import { Container } from "@coffic/cosy-ui/vue";
</script>

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

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

<script setup lang="ts">
import { Container } from "@coffic/cosy-ui/vue";
</script>

<style>
  .custom-advanced {
    background: linear-gradient(45deg, #3b82f6, #8b5cf6);
    color: white;
    border-radius: 1rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  }
</style>

contentCentered

Whether to center the internal content, when enabled, flex layout will be used to center the content within the container.

fit

Content fit mode: none (default), contain (maintain aspect ratio, try to fill without overflow), cover (maintain aspect ratio, fill and may crop).

按比例自适应（contain）

内容保持 1:2 比例，尽可能占满父容器且不会溢出。

父容器高度由 height 控制，宽度受 width 或页面布局限制。

按比例铺满（cover）

内容保持 4:3 比例，铺满可用区域，可能会被裁剪。

---



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

<Container
    fit="contain"
    aspectRatio={1 / 2}
    height="2xl"
    background="primary/90"
    rounded="md">
    <Heading level={4}>按比例自适应（contain）</Heading>
    <p>内容保持 1:2 比例，尽可能占满父容器且不会溢出。</p>
    <p>父容器高度由 height 控制，宽度受 width 或页面布局限制。</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/90"
    rounded="md">
    <Heading level={4}>按比例铺满（cover）</Heading>
    <p>内容保持 4:3 比例，铺满可用区域，可能会被裁剪。</p>
</Container>

<script setup lang="ts">
import { Container, Heading } from '@coffic/cosy-ui/vue';
</script>
<template>
  <div style="display: flex; flex-direction: column; gap: 1rem;">
    <Container :fit="'contain'" :aspectRatio="1 / 2" height="2xl" background="primary/90" rounded="md">
      <Heading :level="4">按比例自适应（contain）</Heading>
      <p>内容保持 1:2 比例，尽可能占满父容器且不会溢出。</p>
      <p>父容器高度由 height 控制，宽度受 width 或页面布局限制。</p>
    </Container>
    <Container :fit="'cover'" :aspectRatio="4 / 3" height="lg" background="secondary/90" rounded="md">
      <Heading :level="4">按比例铺满（cover）</Heading>
      <p>内容保持 4:3 比例，铺满可用区域，可能会被裁剪。</p>
    </Container>
  </div>
</template>

<script setup lang="ts">
import { Container, Heading } from '@coffic/cosy-ui/vue';
</script>
<template>
  <div style="display: flex; flex-direction: column; gap: 1rem;">
    <Container :fit="'contain'" :aspectRatio="1 / 2" height="2xl" background="primary/90" rounded="md">
      <Heading :level="4">按比例自适应（contain）</Heading>
      <p>内容保持 1:2 比例，尽可能占满父容器且不会溢出。</p>
      <p>父容器高度由 height 控制，宽度受 width 或页面布局限制。</p>
    </Container>
    <Container :fit="'cover'" :aspectRatio="4 / 3" height="lg" background="secondary/90" rounded="md">
      <Heading :level="4">按比例铺满（cover）</Heading>
      <p>内容保持 4:3 比例，铺满可用区域，可能会被裁剪。</p>
    </Container>
  </div>
</template>

flex

Flex layout direction, optional values: row, col, row-reverse, col-reverse. No flex layout when not set.

项目 1

项目 2

项目 3

项目 1

项目 2

项目 3

居中

对齐

左侧

右侧

项目 1

项目 2

项目 3

项目 1

项目 2

项目 3

居中项目

项目 1

项目 2

项目 3

---



/**
 * @component ContainerFlexRow
 * @description Container 组件行布局示例
 */
import { Container, PlaceHolder } from "@coffic/cosy-ui";
---

<Container
  flex="row"
  gap="md"
  class="cosy:bg-base-200"
  border
  rounded="md"
  background="accent/30">
  <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 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>

<template>
  <Container
    flex="row"
    gap="md"
    class="cosy:bg-base-200"
    border="sm"
    rounded="md"
    background="accent/30">
    <div class="cosy:bg-primary cosy:p-2">项目 1</div>
    <div class="cosy:bg-secondary cosy:p-2">项目 2</div>
    <div class="cosy:bg-accent cosy:p-2">项目 3</div>
  </Container>
</template>

<script setup lang="ts">
import { Container } from "@coffic/cosy-ui/vue";
</script>

<template>
  <Container
    flex="col"
    gap="md"
    class="cosy:bg-base-200"
    border="sm"
    rounded="md"
    background="accent/30">
    <div class="cosy:bg-primary cosy:p-2">项目 1</div>
    <div class="cosy:bg-secondary cosy:p-2">项目 2</div>
    <div class="cosy:bg-accent cosy:p-2">项目 3</div>
  </Container>
</template>

<script setup lang="ts">
import { Container } from "@coffic/cosy-ui/vue";
</script>

<template>
  <Container
    flex="row"
    items="center"
    justify="center"
    gap="md"
    class="cosy:h-24 cosy:bg-base-200"
    border="sm"
    rounded="md"
    background="accent/30">
    <div class="cosy:bg-primary cosy:p-2">居中项目</div>
  </Container>
</template>

<script setup lang="ts">
import { Container } from "@coffic/cosy-ui/vue";
</script>

<template>
  <Container
    flex="row"
    justify="between"
    gap="md"
    class="cosy:bg-base-200"
    border="sm"
    rounded="md"
    background="accent/30">
    <div class="cosy:bg-primary cosy:p-2">项目 1</div>
    <div class="cosy:bg-secondary cosy:p-2">项目 2</div>
    <div class="cosy:bg-accent cosy:p-2">项目 3</div>
  </Container>
</template>

<script setup lang="ts">
import { Container } from "@coffic/cosy-ui/vue";
</script>

gap

Flex item spacing, optional values: none, xs, sm, md, lg, xl. Only effective when flex layout is enabled.

项目 1

项目 2

项目 3

项目 1

项目 2

项目 3

项目 1

项目 2

项目 3

项目 1

项目 2

项目 3

项目 1

项目 2

项目 3

项目 1

项目 2

项目 3

项目 1

项目 2

项目 3

项目 1

项目 2

项目 3

项目 1

项目 2

项目 3

项目 1

项目 2

项目 3

---



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

<Container
  width="md"
  flex="row"
  gap="none"
  border
  rounded="md"
  background="accent/30">
  <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>

---



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>

<template>
  <Container
    width="md"
    flex="row"
    gap="none"
    border="sm"
    rounded="md"
    background="accent/30">
    <div class="cosy:bg-primary">项目 1</div>
    <div class="cosy:bg-secondary">项目 2</div>
    <div class="cosy:bg-accent">项目 3</div>
  </Container>
</template>

<script setup lang="ts">
import { Container } from "@coffic/cosy-ui/vue";
</script>

<template>
  <Container
    width="md"
    flex="row"
    gap="sm"
    border="sm"
    rounded="md"
    background="accent/30">
    <div class="cosy:bg-primary">项目 1</div>
    <div class="cosy:bg-secondary">项目 2</div>
    <div class="cosy:bg-accent">项目 3</div>
  </Container>
</template>

<script setup lang="ts">
import { Container } from "@coffic/cosy-ui/vue";
</script>

<template>
  <Container
    width="md"
    flex="row"
    gap="md"
    border="sm"
    rounded="md"
    background="accent/30">
    <div class="cosy:bg-primary">项目 1</div>
    <div class="cosy:bg-secondary">项目 2</div>
    <div class="cosy:bg-accent">项目 3</div>
  </Container>
</template>

<script setup lang="ts">
import { Container } from "@coffic/cosy-ui/vue";
</script>

<template>
  <Container
    width="md"
    flex="row"
    gap="lg"
    border="sm"
    rounded="md"
    background="accent/30">
    <div class="cosy:bg-primary">项目 1</div>
    <div class="cosy:bg-secondary">项目 2</div>
    <div class="cosy:bg-accent">项目 3</div>
  </Container>
</template>

<script setup lang="ts">
import { Container } from "@coffic/cosy-ui/vue";
</script>

<template>
  <Container
    width="md"
    flex="row"
    gap="xl"
    border="sm"
    rounded="md"
    background="accent/30">
    <div class="cosy:bg-primary">项目 1</div>
    <div class="cosy:bg-secondary">项目 2</div>
    <div class="cosy:bg-accent">项目 3</div>
  </Container>
</template>

<script setup lang="ts">
import { Container } from "@coffic/cosy-ui/vue";
</script>

height

Container height, optional values: none, xs, sm, md, lg, xl, 2xl, 3xl, 4xl, 5xl, 6xl, screen, auto. None means no height setting.

小高度容器

中等高度容器

大高度容器

超大高度容器

屏幕高度容器

自动高度容器

Container with fixed height

---



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

<Container width="xs" border background="primary/90" height="xs" rounded="md">
    <p>小高度容器</p>
</Container>

---



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

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

---



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

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

---



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

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

---



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

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

---



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

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

<template>
  <Container 
    height="lg" 
    background="secondary/10"
    rounded="md">
    <div class="cosy:p-4">
      <h3 class="cosy:text-lg cosy:font-bold">Height Example</h3>
      <p>Container with fixed height</p>
    </div>
  </Container>
</template>

<script setup lang="ts">
import { Container } from "@coffic/cosy-ui/vue";
</script>

<template>
  <Container 
    height="lg" 
    background="secondary/10"
    rounded="md">
    <div class="cosy:p-4">
      <h3 class="cosy:text-lg cosy:font-bold">Height Example</h3>
      <p>Container with fixed height</p>
    </div>
  </Container>
</template>

<script setup lang="ts">
import { Container } from "@coffic/cosy-ui/vue";
</script>

<template>
  <Container 
    height="lg" 
    background="secondary/10"
    rounded="md">
    <div class="cosy:p-4">
      <h3 class="cosy:text-lg cosy:font-bold">Height Example</h3>
      <p>Container with fixed height</p>
    </div>
  </Container>
</template>

<script setup lang="ts">
import { Container } from "@coffic/cosy-ui/vue";
</script>

<template>
  <Container 
    height="lg" 
    background="secondary/10"
    rounded="md">
    <div class="cosy:p-4">
      <h3 class="cosy:text-lg cosy:font-bold">Height Example</h3>
      <p>Container with fixed height</p>
    </div>
  </Container>
</template>

<script setup lang="ts">
import { Container } from "@coffic/cosy-ui/vue";
</script>

<template>
  <Container 
    height="lg" 
    background="secondary/10"
    rounded="md">
    <div class="cosy:p-4">
      <h3 class="cosy:text-lg cosy:font-bold">Height Example</h3>
      <p>Container with fixed height</p>
    </div>
  </Container>
</template>

<script setup lang="ts">
import { Container } from "@coffic/cosy-ui/vue";
</script>

<template>
  <Container 
    height="lg" 
    background="secondary/10"
    rounded="md">
    <div class="cosy:p-4">
      <h3 class="cosy:text-lg cosy:font-bold">Height Example</h3>
      <p>Container with fixed height</p>
    </div>
  </Container>
</template>

<script setup lang="ts">
import { Container } from "@coffic/cosy-ui/vue";
</script>

items

Flex item horizontal alignment, optional values: start, end, center, baseline, stretch. Only effective when flex layout is enabled.

justify

Flex item vertical alignment, optional values: start, end, center, between, around, evenly. Only effective when flex layout is enabled.

margin

下方内容区域

---



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

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

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

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

---



/**
 * @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
>

<script setup lang="ts">
import { Container, Heading } from '@coffic/cosy-ui/vue';
</script>
<template>
  <div>
    <Heading :level="3" margin="none" background="info" padding="sm">
      上方内容区域
    </Heading>

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

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

<script setup lang="ts">
import { Container, Heading } from '@coffic/cosy-ui/vue';
</script>
<template>
  <div>
    <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>
  </div>
</template>

<script setup lang="ts">
import { Container, Heading } from '@coffic/cosy-ui/vue';
</script>
<template>
  <div>
    <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>
  </div>
</template>

<script setup lang="ts">
import { Container, Heading } from '@coffic/cosy-ui/vue';
</script>
<template>
  <div>
    <Heading :level="3" margin="none" background="info" padding="sm">
      上方内容区域
    </Heading>

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

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

<script setup lang="ts">
import { Container, Heading } from '@coffic/cosy-ui/vue';
</script>
<template>
  <div>
    <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>
  </div>
</template>

<script setup lang="ts">
import { Container, Heading } from '@coffic/cosy-ui/vue';
</script>
<template>
  <div>
    <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>
  </div>
</template>

<script setup lang="ts">
import { Container, Heading } from '@coffic/cosy-ui/vue';
</script>
<template>
  <div>
    <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>
  </div>
</template>

<script setup lang="ts">
import { Container, Heading } from '@coffic/cosy-ui/vue';
</script>
<template>
  <div>
    <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>
  </div>
</template>

<script setup lang="ts">
import { Container, Heading } from '@coffic/cosy-ui/vue';
</script>
<template>
  <div>
    <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>
  </div>
</template>

<script setup lang="ts">
import { Container, Heading } from '@coffic/cosy-ui/vue';
</script>
<template>
  <div>
    <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>
  </div>
</template>

<script setup lang="ts">
import { Container, Heading } from '@coffic/cosy-ui/vue';
</script>
<template>
  <div>
    <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>
  </div>
</template>

muted

Whether to use muted style (inactive state). When set to true, the container will appear semi-transparent and disable interaction.

这是一个使用了 muted 属性的容器，看起来处于未激活状态。

---



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

<Container width="md" padding="md" muted background="base-100">
    <p>这是一个使用了 muted 属性的容器，看起来处于未激活状态。</p>
</Container>

<template>
  <Container width="md" padding="md" muted background="base-100">
    <p>这是一个使用了 muted 属性的容器，看起来处于未激活状态。</p>
  </Container>
</template>

<script setup lang="ts">
import { Container } from "@coffic/cosy-ui/vue";
</script>

padding

Padding size, optional values: none, sm, md, lg, xl, 2xl, 3xl, 4xl.

无内边距

小内边距

中等内边距

大内边距

超大内边距

无内边距

小内边距

中等内边距

大内边距

超大内边距

---



/**
 * @component ContainerPaddingNone
 * @description Container 组件无内边距示例
 */
import { Container } from "@coffic/cosy-ui";
---

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

---



/**
 * @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>

<template>
  <Container padding="none" background="accent/40" rounded="md">
    <p>无内边距</p>
  </Container>
</template>

<script setup lang="ts">
import { Container } from "@coffic/cosy-ui/vue";
</script>

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

<script setup lang="ts">
import { Container } from "@coffic/cosy-ui/vue";
</script>

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

<script setup lang="ts">
import { Container } from "@coffic/cosy-ui/vue";
</script>

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

<script setup lang="ts">
import { Container } from "@coffic/cosy-ui/vue";
</script>

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

<script setup lang="ts">
import { Container } from "@coffic/cosy-ui/vue";
</script>

rounded

Rounded corner size, optional values: none, sm, md, lg, xl, full.

无圆角

小圆角

中等圆角

大圆角

超大圆角

完全圆角

无圆角

小圆角

中等圆角

大圆角

超大圆角

圆形

---



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

<Container rounded="none" border background="accent/90">
    <p>无圆角</p>
</Container>

---



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

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

---



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

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

---



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

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

---



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

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

---



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

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

<template>
  <Container rounded="none" background="accent/10">
    <p>无圆角</p>
  </Container>
</template>

<script setup lang="ts">
import { Container } from "@coffic/cosy-ui/vue";
</script>

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

<script setup lang="ts">
import { Container } from "@coffic/cosy-ui/vue";
</script>

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

<script setup lang="ts">
import { Container } from "@coffic/cosy-ui/vue";
</script>

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

<script setup lang="ts">
import { Container } from "@coffic/cosy-ui/vue";
</script>

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

<script setup lang="ts">
import { Container } from "@coffic/cosy-ui/vue";
</script>

<template>
  <Container rounded="full" background="accent/10">
    <p>圆形</p>
  </Container>
</template>

<script setup lang="ts">
import { Container } from "@coffic/cosy-ui/vue";
</script>

shadow

Shadow size, optional values: none, sm, md, lg, xl, 2xl.

无阴影效果

小阴影效果

中等阴影效果

大阴影效果

超大阴影效果

双重阴影效果

无阴影效果

小阴影效果

中等阴影效果

大阴影效果

超大阴影效果

双重阴影效果

---



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

<Container shadow="none" padding="md" class="cosy:bg-base-100">
    <p class="cosy:text-center">无阴影效果</p>
</Container>

---



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

<Container shadow="sm" padding="md" class="cosy:bg-base-100">
    <p class="cosy:text-center">小阴影效果</p>
</Container>

---



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

<Container shadow="md" padding="md" class="cosy:bg-base-100">
    <p class="cosy:text-center">中等阴影效果</p>
</Container>

---



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

<Container shadow="lg" padding="md" class="cosy:bg-base-100">
    <p class="cosy:text-center">大阴影效果</p>
</Container>

---



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

<Container shadow="xl" padding="md" class="cosy:bg-base-100">
    <p class="cosy:text-center">超大阴影效果</p>
</Container>

---



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

<Container shadow="2xl" padding="md" class="cosy:bg-base-100">
    <p class="cosy:text-center">双重阴影效果</p>
</Container>

<template>
  <Container shadow="none" padding="md" class="cosy:bg-base-100">
    <p class="cosy:text-center">无阴影效果</p>
  </Container>
</template>

<script setup lang="ts">
import { Container } from "@coffic/cosy-ui/vue";
</script>

<template>
  <Container shadow="sm" padding="md" class="cosy:bg-base-100">
    <p class="cosy:text-center">小阴影效果</p>
  </Container>
</template>

<script setup lang="ts">
import { Container } from "@coffic/cosy-ui/vue";
</script>

<template>
  <Container shadow="md" padding="md" class="cosy:bg-base-100">
    <p class="cosy:text-center">中等阴影效果</p>
  </Container>
</template>

<script setup lang="ts">
import { Container } from "@coffic/cosy-ui/vue";
</script>

<template>
  <Container shadow="lg" padding="md" class="cosy:bg-base-100">
    <p class="cosy:text-center">大阴影效果</p>
  </Container>
</template>

<script setup lang="ts">
import { Container } from "@coffic/cosy-ui/vue";
</script>

<template>
  <Container shadow="xl" padding="md" class="cosy:bg-base-100">
    <p class="cosy:text-center">超大阴影效果</p>
  </Container>
</template>

<script setup lang="ts">
import { Container } from "@coffic/cosy-ui/vue";
</script>

<template>
  <Container shadow="2xl" padding="md" class="cosy:bg-base-100">
    <p class="cosy:text-center">双重阴影效果</p>
  </Container>
</template>

<script setup lang="ts">
import { Container } from "@coffic/cosy-ui/vue";
</script>

width

Container width, optional values: xs, sm, md, lg, xl, full. Controls the maximum width of the container.

超小宽度容器

小宽度容器

中等宽度容器

大宽度容器

超大宽度容器

全宽容器

这是一个超小尺寸容器

这是一个小尺寸容器

这是一个中等尺寸容器

这是一个大尺寸容器

这是一个超大尺寸容器

这是一个全宽容器

---



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

<Container width="xs" border background="accent/90" rounded="md">
    <p>超小宽度容器</p>
</Container>

---



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

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

---



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

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

---



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

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

---



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

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

---



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

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

<script setup lang="ts">
import { Container, Heading } from "@coffic/cosy-ui/vue";
</script>

<template>
    <Container size="xs" border>
        <div style="background-color: #f3f4f6; padding: 1rem; text-align: center;">
            <p style="margin: 0; color: #6b7280;">这是一个超小尺寸容器</p>
        </div>
    </Container>
</template>

<script setup lang="ts">
import { Container, Heading } from "@coffic/cosy-ui/vue";
</script>

<template>
    <Container size="sm" border>
        <div style="background-color: #f3f4f6; padding: 1rem; text-align: center;">
            <p style="margin: 0; color: #6b7280;">这是一个小尺寸容器</p>
        </div>
    </Container>
</template>

<script setup lang="ts">
import { Container, Heading } from "@coffic/cosy-ui/vue";
</script>

<template>
    <Container size="md" border>
        <div style="background-color: #f3f4f6; padding: 1rem; text-align: center;">
            <p style="margin: 0; color: #6b7280;">这是一个中等尺寸容器</p>
        </div>
    </Container>
</template>

<script setup lang="ts">
import { Container, Heading } from "@coffic/cosy-ui/vue";
</script>

<template>
    <Container size="lg" border>
        <div style="background-color: #f3f4f6; padding: 1rem; text-align: center;">
            <p style="margin: 0; color: #6b7280;">这是一个大尺寸容器</p>
        </div>
    </Container>
</template>

<script setup lang="ts">
import { Container, Heading } from "@coffic/cosy-ui/vue";
</script>

<template>
    <Container size="xl" border>
        <div style="background-color: #f3f4f6; padding: 1rem; text-align: center;">
            <p style="margin: 0; color: #6b7280;">这是一个超大尺寸容器</p>
        </div>
    </Container>
</template>

<script setup lang="ts">
import { Container, Heading } from "@coffic/cosy-ui/vue";
</script>

<template>
    <Container size="full" border>
        <div style="background-color: #f3f4f6; padding: 1rem; text-align: center;">
            <p style="margin: 0; color: #6b7280;">这是一个全宽容器</p>
        </div>
    </Container>
</template>