No, no directamente. Puedes elegir categorías, pero solo para restringir la selección de temas. No querría agregar más lógica para habilitar esta opción.
Una solución alternativa podría ser etiquetar automáticamente todos los temas nuevos, usando un comodín:
Creo que solo toma los que están visibles en la pantalla, así que a menudo me desplazo hacia abajo para cargarlos todos antes de aplicar la acción masiva.
En general: El componente es una bifurcación del Componente de Mosaicos Destacados oficial. La idea y motivación principal para mí fue tener una apariencia de tarjetas con la funcionalidad que ofrece ese componente. No creo que añada más características funcionales sobre el componente original. La razón es que, en cuanto al mantenimiento del código, quiero poder seguir simplemente las correcciones de compatibilidad del componente oficial.
En caso de que a alguien le interese: modificamos el componente de tarjetas destacadas para permitir a los usuarios desplazarse horizontalmente por todos los temas destacados (fuente de temas utilizada: más recientes).
Este es el CSS utilizado:
.featured-cards-container {
overflow-x: visible;
flex-wrap: nowrap;
justify-content:left;
-ms-overflow-style: none; /* Ocultar la barra de desplazamiento para MS Edge */
scrollbar-width: none; /* Ocultar la barra de desplazamiento para Mozilla Firefox */
scroll-snap-type: x mandatory;
scroll-padding: 8px;
}
.featured-card {
scroll-snap-align: start;
}
.featured-cards-container::-webkit-scrollbar {
display: none; /* Ocultar la barra de desplazamiento en navegadores basados en Webkit (Chrome, Safari, etc.) */
-webkit-overflow-scrolling: touch; /* En pantallas táctiles, el contenido continúa desplazándose durante un tiempo después de finalizar el gesto de desplazamiento */
}
la imagen que se muestra es la imagen de la categoría. Estoy usando el tema Air. Aplicación para mostrar temas destacados relacionados con esa categoría de su subcategoría Frontier news.
¿Cuál es el tamaño de imagen recomendado para la imagen de la tarjeta?
¿Cómo puedo establecer el número máximo de caracteres para el título? Estoy mostrando un extracto en la tarjeta y se extiende fuera del cuadro con el texto del título y el extracto.
No hay una configuración para controlar los caracteres máximos del título. Sin embargo, puedes aumentar la configuración de altura de las tarjetas para que se ajuste al contenido.
Si no quieres ajustar cada vez, puedes probar este CSS en tu tema o en un componente.
Elimina el límite de altura de la tarjeta y tienes las siguientes opciones:
Gracias, en realidad tenía tu altura definida de 350 antes de publicar, pero acabo de probar tu código y parece ajustar el tamaño de la tarjeta apropiadamente para títulos con extractos.
.featured-cards-container {
overflow-x: visible;
flex-wrap: nowrap;
justify-content:left;
scroll-snap-type: x mandatory;
scroll-padding: 1.25rem;
/* Hace que la barra de desplazamiento sea tangible pero invisible */
scrollbar-width: auto;
scrollbar-color: transparent transparent;
/* O la muestra pero delgada */
// scrollbar-width: thin;
// scrollbar-color: #91919185 transparent;
/* Asegura que la barra de desplazamiento esté justo debajo del contenedor en lugar de debajo de la altura máxima. */
padding-bottom: 1.5rem;
margin-bottom: 2rem;
}
No estoy seguro de que sea una buena idea ocultar la barra de desplazamiento en un escritorio; puede ser frustrante acceder a ella.
Delgada y visible (también haciendo el fondo transparente) me parece bien. ¿Qué opinas?
¡Eso funciona en el escritorio ahora! Pero no en el móvil. Ya he improvisado algo de CSS para la barra de desplazamiento horizontal del móvil, pero no es muy sofisticado
También he añadido el ajuste de fuentes, ya que el tamaño de la fuente del título era demasiado grande para la pantalla pequeña
La nueva versión adopta un enfoque de diseño ligeramente diferente al eliminar opciones de estilo selectas de la configuración del tema. En su lugar, proporciona dos arreglos básicos de diseño (Tarjetas y Lista) y una plantilla más limpia para añadir declaraciones de estilo personalizadas a través de CSS.
Es un poco fuera de tema, pero creo que es un gran enfoque. Me cuesta no proporcionar un millón de configuraciones en un componente en aras de la personalización cuando deberías simplificar las cosas para el usuario, pero aún así ofrecer una forma de personalizar para uso/usuarios avanzados.