Skip to content

Commit

Permalink
HxCarousel refactoring + release
Browse files Browse the repository at this point in the history
  • Loading branch information
hakenr committed Sep 13, 2021
1 parent d2d0c87 commit 3d51422
Show file tree
Hide file tree
Showing 25 changed files with 375 additions and 303 deletions.
13 changes: 6 additions & 7 deletions BlazorAppTest/Pages/HxCarouselTest.razor
Original file line number Diff line number Diff line change
@@ -1,19 +1,19 @@
@page "/HxCarouselTest"

<HxCarousel @ref="carousel" Controls="true" Dark="true" OnSlide="IncrementSlideCount" Indicators="true" Interval="1000">
<HxCarousel @ref="carousel" Dark="true" OnSlide="IncrementSlideCount" Interval="1000">
<HxCarouselItem Active="true">
<div class="d-flex justify-content-center">Carousel Item 1</div>
<div class="d-flex justify-content-center">Carousel Item 0</div>
</HxCarouselItem>
<HxCarouselItem>
<div class="d-flex justify-content-center">Carousel Item 2</div>
<div class="d-flex justify-content-center">Carousel Item 1</div>
</HxCarouselItem>
<HxCarouselItem>
<div class="d-flex justify-content-center">Carousel Item 3</div>
<div class="d-flex justify-content-center">Carousel Item 2</div>
</HxCarouselItem>
</HxCarousel>

<HxButton Color="ThemeColor.Success" OnClick="() => carousel.Initialize()" Text="Initialize carousel" />
<HxButton Color="ThemeColor.Dark" OnClick="() => carousel.SlideTo(carousel.Items.Count - 2)" Text="Slide to second item from the back" />
<HxButton Color="ThemeColor.Success" OnClick="() => carousel.CycleAsync()" Text="Cycle" />
<HxButton Color="ThemeColor.Dark" OnClick="() => carousel.SlideToAsync(1)" Text="Slide to item 1" />

<h3>Slide count: @slideCount</h3>

