README

Laravel 组件用于 Bootstrap 模态框

注意：此包适用于 Laravel v8 和 Bootstrap v4。

它还需要 LaravelCollective/HTML v6

安装
配置
使用
主题化
参数
联系
许可
版权

安装

通过 Composer 安装此包

    $ composer require regnilk/bs-modal-laravel

包服务提供者将自动注册。

配置

无需配置

使用

要显示模态框，只需按以下方式调用它

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

您可以根据需要自定义此组件

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

主题化

您可以为模态框和触发按钮使用不同的 Bootstrap 主题：危险、深色、信息、浅色、主要、次要、成功和警告

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

如果您想使用自定义颜色类，可以不使用任何标准主题调用模态框。在这种情况下，您必须指出要使用哪个颜色类

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

参数

对于这些模块中的每一个，您都可以使用不同的参数。其中只有三个是必需的：标题、URL 和消息。

title：模态框的标题以及在按钮上悬停时显示的文本。
url：模态框中表单使用的 URL。
message：模态框正文的文本。
icon：触发按钮中显示的图标（使用 fa-laravel）

如果没有设置图标参数，将显示默认图标。

如果您不想显示任何图标，请传递一个空的图标参数。
```
  <x-modal-info title="title" url="{{url('/'}}" message="myMessage" icon="" /> 
```
iconModal：模态框头部和提交按钮中显示的图标（使用 fa-laravel）

如果没有设置 iconModal 参数，则使用图标值。

如果没有设置图标值，则不会显示任何图标
```
  <x-modal-info title="title" url="{{url('/'}}" message="myMessage" iconModal="" /> 
```
btnText：触发按钮中的文本。

如果没有设置参数，则默认显示“确定”。

如果您想不显示任何 btnText，您必须传递一个空的参数值。
```
    <x-modal-info title="title" url="{{url('/'}}" message="myMessage" btnText="ok" /> 
```
modalBtnText：提交按钮中的文本。

如果没有设置参数，则使用 btnText 的值。如果 btnText 未设置，则默认显示“确定”。
```
    <x-modal-info title="title" url="{{url('/'}}" message="myMessage" modalBtnText="ok" /> 
```
comment：如果存在，模态框中将有一个文本区域用于留下评论。
commentRequired：如果存在，表示评论是必需的
outline：如果设置为 true，所有按钮都将以轮廓模式显示。标题颜色也将被反转。
method：您可以在模态框的表单中指定使用的方法。

可能的值有：GET、POST、DELETE、PUT 和 PATCH（默认）
mode：您可以选择触发器的显示模式。
- button：触发器将是一个按钮（默认值）
- badge：触发器将是一个徽章
- link：触发器将是一个链接

以下是一个按钮触发的完整示例

<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" />

以下是一个徽章触发的示例

<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" />

以下是一个链接触发的完整示例

<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" />

成功-危险主题提供成功触发器和危险模态框；危险-成功主题提供危险触发器和成功模态框。如果您想显示元素的当前状态，并通过模态框中的操作来改变此状态，这可能会很有用。

regnilk / bs-modal-laravel

维护者

详细信息

README

安装

配置

使用

主题化

参数

联系

许可

版权