TailwindCSS | انتخابگر گروه – انجمن DEV

سلام به همکار توسعه دهندگان frontend من، امروز 1 ویژگی جالب tailwind css را نشان خواهم داد.

انتخابگر گروه

یک فیلد ورودی را با یک نماد در نظر بگیرید – فرض کنید، یک نماد جستجو در داخل فیلد ورودی جستجو. اگر فیلد ورودی متمرکز است، فقط می خواهید نماد جستجو ظاهر شود. انتخابگر گروه باد دنباله ممکن است برای دستیابی به این نوع موقعیت‌ها استفاده شود، جایی که تمرکز یا شناور روی عنصر والد نیز بر استایل اجزای فرزند تأثیر می‌گذارد.

مولفه ورودی

"use client";
import React, { useState } from "react";

const Input = ({
  inputClasses,
  iconClasses,
  focusClasses,
  keepDefaultInputClasses,
}: {
  inputClasses: string;
  iconClasses: string;
  focusClasses: string;
  keepDefaultInputClasses?: boolean;
}) => {
  const [search, setSearch] = useState("");

  return (
    <div className="relative overflow-hidden group">
      <label
        htmlFor="default-search"
        className="mb-2 text-sm font-medium text-gray-900 sr-only dark:text-white"
      >
        Search
      </label>
      <input
        type="search"
        id="default-search"
        value={search}
        onChange={(e) => setSearch(e.target.value)}
        className={
          keepDefaultInputClasses
            ? `pl-8 pr-2 py-1.5 rounded-lg min-w-60 lg:min-w-72 focus:outline-none focus:border focus:border-gray-400 ${inputClasses}`
            : `${inputClasses}`
        }
      />
      <div
        className={`${iconClasses} ${search.length > 0 ? focusClasses : ""}`}
      >
        <svg
          aria-hidden="true"
          className="w-5 h-5 currentColor"
          fill="none"
          stroke="currentColor"
          viewBox="0 0 24 24"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            strokeLinecap="round"
            strokeLinejoin="round"
            strokeWidth="2"
            d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
          ></path>
        </svg>
      </div>
    </div>
  );
};

Input.defaultProps = {
  inputClasses: "",
  iconClasses:
    "absolute inset-y-0 -left-8 group-hover:-left-0 transition-all duration-200 ease-in-out flex items-center pl-2 pointer-events-none",
  focusClasses: "",
};

export default Input;

• سه عنصر این مؤلفه ورودی را تشکیل می دهند: یک ناحیه ورودی، یک نماد جستجو، و یک برچسب که به طور خاص برای صفحه خوان ها در نظر گرفته شده است.
• دیو اصلی اکنون دارای یک “گروه” کلاس tailwind است که روی آن اعمال شده است، بنابراین همه چیز در آن اکنون بخشی از این گروه خواهد بود.
• در مرحله بعد، ما چند ویژگی داریم: inputClasses (که سبک‌های فیلد ورودی را پاس می‌کند)، iconsClasses (که سبک‌های نماد را پاس می‌کنند)، focusClasses (که بررسی می‌کنند آیا فیلد ورودی قبل از اعمال حالت فوکوس مقداری دارد یا نه، در غیر این صورت، فقط اعمال خواهد شد. هنگامی که یک فوکوس وجود دارد)، keepDefaultInputClasses (که مقادیر پیش‌فرض برای کلاس‌های فیلد ورودی را حفظ می‌کند و کلاس‌های اضافه شده دستی را در کنار کلاس‌های پیش‌فرض اضافه می‌کند)، و وضعیت جستجو (که مقادیر فیلد ورودی را ردیابی می‌کند).

استفاده از اجزای ورودی

 <Input
    focusClasses="-left-0"
    keepDefaultInputClasses={true}
    iconClasses="absolute inset-y-0 -left-8 group-focus-within:-left-0 transition-all duration-200 ease-in-out flex items-center pl-2 pointer-events-none"
 />

• focusClasses در این مورد “-left-0” خواهند بود، که نشان می دهد اگر مقداری در فیلد ورودی وجود داشته باشد، این کلاس اعمال خواهد شد. * keepDefaultInputClasses درست است، به این معنی که از کلاس های ورودی پیش فرض استفاده خواهد شد.
• iconClasses – در این مورد، ما در حال تعریف اثر گذار خود برای فوکوس هستیم. در ابتدا، آیکون دارای کلاس “-left-8” خواهد بود که آن را به سمت چپ خارج از نما فشار می دهد.
• group-focus-within:-left-0، که با افزودن “-left-0” که نقطه شروع سمت چپ ظرف است، نماد را قابل مشاهده می کند.
• هنگامی که فوکوس از ورودی حذف شد، نماد دوباره کلاس “-left-8” را در خارج از نما خواهد داشت.

Codesandbox

از اینکه این پست را بررسی کردید متشکرم
می توانید با من تماس بگیرید –
اینستاگرام – https://www.instagram.com/supremacism__shubh/
لینکدین – https://www.linkedin.com/in/shubham-tiwari-b7544b193/
ایمیل – shubhmtiwri00@gmail.com

می توانید در لینک زیر به من کمک کنید با تشکر👇👇
☕ –> https://www.buymeacoffee.com/waaduheck <--

این پست ها را نیز بررسی کنید