Нет, не напрямую. Вы можете выбирать категории, но только для ограничения выбора тем. Я бы не хотел добавлять дополнительную логику, чтобы включить эту опцию.
В качестве обходного пути можно автоматически добавлять теги ко всем новым темам, используя подстановочный знак:
Похоже, что система захватывает только те темы, которые видны на экране, поэтому я часто прокручиваю страницу вниз, чтобы загрузить все темы, прежде чем применять массовое действие.
В общем: компонент является форком официального компонента «Избранные плитки». Вся идея и мотивация для меня заключались в том, чтобы получить внешний вид карточек с функциональностью, которую предлагает этот компонент. Я не думаю, что буду добавлять какие-либо новые функциональные возможности поверх оригинального компонента. Причина в том, что с точки зрения поддержки кода я хочу иметь возможность просто следить за исправлениями совместимости официального компонента.
На случай, если кому-то интересно: мы изменили компонент карточек избранных тем, чтобы пользователи могли горизонтально прокручивать все избранные темы (используется источник тем: последние).
Вот используемый CSS:
.featured-cards-container {
overflow-x: visible;
flex-wrap: nowrap;
justify-content:left;
-ms-overflow-style: none; /* Скрыть полосу прокрутки для MS Edge */
scrollbar-width: none; /* Скрыть полосу прокрутки для Mozilla Firefox */
scroll-snap-type: x mandatory;
scroll-padding: 8px;
}
.featured-card {
scroll-snap-align: start;
}
.featured-cards-container::-webkit-scrollbar {
display: none; /* Скрыть полосу прокрутки в браузерах на движке Webkit (Chrome, Safari и т.д.) */
-webkit-overflow-scrolling: touch; /* На сенсорных экранах контент продолжает прокручиваться некоторое время после завершения жеста прокрутки */
}
На изображении показано изображение категории. Я использую тему Air. Приложение должно отображать избранные темы, связанные с этой категорией, из её подкатегории «Новости Фронта».
Какой размер изображения рекомендуется для карточки?
Как установить максимальное количество символов для заголовка? Я отображаю краткое описание на карточке, и оно выходит за пределы рамки вместе с текстом заголовка и краткого описания.
Настройки для ограничения максимального количества символов в заголовке нет. Однако вы можете увеличить параметр cards height, чтобы вместить контент.
Если вы не хотите настраивать это каждый раз, попробуйте использовать этот CSS в вашей теме или компоненте.
Он убирает ограничение высоты карточки, и у вас появляются следующие возможности:
Спасибо, у меня перед публикацией уже была установлена высота 350, но я только что попробовал ваш код, и он, похоже, корректно подстраивает размер карточки для заголовков с кратким описанием.
По какой-то причине горизонтальная прокрутка больше не работает. Удалось ли кому-нибудь заставить её работать на настольных компьютерах и мобильных устройствах?
.featured-cards-container {
overflow-x: visible;
flex-wrap: nowrap;
justify-content:left;
scroll-snap-type: x mandatory;
scroll-padding: 1.25rem;
/* Делает полосу прокрутки ощутимой, но невидимой */
scrollbar-width: auto;
scrollbar-color: transparent transparent;
/* Или отображает её, но тонкой */
// scrollbar-width: thin;
// scrollbar-color: #91919185 transparent;
/* Гарантирует, что полоса прокрутки находится прямо под контейнером, а не под максимальной высотой. */
padding-bottom: 1.5rem;
margin-bottom: 2rem;
}
Не уверен, что скрывать полосу прокрутки на десктопе — хорошая идея; это может вызвать раздражение при попытке к ней обратиться.
Тонкая и видимая (а также с прозрачным фоном) выглядит нормально. Что вы думаете?
Теперь это работает на компьютере! Но не на мобильных устройствах. Я уже собрал кое-какой CSS для горизонтальной прокрутки на мобильных, но это не очень изысканно
Также добавил настройку шрифта, так как размер шрифта заголовка был слишком большим для небольшого размера экрана
Новая версия использует немного иной подход к дизайну, исключив опции стиля выбора из настроек темы. Вместо этого она предлагает два базовых варианта макета (Карточки и Список) и более чистый шаблон для добавления пользовательских стилей через CSS.
Это немного не по теме, но я считаю, что это отличный подход. Мне сложно не предлагать миллион настроек для компонента ради кастомизации, когда нужно сделать вещи простыми для пользователя, но при этом оставить возможность для продвинутой настройки опытным пользователям.
Я ещё не реализовал это в данном компоненте, но мне нравится другой подход: использовать пользовательские свойства (custom properties) в качестве стандартного способа настройки стилей. Например, как здесь, на Manuel Kostka / Discourse / Components / Extra Banners · GitLab :