search

themesberg / tailwind-blazor-starter

Open-source project to get you started with Tailwind CSS, Blazor, and the Flowbite UI components
https://flowbite.com/docs/getting-started/blazor/
MIT License
22 stars 9 forks source link

nice try #4

Open hossam1231 opened 10 months ago

hossam1231 commented 10 months ago

You've done a great job with the CSS effects for the onclick event, but it seems the modal isn't opening when clicked. Nice effort! I might consider sticking with CSS for this project.

chrisoChen commented 9 months ago

I looked into this because I'm considering using Flowbite for a Blazor/Tailwind project I'm working on and I got it to fix by doing this:

(Ensure npm/tailwind is downloaded and already set up)

  1. Use libman instead of npm to add Flowbite to your wwwroot folder. I used cdnjs as the provider

Screenshot 2023-12-10 121335 Screenshot 2023-12-10 121453

  1. Update _Host.cshtml to use the flowbite.min.js file we just added in wwwroot 
    
@page "/"
@using Microsoft.AspNetCore.Components.Web
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@namespace BlazorApp.Pages

<!DOCTYPE html>

... 

3. Update `tailwind.config.js` to add the new javascript file to the content module:

/* @type {import('tailwindcss').Config} / module.exports = { content: [ // other files... "./wwwroot/*/.js" ], ... }


4. Update `Index.razor` to do the following:
- Inject and use the `IJSRuntime` to invoke the flowbite function `initModals` to initialize the modal.
- Include a missing attribute `data-modal-target` to the button that opens the modal. The value should be the id of the modal you want to open.

@page "/" @inject IJSRuntime JSRuntime;

...

@code { protected override async Task OnAfterRenderAsync(bool firstRender) { await base.OnAfterRenderAsync(firstRender); await JSRuntime.InvokeVoidAsync("initModals"); } }



The result looks like this on my end:

![template-modal](https://github.com/themesberg/tailwind-blazor-starter/assets/47430791/61055d50-6b34-4ce8-be1b-173a814651f7)

Also make sure to run the npx tailwind command to recreate your css file again
duynguyen224 commented 7 months ago

Thank for your example. I implement and it work as expected with modal, dropdown, ... But seem like the datepicker component doesn't work. I'm trying to figure out the issue. Could you please try to implement it?