CakePHP3でMaterializeを使う時の設定

公開日:2018-11-09
最終更新:2018-11-09

tl;dr 要約

Materializeを動かすCakePHP3のFormHelperのTemplate設定。

<?php
return [
    // text, textarea, 
    'formGroup' => '<div class="input-field col {{type}}{{required}}">{{input}}{{label}}</div>',
    // radio
    'nestingLabel' => '{{hidden}}<label{{attrs}}>{{input}}<span>{{text}}</span></label>',
    'radioWrapper' => '<p>{{label}}</p>',
];

環境

  • CakePHP 3.6.12
  • Materialize 1.0.0

CakePHP3とは

Larabelと並んでphpフレームワークの双璧をなす、CakePHPシリーズの3代目。2代目は配列だらけだったが3代目ではオブジェクトだらけになった。

Materializeとは

A modern responsive front-end framework based on Material Design

https://materializecss.com/

フォームなどをマテリアルデザインに沿っていい感じにしてくれるCSS & javascriptフレームワーク。こちらが気持ちよく動く為にFormHelperの設定などを変更していく。

実装

input要素の書き換え

やること

CakePHPのFormHelperで吐き出すinput要素のテンプレートを上書きする。
具体的にはapp/config以下にapp_form.phpファイルを作り、

// @app/config/app_form.php
<?php
return [
    // ここにデフォルトTemplateを上書きする値を書いていく
];

AppViewで読み出すことで全体の設定を上書きする。

<?php
// @app/src/View/AppView.php
class AppView extends View
{
    public function initialize()
    {
        $this->loadHelper('Form', [
            'templates' => 'app_form',
        ]);
    }
}

詳しくはhttps://book.cakephp.org/3.0/ja/views/helpers/form.html#formhelper

Materializeはautoinitで初期化させる。
全てデフォルト設定になるので、個別にオプションを設定したい時はclassにno-autoinitをつけると見逃してくれる。
詳しくは https://materializecss.com/auto-init.html

具体的な実装

[type=text], textarea

   <div class="row">
    <div class="input-field col s6">
      <input value="Alvin" id="first_name2" type="text" class="validate">
      <label class="active" for="first_name2">First Name</label>
    </div>
  </div>

https://materializecss.com/text-inputs.htmlから引用

のように<div class="input-field col">でくくって、inputの次にlabel要素が来るようにする。

<?php
return [
    // 初期値
    // 'formGroup' => '{{label}}{{input}}',
    'formGroup' => '<div class="input-field col {{type}}{{required}}">{{input}}{{label}}</div>',
];

[type=radio]

  <p>
    <label>
      <input  type="radio" />
      <span>Red</span>
    </label>
  </p>

のように、<p>でくくってinputの後ろにtextを<span>で囲む

<?php
return [
    // 初期値
        // 'nestingLabel' => '{{hidden}}<label{{attrs}}>{{input}}{{text}}</label>',
        // 'radioWrapper' => '{{label}}',
    'nestingLabel' => '{{hidden}}<label{{attrs}}>{{input}}<span>{{text}}</span></label>',
    'radioWrapper' => '<p>{{label}}</p>',
];

※{{text}}をspanで囲む部分は、FormHelperに渡すオプションで指定することもできる。

<?php
$array = ['apple','orange','banana']; // 元の配列
$options=[];
foreach($array as $k=>$v){
    $options[] = ['text'=>'<span>'.$v.'</span>', 'value'=>$k];
}
echo $this->Form->control('fruit',['type'=>'radio', 'options'=>$options, 'escape'=>false])
<!-- 出力HTML -->
<div class="input radio">
  <div class="input-field ">
    <input type="hidden" name="fruit" value="">
    <p>
      <label for="fruit-0">
        <input type="radio" name="fruit" value="0" id="fruit-0">
        <span>apple</span>
      </label>
    </p>
    <p>
      <label for="fruit-1">
        <input type="radio" name="fruit" value="1" id="fruit-1">
        <span>orange</span>
      </label>
    </p>
    <p>
      <label for="fruit-2">
        <input type="radio" name="fruit" value="2" id="fruit-2">
        <span>banana</span>
      </label>
    </p>
    <label>Fruit</label>
  </div>
</div>

[type=range]

CSSだけなら何もしなくても良い。

上のように動かした時にバブルを表示したいなら、M.autoinit()だと効かないのでM.Range.init(エレメント)を走らせる。エレメントはノードでもjQueryObjectでもOK

M.Range.init($('input[type=range]'));

その他

タグ 検証
Select 普通に動く。optgroupは未検証
Checkbox rangeで設定したnestingLabelで動く
Pickers(date) [type=date]ではなく[type=text]にしてjsに渡すので普通に動く。MySQLの場合、"2018/11/9"みたいに読み取れるテキストで出力すればそのまま保存できる。
Switches 未検証
Chips Form使う必要がない

※Chipsは入出力と機能拡張のMaterializeとの同期が面倒になり自分で書いた為検証しない。

記事が少しでもいいなと思ったらクラップを送ってみよう!
0
+1
@divrots0の技術ブログ

よく一緒に読まれている記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう
目次をみる

技術ブログをはじめよう

Qrunch(クランチ)は、ITエンジニアリングに携わる全ての人のための技術ブログプラットフォームです。

技術ブログを開設する

Qrunchでアウトプットをはじめよう

Qrunch(クランチ)は、ITエンジニアリングに携わる全ての人のための技術ブログプラットフォームです。

Markdownで書ける

ログ機能でアウトプットを加速

デザインのカスタマイズが可能

技術ブログ開設

ここから先はアカウント(ブログ)開設が必要です

英数字4文字以上
.qrunch.io
英数字6文字以上
ログインする