Penggunaan

import {
  SummaryList,
  SummaryListAction,
  SummaryListBody,
  SummaryListHeader,
  SummaryListTerm,
  SummaryListDetail,
  SummaryListRow,
} from "@govtechmy/myds-react/summary-list";

export default () => (
  <SummaryList>
    <SummaryListHeader />
    <SummaryListBody>
      <SummaryListRow>
        <SummaryListTerm />
        <SummaryListDetail />
        <SummaryListAction />
      </SummaryListRow>
    </SummaryListBody>
  </SummaryList>
);

Pembungkus Utama: SummaryList

SummaryList adalah komponen utama untuk mempersembahkan ringkasan item dalam format yang tersusun dan konsisten secara visual. Ia berfungsi sebagai komponen induk yang membungkus semua subkomponen.

1. SummaryListHeader
2. SummaryListBody

1. SummaryListHeader

SummaryListHeader digunakan untuk memaparkan tajuk senarai ringkasan.

Contoh:

2. SummaryListBody

SummaryListBody adalah pembungkus untuk data berbentuk jadual dalam SummaryList. Ia berfungsi sebagai pembungkus utama untuk satu atau beberapa SummaryListRow.

Contoh:

2.1 SummaryListRow

SummaryListRow mentakrifkan baris individu dalam jadual.

Contoh:

2.1.1 SummaryListTerm

SummaryListTerm digunakan untuk mewakili istilah atau label dalam baris.

Contoh:

2.1.2 SummaryListDetail

SummaryListDetail memaparkan maklumat terperinci yang sepadan dengan istilah.

Contoh:

2.1.3 SummaryListAction

SummaryListAction digunakan untuk menambah tindakan (contohnya, butang atau pautan) yang berkaitan dengan baris.

Contoh:

2.1.4 SummaryListAddition

SummaryListAddition memberikan maklumat tambahan atau tindakan dalam baris.

Contoh:

Props

SummaryList

SummaryListHeader

SummaryListBody

SummaryListRow

SummaryListTerm

SummaryListDetail

SummaryListAction

SummaryListAddition