디자인 시스템의 필수 레이아웃 구성 요소

앱에서 React, Vue 또는 Svelte와 같은 구성 요소 기반 라이브러리/프레임워크를 사용하는 경우 재사용 가능한 레이아웃 구성 요소의 기능을 활용하십시오. 추상화 사다리에서 더 높은 수준으로 이동하십시오.

이 기사에서는 기능과 API가 포함된 견고한 레이아웃 구성 요소 시스템을 보여 드리겠습니다. 이들은 대부분의 제품과 팀에 사용할 수 있을 만큼 충분히 일반적이고 다재다능합니다. 이 레이아웃을 만나면 어디에서나 볼 수 있을 것이라고 장담합니다.

결국 이러한 모든 구성 요소를 사용하여 실제 사용 사례를 구축하는 CodeSandbox가 있습니다. 제품 카드의 반응형 목록입니다.


나는 Braid Design System에 의해 우수한 Seek-OSS을 선불로 인정하고 싶습니다. 모든 구성 요소는 여기에서 크게 영감을 받았습니다. 확실히 확인해야합니다.

1. 스택

인터페이스 요소를 배치하는 가장 일반적인 방법은 수직 스택입니다. 그들은 어디에나 있습니다.

<Stack space="large">
  <Placeholder height={48} />
  <Placeholder height={48} />
  <Placeholder height={48} />
</Stack>

API

type StackProps = {
  // The element used for the root node.
  as?: 'div' | 'span' | 'ol' | 'ul' // Feel free to change these as per your uses
  // Defines the spacing between the items.
  space?: 'small' | 'medium' | 'large' // All of your spacing tokens
  // Sets the horizontal alignment of the items.
  align?: 'start' | 'center' | 'end' | 'stretch'
  // The items to layout in the stack.
  children: React.ReactNode
}

2. 열과 열

다음으로 가장 일반적인 레이아웃은 열의 단일 행입니다.

<Columns space="medium">
  <Column><Placeholder height={60} /></Column>
  <Column><Placeholder height={60} /></Column>
</Columns>

붕괴

일반적인 요구 사항은 열을 특정 크기 미만의 스택으로 축소하는 것입니다. 이것은 ResizeObserver를 사용하여 구현할 수 있습니다(그리고 곧 Container Queries을 사용하여).

정렬

열은 양방향 정렬을 지원합니다.

개별 열 크기 조정

서로 다른 암시적 및 명시적 크기로 자체 크기를 조정할 수 있는 기능을 제공하는 각 열을 래핑하는 열 구성 요소가 있습니다.

<Stack space="medium">
  <Columns space="xsmall">
    <Column width="content">
      <Placeholder height={30} label="content" />
    </Column>
    <Column>
      <Placeholder height={30} label="fluid" />
    </Column>
  </Columns>
  <Columns space="xsmall">
    <Column width="1/5">
      <Placeholder height={30} label="1/5" />
    </Column>
    <Column>
      <Placeholder height={30} label="fluid" />
    </Column>
  </Columns>
  <Columns space="xsmall">
    <Column width="1/4">
      <Placeholder height={30} label="1/4" />
    </Column>
    <Column>
      <Placeholder height={30} label="fluid" />
    </Column>
  </Columns>
  <Columns space="xsmall">
    <Column width="1/3">
      <Placeholder height={30} label="1/3" />
    </Column>
    <Column>
      <Placeholder height={30} label="fluid" />
    </Column>
  </Columns>
  ...
</Stack>

API

type ColumnsProps = {
  // The element used for the root node.
  as?: 'div' | 'span' | 'ol' | 'ul'
  // Defines the spacing between the items.
  space?: 'small' | 'medium' | 'large' // All of your spacing tokens
  // Collapse items to a stack below this size.
  collapseBelow?: number
  // Sets the horizontal alignment of the items.
  align?: 'start' | 'center' | 'end' | 'stretch'
  // Sets the vertical alignment of the items.
  alignY?: 'start' | 'center' | 'end'
  // The columns.
  children: React.ReactNode
}

