cari
Rumahhujung hadapan webtutorial cssCara Hacky untuk Menyesuaikan Anak Panah Petua Alat Shadcn

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:

Hacky Way to Customize Shadcn’s Tooltip Arrows

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.

Hacky Way to Customize Shadcn’s Tooltip Arrows

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.

Hacky Way to Customize Shadcn’s Tooltip Arrows

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.

Hacky Way to Customize Shadcn’s Tooltip Arrows

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.

Hacky Way to Customize Shadcn’s Tooltip Arrows

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.

Hacky Way to Customize Shadcn’s Tooltip Arrows

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.

Hacky Way to Customize Shadcn’s Tooltip Arrows

Saya fikir ia boleh menjadi pilihan reka bentuk yang menarik untuk anak panah petua alat.

Kedudukan

Hacky Way to Customize Shadcn’s Tooltip Arrows

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?

Hacky Way to Customize Shadcn’s Tooltip Arrows

Nah, belum cukup lagi. Lihat ini: anak panah tersekat di tengah petua alat dan bukannya diletakkan berhampiran pencetus.

Hacky Way to Customize Shadcn’s Tooltip Arrows

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.

Hacky Way to Customize Shadcn’s Tooltip Arrows

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 ??

Hacky Way to Customize Shadcn’s Tooltip Arrows

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!

Kenyataan
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Pembaca Skrin Demystifying: Borang & Amalan Terbaik DiaksesPembaca Skrin Demystifying: Borang & Amalan Terbaik DiaksesMar 08, 2025 am 09:45 AM

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

Buat borang hubungan JavaScript dengan rangka kerja pintarBuat borang hubungan JavaScript dengan rangka kerja pintarMar 07, 2025 am 11:33 AM

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.

Menambah bayang -bayang kotak ke blok dan elemen WordPressMenambah bayang -bayang kotak ke blok dan elemen WordPressMar 09, 2025 pm 12:53 PM

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.

Bekerja dengan Caching GraphqlBekerja dengan Caching GraphqlMar 19, 2025 am 09:36 AM

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

Menjadikan Peralihan Svelte Khas pertama andaMenjadikan Peralihan Svelte Khas pertama andaMar 15, 2025 am 11:08 AM

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

Membandingkan 5 Pembina Borang PHP Terbaik (dan 3 skrip percuma)Membandingkan 5 Pembina Borang PHP Terbaik (dan 3 skrip percuma)Mar 04, 2025 am 10:22 AM

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

Tunjukkan, jangan beritahuTunjukkan, jangan beritahuMar 16, 2025 am 11:49 AM

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

Apa yang ada perintah npm?Apa yang ada perintah npm?Mar 15, 2025 am 11:36 AM

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

See all articles

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

AI Hentai Generator

Menjana ai hentai secara percuma.

Alat panas

MinGW - GNU Minimalis untuk Windows

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

Penyesuai Pelayan SAP NetWeaver untuk Eclipse

Integrasikan Eclipse dengan pelayan aplikasi SAP NetWeaver.

MantisBT

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

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)