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.
Component Features:
- Content width constraints for better readability and visual appeal
- Responsive design that automatically adjusts padding on different screen sizes
- Flexible configuration with multiple size and padding options
- Simple and intuitive API for easy integration into various page layouts
- Flexbox layout support with customizable alignment and spacing
- Semantic background color support with theme system
- Background color opacity support with preset opacity values
Example
基础容器
这是一个基础的容器组件，内容被限制在合理的宽度内并居中显示。
<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
Base background color with theme system support. Provides preset semantic colors for different use cases.
Base Background Colors
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>
Background Color Opacity
Background color opacity with preset values for user selection. Uses Tailwind v4 syntax: bg-color/opacity (e.g., 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
Whether to display a border. When enabled, adds a border and rounded corners around the container.
带边框的容器
这个容器启用了 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
Whether to center the display. When set to false, the container will be left-aligned.
这个容器居中显示，很长的文字，很长的文字
这个容器设置了 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
Custom CSS class name for adding additional styles.
自定义样式容器
使用 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 layout direction. Optional values: row, col, row-reverse, col-reverse. If not set, flex layout is not enabled.
不设置 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 item spacing. Optional values: none, xs, sm, md, lg, xl. Only effective when flex layout is enabled.
<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 item horizontal alignment. Optional values: start, end, center, baseline, stretch. Only effective when flex layout is enabled.
多行内容
多行内容
多行内容
多行内容
多行内容
<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 item vertical alignment. Optional values: start, end, center, between, around, evenly. Only effective when flex layout is enabled.
<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
Inner padding size. Optional values: 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
Border radius size. Optional values: 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
Container size. Optional values: xs, sm, md, lg, xl, full. Controls the maximum width of the 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>
Slots
default
Default content slot for placing any content inside the container.
默认插槽内容
这是通过默认插槽放置的内容，可以包含任何 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>