pengenalan
Shadcn ialah perpustakaan pilihan untuk salin-tampal komponen UI dalam projek React. Satu komponen yang biasa digunakan ialah Tooltip, yang dibina di atas @radix-ui/react-tooltip .
Petua alat lalai kelihatan seperti ini:
Menambah Anak panah Petua Alat
Walaupun komponen yang disediakan berfungsi dengan baik di luar kotak, saya mendapati diri saya ingin menambah lebih banyak penyesuaian—seperti menambahkan anak panah pada petua alat. Untuk inspirasi, saya beralih kepada komponen Tooltip daripada tremor.so, yang juga berdasarkan @radix-ui/react-tooltip.
Nasib baik, menambah anak panah adalah mudah kerana @radix-ui/react-tooltip termasuk komponen Arrow. Anda hanya perlu memasukkannya ke dalam komponen Kandungan.
import * as TooltipPrimitives from '@radix-ui/react-tooltip' export default () => ( <tooltipprimitives.provider> <tooltipprimitives.root> <tooltipprimitives.trigger></tooltipprimitives.trigger> <tooltipprimitives.portal> <tooltipprimitives.content> <tooltipprimitives.arrow></tooltipprimitives.arrow> // Add the Arrow component here </tooltipprimitives.content> </tooltipprimitives.portal> </tooltipprimitives.root> </tooltipprimitives.provider> )
Walau bagaimanapun, bagaimana jika anda ingin menambah sempadan di sekeliling keseluruhan petua alat, termasuk anak panah?
Menambah Sempadan Petua Alat
Untuk mencapai matlamat ini, anda perlu menggayakan komponen Arrow. Mari terokai beberapa pendekatan:
Pendekatan Naif
Menambah sempadan terus ke Anak Panah menggunakan kelas Tailwind nampaknya seperti titik permulaan yang baik:
<tooltipprimitives.arrow classname="border border-[var(--tooltip-border-color)] fill-[var(--tooltip-color)]" width="{12}" height="{7}" aria-hidden="true"></tooltipprimitives.arrow>
Walau bagaimanapun, pendekatan ini tidak berfungsi seperti yang diharapkan. Sifat sempadan digunakan pada sempadan segi empat tepat unsur, bukan bentuk anak panah itu sendiri.
Menggunakan Harta strok
Memandangkan Anak Panah ialah elemen SVG, anda boleh menggunakan sifat lejang untuk menentukan sempadan:
<tooltipprimitives.arrow classname="border-none fill-[var(--tooltip-color)]" stroke="var(--tooltip-border-color)" stroke-width="2" width="{12}" height="{7}" aria-hidden="true"></tooltipprimitives.arrow>
Ini berfungsi lebih baik, tetapi sempadan atas anak panah masih kelihatan. Untuk menyelesaikan masalah ini, mari teroka kaedah lain.
Meneroka Pilihan Drop Shadow
Kaedah lain menggunakan bayang-bayang jatuh untuk mensimulasikan jidar:
<tooltipprimitives.arrow classname="-my-px border-none fill-[var(--tooltip-color)] drop-shadow-[0_1px_0_red]" width="{12}" height="{7}" aria-hidden="true"></tooltipprimitives.arrow>
Ini menghasilkan petua alat yang lancar secara visual dengan anak panah dan sempadan, tetapi ia mungkin bukan penyelesaian yang paling tepat bergantung pada kes penggunaan anda.
Perlu dinyatakan bahawa penyelesaian ini diilhamkan oleh komponen Petua Alat daripada UI Asal, yang menyediakan pelbagai variasi petua alat yang boleh disesuaikan yang boleh menjimatkan masa pembangunan.
Bagaimana pula dengan menggayakannya dengan lebih banyak lagi, seperti menggunakan SVG tersuai saya sendiri?
Anak panah SVG tersuai
Saya sering melawati tapak web Vercel, dan bar navigasi lungsur mereka menarik perhatian saya, terutamanya anak panah.
Ingin tahu tentang cara ia direka, saya membuka alat pembangun, memeriksa elemen dan menemui anak panah SVG. Saya kemudian menyalin dan menampalnya ke dalam Figma untuk melihat dengan lebih dekat.
Saya fikir ia boleh menjadi pilihan reka bentuk yang menarik untuk anak panah petua alat.
Kedudukan
Letakkan anak panah SVG bergantung pada peletakan petua alat—atas, bawah, kiri atau kanan. Komponen Kandungan mendedahkan atribut sisi data, yang boleh anda gunakan untuk melaraskan kedudukan secara dinamik:
import * as TooltipPrimitives from '@radix-ui/react-tooltip' export default () => ( <tooltipprimitives.provider> <tooltipprimitives.root> <tooltipprimitives.trigger></tooltipprimitives.trigger> <tooltipprimitives.portal> <tooltipprimitives.content> <tooltipprimitives.arrow></tooltipprimitives.arrow> // Add the Arrow component here </tooltipprimitives.content> </tooltipprimitives.portal> </tooltipprimitives.root> </tooltipprimitives.provider> )
Seterusnya, kami boleh menggantikan komponen Arrow petua alat terbina dalam dengan reka bentuk tersuai kami. Ia sepatutnya berfungsi dengan sempurna, bukan?
Nah, belum cukup lagi. Lihat ini: anak panah tersekat di tengah petua alat dan bukannya diletakkan berhampiran pencetus.
Tingkah laku yang tidak diingini ini berlaku kerana kami hanya menentukan kedudukan statik untuk setiap sisi. Sebaliknya, kita perlu menggunakan kedudukan dinamik untuk menyelesaikan isu ini.
Kedudukan Dinamik
Mari mulakan dengan menggunakan komponen Anak Panah terbina dalam sekali lagi. Jika anda memeriksa komponen Arrow dalam alat pembangun sambil mensimulasikan perubahan kedudukan petua alat, anda akan dapati bahawa elemen SVG dibalut dalam rentang dengan sifat CSS kiri.
Nilai ini berubah secara dinamik berdasarkan kedudukan petua alat. Kami boleh menangkap nilai CSS kiri ini dan menggunakannya pada komponen anak panah tersuai kami.
Untuk menjejak nilai kiri ini, kita perlu memerhatikannya menggunakan MutationObserver.
<tooltipprimitives.arrow classname="border border-[var(--tooltip-border-color)] fill-[var(--tooltip-color)]" width="{12}" height="{7}" aria-hidden="true"></tooltipprimitives.arrow>
Keputusan Akhir
Ia berfungsi seperti yang dijangkakan sekarang ??
P.S. Anda mungkin mahu melaraskan kedudukan teratas jika anda lebih suka memaparkan petua alat di sebelah kiri atau kanan.
Kesimpulan
Sementara pendekatan ini berfungsi, saya pasti terdapat perpustakaan UI yang membenarkan penggayaan petua alat yang lebih mudah dan fleksibel. Walau bagaimanapun, berasa menggembirakan kerana telah menemui penyelesaian untuk ini. Jika anda berminat untuk meneroka pilihan lain, anda mungkin ingin melihat perbincangan ini.
Atas ialah kandungan terperinci Cara Hacky untuk Menyesuaikan Anak Panah Petua Alat Shadcn. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Dalam jawatan ini, Blackle Mori menunjukkan kepada anda beberapa hacks yang ditemui semasa cuba menolak had sokongan HTML Cohost. Gunakan ini jika anda berani, supaya anda juga dilabelkan sebagai penjenayah CSS.

Kursor adat dengan CSS adalah hebat, tetapi kita boleh mengambil sesuatu ke peringkat seterusnya dengan JavaScript. Menggunakan JavaScript, kita boleh beralih antara negeri kursor, letakkan teks dinamik dalam kursor, gunakan animasi kompleks, dan gunakan penapis.

Animasi CSS interaktif dengan unsur -unsur yang menghilangkan satu sama lain kelihatan lebih masuk akal pada tahun 2025. Walaupun tidak perlu untuk melaksanakan pong dalam CSS, peningkatan fleksibiliti dan kuasa CSS mengukuhkan kecurigaan Lee '

Petua dan cara untuk menggunakan harta penapis latar belakang CSS ke antara muka pengguna gaya. Anda akan belajar bagaimana untuk meletakkan penapis latar belakang di antara pelbagai elemen, dan mengintegrasikannya dengan kesan grafik CSS yang lain untuk membuat reka bentuk yang rumit.

Nah, ternyata ciri-ciri animasi terbina dalam SVG ' s tidak pernah ditamatkan seperti yang dirancang. Pasti, CSS dan JavaScript lebih mampu membawa beban, tetapi ia baik untuk mengetahui bahawa SMIL tidak mati di dalam air seperti sebelumnya

Yay, let ' s melompat untuk teks-wrap: Pretty Landing dalam Pratonton Teknologi Safari! Tetapi berhati -hatilah bahawa ia ' s berbeza dari bagaimana ia berfungsi dalam pelayar kromium.

Kemas kini trik CSS ini menyoroti kemajuan yang ketara dalam almanak, penampilan podcast baru-baru ini, panduan kaunter CSS baru, dan penambahan beberapa penulis baru yang menyumbang kandungan berharga.

Kebanyakan masa, orang mempamerkan ciri-ciri Tailwind ' Apabila dipamerkan dengan cara ini, @apply tidak menjanjikan sama sekali. Jadi obvio


Alat AI Hot

Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool
Gambar buka pakaian secara percuma

Clothoff.io
Penyingkiran pakaian AI

Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!

Artikel Panas

Alat panas

Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma

DVWA
Damn Vulnerable Web App (DVWA) ialah aplikasi web PHP/MySQL yang sangat terdedah. Matlamat utamanya adalah untuk menjadi bantuan bagi profesional keselamatan untuk menguji kemahiran dan alatan mereka dalam persekitaran undang-undang, untuk membantu pembangun web lebih memahami proses mengamankan aplikasi web, dan untuk membantu guru/pelajar mengajar/belajar dalam persekitaran bilik darjah Aplikasi web keselamatan. Matlamat DVWA adalah untuk mempraktikkan beberapa kelemahan web yang paling biasa melalui antara muka yang mudah dan mudah, dengan pelbagai tahap kesukaran. Sila ambil perhatian bahawa perisian ini

Dreamweaver Mac版
Alat pembangunan web visual

SecLists
SecLists ialah rakan penguji keselamatan muktamad. Ia ialah koleksi pelbagai jenis senarai yang kerap digunakan semasa penilaian keselamatan, semuanya di satu tempat. SecLists membantu menjadikan ujian keselamatan lebih cekap dan produktif dengan menyediakan semua senarai yang mungkin diperlukan oleh penguji keselamatan dengan mudah. Jenis senarai termasuk nama pengguna, kata laluan, URL, muatan kabur, corak data sensitif, cangkerang web dan banyak lagi. Penguji hanya boleh menarik repositori ini ke mesin ujian baharu dan dia akan mempunyai akses kepada setiap jenis senarai yang dia perlukan.

SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
