Cara Membuat Petua Alat Dengan UI Terapung

Dalam pembangunan perisian, pengalaman pengguna yang baik biasanya merupakan salah satu perkara yang paling penting untuk dipertimbangkan semasa membina perisian. Anda tidak perlu membuat pengguna anda meneka cara menggunakan aplikasi perisian anda; ini mungkin menjejaskan kebolehgunaan aplikasi anda, yang bukan yang anda mahukan.

Kebanyakan pengguna tidak sabar, mereka mungkin tidak cukup sabar untuk meneroka dan melihat cara apl anda berfungsi, tetapi dengan petua alat, anda boleh membimbing mereka dengan mudah melalui aplikasi anda seperti pemandu pelancong.

Hari ini, kita akan membincangkan cara membina petua alat dengan mudah dengan Floating UI.

Petua alat

Petua alat ialah tetingkap timbul kecil tetapi bermaklumat yang muncul apabila pengguna menuding ke atas, mengklik atau memfokus pada elemen. Sesetengah petua alat mungkin tidak memerlukan pengguna untuk mencetuskannya; sebaliknya, mereka boleh menjadi panduan apabila pengguna melawat aplikasi anda buat kali pertama, memberikan konteks dan arahan secara automatik.

UI Terapung

UI Terapung ialah perpustakaan hebat yang membolehkan anda mencipta petua alat hebat yang boleh melaraskan kedudukannya dengan mudah berdasarkan saiz skrin. Anda tidak perlu risau tentang responsif, UI Terapung akan mengendalikannya untuk anda.

Kadangkala, mencipta petua alat yang cekap boleh memakan masa, ia melibatkan beberapa langkah yang mungkin anda rasa membosankan untuk diambil, itulah sebabnya anda perlu menggunakan perpustakaan seperti Floating UI.

Prasyarat yang anda perlukan untuk memahami artikel ini

1. Pengetahuan asas tentang React js.
2. Pemahaman asas javascript.
3. Anda mesti memasang Node js pada komputer anda (untuk aplikasi React anda dapat dijalankan)
4. Dan akhirnya, penyemak imbas web seperti Google Chrome.

Mari pasang UI Terapung

Kami perlu memasang UI Terapung dalam aplikasi React js kami. Dan kita boleh melakukannya dengan menjalankan arahan ini.

npm pasang @floating-ui/react

Kami perlu mengimport banyak fungsi daripada perpustakaan UI Terapung, fungsi ini akan membolehkan kami mencipta petua alat dengan mudah.

`
import {
gunakanKlik,
gunakan Terapung,
gunakanInteraksi,
selak,
mengimbangi,
gunakanTolak,
} daripada '@floating-ui/react';

`

Memusnahkan penggunaan Terapung

`
const {
rujukan: calendar1Refs,
floatingStyles: calendar1FloatingStyles,
konteks: kalendar1Konteks,
} = useFloating({
buka: isOpen1,
onOpenChange: setIsOpen1,
peletakan: 'hujung bawah',
perisian tengah: [
flip ({
fallbackPlacements: ['kanan'],
}),

offset({ paksi utama: 20, paksi silang: 70 }),
],
});
`

Ruj

Ini membolehkan kami menyambungkan petua alat kami dengan rujukannya dengan mudah. Rujukan kami sepatutnya kelihatan seperti ini.

<i
      className="fa-light fa-calendar cursor-pointer text-gray-500"
            ref={calendar1Refs.setReference}
           ></i>

Walaupun petua alat kami sepatutnya kelihatan seperti ini.

