Ignite UI for Blazor 캐러셀은 텍스트 슬라이드, 링크 및 기타 html 요소가 있는 이미지 컬렉션을 앞뒤로 탐색하는 사용자를 위해 슬라이드쇼와 같은 웹 환경을 만들 수 있는 가장 유연한 방법을 제공하는 응답성이 뛰어난 경량 구성 요소입니다.
Blazor Carousel 구성 요소를 사용하면 애니메이션, 슬라이드 전환 및 사용자 지정을 사용할 수 있으므로 인터페이스를 쉽게 조정하고 사용자 정의 캐러셀 Blazor 구축할 수 있습니다.
Blazor Carousel Example
아래에 보이는 Blazor Carousel 데모는 이미지만 포함된 슬라이드를 보여줍니다.
EXAMPLE
MODULES
RAZOR
CSS
using System;
using System.Net.Http;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using IgniteUI.Blazor.Controls; // for registering Ignite UI modulesnamespaceInfragistics.Samples
{
publicclassProgram
{
publicstaticasync Task Main(string[] args)
{
var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("app");
builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
// registering Ignite UI modules
builder.Services.AddIgniteUIBlazor(
typeof(IgbCarouselModule)
);
await builder.Build().RunAsync();
}
}
}cs
// in Program.cs file
builder.Services.AddIgniteUIBlazor(typeof(IgbCarouselModule));
razor
또한 구성 요소에 스타일을 적용하려면 추가 CSS 파일을 연결해야 합니다 IgbCarousel. Blazor 웹 어셈블리 프로젝트의 wwwroot/index.html 파일 또는 Blazor 서버 프로젝트의 Pages/_Host.cshtml 파일에 다음을 배치해야 합니다.
If no active slide is set, the first one will be set by default. If there are multiple active slides on initial rendering or subsequent updates, only the last one will be taken into account.
Examples
Carousel Configuration
기본적으로 의 IgbCarousel DisableLoop 속성은 false로 설정되어 있습니다(다음 작업을 사용하여 탐색하여 첫 번째 슬라이드가 마지막 슬라이드 뒤에 오거나 이전 작업을 사용하여 첫 번째 슬라이드 뒤에 올 때 반복이 발생합니다). 루핑 동작은 속성 값을 DisableLoop true로 설정하여 비활성화할 수 있습니다.
Ignite UI for Blazor Carousel 구성 요소를 사용하면 단일 지표의 활성 및 비활성 상태에 대해 서로 다른 요소를 사용할 수 있습니다. 인디케이터를 선언할 때 각 슬롯에 대해 두 개의 요소(empty 및 active)를 제공해야 하며, 이는 동일하더라도 마찬가지입니다.
using System;
using System.Net.Http;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using IgniteUI.Blazor.Controls; // for registering Ignite UI modulesnamespaceInfragistics.Samples
{
publicclassProgram
{
publicstaticasync Task Main(string[] args)
{
var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("app");
builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
// registering Ignite UI modules
builder.Services.AddIgniteUIBlazor(
typeof(IgbCarouselModule),
typeof(IgbInputModule),
typeof(IgbIconModule),
typeof(IgbButtonModule)
);
await builder.Build().RunAsync();
}
}
}cs
Setting none to the AnimationType property disables the animations.
데모
아래 데모는 캐러셀이 지원하는 다양한 유형의 애니메이션을 보여줍니다.
EXAMPLE
MODULES
RAZOR
CSS
using System;
using System.Net.Http;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using IgniteUI.Blazor.Controls; // for registering Ignite UI modulesnamespaceInfragistics.Samples
{
publicclassProgram
{
publicstaticasync Task Main(string[] args)
{
var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("app");
builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
// registering Ignite UI modules
builder.Services.AddIgniteUIBlazor(
typeof(IgbCarouselModule),
typeof(IgbButtonModule),
typeof(IgbCardModule),
typeof(IgbSwitchModule),
typeof(IgbSelectModule)
);
await builder.Build().RunAsync();
}
}
}cs
/*
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/css
Navigation
전환 및 탐색은 캐러셀의 가장 중요한 기능입니다.
캐러셀의 탐색은 사용자가 모바일 장치에서 탐색 버튼, 표시기, 키보드 탐색 및 터치 조작을 통해 처리할 수 있습니다.
Touch gestures
기본적으로 캐러셀은 모든 터치 지원 장치에서 사용할 수 있습니다.
캐러셀 애니메이션은 터치 장치에서 완벽하게 지원되므로 캐러셀은 모든 플랫폼과 일관되고 프로그레시브 웹 애플리케이션(PWA)에서 사용될 때 훌륭합니다.
키보드 탐색
탐색 버튼
Space / Enter key - 다음/이전 슬라이드로 이동합니다.
지표
Arrow Left 키 - 이전(오른쪽에서 왼쪽 모드에서 다음) 슬라이드로 이동합니다.
Arrow Right 키 - 다음(오른쪽에서 왼쪽 모드의 이전) 슬라이드로 이동합니다.
Home 키 - 첫 번째(오른쪽에서 왼쪽 모드의 마지막) 슬라이드로 이동합니다.
End 키 - 마지막(오른쪽에서 왼쪽 모드의 첫 번째) 슬라이드로 이동합니다.
Automatic transitioning
IgbCarousel 사용자 상호 작용 없이 슬라이드를 자동으로 변경하도록 쉽게 구성할 수 있습니다. 이렇게 하면 속성에 대한 Interval 전환 간격만 설정하여 자신만의 슬라이드 쇼를 만들 수 있으며, 이 간격은 슬라이드 전환 사이의 시간(밀리초)을 결정합니다.
Hovering the mouse over any carousel content or moving keyboard focus to any of the carousel content pauses automatic transitioning. Automatic transitioning resumes when the mouse moves away from the carousel or when keyboard focus moves out of the carousel content. This can be prevented by setting DisablePauseOnInteraction property to true.
using System;
using System.Net.Http;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using IgniteUI.Blazor.Controls; // for registering Ignite UI modulesnamespaceInfragistics.Samples
{
publicclassProgram
{
publicstaticasync Task Main(string[] args)
{
var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("app");
builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
// registering Ignite UI modules
builder.Services.AddIgniteUIBlazor(
typeof(IgbCarouselModule)
);
await builder.Build().RunAsync();
}
}
}cs
@using IgniteUI.Blazor.Controls<style>
igc-carousel {
margin-inline: auto;
max-width: 75%;
}
igc-carousel::part(indicators) {
border-radius: 2px;
}
.blurred {
filter: blur(2px);
opacity: 0.5;
}
</style><divclass="container sample"><IgbCarouselDisablePauseOnInteraction="true"HideNavigation="true"Interval="2000"Vertical="true"AnimationType="@CarouselAnimationType.Fade"><IgbCarouselIndicator><imgclass="blurred"src="https://www.infragistics.com/angular-demos-lob/assets/images/carousel/WonderfulCoastThumb.png"alt="Wonderful Coast Thumb"width="50"height="60" /><imgslot="active"src="https://www.infragistics.com/angular-demos-lob/assets/images/carousel/WonderfulCoastThumb.png"alt="Wonderful Coast Thumb Active"width="50"height="60" /></IgbCarouselIndicator><IgbCarouselIndicator><imgclass="blurred"src="https://www.infragistics.com/angular-demos-lob/assets/images/carousel/CulturalDipThumb.png"alt="Cultural Dip Thumb"width="50"height="60" /><imgslot="active"src="https://www.infragistics.com/angular-demos-lob/assets/images/carousel/CulturalDipThumb.png"alt="Cultural Dip Thumb Active"width="50"height="60" /></IgbCarouselIndicator><IgbCarouselIndicator><imgclass="blurred"src="https://www.infragistics.com/angular-demos-lob/assets/images/carousel/GoldenBeachesThumb.png"alt="Golden Beaches Thumb"width="50"height="60" /><imgslot="active"src="https://www.infragistics.com/angular-demos-lob/assets/images/carousel/GoldenBeachesThumb.png"alt="Golden Beaches Thumb Active"width="50"height="60" /></IgbCarouselIndicator><IgbCarouselIndicator><imgclass="blurred"src="https://www.infragistics.com/angular-demos-lob/assets/images/carousel/IslandOfHistoryThumb.png"alt="Island Of History Thumb"width="50"height="60" /><imgslot="active"src="https://www.infragistics.com/angular-demos-lob/assets/images/carousel/IslandOfHistoryThumb.png"alt="Island Of History Thumb Active"width="50"height="60" /></IgbCarouselIndicator><IgbCarouselIndicator><imgclass="blurred"src="https://www.infragistics.com/angular-demos-lob/assets/images/carousel/AmazingBridgeThumb.png"alt="Amazing Bridge Thumb"width="50"height="60" /><imgslot="active"src="https://www.infragistics.com/angular-demos-lob/assets/images/carousel/AmazingBridgeThumb.png"alt="Amazing Bridge Thumb Active"width="50"height="60" /></IgbCarouselIndicator><IgbCarouselSlide><imgsrc="https://www.infragistics.com/angular-demos-lob/assets/images/carousel/WonderfulCoast.png"alt="Wonderful Coast" /></IgbCarouselSlide><IgbCarouselSlide><imgsrc="https://www.infragistics.com/angular-demos-lob/assets/images/carousel/CulturalDip.png"alt="Cultural Dip" /></IgbCarouselSlide><IgbCarouselSlide><imgsrc="https://www.infragistics.com/angular-demos-lob/assets/images/carousel/GoldenBeaches.png"alt="Golden Beaches" /></IgbCarouselSlide><IgbCarouselSlide><imgsrc="https://www.infragistics.com/angular-demos-lob/assets/images/carousel/IslandOfHistory.png"alt="Island Of History" /></IgbCarouselSlide><IgbCarouselSlide><imgsrc="https://www.infragistics.com/angular-demos-lob/assets/images/carousel/AmazingBridge.png"alt="Amazing Bridge" /></IgbCarouselSlide></IgbCarousel></div>@code {}razor
/*
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/css
Accessibility
WAI-ARIA Roles, States, and Properties
Carousel 기본 요소 역할은 특정 목적과 관련된 콘텐츠가 포함된 섹션인 region 이며 사용자는 쉽게 탐색할 수 있기를 원할 것입니다.
캐러셀 표시기에는 역할 tab 있습니다. 사용자에게 렌더링할 탭 콘텐츠를 선택하기 위한 메커니즘을 제공하는 그룹화 레이블입니다.
aria-live- 스크린 리더가 라이브 영역에 대한 업데이트를 처리해야 하는 우선 순위를 설정하는 데 사용되며, 가능한 설정은 다음과 같습니다.off 및 polite. 기본 설정은 polite 이며 슬라이드 집합의 컨테이너 역할을 하는 요소로 설정됩니다. Interval 옵션이 설정되고 캐러셀이 재생 중인 상태이면 aria-live 속성이 off로 설정됩니다.
