Banner Kuki

Memaklumkan pengguna bahawa laman web ini menggunakan kuki untuk meningkatkan pengalaman mereka dan memberikan pilihan untuk menguruskan pilihan mereka melalui tetapan kuki. Ia biasanya muncul apabila pengguna melawat laman web buat kali pertama.

Source Storybook

Penggunaan

Import

import {
  CookieBanner,
  CookieBannerClose,
  CookieBannerDescription,
  CookieBannerAction,
  CookieBannerPreferences,
  CookieBannerTitle,
  CookieBannerPreferencesTrigger,
} from "@govtechmy/myds-react/cookie-banner";

Anatomi

export default () => (
  <CookieBanner>
    <CookieBannerTitle />
    <CookieBannerDescription />
    <CookieBannerPreferences />
    <CookieBannerAction>
      <CookieBannerPreferencesTrigger />
      <CookieBannerClose />
    </CookieBannerAction>
  </CookieBanner>
);

Contoh

Keadaan Tidak Terkawal vs Terkawal

Banner Kuki boleh dikendalikan sebagai komponen terkawal atau tidak terkawal.

Untuk menggunakan sebagai komponen tidak terkawal, tetapkan prop defaultOpen sebagai keadaan permulaan.
Untuk menggunakan sebagai komponen terkawal, gantikan dengan prop open dan onOpenChange.

Berikut adalah contoh Banner Kuki Terkawal.

Nota

Kami mengesyorkan untuk mengekalkan CookieBanner sebagai komponen tidak terkawal (melalui defaultOpen). Anda boleh menggunakan API storan di sisi klien seperti localStorage atau sessionStorage untuk menyimpan maklumat keadaan, dan merujuknya apabila pengguna melawat laman web semula.

Panggilan untuk Bertindak (CTA) Pilihan

CookieBannerAction bertanggungjawab untuk memaparkan panggilan untuk bertindak (CTA) untuk banner kuki. Walau bagaimanapun, apabila membenarkan pengguna untuk memilih kuki mereka, anda mungkin ingin mempersembahkan CTA yang berbeza. Dengan CookieBannerAction, hanya tetapkan prop preferences untuk memaparkan CTA Pilihan.

Nota

Gunakan CookieBannerPreferencesTrigger untuk menukar tetapan keadaan pilihan kuki!

Props

CookieBanner

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

CookieBannerTitle

Prop	Type	Default
`children`	`ReactNode`	-

CookieBannerDescription

Prop	Type	Default
`children`	`ReactNode`	-

CookieBannerPreferences

Prop	Type	Default
`children`	`ReactNode`	-

CookieBannerPreferencesTrigger

Prop	Type	Default
`asChild`	`boolean`	-
`children`	`ReactNode`	-

CookieBannerAction

Prop	Type	Default
`preferences`	`boolean`	-
`children`	`ReactNode`	-

CookieBannerClose

Prop	Type	Default
`asChild`	`boolean`	-
`children`	`ReactNode`	-

MYDS