MYDS Logo

    MYDS

    Beta

    Search Bar

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

    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.

    Tunjuk Hasil Carian atau Cadangan

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

    Michelle Yeoh Internationally acclaimed actress

    P. Ramlee Iconic actor, director, and musician

    Siti Nurhaliza Award-winning singer and songwriter

    Yuna Internationally recognized singer-songwriter

    Namewee Controversial filmmaker and musician

    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.

    Props

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

    PropTypeDefault
    size
    enum
    medium

    SearchBarInput

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

    PropTypeDefault
    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

    PropTypeDefault
    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

    Di halaman ini