Skip to content

Commit d3ce81f

Browse files
gvreddy04gvreddy04
authored
Carousel component (#850)
* New Carousel component
1 parent 783528f commit d3ce81f

34 files changed

+1174
-39
lines changed

Diff for: ‎BlazorBootstrap.Demo.RCL/Components/Layout/MainLayout.razor.cs

+39-38
Original file line numberDiff line numberDiff line change
@@ -33,50 +33,51 @@ internal override IEnumerable<NavItem> GetNavItems()
3333
new (){ Id = "504", Text = "Buttons", Href = "/buttons", IconName = IconName.ToggleOn, ParentId = "5" },
3434
new (){ Id = "505", Text = "Callout", Href = "/callout", IconName = IconName.StickyFill, ParentId = "5" },
3535
new (){ Id = "506", Text = "Card", Href = "/card", IconName = IconName.CardHeading, ParentId = "5" },
36-
new (){ Id = "507", Text = "Charts", Href = "/charts", IconName = IconName.BarChartLineFill, ParentId = "5", Match = NavLinkMatch.All },
37-
new (){ Id = "508", Text = "Collapse", Href = "/collapse", IconName = IconName.ArrowsCollapse, ParentId = "5" },
38-
new (){ Id = "509", Text = "Confirm Dialog", Href = "/confirm-dialog", IconName = IconName.QuestionDiamondFill, ParentId = "5" },
39-
new (){ Id = "510", Text = "Dropdown", Href = "/dropdown", IconName = IconName.MenuButtonWideFill, ParentId = "5" },
40-
new (){ Id = "510", Text = "Google Maps", Href = "/google-maps", IconName = IconName.Map, ParentId = "5" },
36+
new (){ Id = "507", Text = "Carousel", Href = "/carousel", IconName = IconName.CollectionPlayFill, ParentId = "5" },
37+
new (){ Id = "508", Text = "Charts", Href = "/charts", IconName = IconName.BarChartLineFill, ParentId = "5", Match = NavLinkMatch.All },
38+
new (){ Id = "509", Text = "Collapse", Href = "/collapse", IconName = IconName.ArrowsCollapse, ParentId = "5" },
39+
new (){ Id = "510", Text = "Confirm Dialog", Href = "/confirm-dialog", IconName = IconName.QuestionDiamondFill, ParentId = "5" },
40+
new (){ Id = "511", Text = "Dropdown", Href = "/dropdown", IconName = IconName.MenuButtonWideFill, ParentId = "5" },
41+
new (){ Id = "512", Text = "Google Maps", Href = "/google-maps", IconName = IconName.Map, ParentId = "5" },
4142

4243
#region Grid
4344

44-
new (){ Id = "511", Text = "Grid", IconName = IconName.Grid, ParentId = "5" },
45-
new (){ Id = "51101", Text = "Overview", Href = "/grid/overview", IconName = IconName.Grid, ParentId = "511" }, // first item- do not change
46-
new (){ Id = "51102", Text = "Alignment", Href = "/grid/alignment", IconName = IconName.Justify, ParentId = "511" },
47-
new (){ Id = "51103", Text = "Custom CSS Class", Href = "/grid/custom-css-class", IconName = IconName.FileTypeCss, ParentId = "511" },
48-
new (){ Id = "51104", Text = "Data Binding", Href = "/grid/data-binding", IconName = IconName.GridFill, ParentId = "511" },
49-
new (){ Id = "51106", Text = "Detail View", Href = "/grid/detail-view", IconName = IconName.ListNested, ParentId = "511" },
50-
new (){ Id = "51107", Text = "Events", Href = "/grid/events", IconName = IconName.LightningChargeFill, ParentId = "511" },
51-
new (){ Id = "51107", Text = "Filters", Href = "/grid/filters", IconName = IconName.FunnelFill, ParentId = "511" },
52-
new (){ Id = "51108", Text = "Fixed Header", Href = "/grid/fixed-header", IconName = IconName.Table, ParentId = "511" },
53-
new (){ Id = "51109", Text = "Freeze Columns", Href = "/grid/freeze-columns", IconName = IconName.LayoutThreeColumns, ParentId = "511" },
54-
new (){ Id = "51110", Text = "Grid Settings", Href = "/grid/settings", IconName = IconName.GearFill, ParentId = "511" },
55-
new (){ Id = "51111", Text = "Nested Grid", Href = "/grid/nested-grid", IconName = IconName.Pip, ParentId = "511" },
56-
new (){ Id = "51112", Text = "Paging", Href = "/grid/paging", IconName = IconName.ChevronBarRight, ParentId = "511" },
57-
new (){ Id = "51113", Text = "Selection", Href = "/grid/selection", IconName = IconName.CheckSquareFill, ParentId = "511" },
58-
new (){ Id = "51114", Text = "Sorting", Href = "/grid/sorting", IconName = IconName.ArrowDownUp, ParentId = "511" },
59-
new (){ Id = "51115", Text = "Translations", Href = "/grid/translations", IconName = IconName.Translate, ParentId = "511" },
60-
new (){ Id = "51199", Text = "Other", Href = "/grid/other", IconName = IconName.PlusSquareFill, ParentId = "511" }, // last item - do not change
45+
new (){ Id = "513", Text = "Grid", IconName = IconName.Grid, ParentId = "5" },
46+
new (){ Id = "51101", Text = "Overview", Href = "/grid/overview", IconName = IconName.Grid, ParentId = "513" }, // first item - do not change
47+
new (){ Id = "51102", Text = "Alignment", Href = "/grid/alignment", IconName = IconName.Justify, ParentId = "513" },
48+
new (){ Id = "51103", Text = "Custom CSS Class", Href = "/grid/custom-css-class", IconName = IconName.FileTypeCss, ParentId = "513" },
49+
new (){ Id = "51104", Text = "Data Binding", Href = "/grid/data-binding", IconName = IconName.GridFill, ParentId = "513" },
50+
new (){ Id = "51106", Text = "Detail View", Href = "/grid/detail-view", IconName = IconName.ListNested, ParentId = "513" },
51+
new (){ Id = "51107", Text = "Events", Href = "/grid/events", IconName = IconName.LightningChargeFill, ParentId = "513" },
52+
new (){ Id = "51107", Text = "Filters", Href = "/grid/filters", IconName = IconName.FunnelFill, ParentId = "513" },
53+
new (){ Id = "51108", Text = "Fixed Header", Href = "/grid/fixed-header", IconName = IconName.Table, ParentId = "513" },
54+
new (){ Id = "51109", Text = "Freeze Columns", Href = "/grid/freeze-columns", IconName = IconName.LayoutThreeColumns, ParentId = "513" },
55+
new (){ Id = "51110", Text = "Grid Settings", Href = "/grid/settings", IconName = IconName.GearFill, ParentId = "513" },
56+
new (){ Id = "51111", Text = "Nested Grid", Href = "/grid/nested-grid", IconName = IconName.Pip, ParentId = "513" },
57+
new (){ Id = "51112", Text = "Paging", Href = "/grid/paging", IconName = IconName.ChevronBarRight, ParentId = "513" },
58+
new (){ Id = "51113", Text = "Selection", Href = "/grid/selection", IconName = IconName.CheckSquareFill, ParentId = "513" },
59+
new (){ Id = "51114", Text = "Sorting", Href = "/grid/sorting", IconName = IconName.ArrowDownUp, ParentId = "513" },
60+
new (){ Id = "51115", Text = "Translations", Href = "/grid/translations", IconName = IconName.Translate, ParentId = "513" },
61+
new (){ Id = "51199", Text = "Other", Href = "/grid/other", IconName = IconName.PlusSquareFill, ParentId = "513" }, // last item - do not change
6162

6263
#endregion Grid
6364

64-
new (){ Id = "512", Text = "Modals", Href = "/modals", IconName = IconName.WindowStack, ParentId = "5" },
65-
new (){ Id = "513", Text = "Offcanvas", Href = "/offcanvas", IconName = IconName.LayoutSidebarReverse, ParentId = "5" },
66-
new (){ Id = "514", Text = "Pagination", Href = "/pagination", IconName = IconName.ThreeDots, ParentId = "5" },
67-
new (){ Id = "515", Text = "PDF Viewer", Href = "/pdf-viewer", IconName = IconName.FilePdfFill, ParentId = "5" },
68-
new (){ Id = "516", Text = "Placeholders", Href = "/placeholders", IconName = IconName.ColumnsGap, ParentId = "5" },
69-
new (){ Id = "517", Text = "Preload", Href = "/preload", IconName = IconName.ArrowClockwise, ParentId = "5" },
70-
new (){ Id = "518", Text = "Progress", Href = "/progress", IconName = IconName.UsbC, ParentId = "5" },
71-
new (){ Id = "519", Text = "Ribbon", Href = "/ribbon", IconName = IconName.WindowStack, ParentId = "5" },
72-
new (){ Id = "520", Text = "Script Loader", Href = "/script-loader", IconName = IconName.CodeSlash, ParentId = "5" },
73-
new (){ Id = "521", Text = "Sidebar", Href = "/sidebar", IconName = IconName.LayoutSidebar, ParentId = "5" },
74-
new (){ Id = "522", Text = "Sidebar 2", Href = "/sidebar2", IconName = IconName.ListNested, ParentId = "5" },
75-
new (){ Id = "523", Text = "Sortable List", Href = "/sortable-list", IconName = IconName.ArrowsMove, ParentId = "5" },
76-
new (){ Id = "524", Text = "Spinner", Href = "/spinners", IconName = IconName.ArrowRepeat, ParentId = "5" },
77-
new (){ Id = "525", Text = "Tabs", Href = "/tabs", IconName = IconName.WindowPlus, ParentId = "5" },
78-
new (){ Id = "526", Text = "Toasts", Href = "/toasts", IconName = IconName.ExclamationTriangleFill, ParentId = "5" },
79-
new (){ Id = "527", Text = "Tooltips", Href = "/tooltips", IconName = IconName.ChatSquareDotsFill, ParentId = "5" },
65+
new (){ Id = "514", Text = "Modals", Href = "/modals", IconName = IconName.WindowStack, ParentId = "5" },
66+
new (){ Id = "515", Text = "Offcanvas", Href = "/offcanvas", IconName = IconName.LayoutSidebarReverse, ParentId = "5" },
67+
new (){ Id = "516", Text = "Pagination", Href = "/pagination", IconName = IconName.ThreeDots, ParentId = "5" },
68+
new (){ Id = "517", Text = "PDF Viewer", Href = "/pdf-viewer", IconName = IconName.FilePdfFill, ParentId = "5" },
69+
new (){ Id = "518", Text = "Placeholders", Href = "/placeholders", IconName = IconName.ColumnsGap, ParentId = "5" },
70+
new (){ Id = "519", Text = "Preload", Href = "/preload", IconName = IconName.ArrowClockwise, ParentId = "5" },
71+
new (){ Id = "520", Text = "Progress", Href = "/progress", IconName = IconName.UsbC, ParentId = "5" },
72+
new (){ Id = "521", Text = "Ribbon", Href = "/ribbon", IconName = IconName.WindowStack, ParentId = "5" },
73+
new (){ Id = "522", Text = "Script Loader", Href = "/script-loader", IconName = IconName.CodeSlash, ParentId = "5" },
74+
new (){ Id = "523", Text = "Sidebar", Href = "/sidebar", IconName = IconName.LayoutSidebar, ParentId = "5" },
75+
new (){ Id = "524", Text = "Sidebar 2", Href = "/sidebar2", IconName = IconName.ListNested, ParentId = "5" },
76+
new (){ Id = "525", Text = "Sortable List", Href = "/sortable-list", IconName = IconName.ArrowsMove, ParentId = "5" },
77+
new (){ Id = "526", Text = "Spinner", Href = "/spinners", IconName = IconName.ArrowRepeat, ParentId = "5" },
78+
new (){ Id = "527", Text = "Tabs", Href = "/tabs", IconName = IconName.WindowPlus, ParentId = "5" },
79+
new (){ Id = "528", Text = "Toasts", Href = "/toasts", IconName = IconName.ExclamationTriangleFill, ParentId = "5" },
80+
new (){ Id = "529", Text = "Tooltips", Href = "/tooltips", IconName = IconName.ChatSquareDotsFill, ParentId = "5" },
8081

8182
new (){ Id = "6", Text = "Data Visualization", IconName = IconName.BarChartFill, IconColor = IconColor.Warning },
8283
new (){ Id = "600", Text = "Bar Chart", Href = "/charts/bar-chart", IconName = IconName.BarChartFill, ParentId = "6", Match = NavLinkMatch.All },

Diff for: ‎BlazorBootstrap.Demo.RCL/Components/Pages/Carousel/CarouselDocumentation.razor

+101
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
@page "/carousel"
2+
3+
<PageTitle>@title</PageTitle>
4+
5+
<MetaTags PageUrl="@pageUrl" Title="@title" Description="@description" ImageUrl="@imageUrl" />
6+
7+
<h1>Blazor Carousel</h1>
8+
<div class="lead mb-3">Blazor Carousel component is a slideshow component that cycles through elements, images, or slides of text.</div>
9+
10+
<CarbonAds />
11+
12+
<SectionHeading Size="HeadingSize.H2" Text="Examples" PageUrl="@pageUrl" HashTagName="examples" />
13+
<div class="mb-3">Here is a basic example of a carousel with three slides.</div>
14+
<Demo Type="typeof(Carousel_Demo_01_Examples)" Tabs="true" />
15+
16+
<SectionHeading Size="HeadingSize.H2" Text="Indicators" PageUrl="@pageUrl" HashTagName="indicators" />
17+
<div class="mb-3">
18+
You can add indicators to the carousel, alongside the previous/next controls.
19+
The indicators allow users to jump directly to a particular slide.
20+
Set <code>ShowIndicators</code> to <code>true</code> to show the indicators.
21+
</div>
22+
<Demo Type="typeof(Carousel_Demo_02_Indicators)" Tabs="true" />
23+
24+
<SectionHeading Size="HeadingSize.H2" Text="Captions" PageUrl="@pageUrl" HashTagName="captions" />
25+
<div class="mb-3">
26+
You can add captions to your slides with the <code>CarouselCaption</code> component within any <code>CarouselItem</code>.
27+
They can be easily hidden on smaller viewports.
28+
</div>
29+
<Demo Type="typeof(Carousel_Demo_03_Captions)" Tabs="true" />
30+
31+
<SectionHeading Size="HeadingSize.H2" Text="Crossfade" PageUrl="@pageUrl" HashTagName="Crossfade" />
32+
<div class="mb-3">
33+
To animate slides with a fading transition instead of sliding, set <code>Crossfade</code> to <code>true</code>.
34+
</div>
35+
<Demo Type="typeof(Carousel_Demo_04_Crossfade)" Tabs="true" />
36+
37+
<SectionHeading Size="HeadingSize.H2" Text="Autoplaying carousels" PageUrl="@pageUrl" HashTagName="autoplaying-carousels" />
38+
<div class="mb-3">
39+
You can make your carousels autoplay on page load by setting the <code>Autoplay</code> parameter to <code>CarouselAutoPlay.StartOnPageLoad</code>.
40+
Autoplaying carousels automatically pause while hovered with the mouse.
41+
</div>
42+
<Demo Type="typeof(Carousel_Demo_05_Autoplay_A_StartOnPageLoad)" Tabs="true" />
43+
<div class="my-3">
44+
When the <code>Autoplay</code> parameter is set to <code>CarouselAutoPlay.StartAfterUserInteraction</code>, the carousel won’t automatically start to cycle on page load.
45+
Instead, it will only start after the first user interaction.
46+
</div>
47+
<Demo Type="typeof(Carousel_Demo_05_Autoplay_B_StartAfterUserInteraction)" Tabs="true" />
48+
49+
<SectionHeading Size="HeadingSize.H2" Text="Individual carousel item interval" PageUrl="@pageUrl" HashTagName="individual-carousel-item-interval" />
50+
<div class="mb-3">
51+
Add <code>Interval</code> parameter to a <code>CarouselItem</code> component to change the amount of time to delay between automatically cycling to the next item.
52+
</div>
53+
<Demo Type="typeof(Carousel_Demo_06_Individual_Carouselitem_Interval)" Tabs="true" />
54+
55+
<SectionHeading Size="HeadingSize.H2" Text="Autoplaying carousels without controls" PageUrl="@pageUrl" HashTagName="autoplaying-carousels-without-controls" />
56+
<div class="mb-3">
57+
Hide the controls by setting <code>ShowPreviousNextControls</code> parameter to <code>false</code>.
58+
</div>
59+
<Demo Type="typeof(Carousel_Demo_07_Autoplaying_Carousels_without_Controls)" Tabs="true" />
60+
61+
<SectionHeading Size="HeadingSize.H2" Text="Disable touch swiping" PageUrl="@pageUrl" HashTagName="disable-touch-swiping" />
62+
<div class="mb-3">
63+
Carousels support swiping left/right on touchscreen devices to move between slides.
64+
This can be disabled by setting the <code>Touch</code> option to <code>false</code>.
65+
</div>
66+
<Demo Type="typeof(Carousel_Demo_08_Touch)" Tabs="true" />
67+
68+
<SectionHeading Size="HeadingSize.H2" Text="Events" PageUrl="@pageUrl" HashTagName="events" />
69+
<div class="mb-3">
70+
Blazor Bootstrap Carousel component exposes a two events for hooking into Carousel functionality.
71+
<table class="table">
72+
<thead>
73+
<tr>
74+
<th scope="col">Event Name</th>
75+
<th scope="col">Description</th>
76+
</tr>
77+
</thead>
78+
<tbody class="table-group-divider">
79+
<tr>
80+
<th scope="row"><code>Onslide</code></th>
81+
<td>Fires immediately when the slide instance method is invoked.</td>
82+
</tr>
83+
<tr>
84+
<th scope="row"><code>Onslid</code></th>
85+
<td>Fired when the carousel has completed its slide transition.</td>
86+
</tr>
87+
</tbody>
88+
</table>
89+
</div>
90+
<Demo Type="typeof(Carousel_Demo_09_Events)" Tabs="true" />
91+
92+
<Callout HideHeading="true">
93+
<b>NOTE:</b> All of the images were generated using Microsoft Designer.
94+
</Callout>
95+
96+
@code {
97+
private string pageUrl = "/carousel";
98+
private string title = "Blazor Carousel Component";
99+
private string description = "Blazor Carousel component is a slideshow component that cycles through elements, images, or slides of text.";
100+
private string imageUrl = "https://i.imgur.com/YoZd9Hy.png";
101+
}

Diff for: ‎BlazorBootstrap.Demo.RCL/Components/Pages/Carousel/Carousel_Demo_01_Examples.razor

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<Carousel>
2+
<CarouselItem Active="true">
3+
<Image Src="_content/BlazorBootstrap.Demo.RCL/images/slide-01.png" />
4+
</CarouselItem>
5+
<CarouselItem>
6+
<Image Src="_content/BlazorBootstrap.Demo.RCL/images/slide-02.png" />
7+
</CarouselItem>
8+
<CarouselItem>
9+
<Image Src="_content/BlazorBootstrap.Demo.RCL/images/slide-03.png" />
10+
</CarouselItem>
11+
</Carousel>

Diff for: ‎BlazorBootstrap.Demo.RCL/Components/Pages/Carousel/Carousel_Demo_02_Indicators.razor

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<Carousel ShowIndicators="true">
2+
<CarouselItem>
3+
<Image Src="_content/BlazorBootstrap.Demo.RCL/images/slide-01.png" />
4+
</CarouselItem>
5+
<CarouselItem>
6+
<Image Src="_content/BlazorBootstrap.Demo.RCL/images/slide-02.png" />
7+
</CarouselItem>
8+
<CarouselItem Active="true">
9+
<Image Src="_content/BlazorBootstrap.Demo.RCL/images/slide-03.png" />
10+
</CarouselItem>
11+
</Carousel>

Diff for: ‎BlazorBootstrap.Demo.RCL/Components/Pages/Carousel/Carousel_Demo_03_Captions.razor

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<Carousel ShowIndicators="true">
2+
<CarouselItem Active="true">
3+
<Image Src="_content/BlazorBootstrap.Demo.RCL/images/slide-04.png" />
4+
<CarouselCaption>
5+
<h2>Earth Day</h2>
6+
<p>Let's unite to protect our planet and create a sustainable future for generations to come.</p>
7+
</CarouselCaption>
8+
</CarouselItem>
9+
<CarouselItem>
10+
<Image Src="_content/BlazorBootstrap.Demo.RCL/images/slide-05.png" />
11+
<CarouselCaption>
12+
<h2>International Yoga Day</h2>
13+
<p>Embrace the ancient art of harmony for a healthier, happier you.</p>
14+
</CarouselCaption>
15+
</CarouselItem>
16+
<CarouselItem>
17+
<Image Src="_content/BlazorBootstrap.Demo.RCL/images/slide-06.png" />
18+
<CarouselCaption>
19+
<h2>World Water Day</h2>
20+
<p>Every drop counts, let's protect our planet's most precious resource.</p>
21+
</CarouselCaption>
22+
</CarouselItem>
23+
</Carousel>

Diff for: ‎BlazorBootstrap.Demo.RCL/Components/Pages/Carousel/Carousel_Demo_04_Crossfade.razor

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<Carousel Crossfade="true">
2+
<CarouselItem Active="true">
3+
<Image Src="_content/BlazorBootstrap.Demo.RCL/images/slide-01.png" />
4+
</CarouselItem>
5+
<CarouselItem>
6+
<Image Src="_content/BlazorBootstrap.Demo.RCL/images/slide-02.png" />
7+
</CarouselItem>
8+
<CarouselItem>
9+
<Image Src="_content/BlazorBootstrap.Demo.RCL/images/slide-03.png" />
10+
</CarouselItem>
11+
</Carousel>

Diff for: ‎BlazorBootstrap.Demo.RCL/Components/Pages/Carousel/Carousel_Demo_05_Autoplay_A_StartOnPageLoad.razor

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<Carousel Autoplay="CarouselAutoPlay.StartOnPageLoad">
2+
<CarouselItem Active="true">
3+
<Image Src="_content/BlazorBootstrap.Demo.RCL/images/slide-01.png" />
4+
</CarouselItem>
5+
<CarouselItem>
6+
<Image Src="_content/BlazorBootstrap.Demo.RCL/images/slide-02.png" />
7+
</CarouselItem>
8+
<CarouselItem>
9+
<Image Src="_content/BlazorBootstrap.Demo.RCL/images/slide-03.png" />
10+
</CarouselItem>
11+
</Carousel>

Diff for: ‎BlazorBootstrap.Demo.RCL/Components/Pages/Carousel/Carousel_Demo_05_Autoplay_B_StartAfterUserInteraction.razor

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<Carousel Autoplay="CarouselAutoPlay.StartAfterUserInteraction">
2+
<CarouselItem Active="true">
3+
<Image Src="_content/BlazorBootstrap.Demo.RCL/images/slide-01.png" />
4+
</CarouselItem>
5+
<CarouselItem>
6+
<Image Src="_content/BlazorBootstrap.Demo.RCL/images/slide-02.png" />
7+
</CarouselItem>
8+
<CarouselItem>
9+
<Image Src="_content/BlazorBootstrap.Demo.RCL/images/slide-03.png" />
10+
</CarouselItem>
11+
</Carousel>

Diff for: ‎BlazorBootstrap.Demo.RCL/Components/Pages/Carousel/Carousel_Demo_06_Individual_Carouselitem_Interval.razor

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<Carousel Autoplay="CarouselAutoPlay.StartOnPageLoad">
2+
<CarouselItem Active="true" Interval="10000">
3+
<Image Src="_content/BlazorBootstrap.Demo.RCL/images/slide-01.png" />
4+
</CarouselItem>
5+
<CarouselItem Interval="2000">
6+
<Image Src="_content/BlazorBootstrap.Demo.RCL/images/slide-02.png" />
7+
</CarouselItem>
8+
<CarouselItem>
9+
<Image Src="_content/BlazorBootstrap.Demo.RCL/images/slide-03.png" />
10+
</CarouselItem>
11+
</Carousel>

0 commit comments

Comments
 (0)