logo
简体中文
导航

Container

简介

Container 组件是一个基础的布局容器，用于限制内容宽度并居中显示。它提供了多种尺寸和内边距选项，适用于各种布局需求。

组件特性：

  • 支持多种预设尺寸（xs、sm、md、lg、xl、full）
  • 可自定义内边距大小
  • 支持居中/不居中显示
  • 可选边框样式
  • 内置 Flex 布局功能，支持行/列排列和对齐方式
  • 响应式设计，适配不同屏幕尺寸

基础用法

最简单的容器用法，内容会被限制在一个合理的宽度内并居中显示：

这是一个基础容器，内容会被限制在一个合理的宽度内并居中显示 

              ---
/**
 * @component Container.Basic
 *
 * @description
 * 基础Container组件示例，展示最简单的容器用法。
 */
import { Container } from '../../index-astro';
---

<Container>
  <p class="cosy:text-center">
    这是一个基础容器，内容会被限制在一个合理的宽度内并居中显示
  </p>
</Container>

尺寸选项

Container 组件支持多种预设尺寸：

超小尺寸容器 (xs)

小尺寸容器 (sm)

中等尺寸容器 (md) - 默认

大尺寸容器 (lg)

超大尺寸容器 (xl)

全宽容器 (full)

              ---
/**
 * @component Container.Sizes
 *
 * @description
 * 展示Container组件的不同尺寸选项：xs、sm、md、lg、xl、full。
 */
import '../../style.ts';
import { Container } from '../../index-astro';
---

<div class="cosy:space-y-4">
  <Container size="xs" border>
    <p class="cosy:text-center">超小尺寸容器 (xs)</p>
  </Container>

  <Container size="sm" border>
    <p class="cosy:text-center">小尺寸容器 (sm)</p>
  </Container>

  <Container size="md" border>
    <p class="cosy:text-center">中等尺寸容器 (md) - 默认</p>
  </Container>

  <Container size="lg" border>
    <p class="cosy:text-center">大尺寸容器 (lg)</p>
  </Container>

  <Container size="xl" border>
    <p class="cosy:text-center">超大尺寸容器 (xl)</p>
  </Container>

  <Container size="full" border>
    <p class="cosy:text-center">全宽容器 (full)</p>
  </Container>
</div>

内边距选项

通过 padding 属性设置不同的内边距大小：

无内边距 (none)

小内边距 (sm)

中等内边距 (md) - 默认

大内边距 (lg)

超大内边距 (xl)

              ---
/**
 * @component Container.Padding
 *
 * @description
 * 展示Container组件的不同内边距选项：none、sm、md、lg、xl。
 */
import '../../style.ts';
import { Container } from '../../index-astro';
---

<div class="cosy:space-y-4">
  <Container padding="none" border>
    <p class="cosy:text-center">无内边距 (none)</p>
  </Container>

  <Container padding="sm" border>
    <p class="cosy:text-center">小内边距 (sm)</p>
  </Container>

  <Container padding="md" border>
    <p class="cosy:text-center">中等内边距 (md) - 默认</p>
  </Container>

  <Container padding="lg" border>
    <p class="cosy:text-center">大内边距 (lg)</p>
  </Container>

  <Container padding="xl" border>
    <p class="cosy:text-center">超大内边距 (xl)</p>
  </Container>
</div>

Flex 布局

Container 组件内置 Flex 布局功能，支持行/列排列和各种对齐方式：

第一项
第二项
第三项
第一项
第二项
第三项
居中项
较大项
较小项
左侧
中间
右侧 
              ---
/**
 * @component Container.FlexRow
 *
 * @description
 * 展示Container组件的行排列(flex="row")布局功能。
 */
import '../../style.ts';
import { Container } from '../../index-astro';
---

<Container flex="row" gap="md" border padding="md">
  <div class="cosy:bg-primary cosy:text-primary-content cosy:p-4 cosy:rounded">
    第一项
  </div>
  <div
    class="cosy:bg-secondary cosy:text-secondary-content cosy:p-4 cosy:rounded">
    第二项
  </div>
  <div class="cosy:bg-accent cosy:text-accent-content cosy:p-4 cosy:rounded">
    第三项
  </div>
</Container>
第一项
第二项
第三项
第一项
第二项
第三项
居中项
较大项
较小项
左侧
中间
右侧 
              ---
/**
 * @component Container.FlexColumn
 *
 * @description
 * 展示Container组件的列排列(flex="col")布局功能。
 */
import '../../style.ts';
import { Container } from '../../index-astro';
---

<Container flex="col" gap="md" border padding="md">
  <div class="cosy:bg-primary cosy:text-primary-content cosy:p-4 cosy:rounded">
    第一项
  </div>
  <div
    class="cosy:bg-secondary cosy:text-secondary-content cosy:p-4 cosy:rounded">
    第二项
  </div>
  <div class="cosy:bg-accent cosy:text-accent-content cosy:p-4 cosy:rounded">
    第三项
  </div>
</Container>
第一项
第二项
第三项
第一项
第二项
第三项
居中项
较大项
较小项
左侧
中间
右侧 
              ---
/**
 * @component Container.FlexCenter
 *
 * @description
 * 展示Container组件的居中对齐(items="center" justify="center")布局功能。
 */
import '../../style.ts';
import { Container } from '../../index-astro';
---

<Container
  flex="row"
  gap="md"
  items="center"
  justify="center"
  border
  padding="md"
  class="cosy:h-32">
  <div class="cosy:bg-primary cosy:text-primary-content cosy:p-4 cosy:rounded">
    居中项
  </div>
  <div
    class="cosy:bg-secondary cosy:text-secondary-content cosy:p-6 cosy:rounded">
    较大项
  </div>
  <div class="cosy:bg-accent cosy:text-accent-content cosy:p-2 cosy:rounded">
    较小项
  </div>
</Container>
第一项
第二项
第三项
第一项
第二项
第三项
居中项
较大项
较小项
左侧
中间
右侧 
              ---
/**
 * @component Container.FlexBetween
 *
 * @description
 * 展示Container组件的两端对齐(justify="between")布局功能。
 */
import '../../style.ts';
import { Container } from '../../index-astro';
---

<Container flex="row" justify="between" border padding="md">
  <div class="cosy:bg-primary cosy:text-primary-content cosy:p-4 cosy:rounded">
    左侧
  </div>
  <div
    class="cosy:bg-secondary cosy:text-secondary-content cosy:p-4 cosy:rounded">
    中间
  </div>
  <div class="cosy:bg-accent cosy:text-accent-content cosy:p-4 cosy:rounded">
    右侧
  </div>
</Container>