마크다운으로 복사링크 공유

타일 격자

지역·브랜드·시공사를 타일로 고르는 공통 틀이에요. 선택·일부 선택·잠김 상태를 가져요.

모바일PCTileGrid · TileBar

고르기#

이 부품을 언제 쓰고, 언제 다른 것을 쓰는지예요.

언제 쓰나#

  • 지역·브랜드·시공사·교통·학교처럼 그림 있는 항목을 여러 개 놓고 고를 때.

쓰지 말아야 할 때 · 대신 쓸 것#

  • 글자만 있는 조건 → 칩

여기로 합친 이름#

아래 이름들은 이 부품의 별칭·프리셋이에요. 새로 쓸 때는 TileGrid를 써요.

인터페이스#

타입에서 자동으로 뽑은 표예요.

TileGrid#

속성기본값타입설명
items*-TileItem[]
empty'항목이 없어요'string
min104number최솟값이에요.
variant'row'TileVariant모양이에요.
className-string배치용 클래스예요. 모양(색·크기)은 덮어쓰지 않아요.

TileBar#

속성기본값타입설명
left-ReactNode왼쪽에 둘 내용이에요.
selected-number
onClear-() => void
className-string배치용 클래스예요. 모양(색·크기)은 덮어쓰지 않아요.

* 필수예요. 표는 타입에서 자동으로 뽑았어요.

접근성#

  • 타일은 버튼이라 Tab과 Enter·Space로 골라요.
  • 하위로 내려가는 버튼은 "<이름> 하위"로 읽혀요.

플랫폼별 차이#

플랫폼별 차이
플랫폼차이
모바일

PC와 같은 모양이에요. 글자 역할만 폰 크기로 바뀌어요.

PC

마우스가 있는 기기에서만 hover가 켜지고, 키보드 초점 링이 보여요.