Когда я был в парижском офисе Algolia на прошлой неделе, Дхайя Бенмессауд из нашей команды Front-end Experience показал мне интересный прием для стилизации React-виджетов Algolia в вашем пользовательском интерфейсе. Из коробки Algolia предоставляет несколько готовых тем для поиска (Algolia и Satellite) и возможность создания собственных тем. Недавно команда разработчиков фронтенд-опыта добавила третий способ стилизации пользовательского интерфейса — введение пользовательских классов CSS в компоненты Algolia React.
Это отличная новость для тех, кто использует CSS-фреймворки на основе классов, такие как Bootstrap и Tailwind! В моем случае я работал с шаблоном пользовательского интерфейса Algolia Ecommerce, который использует Tailwind для создания стиля. Я хотел добавить виджет <TrendingFacets> из библиотеки Algolia Recommend UI на свою домашнюю страницу, но хотел оформить его с помощью классов Tailwind, чтобы он соответствовал остальному фронтенду.
Вот как он выглядит до стилизации:
Я определенно могу сделать лучше! Для этого мне нужно использовать атрибут classNames для моего компонента. Он доступен для всех React-виджетов Algolia (включая Recommend) и позволяет вам переопределять стилизацию элементов, относящихся к конкретному компоненту. Некоторые из наших других внешних API, таких как Vanilla JavaScript (cssClasses) и Vue (class-names), имеют эту функциональность уже много лет, а теперь она доступна в React благодаря недавнему обновлению, которое добавило крючки React.
В документации перечислены элементы, которые я могу переопределить для каждого виджета Algolia. Например, вот элементы для виджета <SearchBox>:
- root: Корневой элемент виджета.
- form: Элемент формы.
- input: Элемент ввода.
- submit: Кнопка отправки.
- сброс: Кнопка сброса.
- loadingIndicator: Элемент индикатора загрузки.
- submitIcon: значок отправки.
- resetIcon: значок сброса.
- loadingIcon: значок загрузки.
Для моего виджета <TrendingFacets> я хочу, чтобы список располагался в горизонтальной линии для экономии места, поэтому я добавляю класс flex к его элементу list. Я также добавлю новый класс facetItem, чтобы придать каждому item чистую форму капсулы с простой стилизацией при наведении. Вот как выглядит мой компонент после стилизации.
А вот код:
<TrendingFacets
classNames={{ list: 'flex', item: 'facetItem' }}
recommendClient={recommendClient}
indexName={indexName}
maxRecommendations={3}
itemComponent={({ item }) => (
<a href={item.facetValue}>{item.facetValue}</a>
)}
facetName={facetName}
/>
Добавление classNames для настройки стиля виджетов Algolia имеет большой смысл, особенно для таких людей, как я, которые пристрастились к Tailwind CSS для стилизации фронт-эндов. Подробнее о добавлении пользовательских классов CSS к виджетам вы можете прочитать в документации Algolia. Если вы новичок в Algolia, вы можете попробовать ее, зарегистрировавшись на бесплатном уровне.
Я буду рад увидеть другие примеры хорошо оформленных поисковых интерфейсов в комментариях!