-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
21 changed files
with
1,074 additions
and
82 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
108 changes: 108 additions & 0 deletions
108
docs/BlazorMix.Docs/Demos/Components/Swiper/Demos/Demo1.razor
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,108 @@ | ||
| @inject ToastService ToastService | ||
|
|
||
| <DemoBlock Title="基础用法"> | ||
| <Swiper> | ||
| @for (int i = 0; i < _colors.Length; i++) | ||
| { | ||
| var index = i; | ||
| <SwiperItem> | ||
| <div style="@($"{ContentStyle} background: {_colors[index]};")" | ||
| @onclick="@(() => { _ = ToastService.Show($"你点击了卡片 {index + 1}"); })"> | ||
| @(index + 1) | ||
| </div> | ||
| </SwiperItem> | ||
| } | ||
| </Swiper> | ||
| </DemoBlock> | ||
|
|
||
| <DemoBlock Title="自动播放"> | ||
| <Swiper Autoplay> | ||
| @for (int i = 0; i < _colors.Length; i++) | ||
| { | ||
| var index = i; | ||
| <SwiperItem> | ||
| <div style="@($"{ContentStyle} background: {_colors[index]};")" | ||
| @onclick="@(() => { _ = ToastService.Show($"你点击了卡片 {index + 1}"); })"> | ||
| @(index + 1) | ||
| </div> | ||
| </SwiperItem> | ||
| } | ||
| </Swiper> | ||
| </DemoBlock> | ||
|
|
||
| <DemoBlock Title="循环"> | ||
| <Swiper Loop Autoplay> | ||
| @for (int i = 0; i < _colors.Length; i++) | ||
| { | ||
| var index = i; | ||
| <SwiperItem> | ||
| <div style="@($"{ContentStyle} background: {_colors[index]};")" | ||
| @onclick="@(() => { _ = ToastService.Show($"你点击了卡片 {index + 1}"); })"> | ||
| @(index + 1) | ||
| </div> | ||
| </SwiperItem> | ||
| } | ||
| </Swiper> | ||
| </DemoBlock> | ||
|
|
||
| <DemoBlock Title="手动控制"> | ||
| <Swiper @ref="@_swiper" AllowTouchMove="@false"> | ||
| @for (int i = 0; i < _colors.Length; i++) | ||
| { | ||
| var index = i; | ||
| <SwiperItem> | ||
| <div style="@($"{ContentStyle} background: {_colors[index]};")" | ||
| @onclick="@(() => { _ = ToastService.Show($"你点击了卡片 {index + 1}"); })"> | ||
| @(index + 1) | ||
| </div> | ||
| </SwiperItem> | ||
| } | ||
| </Swiper> | ||
| <Space> | ||
| <SpaceItem> | ||
| <Button OnClick="@(()=> _swiper?.SwipePrev())"> | ||
| 上一张 | ||
| </Button> | ||
| </SpaceItem> | ||
| <SpaceItem> | ||
| <Button OnClick="@(()=> _swiper?.SwipeNext())"> | ||
| 下一张 | ||
| </Button> | ||
| </SpaceItem> | ||
| </Space> | ||
|
|
||
| <DemoDescription> | ||
| 在禁用手势拖拽后，可以通过 Ref 进行手动翻页 | ||
| </DemoDescription> | ||
| </DemoBlock> | ||
|
|
||
|
|
||
|
|
||
| <DemoBlock Title="自定义样式"> | ||
| <Swiper Style="@("--border-radius:8px;")" DefaultIndex="3" Loop> | ||
| @for (int i = 0; i < _colors.Length; i++) | ||
| { | ||
| var index = i; | ||
| <SwiperItem> | ||
| <div style="@($"{ContentStyle} background: {_colors[index]};")" | ||
| @onclick="@(() => { _ = ToastService.Show($"你点击了卡片 {index + 1}"); })"> | ||
| @(index + 1) | ||
| </div> | ||
| </SwiperItem> | ||
| } | ||
| </Swiper> | ||
| <DemoDescription> | ||
| 通过 CSS 变量可以控制整体的圆角等样式 | ||
| </DemoDescription> | ||
| </DemoBlock> | ||
|
|
||
| @code | ||
| { | ||
| private Swiper? _swiper; | ||
| const string ContentStyle = "height:120px; color:#fff; font-size: 48px;display: flex;justify-content: center;align-items: center;user-select: none;"; | ||
| string[] _colors = new[] | ||
| { | ||
| "#ace0ff", "#bcffbd", "#e4fabd", "#ffcfac" | ||
| }; | ||
|
|
||
| } |
80 changes: 80 additions & 0 deletions
80
docs/BlazorMix.Docs/Demos/Components/Swiper/Demos/Demo2.razor
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,80 @@ | ||
| <DemoBlock Title="卡在边界"> | ||
| <Swiper TrackOffset="10" SlideSize="80" Autoplay | ||
| Style="@("--border-radius:8px;")"> | ||
| @for (int i = 0; i < _colors.Length; i++) | ||
| { | ||
| var index = i; | ||
| <SwiperItem> | ||
| <div style="@($"{ContentStyle} background: {_colors[index]};")" | ||
| > | ||
| @(index + 1) | ||
| </div> | ||
| </SwiperItem> | ||
| } | ||
| </Swiper> | ||
| </DemoBlock> | ||
|
|
||
| <DemoBlock Title="允许越过边界"> | ||
| <Swiper StuckAtBoundary="false" | ||
| SlideSize="80" | ||
| DefaultIndex="3"> | ||
| @for (int i = 0; i < _colors.Length; i++) | ||
| { | ||
| var index = i; | ||
| <SwiperItem> | ||
| <div style="@($"{ContentStyle} background: {_colors[index]};")" | ||
| > | ||
| @(index + 1) | ||
| </div> | ||
| </SwiperItem> | ||
| } | ||
| </Swiper> | ||
| </DemoBlock> | ||
|
|
||
|
|
||
| <DemoBlock Title="居中展示"> | ||
| <Swiper StuckAtBoundary="false" | ||
| TrackOffset="10" | ||
| SlideSize="80"> | ||
| @for (int i = 0; i < _colors.Length; i++) | ||
| { | ||
| var index = i; | ||
| <SwiperItem> | ||
| <div style="@($"{ContentStyle} background: {_colors[index]};")" | ||
| > | ||
| @(index + 1) | ||
| </div> | ||
| </SwiperItem> | ||
| } | ||
| </Swiper> | ||
| </DemoBlock> | ||
|
|
||
|
|
||
| <DemoBlock Title="循环居中展示"> | ||
| <Swiper StuckAtBoundary="false" | ||
| TrackOffset="15" | ||
| SlideSize="70" | ||
| Loop | ||
| Autoplay | ||
| > | ||
| @for (int i = 0; i < _colors.Length; i++) | ||
| { | ||
| var index = i; | ||
| <SwiperItem> | ||
| <div style="@($"{ContentStyle} background: {_colors[index]};")"> | ||
| @(index + 1) | ||
| </div> | ||
| </SwiperItem> | ||
| } | ||
| </Swiper> | ||
| </DemoBlock> | ||
|
|
||
| @code | ||
| { | ||
| const string ContentStyle = "height:120px; color:#fff; font-size: 48px;display: flex;justify-content: center;align-items: center;user-select: none;"; | ||
| string[] _colors = new[] | ||
| { | ||
| "#ace0ff", "#bcffbd", "#e4fabd", "#ffcfac" | ||
| }; | ||
|
|
||
| } |
97 changes: 97 additions & 0 deletions
97
docs/BlazorMix.Docs/Demos/Components/Swiper/Demos/Demo3.razor
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,97 @@ | ||
|
|
||
| <DemoBlock Title="指示器颜色"> | ||
| <Swiper Autoplay IndicatorProps="@(new PageIndicatorProps(){ Color = "white"})"> | ||
| @for (int i = 0; i < _colors.Length; i++) | ||
| { | ||
| var index = i; | ||
| <SwiperItem > | ||
| <div style="@($"{ContentStyle} background: {_colors[index]};")" | ||
| > | ||
| @(index + 1) | ||
| </div> | ||
| </SwiperItem> | ||
| } | ||
| </Swiper> | ||
| <DemoDescription> | ||
| 通过 indicatorProps 可以控制指示器的外观 | ||
| </DemoDescription> | ||
| </DemoBlock> | ||
|
|
||
|
|
||
| <DemoBlock Title="指示器在滑块外面"> | ||
| <Swiper Autoplay | ||
| Style="@("--track-padding: 0 0 16px")"> | ||
| @for (int i = 0; i < _colors.Length; i++) | ||
| { | ||
| var index = i; | ||
| <SwiperItem> | ||
| <div style="@($"{ContentStyle} background: {_colors[index]};")"> | ||
| @(index + 1) | ||
| </div> | ||
| </SwiperItem> | ||
| } | ||
| </Swiper> | ||
| <DemoDescription> | ||
| 通过 --track-padding 可以控制滑动轨道区域的 padding，从而实现指示器和滑块"分离"的效果 | ||
| </DemoDescription> | ||
| </DemoBlock> | ||
|
|
||
|
|
||
| <DemoBlock Title="自定义指示器"> | ||
| <Swiper Autoplay | ||
| Indicator="@_indicator"> | ||
| @for (int i = 0; i < _colors.Length; i++) | ||
| { | ||
| var index = i; | ||
| <SwiperItem> | ||
| <div style="@($"{ContentStyle} background: {_colors[index]};")"> | ||
| @(index + 1) | ||
| </div> | ||
| </SwiperItem> | ||
| } | ||
| </Swiper> | ||
| </DemoBlock> | ||
|
|
||
|
|
||
| <DemoBlock Title="无指示器"> | ||
| <Swiper Autoplay NoIndicator> | ||
| @for (int i = 0; i < _colors.Length; i++) | ||
| { | ||
| var index = i; | ||
| <SwiperItem> | ||
| <div style="@($"{ContentStyle} background: {_colors[index]};")"> | ||
| @(index + 1) | ||
| </div> | ||
| </SwiperItem> | ||
| } | ||
| </Swiper> | ||
| </DemoBlock> | ||
|
|
||
| <style> | ||
| .customIndicator { | ||
| position: absolute; | ||
| top: 6px; | ||
| right: 6px; | ||
| background: rgba(0,0,0,.3); | ||
| padding: 4px 8px; | ||
| color: #fff; | ||
| border-radius: 4px; | ||
| -webkit-user-select: none; | ||
| -moz-user-select: none; | ||
| -ms-user-select: none; | ||
| user-select: none; | ||
| } | ||
| </style> | ||
|
|
||
| @code | ||
| { | ||
| const string ContentStyle = "height:120px; color:#fff; font-size: 48px;display: flex;justify-content: center;align-items: center;user-select: none;"; | ||
| string[] _colors = new[] | ||
| { | ||
| "#ace0ff", "#bcffbd", "#e4fabd", "#ffcfac" | ||
| }; | ||
|
|
||
| RenderFragment<IndicatorInfo> _indicator = | ||
| indicatorInfo => @<div class="customIndicator">@($"{indicatorInfo.Current + 1} / {indicatorInfo.Total}")</div>; | ||
|
|
||
| } |
46 changes: 46 additions & 0 deletions
46
docs/BlazorMix.Docs/Demos/Components/Swiper/Demos/Demo4.razor
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,46 @@ | ||
| <DemoBlock Title="竖向"> | ||
| <Swiper Autoplay | ||
| Direction="BmDirection.Vertical" | ||
| Style="@("--height: 200px")"> | ||
| @for (int i = 0; i < _colors.Length; i++) | ||
| { | ||
| var index = i; | ||
| <SwiperItem > | ||
| <div style="@($"{ContentStyle} background: {_colors[index]};")" | ||
| > | ||
| @(index + 1) | ||
| </div> | ||
| </SwiperItem> | ||
| } | ||
| </Swiper> | ||
| </DemoBlock> | ||
|
|
||
|
|
||
| <DemoBlock Title="竖向居中"> | ||
| <Swiper Autoplay | ||
| Direction="BmDirection.Vertical" | ||
| TrackOffset="10" | ||
| SlideSize="80" | ||
| StuckAtBoundary="false" | ||
| Style="@("--height: 200px")" | ||
| > | ||
| @for (int i = 0; i < _colors.Length; i++) | ||
| { | ||
| var index = i; | ||
| <SwiperItem> | ||
| <div style="@($"{ContentStyle} background: {_colors[index]};")"> | ||
| @(index + 1) | ||
| </div> | ||
| </SwiperItem> | ||
| } | ||
| </Swiper> | ||
| </DemoBlock> | ||
|
|
||
| @code | ||
| { | ||
| const string ContentStyle = "height: 100%; color:#fff; font-size: 48px;display: flex;justify-content: center;align-items: center;user-select: none;"; | ||
| string[] _colors = new[] | ||
| { | ||
| "#ace0ff", "#bcffbd", "#e4fabd", "#ffcfac" | ||
| }; | ||
| } |
33 changes: 33 additions & 0 deletions
33
docs/BlazorMix.Docs/Demos/Components/Swiper/Docs/index.zh-CN.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,33 @@ | ||
| # Swiper 走马灯 | ||
|
|
||
| 一组轮播的区域。 | ||
|
|
||
| ## 何时使用 | ||
|
|
||
| - 当有一组平级的内容。 | ||
| - 当内容空间不足时，可以用走马灯的形式进行收纳，进行轮播展现。 | ||
| - 常用于一组图片或卡片轮播。 | ||
|
|
||
| ## 示例 | ||
|
|
||
| ### 基础用法 | ||
|
|
||
| <code-demo Src="Demos/Components/Swiper/Demos/Demo1"></code-demo> | ||
|
|
||
| ### 不是满宽的滑块 | ||
| <code-demo Src="Demos/Components/Swiper/Demos/Demo2"></code-demo> | ||
|
|
||
| ### 指示器 | ||
| <code-demo Src="Demos/Components/Swiper/Demos/Demo3"></code-demo> | ||
|
|
||
| ### 竖向 | ||
| <code-demo Src="Demos/Components/Swiper/Demos/Demo4"></code-demo> | ||
|
|
||
| ## API | ||
|
|
||
| ### 属性 | ||
|
|
||
| > [xmldoc] | ||
| ### CSS 变量 | ||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.