diff --git a/README.md b/README.md index 2158764..c51fdf8 100644 --- a/README.md +++ b/README.md @@ -47,6 +47,8 @@ Here are some of my samples that were built using this library: Navbar Animation #2

+List of all samples can be seen [here](./docs/Samples.md). + ## SimpleToolkit.Core [![SimpleToolkit.Core](https://img.shields.io/nuget/v/SimpleToolkit.Core.svg?label=SimpleToolkit.Core)](https://www.nuget.org/packages/SimpleToolkit.Core/) @@ -95,16 +97,31 @@ See [documentation](./docs/SimpleToolkit.SimpleShell) for more information. *SimpleToolkit.SimpleShell.Controls* is a collection of ready-to-use, navigation-related controls (not only) for `SimpleShell`. -### Getting Started +The package currently supports only two controls: -In order to use *SimpleToolkit.SimpleShell.Controls*, you need to call the `UseSimpleToolkit()` extension method in your `MauiProgram.cs` file: +- `ListPopover` - popover containing a list of selectable text items +- `TabBar` -```csharp -builder.UseSimpleToolkit(); -``` +All controls can be styled using different design languages. These are currently supported: + +- Material 3 +- Cupertino +- Fluent (WinUI 3) + +

+ +

+ +

+ +

-

\ No newline at end of file +

+ +> I am still not decided if I want to continue and how to develop the `SimpleToolkit.SimpleShell.Controls` package. **The package API is likely to change in the future.** For this reason, this package is still in preview and has poor documentation. + +See [documentation](./docs/SimpleToolkit.SimpleShell.Controls) for more information. \ No newline at end of file diff --git a/docs/Samples.md b/docs/Samples.md new file mode 100644 index 0000000..44104bf --- /dev/null +++ b/docs/Samples.md @@ -0,0 +1,39 @@ +# List of Samples Built Using SimpleToolkit + +## [Gadget Store App](https://github.com/RadekVyM/Gadgets-Store-App) + +**.NET MAUI** implementation of [Gadgets Store App](https://dribbble.com/shots/6983164-Gadgets-Store-App) design by [Sajon](https://dribbble.com/sajon007): + +

+ +

+ +## [Navbar Animation #1](https://github.com/RadekVyM/Navbar-Animation-1) + +**.NET MAUI** implementation of [Navbar Animation #1](https://dribbble.com/shots/9852644-Navbar-Animation-1) design by [Marie Bernard](https://dribbble.com/marie_brn): + +

+ +         + +

+ +## [Navbar Animation #2](https://github.com/RadekVyM/Navbar-Animation-2) + +**.NET MAUI** implementation of [Navbar Animation #2](https://dribbble.com/shots/14122275-Navbar-Animation-2) design by [Marie Bernard](https://dribbble.com/marie_brn): + +

+ +         + +

+ +## [Tab Bar Switches Interaction](https://github.com/RadekVyM/Tab-Bar-Switches-Interaction) + +**.NET MAUI** implementation of [Tab Bar Switches Interaction](https://dribbble.com/shots/14028381-Tab-Bar-Switches-Interaction) design by [Ronas IT | UI/UX Team](https://dribbble.com/ronasit): + +

+ +         + +

\ No newline at end of file diff --git a/docs/SimpleToolkit.Core/ContentButton.md b/docs/SimpleToolkit.Core/ContentButton.md index fadf51e..2dffe39 100644 --- a/docs/SimpleToolkit.Core/ContentButton.md +++ b/docs/SimpleToolkit.Core/ContentButton.md @@ -34,6 +34,59 @@ Output:

+## Visual states + +`ContentButton` provides the same visual states as .NET MAUI `Button` does: + +```xml + + + + + + + + + + + + + + + + + + + + + + + + + + + +``` + +Output: + +

+ +

+ ## Implementation details The `ContentButton` class is inherited from the .NET MAUI `ContentView` control. `ContentButton` has these events and properties in addition to `ContentView`s events and properties: diff --git a/docs/SimpleToolkit.SimpleShell.Controls/README.md b/docs/SimpleToolkit.SimpleShell.Controls/README.md index d6af6e9..daa7a29 100644 --- a/docs/SimpleToolkit.SimpleShell.Controls/README.md +++ b/docs/SimpleToolkit.SimpleShell.Controls/README.md @@ -4,6 +4,14 @@ *SimpleToolkit.SimpleShell.Controls* is a collection of ready-to-use, navigation-related controls (not only) for `SimpleShell`. +> I am still not decided if I want to continue and how to develop the `SimpleToolkit.SimpleShell.Controls` package. **The package API is likely to change in the future.** For this reason, this package is still in preview and has poor documentation. + +

