Container
简介
Container 组件是一个基础的布局容器，用于限制内容宽度并居中显示。它提供了多种尺寸和内边距选项，适用于各种布局需求。
组件特性：
- 内容宽度约束，提高可读性和视觉美感
- 响应式设计，在不同屏幕尺寸下自动调整内边距
- 灵活配置，支持多种尺寸和内边距选项
- 简单易用的 API，易于集成到各种页面布局中
- 支持 Flexbox 布局，可自定义对齐方式和间距
- 语义化背景色支持，兼容主题系统
- 背景色透明度支持，提供预设透明度值
案例
基础容器
这是一个基础的容器组件，内容被限制在合理的宽度内并居中显示。
<script setup lang="ts">
import { Container, Heading } from '@coffic/cosy-ui/vue';
</script>
<template>
<Container>
<Heading :level="3">基础容器</Heading>
<p>这是一个基础的容器组件，内容被限制在合理的宽度内并居中显示。</p>
</Container>
</template>
Props
background
基础背景色，支持主题系统。提供预设的语义化颜色，适用于不同使用场景。
基础背景色
Primary 背景色
这是使用 primary 背景色的容器，适合主要内容的展示。
Secondary 背景色
这是使用 secondary 背景色的容器，适合次要内容的展示。
Accent 背景色
这是使用 accent 背景色的容器，适合强调内容的展示。
Neutral 背景色
这是使用 neutral 背景色的容器，适合中性内容的展示。
Base-100 背景色
这是使用 base-100 背景色的容器，适合基础内容的展示。
Base-200 背景色
这是使用 base-200 背景色的容器，适合次要内容的展示。
Base-300 背景色
这是使用 base-300 背景色的容器，适合辅助内容的展示。
Success 背景色
这是使用 success 背景色的容器，适合成功状态的展示。
Warning 背景色
这是使用 warning 背景色的容器，适合警告状态的展示。
Error 背景色
这是使用 error 背景色的容器，适合错误状态的展示。
Info 背景色
这是使用 info 背景色的容器，适合信息提示的展示。
<script setup lang="ts">
import { Container, Heading } from '@coffic/cosy-ui/vue';
</script>
<template>
<Container background="primary" padding="md">
<Heading :level="3">Primary 背景色</Heading>
<p>这是使用 primary 背景色的容器，适合主要内容的展示。</p>
</Container>
</template>
Primary 背景色
这是使用 primary 背景色的容器，适合主要内容的展示。
Secondary 背景色
这是使用 secondary 背景色的容器，适合次要内容的展示。
Accent 背景色
这是使用 accent 背景色的容器，适合强调内容的展示。
Neutral 背景色
这是使用 neutral 背景色的容器，适合中性内容的展示。
Base-100 背景色
这是使用 base-100 背景色的容器，适合基础内容的展示。
Base-200 背景色
这是使用 base-200 背景色的容器，适合次要内容的展示。
Base-300 背景色
这是使用 base-300 背景色的容器，适合辅助内容的展示。
Success 背景色
这是使用 success 背景色的容器，适合成功状态的展示。
Warning 背景色
这是使用 warning 背景色的容器，适合警告状态的展示。
Error 背景色
这是使用 error 背景色的容器，适合错误状态的展示。
Info 背景色
这是使用 info 背景色的容器，适合信息提示的展示。
<script setup lang="ts">
import { Container, Heading } from '@coffic/cosy-ui/vue';
</script>
<template>
<Container background="secondary" padding="md">
<Heading :level="3">Secondary 背景色</Heading>
<p>这是使用 secondary 背景色的容器，适合次要内容的展示。</p>
</Container>
</template>
Primary 背景色
这是使用 primary 背景色的容器，适合主要内容的展示。
Secondary 背景色
这是使用 secondary 背景色的容器，适合次要内容的展示。
Accent 背景色
这是使用 accent 背景色的容器，适合强调内容的展示。
Neutral 背景色
这是使用 neutral 背景色的容器，适合中性内容的展示。
Base-100 背景色
这是使用 base-100 背景色的容器，适合基础内容的展示。
Base-200 背景色
这是使用 base-200 背景色的容器，适合次要内容的展示。
Base-300 背景色
这是使用 base-300 背景色的容器，适合辅助内容的展示。
Success 背景色
这是使用 success 背景色的容器，适合成功状态的展示。
Warning 背景色
这是使用 warning 背景色的容器，适合警告状态的展示。
Error 背景色
这是使用 error 背景色的容器，适合错误状态的展示。
Info 背景色
这是使用 info 背景色的容器，适合信息提示的展示。
<script setup lang="ts">
import { Container, Heading } from '@coffic/cosy-ui/vue';
</script>
<template>
<Container background="accent" padding="md">
<Heading :level="3">Accent 背景色</Heading>
<p>这是使用 accent 背景色的容器，适合强调内容的展示。</p>
</Container>
</template>
Primary 背景色
这是使用 primary 背景色的容器，适合主要内容的展示。
Secondary 背景色
这是使用 secondary 背景色的容器，适合次要内容的展示。
Accent 背景色
这是使用 accent 背景色的容器，适合强调内容的展示。
Neutral 背景色
这是使用 neutral 背景色的容器，适合中性内容的展示。
Base-100 背景色
这是使用 base-100 背景色的容器，适合基础内容的展示。
Base-200 背景色
这是使用 base-200 背景色的容器，适合次要内容的展示。
Base-300 背景色
这是使用 base-300 背景色的容器，适合辅助内容的展示。
Success 背景色
这是使用 success 背景色的容器，适合成功状态的展示。
Warning 背景色
这是使用 warning 背景色的容器，适合警告状态的展示。
Error 背景色
这是使用 error 背景色的容器，适合错误状态的展示。
Info 背景色
这是使用 info 背景色的容器，适合信息提示的展示。
<script setup lang="ts">
import { Container, Heading } from '@coffic/cosy-ui/vue';
</script>
<template>
<Container background="neutral" padding="md">
<Heading :level="3">Neutral 背景色</Heading>
<p>这是使用 neutral 背景色的容器，适合中性内容的展示。</p>
</Container>
</template>
Primary 背景色
这是使用 primary 背景色的容器，适合主要内容的展示。
Secondary 背景色
这是使用 secondary 背景色的容器，适合次要内容的展示。
Accent 背景色
这是使用 accent 背景色的容器，适合强调内容的展示。
Neutral 背景色
这是使用 neutral 背景色的容器，适合中性内容的展示。
Base-100 背景色
这是使用 base-100 背景色的容器，适合基础内容的展示。
Base-200 背景色
这是使用 base-200 背景色的容器，适合次要内容的展示。
Base-300 背景色
这是使用 base-300 背景色的容器，适合辅助内容的展示。
Success 背景色
这是使用 success 背景色的容器，适合成功状态的展示。
Warning 背景色
这是使用 warning 背景色的容器，适合警告状态的展示。
Error 背景色
这是使用 error 背景色的容器，适合错误状态的展示。
Info 背景色
这是使用 info 背景色的容器，适合信息提示的展示。
<script setup lang="ts">
import { Container, Heading } from '@coffic/cosy-ui/vue';
</script>
<template>
<Container background="base-100" padding="md" border>
<Heading :level="3">Base-100 背景色</Heading>
<p>这是使用 base-100 背景色的容器，适合基础内容的展示。</p>
</Container>
</template>
Primary 背景色
这是使用 primary 背景色的容器，适合主要内容的展示。
Secondary 背景色
这是使用 secondary 背景色的容器，适合次要内容的展示。
Accent 背景色
这是使用 accent 背景色的容器，适合强调内容的展示。
Neutral 背景色
这是使用 neutral 背景色的容器，适合中性内容的展示。
Base-100 背景色
这是使用 base-100 背景色的容器，适合基础内容的展示。
Base-200 背景色
这是使用 base-200 背景色的容器，适合次要内容的展示。
Base-300 背景色
这是使用 base-300 背景色的容器，适合辅助内容的展示。
Success 背景色
这是使用 success 背景色的容器，适合成功状态的展示。
Warning 背景色
这是使用 warning 背景色的容器，适合警告状态的展示。
Error 背景色
这是使用 error 背景色的容器，适合错误状态的展示。
Info 背景色
这是使用 info 背景色的容器，适合信息提示的展示。
<script setup lang="ts">
import { Container, Heading } from '@coffic/cosy-ui/vue';
</script>
<template>
<Container background="base-200" padding="md" border>
<Heading :level="3">Base-200 背景色</Heading>
<p>这是使用 base-200 背景色的容器，适合次要内容的展示。</p>
</Container>
</template>
Primary 背景色
这是使用 primary 背景色的容器，适合主要内容的展示。
Secondary 背景色
这是使用 secondary 背景色的容器，适合次要内容的展示。
Accent 背景色
这是使用 accent 背景色的容器，适合强调内容的展示。
Neutral 背景色
这是使用 neutral 背景色的容器，适合中性内容的展示。
Base-100 背景色
这是使用 base-100 背景色的容器，适合基础内容的展示。
Base-200 背景色
这是使用 base-200 背景色的容器，适合次要内容的展示。
Base-300 背景色
这是使用 base-300 背景色的容器，适合辅助内容的展示。
Success 背景色
这是使用 success 背景色的容器，适合成功状态的展示。
Warning 背景色
这是使用 warning 背景色的容器，适合警告状态的展示。
Error 背景色
这是使用 error 背景色的容器，适合错误状态的展示。
Info 背景色
这是使用 info 背景色的容器，适合信息提示的展示。
<script setup lang="ts">
import { Container, Heading } from '@coffic/cosy-ui/vue';
</script>
<template>
<Container background="base-300" padding="md" border>
<Heading :level="3">Base-300 背景色</Heading>
<p>这是使用 base-300 背景色的容器，适合辅助内容的展示。</p>
</Container>
</template>
Primary 背景色
这是使用 primary 背景色的容器，适合主要内容的展示。
Secondary 背景色
这是使用 secondary 背景色的容器，适合次要内容的展示。
Accent 背景色
这是使用 accent 背景色的容器，适合强调内容的展示。
Neutral 背景色
这是使用 neutral 背景色的容器，适合中性内容的展示。
Base-100 背景色
这是使用 base-100 背景色的容器，适合基础内容的展示。
Base-200 背景色
这是使用 base-200 背景色的容器，适合次要内容的展示。
Base-300 背景色
这是使用 base-300 背景色的容器，适合辅助内容的展示。
Success 背景色
这是使用 success 背景色的容器，适合成功状态的展示。
Warning 背景色
这是使用 warning 背景色的容器，适合警告状态的展示。
Error 背景色
这是使用 error 背景色的容器，适合错误状态的展示。
Info 背景色
这是使用 info 背景色的容器，适合信息提示的展示。
<script setup lang="ts">
import { Container, Heading } from '@coffic/cosy-ui/vue';
</script>
<template>
<Container background="success" padding="md">
<Heading :level="3">Success 背景色</Heading>
<p>这是使用 success 背景色的容器，适合成功状态的展示。</p>
</Container>
</template>
Primary 背景色
这是使用 primary 背景色的容器，适合主要内容的展示。
Secondary 背景色
这是使用 secondary 背景色的容器，适合次要内容的展示。
Accent 背景色
这是使用 accent 背景色的容器，适合强调内容的展示。
Neutral 背景色
这是使用 neutral 背景色的容器，适合中性内容的展示。
Base-100 背景色
这是使用 base-100 背景色的容器，适合基础内容的展示。
Base-200 背景色
这是使用 base-200 背景色的容器，适合次要内容的展示。
Base-300 背景色
这是使用 base-300 背景色的容器，适合辅助内容的展示。
Success 背景色
这是使用 success 背景色的容器，适合成功状态的展示。
Warning 背景色
这是使用 warning 背景色的容器，适合警告状态的展示。
Error 背景色
这是使用 error 背景色的容器，适合错误状态的展示。
Info 背景色
这是使用 info 背景色的容器，适合信息提示的展示。
<script setup lang="ts">
import { Container, Heading } from '@coffic/cosy-ui/vue';
</script>
<template>
<Container background="warning" padding="md">
<Heading :level="3">Warning 背景色</Heading>
<p>这是使用 warning 背景色的容器，适合警告状态的展示。</p>
</Container>
</template>
Primary 背景色
这是使用 primary 背景色的容器，适合主要内容的展示。
Secondary 背景色
这是使用 secondary 背景色的容器，适合次要内容的展示。
Accent 背景色
这是使用 accent 背景色的容器，适合强调内容的展示。
Neutral 背景色
这是使用 neutral 背景色的容器，适合中性内容的展示。
Base-100 背景色
这是使用 base-100 背景色的容器，适合基础内容的展示。
Base-200 背景色
这是使用 base-200 背景色的容器，适合次要内容的展示。
Base-300 背景色
这是使用 base-300 背景色的容器，适合辅助内容的展示。
Success 背景色
这是使用 success 背景色的容器，适合成功状态的展示。
Warning 背景色
这是使用 warning 背景色的容器，适合警告状态的展示。
Error 背景色
这是使用 error 背景色的容器，适合错误状态的展示。
Info 背景色
这是使用 info 背景色的容器，适合信息提示的展示。
<script setup lang="ts">
import { Container, Heading } from '@coffic/cosy-ui/vue';
</script>
<template>
<Container background="error" padding="md">
<Heading :level="3">Error 背景色</Heading>
<p>这是使用 error 背景色的容器，适合错误状态的展示。</p>
</Container>
</template>
Primary 背景色
这是使用 primary 背景色的容器，适合主要内容的展示。
Secondary 背景色
这是使用 secondary 背景色的容器，适合次要内容的展示。
Accent 背景色
这是使用 accent 背景色的容器，适合强调内容的展示。
Neutral 背景色
这是使用 neutral 背景色的容器，适合中性内容的展示。
Base-100 背景色
这是使用 base-100 背景色的容器，适合基础内容的展示。
Base-200 背景色
这是使用 base-200 背景色的容器，适合次要内容的展示。
Base-300 背景色
这是使用 base-300 背景色的容器，适合辅助内容的展示。
Success 背景色
这是使用 success 背景色的容器，适合成功状态的展示。
Warning 背景色
这是使用 warning 背景色的容器，适合警告状态的展示。
Error 背景色
这是使用 error 背景色的容器，适合错误状态的展示。
Info 背景色
这是使用 info 背景色的容器，适合信息提示的展示。
<script setup lang="ts">
import { Container, Heading } from '@coffic/cosy-ui/vue';
</script>
<template>
<Container background="info" padding="md">
<Heading :level="3">Info 背景色</Heading>
<p>这是使用 info 背景色的容器，适合信息提示的展示。</p>
</Container>
</template>
背景色透明度
背景色透明度，预设几个值供用户选择。使用 Tailwind v4 语法：bg-color/opacity（如 bg-primary/50）。
Primary 背景色 - 10% 透明度
这是使用 primary/10 背景色的容器。
Accent 背景色 - 30% 透明度
这是使用 accent/30 背景色的容器。
Success 背景色 - 50% 透明度
这是使用 success/50 背景色的容器。
Error 背景色 - 70% 透明度
这是使用 error/70 背景色的容器。
Warning 背景色 - 90% 透明度
这是使用 warning/90 背景色的容器。
<script setup lang="ts">
import { Container, Heading } from '@coffic/cosy-ui/vue';
</script>
<template>
<Container background="primary/10" padding="md">
<Heading :level="3">Primary 背景色 - 10% 透明度</Heading>
<p>这是使用 primary/10 背景色的容器。</p>
</Container>
</template>
Primary 背景色 - 10% 透明度
这是使用 primary/10 背景色的容器。
Accent 背景色 - 30% 透明度
这是使用 accent/30 背景色的容器。
Success 背景色 - 50% 透明度
这是使用 success/50 背景色的容器。
Error 背景色 - 70% 透明度
这是使用 error/70 背景色的容器。
Warning 背景色 - 90% 透明度
这是使用 warning/90 背景色的容器。
<script setup lang="ts">
import { Container, Heading } from '@coffic/cosy-ui/vue';
</script>
<template>
<Container background="accent/30" padding="md">
<Heading :level="3">Accent 背景色 - 30% 透明度</Heading>
<p>这是使用 accent/30 背景色的容器。</p>
</Container>
</template>
Primary 背景色 - 10% 透明度
这是使用 primary/10 背景色的容器。
Accent 背景色 - 30% 透明度
这是使用 accent/30 背景色的容器。
Success 背景色 - 50% 透明度
这是使用 success/50 背景色的容器。
Error 背景色 - 70% 透明度
这是使用 error/70 背景色的容器。
Warning 背景色 - 90% 透明度
这是使用 warning/90 背景色的容器。
<script setup lang="ts">
import { Container, Heading } from '@coffic/cosy-ui/vue';
</script>
<template>
<Container background="success/50" padding="md">
<Heading :level="3">Success 背景色 - 50% 透明度</Heading>
<p>这是使用 success/50 背景色的容器。</p>
</Container>
</template>
Primary 背景色 - 10% 透明度
这是使用 primary/10 背景色的容器。
Accent 背景色 - 30% 透明度
这是使用 accent/30 背景色的容器。
Success 背景色 - 50% 透明度
这是使用 success/50 背景色的容器。
Error 背景色 - 70% 透明度
这是使用 error/70 背景色的容器。
Warning 背景色 - 90% 透明度
这是使用 warning/90 背景色的容器。
<script setup lang="ts">
import { Container, Heading } from '@coffic/cosy-ui/vue';
</script>
<template>
<Container background="error/70" padding="md">
<Heading :level="3">Error 背景色 - 70% 透明度</Heading>
<p>这是使用 error/70 背景色的容器。</p>
</Container>
</template>
Primary 背景色 - 10% 透明度
这是使用 primary/10 背景色的容器。
Accent 背景色 - 30% 透明度
这是使用 accent/30 背景色的容器。
Success 背景色 - 50% 透明度
这是使用 success/50 背景色的容器。
Error 背景色 - 70% 透明度
这是使用 error/70 背景色的容器。
Warning 背景色 - 90% 透明度
这是使用 warning/90 背景色的容器。
<script setup lang="ts">
import { Container, Heading } from '@coffic/cosy-ui/vue';
</script>
<template>
<Container background="warning/90" padding="md">
<Heading :level="3">Warning 背景色 - 90% 透明度</Heading>
<p>这是使用 warning/90 背景色的容器。</p>
</Container>
</template>
border
是否显示边框。启用时，会在容器周围添加边框和圆角。
带边框的容器
这个容器启用了 border 属性，会显示边框和圆角。
<script setup lang="ts">
import { Container, Heading } from '@coffic/cosy-ui/vue';
</script>
<template>
<Container border>
<Heading :level="3">带边框的容器</Heading>
<p>这个容器启用了 border 属性，会显示边框和圆角。</p>
</Container>
</template>
centered
是否居中显示。设置为 false 时，容器将左对齐。
这个容器居中显示，很长的文字，很长的文字
这个容器设置了 centered={false}
<script setup lang="ts">
import { Container, Heading } from '@coffic/cosy-ui/vue';
</script>
<template>
<Container :centered="true" border>
<p>这个容器居中显示，很长的文字，很长的文字</p>
</Container>
</template>
这个容器居中显示，很长的文字，很长的文字
这个容器设置了 centered={false}
<script setup lang="ts">
import { Container, Heading } from '@coffic/cosy-ui/vue';
</script>
<template>
<Container border :centered="false">
<p>这个容器设置了 centered={false}</p>
</Container>
</template>
class
自定义 CSS 类名，用于添加额外样式。
自定义样式容器
使用 class 属性添加了渐变背景和白色文字。
<script setup lang="ts">
import { Container } from '@coffic/cosy-ui/vue';
</script>
<template>
<div style="display: flex; justify-content: center; padding: 1rem;">
<Container class="cosy:bg-gradient-to-r cosy:from-blue-500 cosy:to-purple-600 cosy:text-white">
<div style="padding: 1rem; text-align: center;">
<h3 style="margin: 0 0 0.5rem 0;">自定义样式容器</h3>
<p style="margin: 0; opacity: 0.9;">使用 class 属性添加了渐变背景和白色文字。</p>
</div>
</Container>
</div>
</template>
flex
Flex 布局方向。可选值：row、col、row-reverse、col-reverse。不设置则不启用 flex 布局。
不设置 flex 属性，使用默认的块级布局
每个元素独占一行
<script setup lang="ts">
import { Container, Heading } from '@coffic/cosy-ui/vue';
</script>
<template>
<Container>
<div style="background-color: #f3f4f6; padding: 1rem; border-radius: 0.5rem; text-align: center;">
<p style="margin: 0; color: #6b7280;">不设置 flex 属性，使用默认的块级布局</p>
</div>
<div
style="background-color: #e5e7eb; padding: 1rem; border-radius: 0.5rem; text-align: center; margin-top: 1rem;">
<p style="margin: 0; color: #6b7280;">每个元素独占一行</p>
</div>
</Container>
</template>
不设置 flex 属性，使用默认的块级布局
每个元素独占一行
<script setup lang="ts">
import { Container, Heading } from '@coffic/cosy-ui/vue';
</script>
<template>
<Container flex="row" gap="md">
<div
style="background-color: #3b82f6; color: white; padding: 1rem; border-radius: 0.5rem; text-align: center; flex: 1;">
第一项
</div>
<div
style="background-color: #10b981; color: white; padding: 1rem; border-radius: 0.5rem; text-align: center; flex: 1;">
第二项
</div>
<div
style="background-color: #f59e0b; color: white; padding: 1rem; border-radius: 0.5rem; text-align: center; flex: 1;">
第三项
</div>
</Container>
</template>
不设置 flex 属性，使用默认的块级布局
每个元素独占一行
<script setup lang="ts">
import { Container, Heading } from '@coffic/cosy-ui/vue';
</script>
<template>
<Container flex="col" gap="md">
<div style="background-color: #8b5cf6; color: white; padding: 1rem; border-radius: 0.5rem; text-align: center;">
第一项
</div>
<div style="background-color: #ef4444; color: white; padding: 1rem; border-radius: 0.5rem; text-align: center;">
第二项
</div>
<div style="background-color: #06b6d4; color: white; padding: 1rem; border-radius: 0.5rem; text-align: center;">
第三项
</div>
</Container>
</template>
不设置 flex 属性，使用默认的块级布局
每个元素独占一行
<script setup lang="ts">
import { Container, Heading } from '@coffic/cosy-ui/vue';
</script>
<template>
<Container flex="row-reverse" gap="md">
<div
style="background-color: #3b82f6; color: white; padding: 1rem; border-radius: 0.5rem; text-align: center; flex: 1;">
第一项
</div>
<div
style="background-color: #10b981; color: white; padding: 1rem; border-radius: 0.5rem; text-align: center; flex: 1;">
第二项
</div>
<div
style="background-color: #f59e0b; color: white; padding: 1rem; border-radius: 0.5rem; text-align: center; flex: 1;">
第三项
</div>
</Container>
</template>
不设置 flex 属性，使用默认的块级布局
每个元素独占一行
<script setup lang="ts">
import { Container, Heading } from '@coffic/cosy-ui/vue';
</script>
<template>
<Container flex="col-reverse" gap="md">
<div style="background-color: #8b5cf6; color: white; padding: 1rem; border-radius: 0.5rem; text-align: center;">
第一项
</div>
<div style="background-color: #ef4444; color: white; padding: 1rem; border-radius: 0.5rem; text-align: center;">
第二项
</div>
<div style="background-color: #06b6d4; color: white; padding: 1rem; border-radius: 0.5rem; text-align: center;">
第三项
</div>
</Container>
</template>
gap
Flex 项目间距。可选值：none、xs、sm、md、lg、xl。仅在启用 flex 布局时有效。
<script setup lang="ts">
import { Container, Heading } from '@coffic/cosy-ui/vue';
</script>
<template>
<Container flex="row" gap="none">
<div
style="background-color: #3b82f6; color: white; padding: 0.5rem; border-radius: 0.375rem; text-align: center; flex: 1;">
项目1
</div>
<div
style="background-color: #10b981; color: white; padding: 0.5rem; border-radius: 0.375rem; text-align: center; flex: 1;">
项目2
</div>
</Container>
</template>
<script setup lang="ts">
import { Container, Heading } from '@coffic/cosy-ui/vue';
</script>
<template>
<Container flex="row" gap="xs">
<div
style="background-color: #3b82f6; color: white; padding: 0.5rem; border-radius: 0.375rem; text-align: center; flex: 1;">
项目1
</div>
<div
style="background-color: #10b981; color: white; padding: 0.5rem; border-radius: 0.375rem; text-align: center; flex: 1;">
项目2
</div>
</Container>
</template>
<script setup lang="ts">
import { Container, Heading } from '@coffic/cosy-ui/vue';
</script>
<template>
<Container flex="row" gap="sm">
<div
style="background-color: #3b82f6; color: white; padding: 0.5rem; border-radius: 0.375rem; text-align: center; flex: 1;">
项目1
</div>
<div
style="background-color: #10b981; color: white; padding: 0.5rem; border-radius: 0.375rem; text-align: center; flex: 1;">
项目2
</div>
</Container>
</template>
<script setup lang="ts">
import { Container, Heading } from '@coffic/cosy-ui/vue';
</script>
<template>
<Container flex="row" gap="md">
<div
style="background-color: #f59e0b; color: white; padding: 0.5rem; border-radius: 0.375rem; text-align: center; flex: 1;">
项目1
</div>
<div
style="background-color: #8b5cf6; color: white; padding: 0.5rem; border-radius: 0.375rem; text-align: center; flex: 1;">
项目2
</div>
</Container>
</template>
<script setup lang="ts">
import { Container, Heading } from '@coffic/cosy-ui/vue';
</script>
<template>
<Container flex="row" gap="lg">
<div
style="background-color: #ef4444; color: white; padding: 0.5rem; border-radius: 0.375rem; text-align: center; flex: 1;">
项目1
</div>
<div
style="background-color: #06b6d4; color: white; padding: 0.5rem; border-radius: 0.375rem; text-align: center; flex: 1;">
项目2
</div>
</Container>
</template>
<script setup lang="ts">
import { Container, Heading } from '@coffic/cosy-ui/vue';
</script>
<template>
<Container flex="row" gap="xl">
<div
style="background-color: #3b82f6; color: white; padding: 0.5rem; border-radius: 0.375rem; text-align: center; flex: 1;">
项目1
</div>
<div
style="background-color: #10b981; color: white; padding: 0.5rem; border-radius: 0.375rem; text-align: center; flex: 1;">
项目2
</div>
</Container>
</template>
items
Flex 项目水平对齐方式。可选值：start、end、center、baseline、stretch。仅在启用 flex 布局时有效。
多行内容
多行内容
多行内容
多行内容
多行内容
<script setup lang="ts">
import { Container, Heading } from '@coffic/cosy-ui/vue';
</script>
<template>
<Container flex="row" gap="md" items="start">
<div
style="background-color: #3b82f6; color: white; padding: 0.5rem; border-radius: 0.375rem; text-align: center; flex: 1;">
短项目
</div>
<div
style="background-color: #10b981; color: white; padding: 1.5rem; border-radius: 0.375rem; text-align: center; flex: 1;">
长项目<br>多行内容
</div>
</Container>
</template>
多行内容
多行内容
多行内容
多行内容
多行内容
<script setup lang="ts">
import { Container, Heading } from '@coffic/cosy-ui/vue';
</script>
<template>
<Container flex="row" gap="md" items="end">
<div
style="background-color: #ef4444; color: white; padding: 0.5rem; border-radius: 0.375rem; text-align: center; flex: 1;">
短项目
</div>
<div
style="background-color: #06b6d4; color: white; padding: 1.5rem; border-radius: 0.375rem; text-align: center; flex: 1;">
长项目<br>多行内容
</div>
</Container>
</template>
多行内容
多行内容
多行内容
多行内容
多行内容
<script setup lang="ts">
import { Container, Heading } from '@coffic/cosy-ui/vue';
</script>
<template>
<Container flex="row" gap="md" items="center">
<div
style="background-color: #f59e0b; color: white; padding: 0.5rem; border-radius: 0.375rem; text-align: center; flex: 1;">
短项目
</div>
<div
style="background-color: #8b5cf6; color: white; padding: 1.5rem; border-radius: 0.375rem; text-align: center; flex: 1;">
长项目<br>多行内容
</div>
</Container>
</template>
多行内容
多行内容
多行内容
多行内容
多行内容
<script setup lang="ts">
import { Container, Heading } from '@coffic/cosy-ui/vue';
</script>
<template>
<Container flex="row" gap="md" items="baseline">
<div
style="background-color: #3b82f6; color: white; padding: 0.5rem; border-radius: 0.375rem; text-align: center; flex: 1;">
短项目
</div>
<div
style="background-color: #10b981; color: white; padding: 1.5rem; border-radius: 0.375rem; text-align: center; flex: 1;">
长项目<br>多行内容
</div>
</Container>
</template>
多行内容
多行内容
多行内容
多行内容
多行内容
<script setup lang="ts">
import { Container, Heading } from '@coffic/cosy-ui/vue';
</script>
<template>
<Container flex="row" gap="md" items="stretch">
<div
style="background-color: #3b82f6; color: white; padding: 0.5rem; border-radius: 0.375rem; text-align: center; flex: 1;">
短项目
</div>
<div
style="background-color: #10b981; color: white; padding: 1.5rem; border-radius: 0.375rem; text-align: center; flex: 1;">
长项目<br>多行内容
</div>
</Container>
</template>
justify
Flex 项目垂直对齐方式。可选值：start、end、center、between、around、evenly。仅在启用 flex 布局时有效。
<script setup lang="ts">
import { Container, Heading } from '@coffic/cosy-ui/vue';
</script>
<template>
<Container flex="row" gap="md" justify="start">
<div
style="background-color: #3b82f6; color: white; padding: 0.5rem; border-radius: 0.375rem; text-align: center; width: 80px;">
项目1
</div>
<div
style="background-color: #10b981; color: white; padding: 0.5rem; border-radius: 0.375rem; text-align: center; width: 80px;">
项目2
</div>
</Container>
</template>
<script setup lang="ts">
import { Container, Heading } from '@coffic/cosy-ui/vue';
</script>
<template>
<Container flex="row" gap="md" justify="end">
<div
style="background-color: #84cc16; color: white; padding: 0.5rem; border-radius: 0.375rem; text-align: center; width: 80px;">
项目1
</div>
<div
style="background-color: #f97316; color: white; padding: 0.5rem; border-radius: 0.375rem; text-align: center; width: 80px;">
项目2
</div>
</Container>
</template>
<script setup lang="ts">
import { Container, Heading } from '@coffic/cosy-ui/vue';
</script>
<template>
<Container flex="row" gap="md" justify="center">
<div
style="background-color: #f59e0b; color: white; padding: 0.5rem; border-radius: 0.375rem; text-align: center; width: 80px;">
项目1
</div>
<div
style="background-color: #8b5cf6; color: white; padding: 0.5rem; border-radius: 0.375rem; text-align: center; width: 80px;">
项目2
</div>
</Container>
</template>
<script setup lang="ts">
import { Container, Heading } from '@coffic/cosy-ui/vue';
</script>
<template>
<Container flex="row" gap="md" justify="between">
<div
style="background-color: #ef4444; color: white; padding: 0.5rem; border-radius: 0.375rem; text-align: center; width: 80px;">
项目1
</div>
<div
style="background-color: #06b6d4; color: white; padding: 0.5rem; border-radius: 0.375rem; text-align: center; width: 80px;">
项目2
</div>
</Container>
</template>
<script setup lang="ts">
import { Container, Heading } from '@coffic/cosy-ui/vue';
</script>
<template>
<Container flex="row" gap="md" justify="around">
<div
style="background-color: #3b82f6; color: white; padding: 0.5rem; border-radius: 0.375rem; text-align: center; width: 80px;">
项目1
</div>
<div
style="background-color: #10b981; color: white; padding: 0.5rem; border-radius: 0.375rem; text-align: center; width: 80px;">
项目2
</div>
</Container>
</template>
<script setup lang="ts">
import { Container, Heading } from '@coffic/cosy-ui/vue';
</script>
<template>
<Container flex="row" gap="md" justify="evenly">
<div
style="background-color: #8b5cf6; color: white; padding: 0.5rem; border-radius: 0.375rem; text-align: center; width: 80px;">
项目1
</div>
<div
style="background-color: #f59e0b; color: white; padding: 0.5rem; border-radius: 0.375rem; text-align: center; width: 80px;">
项目2
</div>
</Container>
</template>
padding
内边距大小。可选值：none、sm、md、lg、xl。
这个容器没有内边距
这个容器有小内边距
这个容器有中等内边距
这个容器有大内边距
这个容器有超大内边距
<script setup lang="ts">
import { Container, Heading } from '@coffic/cosy-ui/vue';
</script>
<template>
<Container padding="none" 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 padding="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 padding="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 padding="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 padding="xl" border>
<div style="background-color: #f3f4f6; padding: 1rem; text-align: center;">
<p style="margin: 0; color: #6b7280;">这个容器有超大内边距</p>
</div>
</Container>
</template>
rounded
圆角大小。可选值：none、sm、md、lg、xl、full。
rounded="none" - 无圆角
rounded="sm" - 小圆角
rounded="md" - 中等圆角
rounded="lg" - 大圆角
rounded="xl" - 超大圆角
rounded="full" - 完全圆角
<script setup lang="ts">
import { Container } from '@coffic/cosy-ui/vue';
</script>
<template>
<Container rounded="none" border class="cosy:bg-base-100">
<p class="cosy:text-center cosy:text-sm cosy:text-base-content/70">
rounded="none" - 无圆角
</p>
</Container>
</template>
rounded="none" - 无圆角
rounded="sm" - 小圆角
rounded="md" - 中等圆角
rounded="lg" - 大圆角
rounded="xl" - 超大圆角
rounded="full" - 完全圆角
<script setup lang="ts">
import { Container } from '@coffic/cosy-ui/vue';
</script>
<template>
<Container rounded="sm" border class="cosy:bg-base-100">
<p class="cosy:text-center cosy:text-sm cosy:text-base-content/70">
rounded="sm" - 小圆角
</p>
</Container>
</template>
rounded="none" - 无圆角
rounded="sm" - 小圆角
rounded="md" - 中等圆角
rounded="lg" - 大圆角
rounded="xl" - 超大圆角
rounded="full" - 完全圆角
<script setup lang="ts">
import { Container } from '@coffic/cosy-ui/vue';
</script>
<template>
<Container rounded="md" border class="cosy:bg-base-100">
<p class="cosy:text-center cosy:text-sm cosy:text-base-content/70">
rounded="md" - 中等圆角
</p>
</Container>
</template>
rounded="none" - 无圆角
rounded="sm" - 小圆角
rounded="md" - 中等圆角
rounded="lg" - 大圆角
rounded="xl" - 超大圆角
rounded="full" - 完全圆角
<script setup lang="ts">
import { Container } from '@coffic/cosy-ui/vue';
</script>
<template>
<Container rounded="lg" border class="cosy:bg-base-100">
<p class="cosy:text-center cosy:text-sm cosy:text-base-content/70">
rounded="lg" - 大圆角
</p>
</Container>
</template>
rounded="none" - 无圆角
rounded="sm" - 小圆角
rounded="md" - 中等圆角
rounded="lg" - 大圆角
rounded="xl" - 超大圆角
rounded="full" - 完全圆角
<script setup lang="ts">
import { Container } from '@coffic/cosy-ui/vue';
</script>
<template>
<Container rounded="xl" border class="cosy:bg-base-100">
<p class="cosy:text-center cosy:text-sm cosy:text-base-content/70">
rounded="xl" - 超大圆角
</p>
</Container>
</template>
rounded="none" - 无圆角
rounded="sm" - 小圆角
rounded="md" - 中等圆角
rounded="lg" - 大圆角
rounded="xl" - 超大圆角
rounded="full" - 完全圆角
<script setup lang="ts">
import { Container } from '@coffic/cosy-ui/vue';
</script>
<template>
<Container rounded="full" border class="cosy:bg-base-100">
<p class="cosy:text-center cosy:text-sm cosy:text-base-content/70">
rounded="full" - 完全圆角
</p>
</Container>
</template>
size
容器尺寸。可选值：xs、sm、md、lg、xl、full。控制容器的最大宽度。
这是一个超小尺寸容器
这是一个小尺寸容器
这是一个中等尺寸容器
这是一个大尺寸容器
这是一个超大尺寸容器
这是一个全宽容器
<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>
Slots
default
默认内容插槽，用于在容器内放置任何内容。
默认插槽内容
这是通过默认插槽放置的内容，可以包含任何 HTML 元素。
复杂布局内容
插槽可以包含复杂的布局结构，如 flex 布局、网格等。
表单示例
<script setup lang="ts">
import { Container, Heading } from '@coffic/cosy-ui/vue';
</script>
<template>
<Container border>
<div style="background-color: #f3f4f6; padding: 1rem; border-radius: 0.5rem; text-align: center;">
<h3 style="margin: 0 0 0.5rem 0; color: #374151;">默认插槽内容</h3>
<p style="margin: 0; color: #6b7280;">这是通过默认插槽放置的内容，可以包含任何 HTML 元素。</p>
</div>
</Container>
</template>
默认插槽内容
这是通过默认插槽放置的内容，可以包含任何 HTML 元素。
复杂布局内容
插槽可以包含复杂的布局结构，如 flex 布局、网格等。
表单示例
<script setup lang="ts">
import { Container, Heading } from '@coffic/cosy-ui/vue';
</script>
<template>
<Container border>
<div style="background-color: #f3f4f6; padding: 1rem; border-radius: 0.5rem;">
<h3 style="margin: 0 0 1rem 0; color: #374151;">复杂布局内容</h3>
<div style="display: flex; gap: 1rem; margin-bottom: 1rem;">
<div
style="background-color: #3b82f6; color: white; padding: 0.5rem; border-radius: 0.375rem; flex: 1; text-align: center;">
左侧内容
</div>
<div
style="background-color: #10b981; color: white; padding: 0.5rem; border-radius: 0.375rem; flex: 1; text-align: center;">
右侧内容
</div>
</div>
<p style="margin: 0; color: #6b7280;">插槽可以包含复杂的布局结构，如 flex 布局、网格等。</p>
</div>
</Container>
</template>
默认插槽内容
这是通过默认插槽放置的内容，可以包含任何 HTML 元素。
复杂布局内容
插槽可以包含复杂的布局结构，如 flex 布局、网格等。
表单示例
<script setup lang="ts">
import { Container, Heading } from '@coffic/cosy-ui/vue';
</script>
<template>
<Container border>
<div style="background-color: #f3f4f6; padding: 1rem; border-radius: 0.5rem;">
<h3 style="margin: 0 0 1rem 0; color: #374151;">表单示例</h3>
<div style="display: flex; flex-direction: column; gap: 0.5rem;">
<input type="text" placeholder="用户名"
style="padding: 0.5rem; border: 1px solid #d1d5db; border-radius: 0.375rem;" />
<input type="password" placeholder="密码"
style="padding: 0.5rem; border: 1px solid #d1d5db; border-radius: 0.375rem;" />
<button
style="background-color: #3b82f6; color: white; padding: 0.5rem; border: none; border-radius: 0.375rem; cursor: pointer;">
提交
</button>
</div>
</div>
</Container>
</template>