Modal

A blade component for popup modal!

This is the full height pop-up modal component and it has one slot and three types of attributes with default values.

We will see it one by one!

# Trigger

The trigger slot default value is empty. So, it is required. otherwise, an error will be thrown. In this trigger slot, you can use all types of elements.

<x-btui-modal>   <x-slot name="trigger">    <a> Click!</a>   </x-slot>      ---- content goes here! ----     </x-btui-modal> 

# Title

Title of the modal. It will be placed on the modal header left side.

<x-btui-modal title="Modal Name"> </x-btui-modal> 

# Width

Width of the modal. Default is 5. You can use 1 to 10 as the width value. It will multiply by 10 and convert into a percentage.

If the width value is 5 means, the modal container takes 50% width of the screen and it will take 100% width on small screens.

<x-btui-modal width="5"> </x-btui-modal> 

# Align

Align of the modal. Default is center. Three options available are left, right, center. This is used only on big screens.

<x-btui-modal align="center"> </x-btui-modal> 

Change the Options and Open the Modal see what happens!

Result:

Modal Name

See available options! (* means required)

name type default options
Trigger* Slot - -
Title String Modal -
Width Int 5 1 to 10
Align String center left, right, center