Ubah suai ikon butang Tutup REACT Bootstrap Modal

Artikel ini menerangkan cara menyesuaikan ikon butang tutup dalam modal Bootstrap React. Oleh kerana React Bootstrap itu sendiri tidak secara langsung menyediakan API untuk mengubah suai ikon butang Tutup, kami akan melaksanakan fungsi ini dengan menyesuaikan header dan menambah kaedah pengendalian acara. Artikel ini akan menyediakan langkah -langkah terperinci dan contoh kod untuk membantu anda dengan mudah melaksanakan keperluan menyesuaikan ikon butang Tutup.

Komponen modal yang disediakan oleh React Bootstrap sangat mudah, tetapi kadang -kadang kita perlu menyesuaikan gayanya, seperti mengubah ikon butang dekat. Oleh kerana React Bootstrap sendiri tidak memberikan pengubahsuaian langsung sifat ikon butang tutup, kita perlu mengamalkan beberapa helah untuk mencapai matlamat ini.

Kaedah: Sesuaikan tajuk dan tambahkan pemprosesan acara

Idea teras adalah untuk menyembunyikan butang tutup lalai, kemudian tambahkan ikon tersuai dalam tajuk modal dan mengikatnya ke acara klik, yang bertanggungjawab untuk menutup modal.

Langkah 1: Keluarkan harta benda closeButton lalai

Pertama, keluarkan harta CloseButton dari komponen . Ini akan menyembunyikan butang tutup lalai.

 <modal.header classname="'modal-head'">
   <dodal.title> cart 
</dodal.title></modal.header>

Langkah 2: Tambahkan ikon Tutup Custom

Tambah ikon tersuai dalam . Anda boleh menggunakan mana-mana perpustakaan ikon yang anda suka, seperti Font Awesome, Ikon Bahan, dan lain-lain. Di sini kami mengambil fon hebat sebagai contoh dan mengandaikan bahawa anda telah memasang React-Fontawesome:

 NPM Install @Fortawesome/React-Fontawesome @Fortawesome/Free-Solid-SVG-Icons

Kemudian memperkenalkan ikon yang diperlukan dalam komponen anda:

 import {fontawesomeicon} dari '@fortawesome/react-fontawesome';
import {fatimes} dari '@fortawesome/free-solid-svg-icons'; // Memperkenalkan ikon rapat

Seterusnya, tambahkan ikon ke :

 <modal.header classname="'modal-head'">
   <dodal.title> cart 
   <div gaya="{{" kedudukan: kanan: laraskan kedudukan ikon atas: kursor ikon: onclick="{()"> setShow (false)} // menganggap setshow adalah fungsi yang mengawal status paparan modal>
     <fontawesomeicon icon="{fatimes}"></fontawesomeicon>
   </div>
</dodal.title></modal.header>

Langkah 3: Tambahkan fungsi pengendalian acara klik

Pastikan anda mempunyai pemboleh ubah keadaan untuk mengawal paparan dan menyembunyikan modal. Dalam contoh ini, kami mengandaikan bahawa pemboleh ubah keadaan ini dipanggil pertunjukan dan terdapat fungsi setshow untuk mengemas kini keadaan ini.

Call SetShow (False) dalam acara onclick ikon, yang akan mematikan modal.

Kod Contoh Lengkap:

 Import React, {Usestate} dari 'React';
import {modal, butang} dari 'React-Bootstrap';
import {fontawesomeicon} dari '@fortawesome/react-fontawesome';
import {fatimes} dari '@fortawesome/free-solid-svg-icons';

fungsi myModal () {
  const [show, setShow] = useState (false);

  Kembali (
    
      <butang variasi="primer" onclick="{()"> setShow (true)}>
        Pelancaran Demo Modal
      </butang>

      <modal show="{show}" onhide="{()"> setShow (false)}>
        <modal.header classname="'modal-head'">
          <dodal.title> cart 
          <div gaya="{{" kedudukan: betul: atas: kursor: onclick="{()"> setShow (false)}
          >
            <fontawesomeicon icon="{fatimes}"></fontawesomeicon>
          </div>
        </dodal.title></modal.header>
        <modal.body> woohoo, anda membaca teks ini dalam modal! </modal.body>
        <modal.footer>
          <butang variasi="sekunder" onclick="{()"> setShow (false)}>
            Tutup
          </butang>
          <butang variasi="primer" onclick="{()"> setShow (false)}>
            Simpan perubahan
          </butang>
        </modal.footer>
      </modal>
    >
  );
}

eksport mymodal lalai;

Nota:

• Pelarasan Gaya: Laraskan kedudukan dan gaya ikon mengikut keperluan khusus anda untuk memastikan ia kelihatan konsisten dengan gaya keseluruhan modal.
• Kebolehcapaian: Pastikan butang Tutup Custom anda boleh diakses. Sebagai contoh, tambahkan harta Aria-label untuk menggambarkan fungsi butang.
• Pemilihan Perpustakaan Ikon: Pilih Perpustakaan Ikon yang sesuai dengan projek anda. Font hebat, ikon bahan, dan lain -lain adalah semua pilihan yang baik.

Meringkaskan:

Walaupun React Bootstrap sendiri tidak menyediakan API yang secara langsung mengubah suai ikon butang Modal Close, kami dapat dengan mudah mencapai ini dengan menyesuaikan tajuk dan menambah pengendalian acara. Pendekatan ini bukan sahaja fleksibel, tetapi juga memberi anda kawalan sepenuhnya ke atas penampilan dan tingkah laku butang dekat. Mudah -mudahan tutorial ini dapat membantu anda berjaya menyesuaikan ikon butang Tutup React Bootstrap Modal.

Atas ialah kandungan terperinci Ubah suai ikon butang Tutup REACT Bootstrap Modal. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!