List

같은 형태의 행을 세로로 쌓는 컴포넌트입니다. 내비게이션, 설정 항목, 검색 결과처럼 반복되는 목록에 씁니다.

import { List, ListItem } from 'neba';

<List>
  <ListItem startIcon={<GlobeIcon />} description="4분 전 배포" onClick={open} selected>
    production
  </ListItem>
  <ListItem startIcon={<GlobeIcon />} description="2시간 전 배포" onClick={open}>
    staging
  </ListItem>
</List>;

Props

List

Prop	타입	기본값	설명
variant공통	'solid' | 'outline' | 'text'	'outline'	표면의 무게. 담는 쪽이므로 시트는 물들지 않습니다. Card 안에서는 text를 쓰세요. 카드가 이미 시트입니다
size공통	'xs' | 'sm' | 'md' | 'lg' | 'xl'	'md'	행의 타입 스케일과 여백. 항목이 아니라 목록이 가지는 축입니다
color공통	'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info'	'primary'	의미론적 색 역할. 임의 색상값은 받지 않습니다
density공통	'default' | 'compact'	'default'	여백만 바꿉니다. 높이와 글자 크기는 그대로
elevation공통	0 | 1 | 2 | 3	0	그림자 깊이. 0은 그림자 없음
dividers	boolean	false	행 사이를 여백 대신 하이라인으로 나눕니다. 들리는 것보다 많이 바뀝니다. 선이 시트 양끝까지 닿아야 하므로 목록은 안쪽 여백을, 행은 둥근 모서리를 내놓습니다
render	useRender.RenderProp	—	ul 대신 다른 것으로, 순서가 의미를 가지면 render={<ol />}
children	ReactNode	—	ListItem들

size와 density는 List에만 지정합니다. context를 통해 모든 ListItem에 전달되므로 행마다 반복할 필요가 없습니다.

ListItem

Prop	타입	기본값	설명
startIcon	ReactNode	—	라벨 앞 내용, 아이콘, 아바타, 상태 점
endIcon	ReactNode	—	라벨 뒤 내용. 누를 수 있는 영역 안에 있습니다
description	ReactNode	—	라벨 아래 둘째 줄
action	ReactNode	—	행 끝에 고정되는 컨트롤, 스위치, 메뉴 버튼. 일부러 누를 수 있는 영역 바깥입니다: 버튼 안의 버튼은 브라우저가 파싱하면서 고쳐 쓰는 마크업입니다
onClick	(event) => void	—	넘기면 행이 진짜 button이 됩니다
href	string	—	넘기면 행이 진짜 a가 됩니다
selected	boolean	false	고른 행, 열려 있는 페이지, 켜진 필터. 링크에는 aria-current="page"가, 버튼에는 aria-current="true"가 붙습니다
disabled	boolean	false	사용 불가. 색 계열을 버리고 중립 회색이 됩니다
children	ReactNode	—	라벨

예시

dividers

dividers를 켜면 행 사이에 선이 그려집니다. 선이 sheet 양끝까지 닿아야 하므로 목록의 안쪽 여백과 행의 둥근 모서리가 함께 사라지고, 행은 떠 있는 타일이 아니라 구획된 줄로 바뀝니다.

import { List, ListItem } from 'neba';

const REGIONS = [
  { name: 'Seoul', code: 'icn' },
  { name: 'Tokyo', code: 'nrt' },
  { name: 'Frankfurt', code: 'fra' }
];

export default function ListDividers() {
  return (
    <div className="grid w-full gap-4 sm:grid-cols-2">
      {/* Tiles on a sheet. */}
      <List>
        {REGIONS.map((region) => (
          <ListItem key={region.code} onClick={() => {}} endIcon={<span>{region.code}</span>}>
            {region.name}
          </ListItem>
        ))}
      </List>

      {/* Ruled lines. The rows square off and the sheet gives up its inset so
          the rules can reach both edges. */}
      <List dividers>
        {REGIONS.map((region) => (
          <ListItem key={region.code} onClick={() => {}} endIcon={<span>{region.code}</span>}>
            {region.name}
          </ListItem>
        ))}
      </List>
    </div>
  );
}

variant

Card 안에 넣을 때는 variant="text"를 쓰세요. Card가 이미 sheet이므로 테두리가 겹치지 않습니다.

import { Card, List, ListItem } from 'neba';

export default function ListVariants() {
  return (
    <div className="w-full max-w-96">
      {/* `text` is the one to reach for inside a Card: the card is already a
          sheet, and a second bordered rectangle inside it is a rectangle too
          many. */}
      <Card title="Notifications" subtitle="Where the alerts go">
        <List variant="text" density="compact">
          <ListItem href="#email" description="[email protected]">
            Email
          </ListItem>
          <ListItem href="#slack" description="#deploys">
            Slack
          </ListItem>
          <ListItem href="#webhook" description="Not configured">
            Webhook
          </ListItem>
        </List>
      </Card>
    </div>
  );
}

onClick · href · action

onClick이나 href를 주면 행 전체가 각각 <button> 또는 <a>가 됩니다. action은 그 클릭 영역 바깥에 놓이는 별도의 컨트롤 자리입니다. 행을 눌러 이동하면서 오른쪽 스위치는 따로 조작해야 하는 경우를 위한 것입니다.

import { useState } from 'react';
import { List, ListItem, Switch } from 'neba';

const CHANNELS = [
  { id: 'deploys', name: 'Deploys', detail: 'Every push to a tracked branch' },
  { id: 'failures', name: 'Failures', detail: 'Builds and health checks' },
  { id: 'digest', name: 'Weekly digest', detail: 'Sent on Monday morning' }
];

/**
 * A row that both navigates and holds a control has two things to press, which
 * is why `action` sits outside the pressable area rather than inside it.
 */
export default function ListInteractive() {
  const [on, setOn] = useState<string[]>(['deploys', 'failures']);
  const [open, setOpen] = useState('deploys');

  const toggle = (id: string) =>
    setOn((current) =>
      current.includes(id) ? current.filter((item) => item !== id) : [...current, id]
    );

  return (
    <div className="w-full max-w-96">
      <List dividers>
        {CHANNELS.map((channel) => (
          <ListItem
            key={channel.id}
            description={channel.detail}
            selected={open === channel.id}
            onClick={() => setOpen(channel.id)}
            action={
              <Switch
                size="sm"
                aria-label={`Turn ${channel.name} on`}
                checked={on.includes(channel.id)}
                onCheckedChange={() => toggle(channel.id)}
              />
            }
          >
            {channel.name}
          </ListItem>
        ))}
      </List>
    </div>
  );
}

접근성

• List는 role="list"를 명시합니다. Tailwind의 reset이 <ul>의 불릿을 제거하면 Safari가 목록이라는 의미까지 함께 잃기 때문입니다.
• ListItem의 겉은 항상 <li>이고, onClick이나 href에 따라 그 안에 <button> 또는 <a>가 들어갑니다.
• selected는 링크에 aria-current="page", 버튼에 aria-current="true"를 붙입니다. 선택된 행은 toggle이 아니므로 aria-pressed는 쓰지 않습니다.