Calling modal from <a> tag

Is it possible to call a modal from an <a> tag? This is the snippet of my code

@else
{{ $section->label }}
  <a href="#" 
      wire:click.prevent="editSection('{{ $section->id }}')"
      class="ml-2 text-blue-500 font-light border border-blue-800 rounded px-1.5 py-0.5 hover:bg-            blue-800 hover:text-white transition-colors duration-300">
    Edit
  </a>
@endif

@else
{{ $section->label }}
  <a href="#" 
      wire:click.prevent="editSection('{{ $section->id }}')"
      class="ml-2 text-blue-500 font-light border border-blue-800 rounded px-1.5 py-0.5 hover:bg-            blue-800 hover:text-white transition-colors duration-300">
    Edit
  </a>
@endif

30 Replies

awcodes•5mo ago

Please don’t do this. Links and buttons are different for a reason. You can still use a button and make it look like a link.

o.mOP•5mo ago

Sure I'll change it to button

awcodes•5mo ago

You can either use an action or filament’s button component if you need more control. https://filamentphp.com/docs/3.x/support/blade-components/button

Button Blade component - Core Concepts - Filament

o.mOP•5mo ago

What do I do with openNewUserModal?

awcodes•5mo ago

That’s why I recommend using an action, the modal stuff is built in.

o.mOP•5mo ago

like similar to saveAction, deleteAction etc ?

awcodes•5mo ago

https://filamentphp.com/docs/3.x/actions/adding-an-action-to-a-livewire-component https://filamentphp.com/docs/3.x/actions/modals

Adding an action to a Livewire component - Actions - Filament

Modals - Actions - Filament

o.mOP•5mo ago

Is it possible to update the ui ?

o.mOP•5mo ago

ahh nvm the only way i can update the Ui is through the function itself

awcodes•5mo ago

You can always change the styling through css.

o.mOP•5mo ago

there is not function to let me style or use class here

    public function editAction(): Action
    {
        return Action::make('Edit')
            ->requiresConfirmation()

            ->action(function (array $arguments) {
               dd($arguments);

            });
    }
}

    public function editAction(): Action
    {
        return Action::make('Edit')
            ->requiresConfirmation()

            ->action(function (array $arguments) {
               dd($arguments);

            });
    }
}

Where should I do it?

awcodes•5mo ago

The actions have css classes that you can use to target them in your stylesheet and change them.

o.mOP•5mo ago

like the theme.css ?

awcodes•5mo ago

If you need to target a specific one, iirc correctly, you can use ->extraAttribute([‘class’ => ‘my-btn’]) then target .my-btn in the stylesheet. Yes, like theme.css It’s still all just html and css. 🙂

o.mOP•5mo ago

Yeah,, I was expecting to just use the extraAttribute function only

awcodes•5mo ago

Well, technically you can as long as that file is part of the tailwind config content so it gets scanned.

o.mOP•5mo ago

Weird.. nothing works using extraAttribute Ahh

awcodes•5mo ago

Attributes plural. Sorry

o.mOP•5mo ago

do I need to add this to Tailwind.config ? like the GroupSetting.php?

o.mOP•5mo ago

:/ wasn't able to get it to work

awcodes•5mo ago

Or at least the path to the directory where it is. But yes. If tailwind doesn’t know to scan those files it won’t include those classes.

o.mOP•5mo ago

Yeah added this just to make sure.

awcodes•5mo ago

I have had issues in the past though with it scanning php class files. So, in that case just use a custom class name and target it in the css file and use tailwind’s @apply rule.

o.mOP•5mo ago

Yeah.. I guess . Thanks this will definitely solve the problem. Got no choice I guess..

awcodes•5mo ago

Did you restart the dev server after adding it Or run npm run build?

o.mOP•5mo ago

No Just restarted it now but still doenst work

awcodes•5mo ago

Any time you change the TW config you have to either restart or rebuild.

o.mOP•5mo ago

Okay noted on that

awcodes•5mo ago

Surprised it’s not working though. Sorry. Also, kinda guessing on your setup too.

Gaming

Programming

Calling modal from <a> tag

Did you find this page helpful?