+ + + +

+ ## Getting Started In order to use *SimpleToolkit.SimpleShell.Controls*, you need to call the `UseSimpleToolkit()` extension method in your `MauiProgram.cs` file: @@ -12,8 +20,23 @@ In order to use *SimpleToolkit.SimpleShell.Controls*, you need to call the `UseS builder.UseSimpleToolkit(); ``` +## Controls + +The package currently supports only two controls: + +- `ListPopover` - popover containing a list of selectable text items +- `TabBar` + +All controls can be styled using different design languages. These are currently supported: + +- Material 3 +- Cupertino +- Fluent (WinUI 3) +

- - - + +

+ +

+

\ No newline at end of file diff --git a/docs/SimpleToolkit.SimpleShell/README.md b/docs/SimpleToolkit.SimpleShell/README.md index 15c700f..075644f 100644 --- a/docs/SimpleToolkit.SimpleShell/README.md +++ b/docs/SimpleToolkit.SimpleShell/README.md @@ -155,8 +155,6 @@ See [documentation](Transitions.md) for more information. The `SimpleShell` class is inherited from the .NET MAUI `Shell` class, but all the handlers are implemented from the ground up. These handlers are inspired by the WinUI version of `Shell` handlers. -`SimpleShell` currently does not provide any page transitions. Pages are simply swapped in a container during navigation. - ## Why not use `SimpleShell` and use .NET MAUI `Shell` instead - .NET MAUI `Shell` offers a platform-specific appearance. diff --git a/docs/SimpleToolkit.SimpleShell/Transitions.md b/docs/SimpleToolkit.SimpleShell/Transitions.md index 8049240..f7bf3ad 100644 --- a/docs/SimpleToolkit.SimpleShell/Transitions.md +++ b/docs/SimpleToolkit.SimpleShell/Transitions.md @@ -99,9 +99,9 @@ public AppShell() finished: args => { args.OriginPage.Opacity = 1; - args.OriginPage.TranslationX = 1; + args.OriginPage.TranslationX = 0; args.DestinationPage.Opacity = 1; - args.DestinationPage.TranslationX = 1; + args.DestinationPage.TranslationX = 0; }, destinationPageInFront: args => args.TransitionType switch { SimpleShellTransitionType.Popping => false, @@ -130,14 +130,12 @@ public ImagePage() this.SetTransition( callback: args => { - args.OriginPage.TranslationY = args.Progress * (-args.OriginPage.Height); - args.DestinationPage.TranslationY = (1 - args.Progress) * (args.DestinationPage.Height); + args.DestinationPage.Scale = args.Progress; }, 500, finished: args => { - args.OriginPage.TranslationY = 0; - args.DestinationPage.TranslationY = 0; + args.DestinationPage.Scale = 1; }); } ``` diff --git a/docs/images/listpopovers.png b/docs/images/listpopovers.png new file mode 100644 index 0000000..2ca19eb Binary files /dev/null and b/docs/images/listpopovers.png differ diff --git a/docs/images/star_button_visual_states.gif b/docs/images/star_button_visual_states.gif new file mode 100644 index 0000000..8f7b361 Binary files /dev/null and b/docs/images/star_button_visual_states.gif differ diff --git a/docs/images/tabbars.png b/docs/images/tabbars.png new file mode 100644 index 0000000..ab6564c Binary files /dev/null and b/docs/images/tabbars.png differ diff --git a/images/logo_with_background.png b/images/logo_with_background.png index dfab0fb..7e4fab6 100644 Binary files a/images/logo_with_background.png and b/images/logo_with_background.png differ diff --git a/images/logo_with_background.svg b/images/logo_with_background.svg index 6951d11..90f9c41 100644 --- a/images/logo_with_background.svg +++ b/images/logo_with_background.svg @@ -2,13 +2,16 @@ + gradientUnits="userSpaceOnUse" + gradientTransform="scale(1.0666667)" /> + width="160" + height="160" + x="5.3290705e-15" + y="5.3290705e-15" + rx="21.333334" + ry="21.333334" />