代码之家 › 专栏 › 技术社区 › GÊá´á´á´ÊCá´á´

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

tailwind-css reactjs

0

GÊá´á´á´ÊCá´á´ · 技术社区 · 9 月前

学习Tailwind CSS,试图找出将SVG图标移动到按钮右上角的正确方法是什么?这与Github上的通知行为相似,当查看他们使用的代码时 :before .申请 top-0 和 inset-y-0 移动了 div 到布局的顶部。

研究

Top / Right / Bottom / Left | Placing a positioned element

尝试

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>

1 回复 | 直到 9 月前

1

0

loremus 9 月前

你的 <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>