Penggunaan

Asas

Hanya import komponen & gunakannya, seperti di bawah!

import { Button } from "@govtechmy/myds-react/button";
 
<Button variant="primary-fill" size="small" onClick={...}>
  Jana Pantun
</Button>;

Pastikan untuk merujuk API setiap Komponen untuk mengetahui apa yang tersedia.

Komposisi

Komponen MYDS dibina dengan komposisi dalam fikiran. Komposisi menawarkan penyesuaian pada tahap terendah, memberikan kebebasan tertinggi kepada pembangun untuk melaksanakan logik mereka sendiri pada komponen MYDS.

Lihat beberapa contoh berikut di bawah:

A. Gantikan komponen induk

Contoh ini menunjukkan cara untuk menimpa props untuk menerapkan kelas atau pendengar acara yang ditetapkan melalui asChild.

import { Button } from "@govtechmy/myds-react/button";
import { Link } from "@govtechmy/myds-react/link";
 
<Button variant="primary-ghost" size="small" asChild>
  <Link href="#composition">
    <span className="text-txt-primary">Skrol ke tajuk</span>
  </Link>
</Button>;

Hasilnya, <Link> mewarisi gaya komponen <Button> sambil masih berfungsi sebagai <Link>!

B. Menimpa props

Contoh ini menunjukkan bagaimana komponen induk boleh menimpa props komponen anak dengan bertindak seperti pembungkus.

import { Button, ButtonIcon } from "@govtechmy/myds-react/button";
import { ArrowForwardIcon } from "@govtechmy/myds-react/icon";
 
<Button variant="primary-fill" size="small" onClick={...}>
  Jana Pantun
  <ButtonIcon>
    <ArrowForward />
  </ButtonIcon>
</Button>;

Dalam kes ini, komponen <ButtonIcon> menerapkan CSS yang diperlukan pada ikon <ArrowForward /> untuk menjadikannya mematuhi komponen <Button> & varian yang dipilih.