主页 / coding / 问题 / 78834720
Accepted
GʀᴜᴍᴘʏCᴀᴛ
Asked: 2024-08-05 21:40:01 +0800 CST

在 Tailwind 中，将 SVG 移动到按钮右上方的正确方法是什么？

  • 772

学习 Tailwind CSS 试图找出将 SVG 图标移动到按钮右上角的正确方法是什么？这与 Github 上的通知行为类似，查看他们的代码时，他们正在使用:before。应用top-0并将inset-y-0移动div到布局顶部。

研究

试图

BtnIcon 组件：

import React, {FC, ElementType, ReactNode} from 'react'

interface Props {
  label: string
  Icon: ElementType
  children: ReactNode
}

const IconBtn: FC<Props> = ({label, Icon, children}) => {
  return (
    <button
      type="button"
      aria-label={label}
      className="group flex items-center p-2 hover:bg-secondary-50 transition-colors rounded-md cursor-pointer"
    >
      <Icon className="h-6 w-6 flex-shrink-0 text-secondary-500 group-hover:text-secondary-800" />
      {children}
    </button>
  )
}

export default IconBtn

孩子：

<Link href="/">
  <div className="flex justify-center items-center">
    <IconBtn label="foo" Icon={NotificationIcon}>
      <span className="sr-only">notification</span>
      <div className="relative">
        <div
          aria-labelledby="notification-tooltip"
          className="absolute top-0 right-0 w-2 h-2 bg-red-700 rounded-full"
        ></div>
      </div>
    </IconBtn>
  </div>
</Link>
reactjs

1 个回答

  1. Best Answer

    元素<div className="relative">的宽度和高度为零，并且您尝试将图标放置在其周围。您应该将按钮作为参考点：

    <script src="https://cdn.tailwindcss.com/3.4.3"></script>

<div class="mt-5 flex items-center justify-center">
  <button type="button" class="relative hover:bg-secondary-50 group flex h-20 w-20 cursor-pointer items-center rounded-md border border-black p-2 transition-colors">
    <div aria-labelledby="notification-tooltip" class="absolute right-2 top-2 h-4 w-4 -m-4 rounded-full bg-red-700"></div>
  </button>
</div>

    • 0

相关问题