Blazor Carousel Overview
El carrusel de Ignite UI for Blazor es un componente ligero y con capacidad de respuesta que proporciona la forma más flexible de crear una experiencia web similar a una presentación de diapositivas para los usuarios que navegan hacia adelante y hacia atrás a través de una colección de imágenes con diapositivas de texto, enlaces y otros elementos html.
El componente Carrusel Blazor le permite usar animaciones, transiciones de diapositivas y personalización para que pueda ajustar fácilmente la interfaz y crear Blazor carrusel personalizado.
Blazor Ejemplo de carrusel
La demostración de Blazor Carousel que ve a continuación muestra diapositivas que contienen solo imágenes.
¿Te gusta esta muestra? Obtenga acceso a nuestro kit de herramientas de Ignite UI for Blazor completo y comience a crear sus propias aplicaciones en minutos. Descárgalo gratis.
Uso
Antes de usar el IgbCarousel
, debe registrarlo de la siguiente manera:
// in Program.cs file
builder.Services.AddIgniteUIBlazor(typeof(IgbCarouselModule));
razor
También deberá vincular un archivo CSS adicional para aplicar el estilo al IgbCarousel
componente. Lo siguiente debe colocarse en el archivo wwwroot/index.html de un proyecto de Blazor Web Assembly o en el archivo Pages/_Host.cshtml de un proyecto de Blazor Server:
<link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />
razor
Para obtener una introducción completa a la Ignite UI for Blazor, lea el tema Primeros pasos.
Ahora que tiene el carrusel de Ignite UI for Blazor importado, puede comenzar con una configuración básica del IgbCarousel
y sus diapositivas.
Usa el IgbCarousel
selector para envolver tus diapositivas. Las diapositivas pueden contener cualquier contenido html válido, incluidos otros componentes.
<IgbCarousel>
<IgbCarouselSlide>
<img src="assets/images/carousel/ignite-ui-angular-indigo-design.png" />
</IgbCarouselSlide>
<IgbCarouselSlide>
<img src="assets/images/carousel/slider-image-chart.png" />
</IgbCarouselSlide>
<IgbCarouselSlide>
<img src="assets/images/carousel/ignite-ui-angular-charts.png" />
</IgbCarouselSlide>
</IgbCarousel>
razor
Si desea que una diapositiva esté activa de forma predeterminada, utilice el Active
atributo:
<IgbCarousel>
...
<IgbCarouselSlide>
...
</IgbCarouselSlide>
<IgbCarouselSlide Active="true">
...
</IgbCarouselSlide>
</IgbCarousel>
razor
Si no se establece ninguna diapositiva activa, la primera se establecerá de forma predeterminada. Si hay varias diapositivas activas en el renderizado inicial o en actualizaciones posteriores, solo se tendrá en cuenta la última.
Ejemplos
Configuración del carrusel
De forma predeterminada, el IgbCarousel
tiene su DisableLoop
propiedad establecida en falso (El bucle se produce cuando la primera diapositiva viene después de la última navegando con la acción Siguiente, o cuando la última diapositiva viene después de la primera mediante la acción Anterior). El comportamiento de bucle se puede desactivar estableciendo el valor de la propiedad DisableLoop
propiedad a verdadero.
<IgbCarousel DisableLoop="true">
...
</IgbCarousel>
razor
Para realizar un seguimiento de cada índice de diapositivas, el carrusel tiene indicadores que se colocan en el end
carrusel de forma predeterminada. Para cambiar este comportamiento, use la IndicatorsOrientation
propiedad y asígnela a start
.
<IgbCarousel IndicatorsOrientation="@CarouselIndicatorsOrientation.Start">
...
</IgbCarousel>
razor
De forma predeterminada, muestra IgbCarousel
sus botones de navegación e indicadores. Utilice la HideIndicators
propiedad para ocultar los indicadores y la HideNavigation
propiedad para ocultar los botones de navegación.
<IgbCarousel HideNavigation="true" HideIndicators="true">
...
</IgbCarousel>
razor
Admite IgbCarousel
el modo vertical. Utilice la Vertical
propiedad para habilitarlo.
<IgbCarousel Vertical="true">
...
</IgbCarousel>
razor
Indicadores personalizados
To add Blazor custom carousel indicators, use the IgbCarouselIndicator
:
<IgbCarousel>
<IgbCarouselIndicator>
<span>🤍</span>
<span slot="active">❤️</span>
</IgbCarouselIndicator>
<IgbCarouselIndicator>
<span>🤍</span>
<span slot="active">❤️</span>
</IgbCarouselIndicator>
<IgbCarouselSlide>
<img src="assets/images/card/media/the_red_ice_forest.jpg"/>
</IgbCarouselSlide>
<IgbCarouselSlide>
<img src="assets/images/card/media/yosemite.jpg"/>
</IgbCarouselSlide>
</IgbCarousel>
razor
El componente Carrusel Ignite UI for Blazor permite a los usuarios utilizar diferentes elementos para el estado activo e inactivo de un solo indicador. Es obligatorio proporcionar dos elementos para cada ranura (vacío y activo) al declarar un indicador, incluso si son los mismos.
Botones de navegación personalizados
Para lograr esto, use las previous-button
ranuras y next-button
:
<IgbCarousel>
<IgbIcon slot="previous-button" IconName="previous" Collection="material"></IgbIcon>
<IgbIcon slot="next-button" IconName="next" Collection="material"></IgbIcon>
...
</IgbCarousel>
razor
Diapositiva que contiene otros componentes.
Este carrusel contendrá diapositivas con formularios e imágenes:
<IgbCarousel>
<IgbCarouselSlide>
<div>
<img src="assets/images/svg/carousel/SignUp.svg">
<form>
<IgbInput DisplayType="@InputType.Text" Placeholder="Username">
<IgbIcon slot="prefix" IconName="person" Collection="material" @ref="iconRef"></IgbIcon>
</IgbInput>
<IgbInput DisplayType="@InputType.Password" Placeholder="Password">
<IgbIcon slot="prefix" IconName="password" Collection="material"></IgbIcon>
</IgbInput>
<IgbButton DisplayType="@ButtonBaseType.Reset">Sign In</IgbButton>
</form>
</div>
</IgbCarouselSlide>
<IgbCarouselSlide>
<div>
<img src="assets/images/svg/carousel/Route.svg">
<form>
<IgbInput DisplayType="@InputType.Text" Placeholder="Search">
<IgbIcon slot="prefix" IconName="search" Collection="material"></IgbIcon>
</IgbInput>
<IgbButton DisplayType="@ButtonBaseType.Reset">Search</IgbButton>
</form>
</div>
</IgbCarouselSlide>
</IgbCarousel>
razor
Manifestación
animaciones
Las transiciones de diapositivas animadas brindan a los usuarios finales una experiencia agradable al interactuar con el carrusel.
El carrusel está configurado para usar la slide
animación de forma predeterminada, pero también admite fade
como animación alternativa.
Use the AnimationType
property to change the animation.
<IgbCarousel AnimationType="@CarouselAnimationType.Fade">
...
</IgbCarousel>
razor
Setting none
to the AnimationType
property disables the animations.
Manifestación
La siguiente demostración muestra los diferentes tipos de animaciones que admite el carrusel.
Navegación
La transición y la navegación son las características más importantes del carrusel.
La navegación en el carrusel puede ser manejada por el usuario a través de botones de navegación, indicadores, navegación con el teclado e interacción táctil en dispositivos móviles.
Gestos táctiles
De forma predeterminada, el carrusel se puede usar en cualquier dispositivo táctil.
Las animaciones del carrusel son totalmente compatibles con dispositivos táctiles, lo que hace que el carrusel sea consistente con cualquier plataforma y excelente cuando se usa en aplicaciones web progresivas (PWA).
Navegación por teclado
- Botones de navegación
Space
/Enter
key: navega a la diapositiva siguiente/anterior.
- Indicadores
Arrow Left
tecla: navega a la diapositiva anterior (siguiente en el modo de derecha a izquierda).Arrow Right
key: navega a la siguiente diapositiva (anterior en el modo de derecha a izquierda).Home
key: navega a la primera diapositiva (la última en el modo de derecha a izquierda).End
key: navega hasta la última diapositiva (la primera en el modo de derecha a izquierda).
Transición automática
Se IgbCarousel
puede configurar fácilmente para cambiar las diapositivas automáticamente, sin ninguna interacción del usuario. De esta manera, puede crear su propia presentación de diapositivas estableciendo solo un intervalo de transición en la Interval
propiedad, que determina la cantidad de tiempo en milisegundos entre la transición de las diapositivas.
Al pasar el mouse sobre cualquier contenido del carrusel o mover el foco del teclado a cualquiera de los contenidos del carrusel, se detiene la transición automática. La transición automática se reanuda cuando el mouse se aleja del carrusel o cuando el foco del teclado se mueve fuera del contenido del carrusel. Esto se puede evitar estableciendo la propiedad DisablePauseOnInteraction en true.
<IgbCarousel Interval="2000" DisablePauseOnInteraction="true">
...
</IgbCarousel>
razor
Ejemplo avanzado
Vamos a crear un carrusel totalmente automatizado con el bucle activado. Configuraremos los indicadores para que sean una representación en miniatura de cada diapositiva.
Para lograr este objetivo, tenemos que realizar las siguientes configuraciones al carrusel:
- Habilitar la
DisablePauseOnInteraction
propiedad - enable the
HideNavigation
property - Habilitar la
Vertical
propiedad - add transition
Interval
- add custom
IgbCarouselIndicator
for each slide
Nuestro carrusel se verá así en la plantilla:
<IgbCarousel DisablePauseOnInteraction="true"
HideNavigation="true"
Interval="2000"
Vertical="true"
AnimationType="@CarouselAnimationType.Fade">
<IgbCarouselIndicator>
<img class="blurred" src="assets/images/carousel/WonderfulCoastThumb.png" width="50" height="60" />
<img slot="active" src="assets/images/carousel/WonderfulCoastThumb.png" width="50" height="60" />
</IgbCarouselIndicator>
<IgbCarouselIndicator>
<img class="blurred" src="assets/images/carousel/CulturalDipThumb.png" width="50" height="60" />
<img slot="active" src="assets/images/carousel/CulturalDipThumb.png" width="50" height="60" />
</IgbCarouselIndicator>
<IgbCarouselIndicator>
<img class="blurred" src="assets/images/carousel/GoldenBeachesThumb.png" width="50" height="60" />
<img slot="active" src="assets/images/carousel/GoldenBeachesThumb.png" width="50" height="60" />
</IgbCarouselIndicator>
<IgbCarouselIndicator>
<img class="blurred" src="assets/images/carousel/IslandOfHistoryThumb.png" width="50" height="60" />
<img slot="active" src="assets/images/carousel/IslandOfHistoryThumb.png" width="50" height="60" />
</IgbCarouselIndicator>
<IgbCarouselIndicator>
<img class="blurred" src="assets/images/carousel/AmazingBridgeThumb.png" width="50" height="60" />
<img slot="active" src="assets/images/carousel/AmazingBridgeThumb.png" width="50" height="60" />
</IgbCarouselIndicator>
<IgbCarouselSlide>
<img src="assets/images/carousel/WonderfulCoast.png" />
</IgbCarouselSlide>
<IgbCarouselSlide>
<img src="assets/images/carousel/CulturalDip.png" />
</IgbCarouselSlide>
<IgbCarouselSlide>
<img src="assets/images/carousel/GoldenBeaches.png" />
</IgbCarouselSlide>
<IgbCarouselSlide>
<img src="assets/images/carousel/IslandOfHistory.png" />
</IgbCarouselSlide>
<IgbCarouselSlide>
<img src="assets/images/carousel/AmazingBridge.png" />
</IgbCarouselSlide>
</IgbCarousel>
razor
Estas configuraciones tendrán el siguiente resultado:
Accesibilidad
Funciones, estados y propiedades de WAI-ARIA
- La función del elemento base del carrusel es
region
: sección que contiene contenido relevante para un propósito específico y los usuarios probablemente querrán poder navegar fácilmente. - Los indicadores del carrusel tienen
tab
de función: una etiqueta de agrupación que proporciona un mecanismo para seleccionar el contenido de la pestaña que se presentará al usuario. - El elemento que sirve como contenedor para el conjunto de pestañas (indicadores de carrusel) es con rol
tablist
. - Cada elemento de diapositiva está configurado con
tabpanel
de función.
Soporte ARIA
Componente de carrusel
- Attributes
- aria-roledescription establecido en "carrusel".
- aria-live: se utiliza para establecer la prioridad con la que el lector de pantalla debe tratar las actualizaciones a las regiones en vivo: las configuraciones posibles son: desactivado y cortés. La configuración predeterminada es cortés y se establece en el elemento que sirve como contenedor para el conjunto de diapositivas. Cuando se establece la
Interval
opción y el carrusel está en estado de reproducción, el atributo aria-live se establecería en off. - aria-label (navigation buttons) - "Previous slide"/"Next slide".
Slide component
- Attributes
- id - sigue el patrón "igc-carousel-slide-${incremented_number}".
- aria-roledescription establecido en "slide".
- aria-label sigue el patrón "${index + 1} of ${total}".
Indicator component
- Attributes
- aria-label sigue el patrón "Slide ${index + 1}"
- Aria-Selected se establece en verdadero o falso en función de la diapositiva activa.