컴포넌트FOX · ListRow

목록 줄

목록의 한 줄이에요. 왼쪽 그림, 제목과 설명, 오른쪽 값이나 화살표로 구성돼요. 누를 수 있는 줄과 보기만 하는 줄은 모양이 달라요.

누르는 줄

누를 수 있는 줄에는 오른쪽 화살표를 달고, 올리면 보라색 옅은 바탕이 깔려요.

CLICKABLE

<ListRowGroup>
  <ListRow left={<CoinIcon />} title="출석 체크" description="오늘 출석하면 10P" chevron onClick={go} />
  <ListRow left={<GiftIcon />} title="친구 초대" description="친구가 가입하면 500P" chevron onClick={go} />
</ListRowGroup>

보기만 하는 줄

값만 보여 주는 줄에는 화살표도 반응도 없어요. 제목은 왼쪽, 값은 오른쪽 끝에 둬요.

STATIC

보내는 계좌핀다은행 1234

받는 사람김핀다

금액30,000원

<ListRow title="받는 사람" value="김핀다" />

상태

STATES

구분선 없음마지막 줄처럼

<ListRow title="꺼짐" onClick={go} disabled />

이렇게 써요

보내는 계좌핀다은행 1234

받는 사람김핀다

금액30,000원

이렇게제목은 짧게, 값은 오른쪽 끝에 맞춰 줘요.

이렇게 말고누르지 못하는 줄에 화살표를 달면 눌러도 반응이 없어서 헷갈려요.

속성

속성	값	기본값	설명
`title`	ReactNode	없음	줄의 제목. 필수
`description`	ReactNode	없음	제목 아래 보조 설명
`left`	ReactNode	없음	왼쪽 아이콘이나 썸네일(40px 네모)
`value`	ReactNode	없음	오른쪽 값
`chevron`	boolean	`false`	오른쪽 끝 화살표
`onClick / href`	function \| string	없음	있으면 누를 수 있는 줄이 된다
`divider`	boolean	`true`	아래 구분선
`disabled`	boolean	`false`	누를 수 없는 상태