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!

Ini adalah jawatan ke -3 dalam siri kecil yang kami lakukan dalam kebolehcapaian bentuk. Jika anda terlepas jawatan kedua, lihat "Menguruskan Fokus Pengguna dengan: Fokus-Visible". Dalam

Tutorial ini menunjukkan mewujudkan bentuk JavaScript yang berpandangan profesional menggunakan rangka kerja pintar (nota: tidak lagi tersedia). Walaupun kerangka itu sendiri tidak tersedia, prinsip dan teknik tetap relevan untuk pembina bentuk lain.

CSS box-shadow dan garis besar sifat mendapat tema.json Sokongan dalam WordPress 6.1. Let ' s melihat beberapa contoh bagaimana ia berfungsi dalam tema sebenar, dan pilihan apa yang kita perlu gunakan gaya ini ke blok dan elemen WordPress.

Sekiranya anda baru -baru ini mula bekerja dengan GraphQL, atau mengkaji semula kebaikan dan keburukannya, anda tidak akan ragu -ragu mendengar perkara seperti "Graphql tidak menyokong caching" atau

API Peralihan Svelte menyediakan cara untuk menghidupkan komponen apabila mereka memasuki atau meninggalkan dokumen, termasuk peralihan svelte adat.

Artikel ini meneroka skrip pembina bentuk PHP teratas yang terdapat di Envato Market, membandingkan ciri -ciri, fleksibiliti, dan reka bentuk mereka. Sebelum menyelam ke dalam pilihan tertentu, mari kita faham apa pembina bentuk PHP dan mengapa anda menggunakannya. Borang PHP

Berapa banyak masa yang anda habiskan untuk merancang persembahan kandungan untuk laman web anda? Semasa anda menulis catatan blog baru atau membuat halaman baru, adakah anda memikirkan

Perintah NPM menjalankan pelbagai tugas untuk anda, sama ada sebagai satu-satunya atau proses berjalan terus untuk perkara seperti memulakan pelayan atau menyusun kod.


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

AI Hentai Generator
Menjana ai hentai secara percuma.

Artikel Panas

Alat panas

MinGW - GNU Minimalis untuk Windows
Projek ini dalam proses untuk dipindahkan ke osdn.net/projects/mingw, anda boleh terus mengikuti kami di sana. MinGW: Port Windows asli bagi GNU Compiler Collection (GCC), perpustakaan import yang boleh diedarkan secara bebas dan fail pengepala untuk membina aplikasi Windows asli termasuk sambungan kepada masa jalan MSVC untuk menyokong fungsi C99. Semua perisian MinGW boleh dijalankan pada platform Windows 64-bit.

Penyesuai Pelayan SAP NetWeaver untuk Eclipse
Integrasikan Eclipse dengan pelayan aplikasi SAP NetWeaver.

MantisBT
Mantis ialah alat pengesan kecacatan berasaskan web yang mudah digunakan yang direka untuk membantu dalam pengesanan kecacatan produk. Ia memerlukan PHP, MySQL dan pelayan web. Lihat perkhidmatan demo dan pengehosan kami.

Dreamweaver CS6
Alat pembangunan web visual

SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
