보조 툴바

메인 툴바 바로 밑에 붙는 조건 줄. 왼쪽에 검색과 칩, 오른쪽에 세그먼트와 셀렉트를 둔다. 메인 툴바와 함께 위에 붙어 스크롤해도 조건이 보인다. 메인 툴바에는 flush 를 주어 둘 사이에 틈이 생기지 않게 한다.

활용 방법

메인 툴바와 함께

left 는 줄이 좁아지면 접혀 내려가고, right 는 오른쪽 끝을 지킨다.

Preview

품목

화면 본문

tsx

<MainToolbar flush title="품목" actions={<Button variant="primary">추가</Button>} />
<SubToolbar
  left={<SearchInput placeholder="이름 검색" />}
  right={<Select aria-label="정렬">...</Select>}
/>

속성

이름	타입	기본값	설명
left	ReactNode	-	검색이 맨 앞, 그 뒤 칩
right	ReactNode	-	세그먼트 · 셀렉트 · 내보내기
className	string	-	root div 클래스
ref	Ref<HTMLDivElement>	-	root div. native props 도 여기에 적용된다