Expand All @@ -24,6 +24,5 @@
private void IncrementSlideCount()
{
slideCount++;
StateHasChanged();
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
<svg class="d-block w-100" height="200" xmlns="http://www.w3.org/2000/svg" role="img" preserveAspectRatio="xMidYMid slice" focusable="false">
<title>Placeholder</title>
<rect width="100%" height="100%" fill="@Color" />
<text x="50%" y="50%" fill="#ddd" dominant-baseline="middle" text-anchor="middle" font-size="30px">@Text</text>
</svg>

@code
{
[Parameter] public string Text { get; set; }

[Parameter] public string Color { get; set; } = "#666";
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
<HxCarousel Indicators="true" Controls="true">
<HxCarouselItem Active="true">
<DemoImage Color="#666" />
<HxCarouselCaption>
<h5>First slide label</h5>
<p>Some representative placeholder content for the first slide.</p>
</HxCarouselCaption>
</HxCarouselItem>
<HxCarouselItem>
<DemoImage Color="#555" />
<HxCarouselCaption>
<h5>Second slide label</h5>
<p>Some representative placeholder content for the second slide.</p>
</HxCarouselCaption>
</HxCarouselItem>
<HxCarouselItem>
<DemoImage Color="#444" />
<HxCarouselCaption>
<h5>Third slide label</h5>
<p>Some representative placeholder content for the third slide.</p>
</HxCarouselCaption>
</HxCarouselItem>
</HxCarousel>

This file was deleted.

Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
<HxCarousel Controls="true">
<HxCarouselItem Active="true">
<div class="d-flex justify-content-center">Carousel Item 1</div>
</HxCarouselItem>
<HxCarouselItem>
<div class="d-flex justify-content-center">Carousel Item 2</div>
</HxCarouselItem>
<HxCarouselItem>
<div class="d-flex justify-content-center">Carousel Item 3</div>
</HxCarouselItem>
<HxCarouselItem Active="true">
<DemoImage Text="First Slide" Color="#666" />
</HxCarouselItem>
<HxCarouselItem>
<DemoImage Text="Second Slide" Color="#555" />
</HxCarouselItem>
<HxCarouselItem>
<DemoImage Text="Third Slide" Color="#444" />
</HxCarouselItem>
</HxCarousel>
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
<HxCarousel Controls="true" Crossfade="true">
<HxCarouselItem Active="true">
<div class="d-flex justify-content-center">Carousel Item 1</div>
</HxCarouselItem>
<HxCarouselItem>
<div class="d-flex justify-content-center">Carousel Item 2</div>
</HxCarouselItem>
<HxCarouselItem>
<div class="d-flex justify-content-center">Carousel Item 3</div>
</HxCarouselItem>
<HxCarouselItem Active="true">
<DemoImage Text="First Slide" Color="#666" />
</HxCarouselItem>
<HxCarouselItem>
<DemoImage Text="Second Slide" Color="#555" />
</HxCarouselItem>
<HxCarouselItem>
<DemoImage Text="Third Slide" Color="#444" />
</HxCarouselItem>
</HxCarousel>
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
<HxCarousel Controls="true" Indicators="true" Dark="true">
<HxCarouselItem Active="true">
<DemoImage Text="First Slide" Color="#f5f5f5" />
</HxCarouselItem>
<HxCarouselItem>
<DemoImage Text="Second Slide" Color="#f0f0f0" />
</HxCarouselItem>
<HxCarouselItem>
<DemoImage Text="Third Slide" Color="#e5e5e5" />
</HxCarouselItem>
</HxCarousel>
Original file line number Diff line number Diff line change
@@ -1,26 +1,22 @@
<HxCarousel @ref="carousel" Controls="true" OnSlide="IncrementSlideCount" Interval="1000">
<HxCarouselItem Active="true">
<div class="d-flex justify-content-center">Carousel Item 1</div>
</HxCarouselItem>
<HxCarouselItem>
<div class="d-flex justify-content-center">Carousel Item 2</div>
</HxCarouselItem>
<HxCarouselItem>
<div class="d-flex justify-content-center">Carousel Item 3</div>
</HxCarouselItem>
<HxCarousel Controls="true" OnSlide="IncrementSlideCount" Interval="1000">
<HxCarouselItem Active="true">
<DemoImage Text="First Slide" Color="#666" />
</HxCarouselItem>
<HxCarouselItem>
<DemoImage Text="Second Slide" Color="#555" />
</HxCarouselItem>
<HxCarouselItem>
<DemoImage Text="Third Slide" Color="#444" />
</HxCarouselItem>
</HxCarousel>

<br />

<h4>Slide count: @slideCount</h4>
<p>Slide count: @slideCount</p>

@code {
private HxCarousel carousel;
private int slideCount;
private int slideCount;

private void IncrementSlideCount()
{
slideCount++;
StateHasChanged();
}
private void IncrementSlideCount()
{
slideCount++;
}
}
Original file line number Diff line number Diff line change
@@ -1,17 +1,11 @@
<HxCarousel Controls="true" Indicators="true" @ref="carousel">
<HxCarouselItem Active="true">
<div class="d-flex justify-content-center">Carousel Item 1</div>
</HxCarouselItem>
<HxCarouselItem>
<div class="d-flex justify-content-center">Carousel Item 2</div>
</HxCarouselItem>
<HxCarouselItem>
<div class="d-flex justify-content-center">Carousel Item 3</div>
</HxCarouselItem>
</HxCarousel>

<HxButton Color="ThemeColor.Primary" OnClick="() => carousel.Initialize()" CssClass="mt-2" Text="Initialize" />

@code {
private HxCarousel carousel;
}
<HxCarousel Indicators="true" Controls="true">
<HxCarouselItem Active="true">
<DemoImage Text="First Slide" Color="#666" />
</HxCarouselItem>
<HxCarouselItem>
<DemoImage Text="Second Slide" Color="#555" />
</HxCarouselItem>
<HxCarouselItem>
<DemoImage Text="Third Slide" Color="#444" />
</HxCarouselItem>
</HxCarousel>
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
<HxCarousel Controls="true" Interval="2500">
<HxCarouselItem Active="true" Interval="2000">
<DemoImage Text="First Slide" Color="#666" />
</HxCarouselItem>
<HxCarouselItem>
<DemoImage Text="Second Slide" Color="#555" />
</HxCarouselItem>
<HxCarouselItem Interval="500">
<DemoImage Text="Third Slide" Color="#444" />
</HxCarouselItem>
</HxCarousel>

This file was deleted.

Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
<HxCarousel Controls="true" Interval="null">
<HxCarouselItem Active="true">
<div class="d-flex justify-content-center">Carousel Item 1</div>
</HxCarouselItem>
<HxCarouselItem>
<div class="d-flex justify-content-center">Carousel Item 2</div>
</HxCarouselItem>
<HxCarouselItem>
<div class="d-flex justify-content-center">Carousel Item 3</div>
</HxCarouselItem>
<HxCarouselItem Active="true">
<DemoImage Text="First Slide" Color="#666" />
</HxCarouselItem>
<HxCarouselItem>
<DemoImage Text="Second Slide" Color="#555" />
</HxCarouselItem>
<HxCarouselItem>
<DemoImage Text="Third Slide" Color="#444" />
</HxCarouselItem>
</HxCarousel>

This file was deleted.

Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
<HxCarousel @ref="carousel" Ride="CarouselRide.False" Controls="true" Interval="1000" CssClass="mb-2">
<HxCarouselItem Active="true">
<DemoImage Text="First Slide" Color="#666" />
</HxCarouselItem>
<HxCarouselItem>
<DemoImage Text="Second Slide" Color="#555" />
</HxCarouselItem>
<HxCarouselItem>
<DemoImage Text="Third Slide" Color="#444" />
</HxCarouselItem>
</HxCarousel>

<HxButton Color="ThemeColor.Success" OnClick="() => carousel.CycleAsync()" Text="Cycle" />
<HxButton Color="ThemeColor.Danger" OnClick="() => carousel.PauseAsync()" Text="Pause" />
<HxButton Color="ThemeColor.Dark" OnClick="() => carousel.SlideToAsync(1)" Text="Slide item 1" />

@code {
private HxCarousel carousel;
}
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
<HxCarousel Interval="2000" Controls="true">
<HxCarouselItem Active="true">
<div class="d-flex justify-content-center">Carousel Item 1</div>
</HxCarouselItem>
<HxCarouselItem>
<div class="d-flex justify-content-center">Carousel Item 2</div>
</HxCarouselItem>
<HxCarouselItem>
<div class="d-flex justify-content-center">Carousel Item 3</div>
</HxCarouselItem>
<HxCarousel>
<HxCarouselItem Active="true">
<DemoImage Text="First Slide" Color="#666" />
</HxCarouselItem>
<HxCarouselItem>
<DemoImage Text="Second Slide" Color="#555" />
</HxCarouselItem>
<HxCarouselItem>
<DemoImage Text="Third Slide" Color="#444" />
</HxCarouselItem>
</HxCarousel>
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
<HxCarousel Controls="true" TouchSwiping="false">
<HxCarouselItem Active="true">
<div class="d-flex justify-content-center">Carousel Item 1</div>
</HxCarouselItem>
<HxCarouselItem>
<div class="d-flex justify-content-center">Carousel Item 2</div>
</HxCarouselItem>
<HxCarouselItem>
<div class="d-flex justify-content-center">Carousel Item 3</div>
</HxCarouselItem>
<HxCarouselItem Active="true">
<DemoImage Text="First Slide" Color="#666" />
</HxCarouselItem>
<HxCarouselItem>
<DemoImage Text="Second Slide" Color="#555" />
</HxCarouselItem>
<HxCarouselItem>
<DemoImage Text="Third Slide" Color="#444" />
</HxCarouselItem>
</HxCarousel>
Loading

0 comments on commit 3d51422

Please sign in to comment.