تغیر ایکون در حالت Select

سلام

جناب سوری دوتا ایکون داریم یکی حالت bold و دیگه ای حالت linear که این دو برای زمانی که ‌nav سلکت میشه و زمانی که سلکت نیست متغیره.

خب این مورد رو خود react router به ما میده که زمانی که سلکت شد چه استایلی بگیره (با isActive و شرط) ولی فقط برای استایل کاربرد داره و برای زمانی که ایکون ما یک svg یا تگ باشه نمیشه با این مورد هندلش کرد.

راه حل شما برای این مسئله چیه؟

سلام

اگر موارد پیش فرض نیازمندی شما رو برطرف نمیکنن به راحتی میتونید یه custom link ایجاد بکنید. لینک مربوط به مثال این مورد رو براتون قرار میدم

ورژن ۵

ورژن ۶

لطفا چک بکنید هر بخشی رو ابهام داشتید اعلام بکنید تا اون بخش رو توضیح بدم

مجتبی سوری ۱۹ آذر ۱۴۰۰، ۱۳:۳۲

<NavLink  to="product" className={({ isActive }) => isActive ? "itemSelect" :  "navItem"}>
<Product />/*<---- icon code block SVG*/
<span className="d-none d-md-block navItemMargin">  Productsspan> NavLink>

کد یکی از لینک‌ها هستش نمیتونیم بدون اینکه custom بنویسیم که برای ایکون هستش رو شرطی کنیم؟ با استفاده از IsActive خود روتر نمیشه؟

سیامک احمدی ۱۹ آذر ۱۴۰۰، ۱۵:۳۲

بسته به شرایط میشه روش‌های مختلفی رو داشت

در نهایت یا باید یک جایی شرط چک بکنیم که به راحتی با استفاده از امکاناتی که react router در اختیار ما قرار میده خیلی سخت نیست یا با استفاده از css این مورد رو هندل بکنی

میتونی از طریق همین امکانی که NavLink بهت میده یک class اضافه بکنی و از طریق اون svg مورد نظرت رو اعمال بکنی

یک کد نمونه برای css برات قرار میدم که میشه با اعمال کردن یک svg رو به اضافه کرد (این فقط یک نمونه و باید کامل بهینه بشه با توجه به پروژه)

.icon1 {
  display: block;
  text-indent: -9999px;
  width: 30px;
  height: 30px;
  background: url("./icon1.svg");
  background-size: 30px 30px;
}

بهترین پاسخ

مجتبی سوری ۱۹ آذر ۱۴۰۰، ۱۶:۵۵

بهترین استاد ❤

سیامک احمدی ۱۹ آذر ۱۴۰۰، ۱۶:۵۷