View Control

콘텐츠의 표시 방식이나 기준을 전환하는 컴포넌트 묶음이에요. 같은 데이터를 어떻게 보여줄지 전환해요 — Chip · Filter · Tab.

Chip

선택된 상태나 적용된 값을 간단히 표시하는 토글 칩이에요. 필터·태그처럼 여러 개를 독립 토글해요. 순수 표현 컴포넌트라 선택 상태는 외부에서 관리해요.

ChipGroup — multi-select

tsx

import { Chip, ChipGroup } from '@openiot/ui'

const [selected, setSelected] = useState<string[]>(['전체'])

<ChipGroup>
  {items.map((i) => (
    <Chip key={i} selected={selected.includes(i)} onClick={() => toggle(i)}>
      {i}
    </Chip>
  ))}
</ChipGroup>

Filter

콘텐츠를 특정 기준으로 걸러 보여주는 단일 선택 세그먼트 컨트롤이에요. controlled / uncontrolled 모두 지원하고 ←/→·Home·End 키로 이동해요.

tsx

import { Filter } from '@openiot/ui'

<Filter
  options={[
    { value: 'all', label: '전체' },
    { value: 'mine', label: '내 항목' },
    { value: 'shared', label: '공유됨' },
  ]}
  defaultValue="all"
  onValueChange={(v) => console.log(v)}
  aria-label="보기 필터"
/>

Tab

같은 레벨의 콘텐츠를 전환하는 탭 바예요. 활성 탭은 하단 인디케이터 바로 표시돼요. scroll(넘치면 스크롤) / fill(균등 분할) 레이아웃을 지원해요.

현재 탭: home

layout="fill"

tsx

import { Tabs } from '@openiot/ui'

const [value, setValue] = useState('home')

<Tabs
  options={[
    { value: 'home', label: '홈' },
    { value: 'activity', label: '활동' },
    { value: 'device', label: '기기' },
  ]}
  value={value}
  onValueChange={setValue}
  layout="scroll"
  aria-label="메인 탭"
/>

Props

Chip / ChipGroup

Prop	Type	Default	설명
selected	boolean	false	선택(적용) 상태
disabled	boolean	—	네이티브 비활성
...props	ButtonHTMLAttributes	—	나머지 네이티브 button 속성 (onClick 등)
ChipGroup.layout	'set' \| 'scroll'	'set'	줄바꿈 / 가로 스크롤

Filter / Tabs

Prop	Type	Default	설명
options	{ value: string; label: ReactNode; disabled?: boolean }[]	—	선택지 목록
value	string	—	제어 값 (controlled)
defaultValue	string	첫 활성	비제어 초기값
onValueChange	(value: string) => void	—	선택 변경 콜백
layout	'scroll' \| 'fill'	'scroll'	Tabs 전용 — 스크롤 / 균등 분할