mirror of
https://github.com/radzenhq/radzen-blazor.git
synced 2026-07-08 18:16:08 +00:00
44 lines
2.2 KiB
Plaintext
44 lines
2.2 KiB
Plaintext
<RadzenStack class="rz-p-0 rz-p-md-12">
|
|
<RadzenCard class="rz-p-4" Variant="Variant.Outlined">
|
|
<RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Start" Wrap="FlexWrap.Wrap">
|
|
<RadzenStack Orientation="Orientation.Vertical" Gap="4px">
|
|
Items per page
|
|
<RadzenNumeric @bind-Value=@itemsPerPage Min="1" Max="6" aria-label="items per page" />
|
|
</RadzenStack>
|
|
<RadzenStack Orientation="Orientation.Vertical" Gap="4px">
|
|
Auto-cycle
|
|
<RadzenSwitch @bind-Value="@auto" InputAttributes="@(new Dictionary<string,object>(){ { "aria-label", "auto-cycle" }})" />
|
|
</RadzenStack>
|
|
</RadzenStack>
|
|
</RadzenCard>
|
|
<RadzenCarousel @bind-SelectedIndex="@selectedIndex" Auto="@auto" Interval="4000"
|
|
ItemsPerPage="@itemsPerPage" PagerOverlay="false" Style="height: 400px;">
|
|
<Items>
|
|
<RadzenCarouselItem>
|
|
<RadzenImage Path="images/gallery/1.jpg" Style="width: 100%; height: 100%; object-fit: cover; padding: 0.5rem;" />
|
|
</RadzenCarouselItem>
|
|
<RadzenCarouselItem>
|
|
<RadzenImage Path="images/gallery/2.jpg" Style="width: 100%; height: 100%; object-fit: cover; padding: 0.5rem;" />
|
|
</RadzenCarouselItem>
|
|
<RadzenCarouselItem>
|
|
<RadzenImage Path="images/gallery/3.jpg" Style="width: 100%; height: 100%; object-fit: cover; padding: 0.5rem;" />
|
|
</RadzenCarouselItem>
|
|
<RadzenCarouselItem>
|
|
<RadzenImage Path="images/gallery/4.jpg" Style="width: 100%; height: 100%; object-fit: cover; padding: 0.5rem;" />
|
|
</RadzenCarouselItem>
|
|
<RadzenCarouselItem>
|
|
<RadzenImage Path="images/gallery/5.jpg" Style="width: 100%; height: 100%; object-fit: cover; padding: 0.5rem;" />
|
|
</RadzenCarouselItem>
|
|
<RadzenCarouselItem>
|
|
<RadzenImage Path="images/gallery/6.jpg" Style="width: 100%; height: 100%; object-fit: cover; padding: 0.5rem;" />
|
|
</RadzenCarouselItem>
|
|
</Items>
|
|
</RadzenCarousel>
|
|
</RadzenStack>
|
|
|
|
@code {
|
|
int itemsPerPage = 3;
|
|
bool auto = false;
|
|
int selectedIndex;
|
|
}
|