Керуємо коліром іконок у React за допомогою умовних стилів

3 Березня 2024 в 12:58 122

У розробці веб-додатків дуже часто виникає необхідність змінювати вигляд елементів залежно від їх стану. У цій статті ми розглянемо, як за допомогою умовних стилів в React можна легко керувати відображенням іконок під час активного стану кнопки.

Для цього ми використаємо SVG іконки, оскільки вони є зручним і ефективним способом відображення векторних зображень. Уявімо, що у нас є компоненти SideNavbar, SideBarButton та SideBar, які відповідають за навігаційну панель нашого додатку.

Компонент SideBarButton відповідає за створення кнопок з іконками. Він має такі параметри як onClick (для обробки кліку), icon (іконка кнопки), title (текст кнопки) та isActive (стан активності кнопки).

const SideBarButton = ({ onClick, icon, title, isActive }) => {
  return (
    &lt;li&gt;
      &lt;ButtonSidebar onClick={onClick} className={isActive ? "active" : ""}&gt;
        &lt;Icon&gt;{icon}&lt;/Icon&gt;
        {title}
      &lt;/ButtonSidebar&gt;
    &lt;/li&gt;
  );
};

const SideBarButton = ({ onClick, icon, title, isActive }) => {

return (

<li>

{title}

</ButtonSidebar>

</li>

);

};

Клас ‘active’ додається до кнопки, коли вона активна. Тепер нам потрібно змінити колір іконки в залежності від цього стану. Для цього ми можемо використати CSS та умовні стилі.

.ButtonSidebar.active Icon {
  fill: red; /* Колір іконки при активній кнопці */
}

.ButtonSidebar.active Icon {

fill: red; /* Колір іконки при активній кнопці */

}

Тепер, коли кнопка стає активною, колір іконки автоматично змінюється на червоний. Це дозволяє нам легко візуально відзначити активний елемент у навігаційній панелі.

Використовуючи умовні стилі, ми можемо додатково керувати відображенням іконок в інших станах кнопок, таких як ‘hover’ або ‘focus’, і вносити інші зміни відповідно до потреб нашого додатку.

У даному прикладі ми показали лише один спосіб використання умовних стилів в React для керування відображенням іконок. Цей підхід може бути застосований і до інших компонентів і візуальних елементів вашого додатку, дозволяючи легко налаштовувати їх зовнішній вигляд залежно від їх стану та умов.