https://github.com/aksoftware98/tailwind_blazor_transition
AKSoftware.Blazor.TailwindTransition is a Blazor package to add support for the TailwindCSS transitions
https://github.com/aksoftware98/tailwind_blazor_transition
Last synced: 9 months ago
JSON representation
AKSoftware.Blazor.TailwindTransition is a Blazor package to add support for the TailwindCSS transitions
- Host: GitHub
- URL: https://github.com/aksoftware98/tailwind_blazor_transition
- Owner: aksoftware98
- License: mit
- Created: 2021-03-14T15:04:43.000Z (over 5 years ago)
- Default Branch: main
- Last Pushed: 2024-02-05T19:26:11.000Z (over 2 years ago)
- Last Synced: 2025-04-22T11:55:51.814Z (about 1 year ago)
- Language: HTML
- Size: 293 KB
- Stars: 27
- Watchers: 4
- Forks: 4
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# AKSoftware.Blazor.TailwindTransition
AKSoftware.Blazor.TailwindTransition is a Blazor package to add support for the TailwindCSS & pre-built TailwindUI components transitions
The package contains 2 main components ***TWTransitionalElement*** & ***TWTransition***
The first component is the parent container for the full component that should be used to hide or show the full component, and the *TWTransition* is used to each div that needs to be transitioned
**Note:** You can detected which div is a TWTransition from the TailwindUI components through the comments on top of each div that supports Show/Hide Transition
## Get Started
- Install the Nuget package
For *.NET CLI*
```
dotnet add package AKSoftware.Blazor.TailwindTransition
```
Or through the *Nuget Package Manager Console*
``` PS
Install-Package AKSoftware.Blazor.TailwindTransition
```
- Then make sure you have Tailwind configured in your project, I highly recommend the following articles to get started:
[By Matt Ferderer - Using Tailwind CSS with Blazor](https://mattferderer.com/tailwind-with-blazor)
[By Chris Sanity - Integrating Tailwind CSS with Blazor using Gulp - Part 1](https://chrissainty.com/integrating-tailwind-css-with-blazor-using-gulp-part-1/)
- In the **_imports.razor** import the namespace
``` Razor
using AKSoftware.Blazor.TailwindTransition
```
Now you are just good to go, the following sample existing the in src/demo folder and in the component Index.razor
And basically it implements transition to show/hide a Slide-Over panel from the free TailwindUI components you can find it [here](https://tailwindui.com/components/application-ui/overlays/slide-overs)
Now in your component file paste the HTML content from TailwindUI website and then transform the parent div into a TWTransitionalElement and bind the IsOpened Attribute to a boolean variable then inside it follow the comments from Tailwind so you can know which div should be transformed into TWTranstion and using the properties "**Entering, EnteringFrom, EnteringTo, Leaving, LeavingFrom, LeavingTo, Duration**"
The following code shows the full Index.razor component from the demo project
``` Razor
@page "/"
@using AKSoftware.Blazor.TailwindTransition
Welcome to AKSoftware.Blazor.TailwindTransition
This library allows you to leverge the full power and capabilities of the TailwindCSS & TailwindUI components by providing you with the Transition component that you need to implement and take advantage of the smooth animation and Show/Hide transitions availabe out there
Note: Make sure to add TailwindCSS in your project you can check the index.html file to add Tailwind using the CDN (not recommended) or check out the following links
Click here to check the transition for show/hide a side panel
_isOpened = !_isOpened" type="button" class="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
@(_isOpened ? "Hide" : "Show")
_isOpened = !_isOpened" class="rounded-md text-gray-300 hover:text-white focus:outline-none focus:ring-2 focus:ring-white">
Close panel
Panel title
@code
{
private bool _isOpened = false;
}
```
The full documentation will be enhanced soon thank
Built with love by [AK Ahmad Mozaffar](https://ahmadmozaffar)