Laravel学习笔记（31）Bootstraps部分模板学习（modal，component）

1. modal & component部件

b4-modal-default

注意，form一定要放在table外面，否则submit将没有反应。

<button data-toggle="modal" data-target="#modelId" type="button" class="btn btn-success">添加角色</button>
@component('components.modal', ['id'=>'modelId', 'title'=>'添加角色', 'url'=>'admin/role'])
    <div class="form-group">
        <label>Email_address</label>
        <input type="email" name="email" placeholder="[e-mail]" class="form-control">
    </div>

    <div class="form-group">
        <label>Your name</label>
        <input type="text" name="name" placeholder="ABC" class="form-control">
    </div>
@endcomponent

{{$slot}}是component的定位符

// view/components/modal.blade.php
<form action="{{$url}}" method="post">
    @csrf
    @isset($method)
        @method($method)
    @endisset
    <div id="{{$id}}" tabindex="-1" role="dialog" class="modal fade colored-header colored-header-primary show"
                   style="padding-right: 17px;">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header modal-header-colored">
                    <h3 class="modal-title">
                        {{$title}}
                    </h3>
                    <button type="button" data-dismiss="modal" aria-hidden="true" class="close md-close"><span
                                class="mdi mdi-close">       </span></button>
                </div>
                <div class="modal-body">
                    {{$slot}}
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-primary md-close">保存</button>
                </div>
            </div>
        </div>
    </div>
</form>