MYDS Logo

    MYDS

    Beta

    Pautan

    Komponen ini digunakan untuk memaparkan pautan URL dan dibina berdasarkan elemen HTML <a>.

    Cara Penggunaan

    import { Link } from "@govtechmy/myds-react/link";
    Anatomi
    export default () => (
      <Link href="/" primary>
        {/* Destinasi pautan harus dinyatakan di sini. */}
        Sistem Reka Bentuk Rasmi Malaysia
      </Link>
    );

    Contoh

    Prop asChild

    Sekiranya anda perlu menggunakan komponen Link daripada pakej yang lain, anda boleh menggunakan prop asChild seperti berikut (Next.js sebagai contoh):

    Anda juga boleh membina komponen sendiri dan import mengikut keperluan:

    import { Link as LinkPrimitive } from "@govtechmy/myds-react/link";
    import NextLink from "next/link";
     
    export const Link = (props) => (
      <LinkPrimitive asChild>
        <NextLink {...props} />
      </LinkPrimitive>
    );

    Prop newTab

    Prop ini menetapkan sama ada pautan dibuka dalam tab baharu dengan menggunakan target="_blank".

    Note

    Semua versi semasa pelayar web terkini secara automatik menggunakan rel="noopener" bagi semua pautan mempunyai target="_blank"

    Primary

    Prop ini digunakan untuk menetapkan warna teks pautan.

    Underline

    Prop ini digunakan untuk menetapkan waktu pautan digaris bawah.

    Prop

    PropTypeDefault
    asChild
    boolean
    -
    href
    string
    -
    newTab
    boolean
    false
    primary
    boolean
    false
    underline
    enum
    always

    Di halaman ini