MYDS Logo

    MYDS

    Beta

    Akordion

    Susun dan paparkan kandungan dalam format yang padat dan boleh dilipat, biasanya digunakan untuk bahagian FAQ.

    MYDS adalah sistem reka bentuk untuk membina produk rasmi kerajaan Malaysia di web. MYDS menyediakan komponen pra-bina yang cantik yang memudahkan pembangunan dan mempromosikan konsistensi di seluruh produk kerajaan.

    SourceStorybook

    Penggunaan

    Import
    import {
  AccordionTrigger,
  AccordionContent,
  Accordion,
  AccordionItem,
} from "@govtechmy/myds-react/accordion";
    Anatomi
    export default () => (
  <Accordion>
    <AccordionItem>
      <AccordionTrigger></AccordionTrigger>
      <AccordionContent></AccordionContent>
    </AccordionItem>
  </Accordion>
);

    Contoh

    Jenis

    Gunakan prop type untuk menukar cara kandungan dipaparkan!

    • single: hanya benarkan satu kandungan ditunjukkan pada satu masa

    • multiple: benarkan beberapa kandungan ditunjukkan pada masa yang sama.

    MYDS adalah sistem reka bentuk untuk membina produk rasmi kerajaan Malaysia di web. MYDS menyediakan komponen pra-bina yang cantik yang memudahkan pembangunan dan mempromosikan konsistensi di seluruh produk kerajaan.

    Boleh Dilipat

    Gunakan prop collapsible untuk menentukan sama ada semua akordion boleh dilipat! Secara lalai, ia ditetapkan kepada true. Sila ambil perhatian ini hanya berfungsi apabila type="single".

    MYDS adalah sistem reka bentuk untuk membina produk rasmi kerajaan Malaysia di web. MYDS menyediakan komponen pra-bina yang cantik yang memudahkan pembangunan dan mempromosikan konsistensi di seluruh produk kerajaan.

    Dilumpuh

    Prop disabled wujud dalam kedua-dua komponen Accordion dan AccordionItem.

    Menetapkan disabled kepada true dalam Accordion akan melumpuhkan semua komponen AccordionItem, manakala dalam AccordionItem akan melumpuhkan AccordionItem yang berkenaan.

    MYDS adalah sistem reka bentuk untuk membina produk rasmi kerajaan Malaysia di web. MYDS menyediakan komponen pra-bina yang cantik yang memudahkan pembangunan dan mempromosikan konsistensi di seluruh produk kerajaan.

    Props

    Accordion

    PropTypeDefault
    type
    enum
    		-
    value
    string|string[]
    		-
    defaultValue
    string|string[]
    		-
    onValueChange
    string|string[]
    		-
    collapsible
    string|string[]
    		-
    disabled
    string|string[]
    		-

    AccordionItem

    PropTypeDefault
    asChild
    boolean
    		false
    value
    string|string[]
    		-
    disabled
    string|string[]
    		-

    AccordionTrigger

    PropTypeDefault
    asChild
    boolean
    		false

    AccordionContent

    PropTypeDefault
    asChild
    boolean
    		false

    Untuk penyesuaian yang lebih mendalam, anda boleh merujuk kepada rujukan API dalam dokumentasi ini.

    Sebelumnya

    Laravel

    Seterusnya

    Dialog Amaran

    Di halaman ini

    PenggunaanContohJenisBoleh DilipatDilumpuhPropsAccordionAccordionItemAccordionTriggerAccordionContent