README

Laravel components for Bootstrap modals

Note : This package is to be used with Laravel v8 and Bootstrap v4.

It also requires LaravelCollective/HTML v6

Installation
Configuration
Usage
Theming
Parameters
Contact
License
Copyright

Installation

Install the package via Composer:

    $ composer require regnilk/bs-modal-laravel

The package service provider will be registered automatically.

Configuration

There is no need for configuration

Usage

To display a modal, just call it this way :

<x-modal-success title="Confirm this ?" url="{{url('/confirm-this')}}" message="Do you confirm this ?"/>

You can customize this component like any other :

<x-modal-danger title="myTitle" url="{{url('/'}}" message="myMessage" class="my-2" style="font-weight: bold;"/>

Theming

You can use different bootstrap themes for your modals and modals trigger buttons : Danger, Dark, Info, Light, Primary, Secondary, Success and Warning

<x-modal-danger/>
<x-modal-dark/>
<x-modal-info/>
<x-modal-light/>
<x-modal-primary/>
<x-modal-secondary/>
<x-modal-success/>
<x-modal-warning/>
<x-modal-success-danger/>
<x-modal-danger-success/>
<x-modal-dark-success/>

If you want to use a custom color class, you can call the modal without any standard theme. In that case, you will have to indicate what color class is to be used :

<x-modal color-class="my-custom-theme" />

Parameters

For each of these modules, you can use different parameters. Only three of them are mandatory : title, url and message.

title : the title of the modal and the text that will be displayed when hovering the button.
url : the url used by the form in the modal
message : the text of the modal's body.
icon : the icon displayed in the trigger button (uses fa-laravel)

If no icon parameter is set, a default icon will be displayed.

If you don't want to display any icon, pass an empty icon parameter.
```
  <x-modal-info title="title" url="{{url('/'}}" message="myMessage" icon="" /> 
```
iconModal : the icon displayed in the modal header and submit button, (uses fa-laravel)

If no iconModal parameter is set, the icon value will be used.

If no icon value is set then no icon will be displayed
```
  <x-modal-info title="title" url="{{url('/'}}" message="myMessage" iconModal="" /> 
```
btnText : the text in the trigger.

If no parameter is set, 'OK' will be shown by default.

If you want no btnText, you have to pass the parameter with an empty value.
```
    <x-modal-info title="title" url="{{url('/'}}" message="myMessage" btnText="ok" /> 
```
modalBtnText : the text in the submit button.

If no parameter is set, the btnText value will be used. If the btnText is not set 'OK' will be shown by default.
```
    <x-modal-info title="title" url="{{url('/'}}" message="myMessage" modalBtnText="ok" /> 
```
comment : If present, you will have à textarea in the modal to leave a comment.
commentRequired : If present, indicates that the comment is required
outline : If set to true, all the buttons will be displayed in outline mode. The header colors will also be inverted.
method : You can indicate the method used in the modal's form.

Possible values are : GET, POST, DELETE, PUT and PATCH (default)
mode : You can choose the display mode of the trigger.
- button : the trigger will be a button (default value)
- badge : the trigger will be a badge
- link : the trigger will be a link

Here is a full example for a button trigger :

<x-modal-warning title="Delete" url="{{url('/delete'}}" message="Do you want to delete ?" icon="delete" btnText="Delete" modalBtnText="Remove" comment="true" outline="true" method="delete" mode="button" />

For a badge trigger :

<x-modal-warning title="Delete" url="{{url('/delete'}}" message="Do you want to delete ?" icon="delete" btnText="Delete" modalBtnText="Remove" comment="true" outline="true" method="delete" mode="badge" />

And a full example for a link trigger :

<x-modal-warning title="Delete" url="{{url('/delete'}}" message="Do you want to delete ?" icon="delete" btnText="Delete" modalBtnText="Remove" comment="true" outline="true" method="delete" mode="link" />

The success-danger theme provides a success trigger and a danger modal The danger-success theme provides a danger trigger and a success modal This can be useful if you want to show the state of an element and link an action in the modal to change this state.

regnilk / bs-modal-laravel

Maintainers

Details

README

Installation

Configuration

Usage

Theming

Parameters

Contact

License

Copyright