{isOpen1 && (
            <div
             className="absolute z-10 bg-white"
             ref={calendar1Refs.setFloating}

            >
             <Calendar onChange={handleSelectDate1} />
            </div>
           )}The difference here is that our tooltip reference has “setReference” while our tooltip has “setFloating”. This will enable them to be connect, making sure that the tooltip floats around it`s reference.

Gaya Terapung

FloatingStyles ialah objek yang mengandungi gaya CSS yang menentukan kedudukan tepat dan dimensi elemen terapung anda (seperti petua alat) berhubung dengan elemen rujukannya.

{isOpen2 && (
          <div
           className="z-[9999]"
           ref={calendar1Refs.setFloating}
          >



<p><strong>Context</strong></p>

<p>In Floating UI, context (like calendar1Context in this case) provides a way to manage and share state and interactions across multiple hooks. This helps us to share events like click, hover etc. It also helps to dismiss the interactions seamlessly, ensuring that each tooltip or floating element behaves consistently.<br>
</p>

<pre class="brush:php;toolbar:false">const click1 = useClick(calendar1Context);
 const dismissCalendar1ToolTip = useDismiss(calendar1Context);

Buka

Prop terbuka sangat penting untuk keterlihatan petua alat kami. Ia membantu kami mengurus keterlihatan petua alat kami berdasarkan keadaan dalaman komponen.

Kami mula-mula mencipta useState dengan nilai lalai palsu supaya kami boleh menyembunyikan petua alat sehingga pengguna mengklik padanya. UseState ini menjejaki sama ada petua alat sedang dibuka atau tidak.

const [isOpen, setIsOpen] = useState(false);

onOpenChange

Panggil balik ini membantu kami mengemas kini nilai setIsOpen. Jadi apabila pengguna mengklik atau mencetuskan peristiwa, kami akan menetapkan nilai palsu dalam isOpen kepada benar, begitu juga sebaliknya.

Peletakan

Ini membantu untuk menentukan tempat untuk meletakkan petua alat kami berhubung dengan rujukannya. Kami boleh memutuskan untuk meletakkan petua alat kami di mana-mana jawatan ini;

1. bawah
2. hujung bawah
3. permulaan bawah
4. kiri
5. hujung kiri
6. mula-kiri
7. betul
8. hujung kanan
9. mula kanan
10. atas
11. bahagian atas
12. permulaan atas

Selak

Perisian tengah flip yang berada di dalam tatasusunan middleware secara automatik melaraskan kedudukan elemen terapung jika tidak ada ruang yang mencukupi dalam arah yang ditentukan. Di sini, jika ruang di bawah tidak mencukupi, ia akan cuba meletakkannya menggunakan peletakan sandaran (['hujung bawah']). Kita boleh memilih mana-mana jawatan yang kita mahu berdasarkan ruang yang ada.

middleware: [
   flip({
    fallbackPlacements: ['bottom-end'],
   }),

    ],

Mengimbangi

Perisian tengah ini mewujudkan jarak antara rujukan dan elemen terapung. mainAxis: 20 mencipta jurang 20px dalam arah utama (di bawah rujukan, dalam kes ini), manakala crossAxis: 50 mencipta offset 50px di sepanjang paksi serenjang.

middleware: [
   offset({ mainAxis: 20, crossAxis: 50 }),
  ],

Beginilah rupa konfigurasinya

const [isOpen, setIsOpen] = useState(false);
 const {
  refs: calendar1Refs,
  floatingStyles: calendar1FloatingStyles,
  context: calendar1Context,
 } = useFloating({
  open: isOpen,
  onOpenChange: setIsOpen,
  placement: 'bottom-end',

  middleware: [
   flip({
    fallbackPlacements: ['bottom-end'],
   }),

   offset({ mainAxis: 20, crossAxis: 50 }),
  ],
 });

 const click = useClick(calendar1Context);
 const dismissImageToolTip = useDismiss(calendar1Context);

 const {
  getReferenceProps: calendar1TooltipReference,
  getFloatingProps: calendar1TooltipFloatingProps,
 } = useInteractions([click, dismissImageToolTip]);

Demo

Klik pautan ini untuk menonton video demo.

Daripada video, anda dapat melihat dengan jelas bahawa petua alat kami melaraskan kedudukannya jika ruang tidak mencukupi untuk memuatkannya. Ia menggunakan kedudukan fallbackPlacements yang kami tetapkan.

Kesimpulan

UI Terapung menyediakan cara yang berkuasa dan fleksibel untuk melaksanakan petua alat dalam aplikasi React. Dengan kedudukan automatik dan pilihan penyesuaian yang kaya, anda boleh membuat petua alat yang meningkatkan pengalaman pengguna aplikasi anda sambil mengekalkan kefungsian yang boleh dipercayai merentas peranti dan saiz skrin yang berbeza.

Ia melibatkan begitu banyak fungsi dan objek seperti; refs, floatingStyles, konteks, useState untuk pengurusan keadaan, onOpenChange, peletakan, flip dan offset.

Dengan mengikuti panduan ini, anda kini mempunyai pengetahuan untuk melaksanakan petua alat responsif dan mesra pengguna dalam aplikasi React anda. Eksperimen dengan konfigurasi dan perisian tengah yang berbeza untuk mencipta pengalaman petua alat yang sempurna untuk pengguna anda.

Selamat pengekodan ?

Atas ialah kandungan terperinci Cara Membuat Petua Alat Dengan UI Terapung. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!