AKSoftware.Blazor.TailwindTransition 1.3.0

.NET 5.0
dotnet add package AKSoftware.Blazor.TailwindTransition --version 1.3.0
NuGet\Install-Package AKSoftware.Blazor.TailwindTransition -Version 1.3.0
This command is intended to be used within the Package Manager Console in Visual Studio, as it uses the NuGet module's version of Install-Package.
<PackageReference Include="AKSoftware.Blazor.TailwindTransition" Version="1.3.0" />
For projects that support PackageReference, copy this XML node into the project file to reference the package.
paket add AKSoftware.Blazor.TailwindTransition --version 1.3.0
#r "nuget: AKSoftware.Blazor.TailwindTransition, 1.3.0"
#r directive can be used in F# Interactive, C# scripting and .NET Interactive. Copy this into the interactive tool or source code of the script to reference the package.
// Install AKSoftware.Blazor.TailwindTransition as a Cake Addin
#addin nuget:?package=AKSoftware.Blazor.TailwindTransition&version=1.3.0

// Install AKSoftware.Blazor.TailwindTransition as a Cake Tool
#tool nuget:?package=AKSoftware.Blazor.TailwindTransition&version=1.3.0

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

	Install-Package 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

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

@page "/"
@using AKSoftware.Blazor.TailwindTransition

<h1 class="text-3xl">Welcome to AKSoftware.Blazor.TailwindTransition</h1>
<p>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</p>
<p style="color:red"><b>Note:</b> 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</p>
<ul>
    <li><a href="https://mattferderer.com/tailwind-with-blazor">Using Tailwind CSS with Blazor</a></li>
    <li><a href="https://chrissainty.com/integrating-tailwind-css-with-blazor-using-gulp-part-1/">Integrating Tailwind CSS with Blazor using Gulp - Part 1</a></li>
</ul>

<h3 class="text-3xl">Click here to check the transition for show/hide a side panel</h3>
<button @onclick="() => _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")
</button>

<SurveyPrompt Title="How is Blazor working for you?" />


<TWTransitionalElement @bind-IsOpened="_isOpened"
                       AdditionalClasses="fixed inset-0 overflow-hidden">
    <div class="absolute inset-0 overflow-hidden">
        
        <TWTransitionalElement @bind-IsOpened="_isOpened"
                               Entering="ease-in-out duration-500"
                               EnteringFrom="opacity-0"
                               EnteringTo="opacity-100"
                               Leaving="ease-in-out duration-500"
                               LeavingFrom="opacity-100"
                               LeavingTo="opacity-0"
                               Duration="500"
                               AdditionalClasses="absolute inset-0 bg-gray-500 bg-opacity-75 transition-opacity"></TWTransitionalElement>
        <section class="absolute inset-y-0 right-0 pl-10 max-w-full flex" aria-labelledby="slide-over-heading">
            
            <TWTransition Entering="transform transition ease-in-out duration-500 sm:duration-700"
                               EnteringFrom="translate-x-full"
                               EnteringTo="translate-x-0"
                               Leaving="transform transition ease-in-out duration-500 sm:duration-700"
                               LeavingFrom="translate-x-0"
                               LeavingTo="translate-x-full"
                               Duration="500"
                               AdditionalClasses="relative w-screen max-w-md">
                
                <TWTransition Entering="ease-in-out duration-500"
                              EnteringFrom="opacity-0"
                              EnteringTo="opacity-100"
                              Leaving="ease-in-out duration-500"
                              LeavingFrom="opacity-100"
                              LeavingTo="opacity-0"
                              Duration="500"
                              AdditionalClasses="absolute top-0 left-0 -ml-8 pt-4 pr-2 flex sm:-ml-10 sm:pr-4">
                    <button  @onclick="() => _isOpened = !_isOpened" class="rounded-md text-gray-300 hover:text-white focus:outline-none focus:ring-2 focus:ring-white">
                        <span class="sr-only">Close panel</span>
                        
                        <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                        </svg>
                    </button>
                </TWTransition>
                <div class="h-full flex flex-col py-6 bg-white shadow-xl overflow-y-scroll">
                    <div class="px-4 sm:px-6">
                        <h2 id="slide-over-heading" class="text-lg font-medium text-gray-900">
                            Panel title
                        </h2>
                    </div>
                    <div class="mt-6 relative flex-1 px-4 sm:px-6">
                        
                        <div class="absolute inset-0 px-4 sm:px-6">
                            <div class="h-full border-2 border-dashed border-gray-200" aria-hidden="true"></div>
                        </div>
                        
                    </div>
                </div>
            </TWTransition>
        </section>
    </div>
</TWTransitionalElement>

@code 
{

    private bool _isOpened = false; 


}

The full documentation will be enhanced soon thank Built with love by AK Ahmad Mozaffar

Product Versions
.NET net5.0 net5.0-windows net6.0 net6.0-android net6.0-ios net6.0-maccatalyst net6.0-macos net6.0-tvos net6.0-windows net7.0 net7.0-android net7.0-ios net7.0-maccatalyst net7.0-macos net7.0-tvos net7.0-windows
Compatible target framework(s)
Additional computed target framework(s)
Learn more about Target Frameworks and .NET Standard.

NuGet packages

This package is not used by any NuGet packages.

GitHub repositories

This package is not used by any popular GitHub repositories.

Version Downloads Last updated
1.3.0 3,011 12/9/2021
1.2.0 2,550 11/14/2021
1.1.0 5,953 6/8/2021
1.0.0 713 3/15/2021

Add the ability to capture the duration directly from the class names