主页 / user-1952287

DᴀʀᴛʜVᴀᴅᴇʀ's questions

Martin Hope
GʀᴜᴍᴘʏCᴀᴛ
Asked: 2024-08-26 22:29:12 +0800 CST
  • 5

使用 TailwindCSS 玩转网格 我尝试将所有孤立元素居中，将其md设置为 2 列，而不是lg3 列。阅读后：

我以为我的代码可以工作：

const DUMMY_TESTIMONIAL = [
  {
    body: 'Laborum quis quam. Dolorum et ut quod quia. Voluptas numquam delectus nihil. Aut enim doloremque et ipsam.',
    author: {
      name: 'Leslie Alexander',
      handle: 'lesliealexander',
      imageUrl:
        'https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
    },
  },
  {
    body: 'Laborum quis quam. Dolorum et ut quod quia. Voluptas numquam delectus nihil. Aut enim doloremque et ipsam.',
    author: {
      name: 'Leslie Alexander',
      handle: 'lesliealexander',
      imageUrl:
        'https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
    },
  },
  {
    body: 'Laborum quis quam. Dolorum et ut quod quia. Voluptas numquam delectus nihil. Aut enim doloremque et ipsam.',
    author: {
      name: 'Leslie Alexander',
      handle: 'lesliealexander',
      imageUrl:
        'https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
    },
  },
  {
    body: 'Laborum quis quam. Dolorum et ut quod quia. Voluptas numquam delectus nihil. Aut enim doloremque et ipsam.',
    author: {
      name: 'Leslie Alexander',
      handle: 'lesliealexander',
      imageUrl:
        'https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
    },
  },
]

<Fragment>
  <div className="mx-auto max-w-screen-xl px-6">
    {/* stripped code */}
    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 place-items-center bg-yellow-200 ">
      {DUMMY_TESTIMONIAL.map(testimonial => (
        <div key={testimonial?.author?.handle} className="col-span-1">
          <figure className="rounded-2xl bg-gray-50 p-6 text-sm leading-6">
            <blockquote className="text-gray-900">
              <p>{`“${testimonial?.body}”`}</p>
            </blockquote>
            <figcaption className="mt-6 flex items-center gap-x-4">
              <div className="relative w-10 h-10 bg-gray-100 rounded-full">
                <svg
                  className="absolute w-12 h-12 text-gray-400 -left-1"
                  fill="currentColor"
                  viewBox="0 0 20 20"
                >
                  <path
                    fillRule="evenodd"
                    d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z"
                    clipRule="evenodd"
                  ></path>
                </svg>
              </div>
              <div>
                <div className="font-semibold text-gray-900">{testimonial?.author?.name}</div>
                <div className="text-gray-600">{`@${testimonial?.author?.handle}`}</div>
              </div>
            </figcaption>
          </figure>
        </div>
      ))}
    </div>
  </div>
</Fragment>

研究

我误解了什么place-items-center？

grid
Martin Hope
GʀᴜᴍᴘʏCᴀᴛ
Asked: 2024-08-06 05:23:59 +0800 CST
  • 5

在 CSS 中我可以使用以下方法在悬停时展开：

a {
  --border-color: green;
  --border-width: 5px;
  --bottom-distance: 0px;
  
text-decoration:none;
background-position: 50% calc(100% - var(--bottom-distance));
  color: #666;
  display: inline-block;
  background-image: linear-gradient(var(--border-color), var(--border-color));
  background-size: 0% var(--border-width);
  background-repeat: no-repeat;
  transition: background-size 0.3s;
  margin: 5px 0;
}

a:hover {
  background-size: 100% var(--border-width);
}
<a href="#">Expand from center</h1><br/>

我一直在阅读以下文档：

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

<a href="#" class="group text-sm">
Expand from center
<span class="block mt-4 max-w-0 group-hover:max-w-full transition-all duration-500 h-0.5 bg-green-600"></span>
</a>

如何在 Tailwind CSS 中将鼠标悬停在中心时展开？

hover
Martin Hope
GʀᴜᴍᴘʏCᴀᴛ
Asked: 2024-08-05 21:40:01 +0800 CST
  • 5

学习 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
Martin Hope
DᴀʀᴛʜVᴀᴅᴇʀ
Asked: 2023-11-08 01:48:22 +0800 CST
  • 5

我有一个对象数组，如下所示：

const arr = [
    {
        "name": "Day",
        "value": "Monday"
    },
    {
        "name": "Month",
        "value": "November"
    },
    {
        "name": "Day",
        "value": "Monday"
    },
    {
        "name": "Month",
        "value": "December"
    },
    {
        "name": "Day",
        "value": "Friday"
    },
    {
        "name": "Month",
        "value": "November"
    },
    {
        "name": "Day",
        "value": "Friday"
    },
    {
        "name": "Month",
        "value": "December"
    }
]

但我需要将对象数组修改为：

const final = [
    {
        "name": "Day",
        "values": [
            "Monday",
            "Friday"
        ]
    },
    {
        "name": "Month",
        "values": [
            "November",
            "December"
        ]
    }
]

我可以用以下方法过滤掉重复项：

const filtered = arr.filter(
    (v, i, a) =>
      a.findIndex(v2 => v?.name === v2?.name && v?.value === v2?.value) === i
  );

但我坚持在没有Lodash或下划线的情况下以有效的方式执行此操作的方法，并且我尝试使用Object.assign()但我的实现不起作用：

const test = filtered.map(({ name, value }) =>
    Object.assign({ name, value: [] }, (name, value))
  );
console.log(test)

我想我以前见过这个问题并测试过以下答案：

在对象数组中，我可以组合具有相同名称但在字符串数组中具有值的对象吗？

node.js