-
Notifications
You must be signed in to change notification settings - Fork 9
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #14 from neozhu/animation
add animation
- Loading branch information
Showing
8 changed files
with
245 additions
and
103 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
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
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,109 @@ | ||
| <div class="swiper-container"> | ||
| <div class="swiper-wrapper"> | ||
| <div class="swiper-slide"> | ||
| <MudCard Elevation="24"> | ||
| <MudCardHeader Class="px-6 pt-6"> | ||
| <CardHeaderAvatar> | ||
| <MudIcon Class="mt-n4" Icon="@Icons.Material.Rounded.FormatQuote" Size="Size.Large" /> | ||
| </CardHeaderAvatar> | ||
| <CardHeaderContent> | ||
| <MudText Typo="Typo.subtitle2">Brian</MudText> | ||
| <MudText Typo="Typo.body2">EvoDynamic</MudText> | ||
| </CardHeaderContent> | ||
| </MudCardHeader> | ||
| <MudCardContent Class="pt-0 px-6 pb-6 mud-typography-body1"> | ||
| @L["Coming of an Angular project back to .NET, Blazor was the ideal choice and MudBlazor was the icing on the cake. . . not \"mud\" but a rich creamy sweet chocolate."] | ||
| </MudCardContent> | ||
| </MudCard> | ||
| </div> | ||
| <div class="swiper-slide"> | ||
| <MudCard Elevation="24"> | ||
| <MudCardHeader Class="px-6 pt-6"> | ||
| <CardHeaderAvatar> | ||
| <MudIcon Class="mt-n4" Icon="@Icons.Material.Rounded.FormatQuote" Size="Size.Large" /> | ||
| </CardHeaderAvatar> | ||
| <CardHeaderContent> | ||
| <MudText Typo="Typo.subtitle2">Developer Team</MudText> | ||
| <MudText Typo="Typo.body2">Wunderminds</MudText> | ||
| </CardHeaderContent> | ||
| </MudCardHeader> | ||
| <MudCardContent Class="pt-0 px-6 pb-6 mud-typography-body1"> | ||
| @L["Saving us from tons of tiny details and allowing us to deliver sharp looking modern web applications, MudBlazor is the king of open source UI frameworks that no one should miss when building apps with Blazor!"] | ||
| </MudCardContent> | ||
| </MudCard> | ||
| </div> | ||
| <div class="swiper-slide"> | ||
| <MudCard Elevation="24"> | ||
| <MudCardHeader Class="px-6 pt-6"> | ||
| <CardHeaderAvatar> | ||
| <MudIcon Icon="@Icons.Material.Rounded.FormatQuote" Size="Size.Large" /> | ||
| </CardHeaderAvatar> | ||
| <CardHeaderContent> | ||
| <MudText Typo="Typo.subtitle2">Wave Master</MudText> | ||
| </CardHeaderContent> | ||
| </MudCardHeader> | ||
| <MudCardContent Class="pt-0 px-6 pb-6 mud-typography-body1"> | ||
| @L["Comprehensive, ambitious, fresh and clean. Some really cool implementations. The development and improvement of components is really fast, and if a course correction is needed, they will do it. Garderoben, henon and all the other contributors are approachable. They are getting stuff done!"] | ||
| </MudCardContent> | ||
| </MudCard> | ||
| </div> | ||
| <div class="swiper-slide"> | ||
| <MudCard Elevation="24"> | ||
| <MudCardHeader Class="px-6 pt-6"> | ||
| <CardHeaderAvatar> | ||
| <MudIcon Class="mt-n4" Icon="@Icons.Material.Rounded.FormatQuote" Size="Size.Large" /> | ||
| </CardHeaderAvatar> | ||
| <CardHeaderContent> | ||
| <MudText Typo="Typo.subtitle2">Karakoulak Spyridon</MudText> | ||
| <MudText Typo="Typo.body2">Arhs Group</MudText> | ||
| </CardHeaderContent> | ||
| </MudCardHeader> | ||
| <MudCardContent Class="pt-0 px-6 pb-6 mud-typography-body1"> | ||
| @L["Best open source component library for Blazor out there and easy to understand!"] | ||
| </MudCardContent> | ||
| </MudCard> | ||
| </div> | ||
| <div class="swiper-slide"> | ||
| <MudCard Elevation="24"> | ||
| <MudCardHeader Class="px-6 pt-6"> | ||
| <CardHeaderAvatar> | ||
| <MudIcon Class="mt-n4" Icon="@Icons.Material.Rounded.FormatQuote" Size="Size.Large" /> | ||
| </CardHeaderAvatar> | ||
| <CardHeaderContent> | ||
| <MudText Typo="Typo.subtitle2">Hayden Ravenscroft</MudText> | ||
| <MudText Typo="Typo.body2">Mail Solutions UK Ltd</MudText> | ||
| </CardHeaderContent> | ||
| </MudCardHeader> | ||
| <MudCardContent Class="pt-0 px-6 pb-6 mud-typography-body1"> | ||
| @L["A comprehensive library. Takes the hassle out of designing for Blazor. Used in many ongoing projects at the Mail Solutions Group. The MudBlazor team has a real gem here."] | ||
| </MudCardContent> | ||
| </MudCard> | ||
| </div> | ||
| <div class="swiper-slide"> | ||
| <MudCard Elevation="24"> | ||
| <MudCardHeader Class="px-6 pt-6"> | ||
| <CardHeaderAvatar> | ||
| <MudIcon Class="mt-n4" Icon="@Icons.Material.Rounded.FormatQuote" Size="Size.Large" /> | ||
| </CardHeaderAvatar> | ||
| <CardHeaderContent> | ||
| <MudText Typo="Typo.subtitle2">Frederik</MudText> | ||
| <MudText Typo="Typo.body2">Xuntar</MudText> | ||
| </CardHeaderContent> | ||
| </MudCardHeader> | ||
| <MudCardContent Class="pt-0 px-6 pb-6 mud-typography-body1"> | ||
| @L["Very practical, convenient and user-friendly library that has massively helped us in developing our applications. Great community as well!"] | ||
| </MudCardContent> | ||
| </MudCard> | ||
| </div> | ||
|
|
||
| </div> | ||
| </div> | ||
| @code { | ||
| protected override async Task OnAfterRenderAsync(bool firstRender) | ||
| { | ||
| if (firstRender) | ||
| { | ||
| var result = await (new Swiper(JS)).Initialize(".swiper-container", false); | ||
| } | ||
| } | ||
| } |
72 changes: 72 additions & 0 deletions
72
src/BlazorPocket.WebAssembly/Components/CarouselReverse.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,72 @@ | ||
| <div class="swiper-container-reverse"> | ||
| <div class="swiper-wrapper"> | ||
| <div class="swiper-slide"> | ||
| <MudCard Elevation="24"> | ||
| <MudCardContent Class="py-10 px-6 pb-6 mud-typography-body1"> | ||
| @L["Tell me a fun fact about the Roman Empire"] | ||
| </MudCardContent> | ||
| </MudCard> | ||
| </div> | ||
| <div class="swiper-slide"> | ||
| <MudCard Elevation="24"> | ||
| <MudCardContent Class="py-10 px-6 pb-6 mud-typography-body1"> | ||
| @L["Write a text inviting my neighbors to a barbecue"] | ||
| </MudCardContent> | ||
| </MudCard> | ||
| </div> | ||
| <div class="swiper-slide"> | ||
| <MudCard Elevation="24"> | ||
|
|
||
| <MudCardContent Class="py-10 px-6 pb-6 mud-typography-body1"> | ||
| @L["Help me pick an outfit that will look good on camera"] | ||
| </MudCardContent> | ||
| </MudCard> | ||
| </div> | ||
| <div class="swiper-slide"> | ||
| <MudCard Elevation="24"> | ||
|
|
||
| <MudCardContent Class="py-10 px-6 pb-6 mud-typography-body1"> | ||
| @L["Write a message that goes with a kitten gif for a friend on a rough day"] | ||
| </MudCardContent> | ||
| </MudCard> | ||
| </div> | ||
| <div class="swiper-slide"> | ||
| <MudCard Elevation="24"> | ||
|
|
||
| <MudCardContent Class="py-10 px-6 pb-6 mud-typography-body1"> | ||
| @L["Quiz me on world capitals to enhance my geography skills"] | ||
| </MudCardContent> | ||
| </MudCard> | ||
| </div> | ||
| <div class="swiper-slide"> | ||
| <MudCard Elevation="24"> | ||
| <MudCardContent Class="py-10 px-6 pb-6 mud-typography-body1"> | ||
| @L["Make a sandwich using ingredients from my kitchen"] | ||
| </MudCardContent> | ||
| </MudCard> | ||
| </div> | ||
| <div class="swiper-slide"> | ||
| <MudCard Elevation="24"> | ||
| <MudCardContent Class="py-10 px-6 pb-6 mud-typography-body1"> | ||
| @L["Suggest fun activities to help me make friends in a new city"] | ||
| </MudCardContent> | ||
| </MudCard> | ||
| </div> | ||
| <div class="swiper-slide"> | ||
| <MudCard Elevation="24"> | ||
| <MudCardContent Class="py-10 px-6 pb-6 mud-typography-body1"> | ||
| @L["Give me ideas about how to plan my New Years resolutions"] | ||
| </MudCardContent> | ||
| </MudCard> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| @code { | ||
| protected override async Task OnAfterRenderAsync(bool firstRender) | ||
| { | ||
| if (firstRender) | ||
| { | ||
| var result = await (new Swiper(JS)).Initialize(".swiper-container-reverse", true); | ||
| } | ||
| } | ||
| } |
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
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,19 @@ | ||
| using Microsoft.JSInterop; | ||
|
|
||
| namespace BlazorPocket.WebAssembly.Services.JsInterop; | ||
|
|
||
| public sealed class Swiper | ||
| { | ||
| private readonly IJSRuntime _jsRuntime; | ||
|
|
||
| public Swiper(IJSRuntime jsRuntime) | ||
| { | ||
| _jsRuntime = jsRuntime; | ||
| } | ||
|
|
||
| public async Task<ValueTask> Initialize(string elment,bool reverse=false) | ||
| { | ||
| var jsmodule = await _jsRuntime.InvokeAsync<IJSObjectReference>("import", "/js/carousel.js"); | ||
| return jsmodule.InvokeVoidAsync("initializeSwiper", elment, reverse); | ||
| } | ||
| } |
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
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,32 @@ | ||
| export function initializeSwiper(selector, direction) { | ||
|
|
||
|
|
||
| const link = document.createElement('link'); | ||
| link.rel = 'stylesheet'; | ||
| link.href = 'https://cdn.jsdelivr.net/npm/[email protected]/swiper-bundle.min.css'; | ||
| document.head.appendChild(link); | ||
|
|
||
| const script = document.createElement('script'); | ||
| script.src = 'https://cdn.jsdelivr.net/npm/[email protected]/swiper-bundle.min.js'; | ||
| script.onload = () => { | ||
| var swiper = new Swiper(selector, { | ||
| slidesPerView: 3, | ||
| spaceBetween: 30, | ||
| loop: true, | ||
| centeredSlides: true, | ||
| speed: 4000, // 动画速度 | ||
| autoplay: { | ||
| delay: 0, // 自动滚动的时间间隔 | ||
| disableOnInteraction: false, // 用户操作后是否禁用自动滚动 | ||
| pauseOnMouseEnter: true, | ||
| reverseDirection: direction??false | ||
| } | ||
| }); | ||
|
|
||
| }; | ||
| document.body.appendChild(script); | ||
|
|
||
| console.log("initializeSwiper") | ||
| }; | ||
|
|
||
|
|