Search Bar

Membolehkan pengguna memasukkan pertanyaan atau kata kunci untuk mencari kandungan dalam laman web.

Press

to search

Usage

Import

import {
SearchBar,
SearchBarInput,
SearchBarInputContainer,
SearchBarSearchButton,
SearchBarResults,
SearchBarResultsList,
SearchBarResultsItem,
SearchBarClearButton,
SearchBarHint,
} from "@govtechmy/myds-react/search-bar";

Anatomi

export default () => (
  <SearchBar size="large">
    <SearchBarInputContainer>
      <SearchBarInput value={query} onValueChange={setQuery} />
      <SearchBarHint>
        Press <Pill size="small">/</Pill> to search
      </SearchBarHint>
      <SearchBarClearButton />
      <SearchBarSearchButton />
    </SearchBarInputContainer>
    <SearchBarResults open={true}>
      <SearchBarResultsList>
        <SearchBarResultsItem value="foo" onSelect={...} >
          Foo
        </SearchBarResultsItem>
        <SearchBarResultsItem value="bar" onSelect={...} >
          Bar
        </SearchBarResultsItem>
      </SearchBarResultsList>
    </SearchBarResults>
  </SearchBar>
);

Contoh

Saiz

Gunakan prop size untuk menukar saiz bar carian.

Butang Clear

Anda boleh menggunakan SearchBarClearButton untuk menunjukkan butang clear.

Hint

Tunjukkan hint dengan SearchBarHint.

Press

to search

Tunjuk Hasil Carian atau Cadangan

Anda boleh menunjukkan hasil carian atau cadangan dengan komponen SearchBarResults, SearchBarResultsList dan SearchBarResultsItem.

Anda juga boleh mengumpulkan hasil dengan komponen SearchBarResultsGroup:

Komponen Terkawal

Bar carian mesti dikawal dengan prop:

Tetapkan props value dan onValueChange untuk SearchBarInput
Tetapkan prop open untuk SearchBarResults

Dalam contoh di bawah, kami juga menjejaki sama ada bar carian difokuskan atau tidak dengan state hasFocus. Ini membolehkan kami membuka atau menutup SearchBarResults berdasarkan nilai input dan keadaan fokus.

Press

to search

Props

SearchBar

SearchBar disarikan daripada Command.Root cmdk. Sila rujuk rujukan API dalam dokumentasi ini.

Prop	Type	Default
`size`	`enum`	`medium`

SearchBarInput

SearchBarInput disarikan daripada Command.Input cmdk. Sila rujuk rujukan API dalam dokumentasi ini

Prop	Type	Default
`value`	`string`	-
`onValueChange`	`function`	-

SearchBarInputContainer

SearchBarInputContainer menggunakan prop yang sama seperti elemen div biasa.

SearchBarSearchButton

SearchBarSearchButton menggunakan prop yang sama seperti MYDS' Button. Sila rujuk rujukan API dalam dokumentasi ini

SearchBarClearButton

SearchBarClearButton menggunakan prop yang sama seperti MYDS' Button. Sila rujuk rujukan API dalam dokumentasi ini

SearchBarHint

SearchBarInputContainer menggunakan prop yang sama seperti elemen div biasa.

SearchBarResults

Prop	Type	Default
`open`	`boolean`	-

Search Bar

Di halaman ini