codekanzlei/cakephp3-bootstrap3-helpers

CakePHP 3.0 的 Bootstrap 3 辅助工具

维护者

详细信息

github.com/scherersoftware/cakephp3-bootstrap3-helpers

源代码

安装次数: 1,077

依赖者: 0

建议者: 0

安全性: 0

星标: 1

关注者: 4

分支: 77

类型:cakephp-plugin

v1.0.1 2015-03-16 11:04 UTC

Requires

Requires (Dev)

Apache 701b03702eee86e3213e43e04e0e359bbd41883d

bootstrapcakephp

This package is auto-updated.

Last update: 2019-05-20 21:56:27 UTC

README

CakePHP 3.0 辅助工具，用于生成带有 @Twitter Bootstrap 3 的 HTML：提供 Html、Form、Modal 和 Paginator 辅助工具！

这是我的 CakePHP Bootstrap 3 辅助工具（CakePHP 2.0 仓库在这里： https://github.com/Holt59/cakephp-bootstrap3-helpers）的新仓库。

如果您...

  • 在 github 上发布问题 如果您发现错误或希望添加新功能。
  • 给我发消息 如果您在安装或使用插件时遇到问题。

安装

运行 composer require holt59/cakephp3-bootstrap3-helpers:dev-master 或将以下内容添加到您的 composer.json 中并运行 composer update。

"require": {
  "holt59/cakephp3-bootstrap3-helpers": "dev-master"
}

如果您不使用 composer，只需将仓库克隆到您的 plugins/Bootstrap3 文件夹。

别忘了在您的 /config/bootstrap.php 文件中加载插件

Plugin::load('Bootstrap3');

如何使用？

只需将辅助文件添加到您的 View/Helpers 目录，并在您的控制器中加载辅助工具

public $helpers = [
    'Html' => [
        'className' => 'Bootstrap3.BootstrapHtml'
    ],
    'Form' => [
        'className' => 'Bootstrap3.BootstrapForm'
    ],
    'Paginator' => [
        'className' => 'Bootstrap3.BootstrapPaginator'
    ],
    'Modal' => [
        'className' => 'Bootstrap3.BootstrapModal'
    ]
];

我尽量保持 CakePHP 辅助工具的风格。您可以直接在辅助文件中找到文档。

Html

重载 getCrumbList 和新的可用函数

echo $this->Html->label('My Label', 'primary') ;

echo $this->Html->badge('1') ;
echo $this->Html->badge('2') ;

echo $this->Html->alert('This is a warning alert!') ;
echo $this->Html->alert('This is a success alert!', 'success');

查看源代码以获取完整文档。

Form

与该辅助工具一起工作的标准 CakePHP 代码！

echo $this->Form->create();
echo $this->Form->input('username') ;
echo $this->Form->input('password') ;
echo $this->Form->input('remember') ;
echo $this->Form->submit('Log In') ;
echo $this->Form->end() ;

将输出

<form method="post" accept-charset="utf-8" role="form" action="/login">
  <div style="display:none;">
    <input class="form-control" value="POST" type="hidden" name="_method" id="_method">
  </div>
  <div class="form-group text">
    <label class=" control-label" for="username">Username</label>
    <input class="form-control" id="username" type="text" name="username">
  </div>
  <div class="form-group password">
    <label class=" control-label" for="password">Password</label>
    <input class="form-control" id="password" type="password" name="password">
  </div>
  <div class="form-group">
    <div class="checkbox">
      <label>
        <input class="form-control" value="0" type="hidden" name="remember" id="remember">
        <input type="checkbox" name="remember" value="1" id="remember">
        Remember me
      </label>
    </div>
  </div>
  <div class="form-group">
    <input type="submit" class="btn btn-primary" value="Log In">
  </div>
</form>

新增了创建内联和水平表单的可能性： $this->Form->create($myModal, ['horizontal' => true, 'inline' => false]);

echo $this->Form->create(null, ['horizontal' => true]);
echo $this->Form->input('username') ;
echo $this->Form->input('password') ;
echo $this->Form->input('remember') ;
echo $this->Form->submit('Log In') ;
echo $this->Form->end() ;

将输出

<form method="post" accept-charset="utf-8" class="form-horizontal" role="form" action="/CakePHP3/">
  <div style="display:none;">
    <input class="form-control" value="POST" type="hidden" name="_method" id="_method">
  </div>
  <div class="form-group text">
    <label class="col-md-2 control-label" for="username">Username</label>
    <div class="col-md-6">
      <input class="form-control" id="username" type="text" name="username">
    </div>
  </div>
  <div class="form-group password">
    <label class="col-md-2 control-label" for="password">Password</label>
    <div class="col-md-6">
      <input class="form-control" id="password" type="password" name="password">
    </div>
  </div>
  <div class="form-group">
    <div class="col-md-offset-2 col-md-6">
      <div class="checkbox">
        <label>
          <input class="form-control" value="0" type="hidden" name="remember" id="remember">
          <input type="checkbox" name="remember" value="1" id="remember">
          Remember me
        </label>
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="col-md-offset-2 col-md-6">
      <input type="submit" class="btn btn-primary" value="Log In">
    </div>
  </div>
</form>

使用 horizontal，可以指定每列的宽度

echo $this->Form->create($myModal, [
    'horizontal' => true,
    'cols' => [ // Total is 12
        'label' => 2,
        'input' => 6,
        'error' => 4
    ]
]);

