Cara 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:

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.Portal>
        <TooltipPrimitives.Content>
          <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'
/>

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'
/>

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'
/>

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.Portal>
        <TooltipPrimitives.Content>
          <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'
/>

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!