Component

CollapsibleSearch

좁은 화면에서는 검색 아이콘이 입력으로 확장되는 검색 컨트롤입니다.

Playground

옵션을 조절하며 화면과 사용 코드를 함께 확인하세요.

PC 1280px

Controls

Code

import { useState } from 'react'

import { CollapsibleSearch, SearchBar } from '@amineslab/ui'

function SearchControlsExample({ value: initialValue = '', placeholder = '구성원 검색', clearable = true, collapsed = false, triggerLabel = '검색 열기', } = {}) {
    const [value, setValue] = useState(initialValue);
    return collapsed ? (<CollapsibleSearch value={value} onValueChange={setValue} placeholder={placeholder} clearable={clearable} triggerLabel={triggerLabel}/>) : (<SearchBar value={value} onValueChange={setValue} placeholder={placeholder} clearable={clearable} className="w-full max-w-sm"/>);
}

export default function ExamplePreview() {
  return (<SearchControlsExample key={""} {...({"value":"","placeholder":"구성원 검색","triggerLabel":"검색 열기","clearable":true} as const)} collapsed/>)
}

Props

@amineslab/ui에서 CollapsibleSearch를 가져옵니다.

import { CollapsibleSearch } from '@amineslab/ui'

`CollapsibleSearch`

SearchBar를 화면 폭에 맞게 접고 펼칩니다.

Name	Type	Default	Description
`open / onOpenChange`	`boolean / (open: boolean) => void`	-	controlled 열림 상태입니다.
`expandedClassName`	`string`	-	펼친 입력의 폭을 조정합니다.
`triggerLabel`	`string`	`검색 열기`	접힌 검색 버튼의 접근 가능한 이름입니다.

Examples

자주 쓰는 조합을 살펴보고, 필요한 예시의 코드를 펼쳐 확인하세요.

좁은 툴바

최근 활동

import { useState } from 'react'

import { CollapsibleSearch } from '@amineslab/ui'

function NarrowToolbarExample() {
    const [query, setQuery] = useState('');
    const [expanded, setExpanded] = useState(false);
    return (<div className="flex w-full items-center justify-between gap-2">
      <span className="text-body-2 font-semibold">최근 활동</span>
      <CollapsibleSearch value={query} onValueChange={setQuery} onSearch={setQuery} open={expanded} onOpenChange={setExpanded}/>
    </div>);
}

export default function ExamplePreview() {
  return (<NarrowToolbarExample />)
}

사용 기준

권장하는 사용

모바일 헤더와 좁은 툴바에서 사용합니다.
검색어가 있으면 닫힌 상태에서도 active dot으로 값이 있음을 알리고, Escape는 검색어를 비운 뒤 닫습니다.

피해야 할 사용

겉모양만으로 사용을 결정하지 마세요.
의미와 키보드 동작, 모바일에서의 흐름을 함께 확인하세요.

접근성

화면에 맞는 이름을 제공하고, 키보드만으로 작업을 마칠 수 있는지 확인하세요.

Enter: 검색을 확정하고 입력을 접습니다.
Escape: 값을 비우고 입력을 닫습니다.