Container

Container는 선택적 spacing 토큰 패딩으로 콘텐츠를 가로 가운데 정렬합니다. 페이지 또는 섹션 셸로 사용하세요.

Full width, padded

Centered column

계약

Overview

Machine-readable contract from Component Spec.

component: containerexport: Containerversion: 1attributes: data-refineui=container

Anatomy

Part	data-refineui
root	container

Layout

Property	Value
direction	logical
rtl	true

설치

npmyarnpnpmbun

npm install @refineui/react @refineui/tokens

사용법

import { Container, Stack, Text } from "@refineui/react";

<Container padding="sizeXXLarge">
  <Stack gap="sizeLarge">
    <Text variant="headingMd" as="h1">Page title</Text>
    <Text variant="bodyMd">Body</Text>
  </Stack>
</Container>

API 레퍼런스

Prop	Default	Type	Description
as	"div"	ElementType	루트 요소.
padding	—	Spacing token	모든 면 패딩.