Search Bar
Membolehkan pengguna memasukkan pertanyaan atau kata kunci untuk mencari kandungan dalam laman web.
Usage
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
.
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
danonValueChange
untukSearchBarInput
- Tetapkan prop
open
untukSearchBarResults
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.
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 | - |
SearchBarResultsList
SearchBarResultsList
disarikan daripada Command.List
cmdk. Sila rujuk rujukan API dalam dokumentasi ini
SearchBarResultsItem
SearchBarResultsItem
disarikan daripada Command.Item
cmdk. Sila rujuk rujukan API dalam dokumentasi ini
SearchBarResultsGroup
SearchBarResultsGroup
disarikan daripada Command.Group
cmdk. Sila rujuk rujukan API dalam dokumentasi ini