Container

페이지 내용에 좌우 여백을 두고 가운데로 정렬합니다. 내용이 창 가장자리에 닿지 않게 하는 것이 이 컴포넌트의 유일한 역할입니다.

import { Container } from 'neba';

<Container>내용</Container>;

Props

Prop	타입	기본값	설명
maxWidth	NebaMeasure | Partial<Record<NebaBreakpoint, NebaMeasure>>	'none'	내용이 넓어질 수 있는 한계. 사다리 한 단계(xs 30rem, sm 40rem, md 48rem, lg 64rem, xl 80rem)이거나 직접 쓴 길이(60ch, min(90vw, 72rem), 숫자는 px)이며, { xs: "none", lg: "xl" }처럼 breakpoint별로 줄 수 있습니다. 기본값 none은 제한 없음
padded	boolean	true	좌우 여백. 끄면 가운데 정렬과 최대 너비는 그대로 두고 여백만 사라집니다
size공통	'xs' | 'sm' | 'md' | 'lg' | 'xl'	'md'	여백의 크기. Box에서와 같이 높이도 타입 스케일도 건드리지 않으며, 거터를 정하는 spacing과는 별개입니다
density공통	'default' | 'compact'	'default'	여백만 바꿉니다
centered	boolean	true	maxWidth가 페이지보다 좁을 때 가운데로 놓습니다. maxWidth가 none이면 남는 공간이 없으므로 아무 일도 하지 않습니다
render	useRender.RenderProp	—	div 대신 다른 요소로 렌더링합니다 (<main />). Base UI의 render prop 그대로
children	ReactNode	—	여백을 두를 내용

<div>의 native 속성은 그대로 전달됩니다.

표면을 그리지 않으므로 variant나 color, elevation이 없습니다. sheet가 필요하면 안에 Box나 Card를 넣으세요.

Grid와 함께 쓰는 일이 많지만 둘은 별개입니다. Container는 내용이 창 가장자리에서 얼마나 떨어지는지를, GridContainer는 내용이 스스로를 어떻게 나누는지를 정합니다.

예시

maxWidth

기본값은 none으로, 너비 제한 없이 좌우 여백만 둡니다.

값을 주면 measure 사다리의 한 단계를 씁니다. xs는 30rem, sm은 40rem, md는 48rem, lg는 64rem, xl은 80rem입니다. 위 네 단계는 breakpoint의 바닥과 같은 값이므로, maxWidth="lg"는 lg: variant가 시작되는 바로 그 폭으로 내용을 묶습니다. xs만 예외인데, 폭이 0인 measure는 존재하지 않기 때문입니다.

import { Box, Container } from 'neba';

const WIDTHS = ['xs', 'sm', 'md', 'none'] as const;

export default function ContainerMaxWidth() {
  return (
    <div className="flex w-full flex-col gap-3">
      {WIDTHS.map((maxWidth) => (
        <div
          key={maxWidth}
          className="w-full rounded-(--neba-radius-sm) bg-[var(--neba-primary-soft-press)]"
        >
          <Container maxWidth={maxWidth} size="sm">
            <Box size="sm" className="text-center">
              maxWidth {maxWidth}
            </Box>
          </Container>
        </div>
      ))}
    </div>
  );
}

직접 쓴 길이

사다리의 단계가 아닌 값은 max-width에 그대로 전달됩니다. 사다리에 없는 폭이 필요해도 따로 빠져나갈 길이 필요 없다는 뜻입니다. 숫자는 px입니다.

<Container maxWidth="60ch">…</Container>
<Container maxWidth="min(90vw, 72rem)">…</Container>
<Container maxWidth={640}>…</Container>

breakpoint에 따라 바꾸기

maxWidth는 breakpoint별 map을 받고, 각 항목은 자기 breakpoint부터 위로 적용됩니다. 그래서 두 개면 페이지 하나를 다 설명합니다. Header와 Footer도 같은 prop을 같은 모양으로 받으며, 바와 그 아래 내용이 같은 가장자리에 서는 것이 그 방식입니다.

import { Box, Container } from 'neba';

export default function ContainerResponsive() {
  return (
    <div className="w-full rounded-(--neba-radius-sm) bg-[var(--neba-primary-soft-press)]">
      {/* Full width on a phone, held at 48rem from md, at 64rem from lg.
          Resize the window and the sheet stops growing twice. */}
      <Container maxWidth={{ xs: 'none', md: 'md', lg: 'lg' }} size="sm">
        <Box size="sm" className="text-center">
          none · md 48rem · lg 64rem
        </Box>
      </Container>
    </div>
  );
}

padded · centered · render

세 prop은 서로 독립적입니다. padded={false}는 가운데 정렬과 너비 제한을 유지한 채 여백만 끄고, centered={false}는 그 반대입니다. render로 감싸는 요소를 바꿀 수 있으므로 페이지의 <main>으로 렌더링할 수 있습니다.

import { Box, Container } from 'neba';

export default function ContainerPlain() {
  return (
    <div className="flex w-full flex-col gap-3">
      {/* No gutter, but still centred and still measured. */}
      <div className="w-full rounded-(--neba-radius-sm) bg-[var(--neba-primary-soft-press)]">
        <Container maxWidth="sm" padded={false}>
          <Box size="sm" className="text-center">
            padded={'{false}'}
          </Box>
        </Container>
      </div>

      {/* Measured, but held against the start edge instead of centred. */}
      <div className="w-full rounded-(--neba-radius-sm) bg-[var(--neba-primary-soft-press)]">
        <Container maxWidth="sm" centered={false} size="sm">
          <Box size="sm" className="text-center">
            centered={'{false}'}
          </Box>
        </Container>
      </div>

      {/* Any element you like — a page's real `<main>`. */}
      <div className="w-full rounded-(--neba-radius-sm) bg-[var(--neba-primary-soft-press)]">
        <Container render={<main />} size="sm">
          <Box size="sm" className="text-center">
            render={'{<main />}'}
          </Box>
        </Container>
      </div>
    </div>
  );
}

size와 density

여백의 크기를 정합니다. Box와 같은 단계이며 높이나 타입 스케일에는 영향을 주지 않습니다.

Grid와 함께 쓰기

바깥은 여백과 최대 너비, 안쪽은 칸 나누기를 담당합니다. 안쪽 Grid는 이미 여백이 있는 요소 안에 들어가므로 padded={false}로 둡니다.

<Container maxWidth="lg">
  <GridContainer spacing={3} padded={false}>
    <Grid span={{ xs: 12, md: 8 }}>본문</Grid>
    <Grid span={{ xs: 12, md: 4 }}>사이드바</Grid>
  </GridContainer>
</Container>