logo
English
导航

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:

  • Supports multiple preset sizes (xs, sm, md, lg, xl, full)
  • Customizable padding sizes
  • Supports centered/non-centered display
  • Optional border styles
  • Built-in Flex layout functionality, supporting row/column arrangement and alignment
  • Responsive design, adapts to different screen sizes

Basic Usage

The simplest container usage, content will be limited to a reasonable width and centered:

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

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

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

Size Options

The Container component supports multiple preset sizes:

超小尺寸容器 (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 Options

Set different padding sizes using the padding property:

无内边距 (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 Layout

The Container component has built-in Flex layout functionality, supporting row/column arrangement and various alignment options:

第一项
第二项
第三项
第一项
第二项
第三项
居中项
较大项
较小项
左侧
中间
右侧 
              ---
/**
 * @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>