무리

이는 열과 매우 유사하지만 필요한 경우 항목을 래핑할 수 있습니다. 배지 목록을 표시하는 데 가장 일반적으로 사용됩니다.

<Cluster space="small">
  <Tag tone="positive" weight="subtle" label="Confirmed" icon="IconCalendar" />
  <Tag tone="cautional" weight="subtle" label="Pending" icon="IconApple" />
  <Tag tone="informational" weight="subtle" label="Hired" icon="IconRemote" />
  <Tag tone="neutral" weight="subtle" label="Refunded" icon="IconLike" />
  <Tag tone="promotional" weight="subtle" label="New" icon="IconHeart" />
</Cluster>

클러스터는 또한 열과 마찬가지로 양방향으로 축소 및 정렬을 지원합니다.

API

type ClusterProps = {
  // The element used for the root node.
  as?: 'div' | 'span' | 'ol' | 'ul'
  // Defines the spacing between the items.
  space?: 'small' | 'medium' | 'large'
  // Collapse items to a stack below this size.
  collapseBelow?: number
  // Sets the horizontal alignment of the items.
  align?: 'start' | 'center' | 'end'
  // Sets the vertical alignment of the items.
  alignY?: 'start' | 'center' | 'end'
  // The items to lay out in this cluster.
  children: React.ReactNode
}

자동그리드

자동 그리드는 기본적으로 repeat-auto-minmax 에 대한 구성요소 추상화입니다.

<AutoGrid space="medium" minItemWidth={120}>
  <Placeholder />
  <Placeholder />
  <Placeholder />
  <Placeholder />
  <Placeholder />
  <Placeholder />
  <Placeholder />
</AutoGrid>

API

type AutoGridProps = {
  // The element used for the root node.
  as?: 'div' | 'section' | 'ul' | 'ol'
  // The minimum width for items to shrink to before the grid starts wrapping to make space.
  minItemWidth: number
  // The gap between the items or the column gap if spaceY is present.
  space?: 'small' | 'medium' | 'large'
  // The row gap between the items.
  spaceY?: 'small' | 'medium' | 'large'
  // Items inside the AutoGrid.
  children: React.ReactNode
}

작동 중인 레이아웃 구성 요소

이제 우리는 구성 요소를 보았습니다. 실제로 작동하는 것을 봅시다.

저는 NextJS와 Vanilla-Extract를 사용하여 구성 요소의 스타일을 지정했습니다. 그러나 물론 일반 CSS까지 모든 솔루션을 사용할 수 있습니다.



데모에서 진행되는 모든 기능을 살펴보겠습니다.

작은 화면에서는 축소되는 사이드바가 있습니다.

제품 그리드가 반응합니다

카드 자체에는 가로 및 세로의 두 가지 레이아웃이 있으며 사용 가능한 공간에 따라 반응합니다.

필요한 경우 클러스터 내부의 배지를 래핑할 수 있습니다.

또한 버튼이 사용 가능한 크기에 반응하고 너무 좁으면 축소됩니다.

이 모든 것은 잘 생각한 구성 요소 시스템으로 이루어집니다. 완전히 선언적이고 읽기 쉽고 재사용 가능합니다.

그리고 레이아웃 구성 요소의 가장 기본적인 공통 분모만 다루었습니다. 사용 사례에 따라 훨씬 더 많은 작업을 수행할 수 있습니다. 처럼:

Stack 또는 Column 항목 사이에 유연한 공간을 만들려면 Spacer 구성 요소를 추가하십시오.

기둥 항목이 기둥 내부의 사용 가능한 공간을 채우도록 소품을 추가합니다.

명시적 열 및 행 개수가 포함된 FixedGrid를 추가하여 고정 그리드를 만듭니다.

그러나 나는 당신이 이 시스템에 영감을 주고 이미 이것 위에 구축할 아이디어를 가지고 있기를 바랍니다. 샌드박스나 리포지토리를 자유롭게 포크하여 시작점으로 사용하세요.

다음에 뵙겠습니다! 👋🏻