您还可以为不同屏幕设置列宽度

echo $this->Form->create($myModal, [
    'horizontal' => true,
    'cols' => [ 
        'sm' => [
            'label' => 4,
            'input' => 4,
            'error' => 4
        ],
        'md' => [
            'label' => 2,
            'input' => 6,
            'error' => 4
        ]
    ]
]);

新增了创建按钮组、工具栏和下拉菜单的函数

echo $this->Form->buttonGroup([$this->Form->button('1'), $this->Form->button('2')]) ;
echo $this->Form->buttonToolbar([
    $this->Form->buttonGroup([$this->Form->button('1'), $this->Form->button('2')]),
    $this->Form->buttonGroup([$this->Form->button('3'), $this->Form->button('4')])
]) ;
echo $this->Form->dropdownButton('My Dropdown', [
    $this->Html->link('Link 1'),
    $this->Html->link('Link 2'),
    'divider',
    $this->Html->link('Link 3')
]);

创建输入时，新增了预置/附加按钮或文本到输入的选项

echo $this->Form->input('mail', [
    'prepend' => '@', 
    'append' => $this->Form->button('Send')
]) ;
echo $this->Form->input('mail', [
    'append' => [
        $this->Form->button('Button'),
        $this->Form->dropdownButton('Dropdown', [
            $this->Html->link('A', []), 
            $this->Html->link('B', []),
            'divider', 
            $this->Html->link('C', [])
        ])
    ]
]) ;

在创建辅助工具时，可以指定默认按钮类型和列宽度（对于水平表单）

// In your Controller
public $helpers = [
    'Form' => [
        'className' => 'Bootstrap3.BootstrapForm',
        'buttons' => [
            'type' => 'primary'
        ],
        'columns' => [
            'sm' => [
                'label' => 4,
                'input' => 4,
                'error' => 4
            ],
            'md' => [
                'label' => 2,
                'input' => 6,
                'error' => 4
            ]
        ]
    ]
];

Modal

用于创建模态框的简单辅助工具，3 种使用方法

第一种（简单） - 如果可能，您应该使用这种方法！

<?php
// Start a modal with a title, default value for 'close' is true
echo $this->Modal->create("My Modal Form", ['id' => 'MyModal', 'close' => false]) ; 
?>
<p>Here I write the body of my modal !</p>
<?php
// Close the modal, output a footer with a 'close' button
echo $this->Modal->end() ;
// It is possible to specify custom buttons:
echo $this->Modal->end([
    $this->Form->button('Submit', ['bootstrap-type' => 'primary']),   
    $this->Form->button('Close', ['data-dismiss' => 'modal']) 
]);
?>

输出

<div id="MyModal" tabindex="-1" role="dialog" aria-hidden="true" aria-labbeledby="MyModalLabel" class="modal fade" style="display: none;">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header ">
        <!-- With 'close' => true, or without specifying:
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> -->
        <h4 class="modal-title" id="MyModalLabel">My Modal Form</h4>
      </div>
      <div class="modal-body ">    
        <p>Here I write the body of my modal !</p>
      </div>
      <div class="modal-footer ">
        <button class="btn btn-primary btn-primary" type="submit">Submit</button>
        <button data-dismiss="modal" class="btn btn-primary" type="submit">Close</button>
      </div>
    </div>
  </div>
</div>

第二种 - 没有HTML，不同的部分被分割到不同的方法中。

<?php
echo $this->Modal->create(['id' => 'MyModal2']) ;
echo $this->Modal->header('My Title', ['close' => false]) ; 
echo $this->Modal->body('My Body', ['class' => 'my-body-class']) ;
echo $this->Modal->footer([
    $this->Form->button('Submit', ['bootstrap-type' => 'primary']),   
    $this->Form->button('Close', ['data-dismiss' => 'modal']) 
]) ;
echo $this->Modal->end() ;
?>

第三种（高级） - 您需要手动开始每个部分，但您可以几乎定制任何内容！

<?php
echo $this->Modal->create(['id' => 'MyModal3']) ;
echo $this->Modal->header(['class' => 'my-header-class']) ; 
?>
<h4>My Header!</h4>
<?php
echo $this->Modal->body() ;
?>
<p>My body!</p>
<?php
echo $this->Modal->footer(['close' => false]) ;
?>
<p>My footer... Oops, no buttons!</p>
<?php
echo $this->Modal->end() ;
?>

在最后两种版本中，可以省略部分内容

<?php
echo $this->Modal->create() ;
echo $this->Modal->body() ; // No header
echo $this->Modal->footer() ; // Footer with close button (default)
echo $this->Modal->end() ;
?>

信息：您可以使用 BootstrapFormHelper 来创建模态框的切换按钮！

echo $this->Form->button('Toggle Form', ['data-toggle' => 'modal', 'data-target' => '#MyModal']) ;

版权和许可证

版权 2013 Mikaël Capelle。

根据 Apache 许可证 2.0 版（“许可证”）；除非遵守许可证，否则您不得使用本作品。您可以在 LICENSE 文件中或通过以下链接获取许可证：

https://apache.ac.cn/licenses/LICENSE-2.0

除非适用法律要求或书面同意，否则根据本许可证分发的软件按照“原样”基础分发，不提供任何形式（明示或默示）的保证或条件。有关许可证的特定语言、许可权限和限制，请参阅许可证。