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
Helah CSS yang hilang cohost.orgHelah CSS yang hilang cohost.orgApr 25, 2025 am 09:51 AM

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.

Gaya CSS peringkat seterusnya untuk kursorGaya CSS peringkat seterusnya untuk kursorApr 23, 2025 am 11:04 AM

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.

Dunia bertembung: Pengesanan Perlanggaran Kerangka Key menggunakan pertanyaan gayaDunia bertembung: Pengesanan Perlanggaran Kerangka Key menggunakan pertanyaan gayaApr 23, 2025 am 10:42 AM

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 '

Menggunakan penapis latar belakang CSS untuk kesan UIMenggunakan penapis latar belakang CSS untuk kesan UIApr 23, 2025 am 10:20 AM

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.

SMIL ON?SMIL ON?Apr 23, 2025 am 09:57 AM

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

'Cantik' berada di mata penonton'Cantik' berada di mata penontonApr 23, 2025 am 09:40 AM

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.

CSS-Tricks Chronicles XLIIICSS-Tricks Chronicles XLIIIApr 23, 2025 am 09:35 AM

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.

Ciri tailwind ' s @ply lebih baik daripada bunyiCiri tailwind ' s @ply lebih baik daripada bunyiApr 23, 2025 am 09:23 AM

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

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

Video Face Swap

Video Face Swap

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

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

DVWA

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版

Dreamweaver Mac版

Alat pembangunan web visual

SecLists

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

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)