README

Bootstrap 4 插件，用于 CakePHP ^3.4。

需求

• CakePHP ^3.4.0
• Bootstrap ^4.0.0
• jQuery 1.9.1 - 3,
• Popper.js ^1.14.0

描述

当前 CakePHP 辅助器的适配器。虽然我觉得它已经非常接近稳定版本 😄，但仍然可能发生破坏性变化。

包含

• FormHelper
• PaginatorHelper
• ModalHelper
• FlashHelper

使用 Composer 安装

composer require kacospro/bootscake

通过将以下内容添加到您的应用程序的 config/boostrap.php 中来加载插件

Plugin::load('BootsCake');

或使用 CakePHP 的控制台

bin/cake plugin load BootsCake

设置

首先，您应该通过您喜欢的任何方法加载 Bootstrap。

然后在您的 src/View/AppView.php 中加载您需要的辅助器

public function initialize()
{
    $this->loadHelper('BootsCake.BootsCakeFlash');
    $this->loadHelper('BootsCake.BootsCakeForm');
    $this->loadHelper('BootsCake.BootsCakeModal');
    $this->loadHelper('BootsCake.BootsCakePaginator');
}

辅助器使用

Form 辅助器。您只需要在视图中调用 BootsCakeForm

<?php
echo $this->BootsCakeForm->create($article);
echo $this->BootsCakeForm->control('title');
echo $this->BootsCakeForm->control('body');
echo $this->BootsCakeForm->control(__('Submit'), ['type' => 'submit']);
echo $this->BootsCakeForm->end();
?>

等等！如果需要不同大小的表单怎么办？
我来帮你！您可以传递大小作为选项，可以是 sm 或 lg

<?= $this->BootsCakeForm->control(
    'email',
    [
        'placeholder' => 'carlos@example.com',
        'size' => 'sm',
    ]
) ?>

此外，如果您传递选项 'type' => 'submit'，它支持一个 颜色 以渲染提交按钮

<?= $this->BootsCakeForm->control('Submit', ['type' => 'submit', 'color' => 'primary']) ?>

Flash 辅助器。

<?= $this->BootsCakeFlash->render() ?>

Paginator 辅助器。

<nav>
    <ul class="pagination">
        <?php
        echo $this->BootsCakePaginator->first();
        echo $this->BootsCakePaginator->prev();
        echo $this->BootsCakePaginator->numbers();
        echo $this->BootsCakePaginator->next();
        echo $this->BootsCakePaginator->last();
        ?>
    </ul>
</nav>

Modal。它仅渲染 Modal 组件的骨架，我主要用它来渲染删除 modal。这是删除按钮的代码

<?=
$this->BootsCakeForm->postLink(__('Delete'),
[
  'action' => 'delete',
  $article->id
], [
  'data-name' => $article->id,
  'escape' => false,
  'title' => 'Eliminar usuario'
])
?>

然后调用 Modal 骨架

<?= $this->element('BootsCake.modal/default') ?>

或

<?= $this->BootsCakeModal->render() ?>

与以下 JavaScript 代码一起

$('#modal').on('show.bs.modal', function (event) {
    var button = $(event.relatedTarget);
    var recipient = button.data('name');
    var formName = button.data('form-name');
    $('#confirm').attr('onClick', 'document.' + formName + '.submit();');
    var modal = $(this);
    modal.find('.modal-title').html(
        '<p class="text-danger">Eliminar <i class="fa fa-exclamation-circle" aria-hidden="true"></i></p>'
    )
    modal.find('.modal-body').html(
        '<p>¿Desea eliminar a ' +
        recipient +
        '?</p>' +
        '<br>' +
        'La información no se podrá recuperar'
    );
});

待办事项

• 改进文档。
• 处理配置。
• 添加大小（sm、md、lg）选项。
• 添加 modal 渲染选项。
• 创建 Html 辅助器。
• 创建自动安装 Bootstrap 的方法。

许可证

版权（c）2018，Carlos Proaño，并许可在 The MIT License 下。