Dropdown

Dropdown adalah overlay kontekstual yang boleh diguna untuk memaparkan senarai pautan dan banyak lagi.

Penggunaan

Import

import {
  Dropdown,
  DropdownContent,
  DropdownItem,
  DropdownItemIcon,
  DropdownTrigger,
} from "@govtechmy/myds-react/dropdown";

Anatomi

export default () => (
  <Dropdown>
    <DropdownTrigger />
    <DropdownContent>
      <DropdownItem>
        <DropdownItemIcon />
      </DropdownItem>
    </DropdownContent>
  </Dropdown>
);

Contoh

Pencetus

Gunakan DropdownTrigger untuk membungkus elemen pencetus yang membuka menu dropdown.

Keadaan Tidak Terkawal vs Terkawal

Untuk menggunakan menu dropdown dalam keadaan tidak terkawal, tetapkan prop defaultOpen kepada keadaan awal menu dropdown.

Untuk menggunakan menu dropdown dalam keadaan terkawal, gunakan prop open dan onOpenChange untuk mengendalikan keadaan secara programatik.

Tidak Terkawal

Terkawal

Dengan Ikon

Anda boleh menambah ikon pada DropdownItem untuk memberikan petunjuk visual kepada pengguna dengan menggunakan komponen DropdownItemIcon.

Varian

Anda boleh menetapkan prop variant kepada danger pada DropdownItem untuk menunjukkan bahawa tindakan tersebut adalah merosakkan.

Dinonaktifkan

DropdownItem boleh dinonaktifkan dengan menetapkan prop disabled kepada true. Apabila dinonaktifkan, item dropdown tidak akan interaktif.

Anda boleh menetapkan align pada DialogContent untuk menjajarkan di mana paparan kandungan harus bermula berkenaan dengan elemen pencetus. Secara lalai, penjajaran ditetapkan kepada end. Anda juga boleh menetapkan penjajaran kepada start atau center.

Mula

Tengah

Akhir

Sisi

Anda boleh menetapkan side pada DialogContent untuk meletakkan di mana paparan kandungan harus dipaparkan berkenaan dengan elemen pencetus. Secara lalai, sisi ditetapkan kepada bottom. Anda juga boleh menetapkan sisi kepada left, right & top.

Bawah

Atas

Kiri

Kanan

Props

Prop	Type	Default
`open`	`boolean`	`false`
`defaultOpen`	`boolean`	`false`
`onOpenChange`	`(open: boolean) => void`	-

DropdownTrigger

Prop	Type	Default
`asChild`	`boolean`	`false`

DropdownContent

Prop	Type	Default
`align`	`enum`	`end`
`side`	`enum`	`bottom`

DropdownItem

Prop	Type	Default
`disabled`	`boolean`	`false`
`variant`	`default \| danger`	`default`
`onSelect`	`(event: Event) => void`	-

MYDS