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:
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 |