2016-11-17 67 views
0

我想改變這在目前看起來複選框模板像CakePHP的3表單輔助複選框模板

'checkbox' => '<input type="checkbox" name="{{name}}" value="{{value}}"{{attrs}}>', 
'checkboxWrapper' => '{{label}}', 

生成HTML像

<div class="form-group"> 
<input class="form-control" type="hidden" name="active" value="0"> 
    <label for="active"> 
    <input type="checkbox" name="active" value="1" id="active"> 
    Active 
    </label> 
</div> 
</div> 

但我需要的是代碼應該看起來像

<div class="checkbox m-b-15"> 
<input class="form-control" type="hidden" name="active" value="0"> 
<label> 
    <input type="checkbox" name="active" value="1" id="active"> 
    <i class="input-helper"></i> 
    Active 
</label> 
</div> 

我應該如何真正改變表單助手的模板和模板以便代碼看起來像我需要的?

+1

你大概讀[自定義表單助手採用模板(http://book.cakephp.org/3.0/en/views/助手/形式。html#customizing-the-templates-formhelper-uses)文檔。向我們展示您嘗試過的代碼,並告訴我們有關不適用的具體細節。 –

回答

2

您可以使用nestingLabel表單模板來格式化您的複選框佈局。 使用{{input}}{{hidden}}和標籤

請在複選框之前使用以下代碼。

$this->Form->setTemplates([ 
     'nestingLabel' => '<div class="checkbox m-b-15">{{hidden}}<label{{attrs}}>{{input}}{{text}}</label></div>', 
]); 

參考:vendor/cakephp/cakephp/src/View/Helper/FormHelper.php
protected $_defaultConfig = [...]

0

您可以通過使用自定義窗口小部件編寫自定義複選框,輸入文字等! 請在這裏閱讀:https://book.cakephp.org/3.0/en/views/helpers/form.html#using-widgets

如果你仍然有麻煩,你可以隨時使用我的例子。請記住,我正在使用完全成本的複選框css沒有提供,這只是一個例子,以幫助您瞭解它是如何工作的。

你需要什麼:

  1. 創建窗口小部件
  2. 裝入小部件
  3. 負載在表單視圖模板
  4. 渲染的複選框:)

爲了編寫自定義複選框,您需要創建一個擴展BasicWidget的CustomCheckboxWidget類。現在,您需要做的就是自定義您的渲染功能。

這是一個完整的例子:CustomCheckboxWidget

*使用您的自定義模板,你需要通過添加下面的幾行App.View.php

'Form' => [ 
    'widgets' => [ 
    'custom' => ['App\View\Widget\CustomCheckboxWidget'] 
    ], 
], 

在初始化函數加載部件。 ..

在您查看的形式example.ctp只需添加:

$this->Form->setTemplates([ 
    'checkbox' => '<div class="{{checkboxstyle}}">'. 
    '<input type="checkbox" name="{{name}}" id="{{name}}" value="{{value}}"{{attrs}}>'. 
    '<label for="{{name}}"><span class="{{bold}}">{{text}}{{icon}}</span></label>'. 
    '{{error}}'. 
    '</div>' 
]); 

並呈現明顯的自定義複選框:

<?= $this->Form->custom('field',[ 
    'hiddenField' => false, 
    'displayMessage' => true, 
    'checkboxstyle' => 'checkbox checkbox-danger', 
    'text' => 'Some label' 
    ]); 
?> 

問候,