Materialize for Yii2

This package integrates the Materialize CSS framework into Yii2. Materialize is a modern responsive front-end framework based on Material Design.

Installation

The preferred way of installation is through Composer. If you don't have Composer you can get it here: https://getcomposer.org/

To install the package add the following to the required section of your composer.json:

"require": {
    "macgyer/yii2-materializecss": "*"
},

Usage

To load the Materialize CSS files integrate the MaterializeAsset into your app. Two ways to achieve this is to register the asset in the main layout:

// @app/views/layouts/main.php

\macgyer\yii2materializecss\assets\MaterializeAsset::register($this);
// further code

or as a dependency in your app wide AppAsset.php

// @app/assets/AppAsset.php

public $depends = [
    'macgyer\yii2materializecss\assets\MaterializeAsset',
    // more dependencies
];

Widgets

The following widgets are currently available:

• ActiveField
• ActiveForm
• Alert
• Breadcrumbs
• Button
• Chip
• DatePicker
• DetailView
• Dropdown
• Fixed Action Button
• GridView with ActionColumn
• Icon
• Modal
• Nav
• NavBar
• Progress
• Spinner
• SwitchButton

These widgets are planned for development:

• Collapsible
• Collection
• Toast

Gii Support

If you are creating your CRUD controller and view files using Gii you can get materialized view files by integrating the adapted Gii templates.

// @app/config/main-local.php

$config['modules']['gii'] = [
    'class' => 'yii\gii\Module',      
    'allowedIPs' => ['127.0.0.1', '::1', '192.168.0.*', '192.168.178.20'],  
    'generators' => [
        'crud' => [
            'class' => 'yii\gii\generators\crud\Generator',
            'templates' => [ // setting materializecss templates
                'materializecss' => '@vendor/macgyer/yii2-materializecss/src/gii-templates/generators/crud/materializecss', 
            ]
        ]
    ],
];

You can copy those templates to any location you wish for further customization. Make sure you adapt the path accordingly in your config.

Known issues

Datepicker & jQuery 2.2.x

Update 2016/04/04

As of release 0.97.6 the issue mentioned below has been fixed by the Materialize team. You do not need to apply the workaround below.

For further information visit Dogfalo/materialize v0.97.6. This notice is going to be removed in a future release.

Currently there is an issue with jQuery version 2.2.x and the datepicker pickadate.js. Please check out the issues at Dogfalo/materialize#2808 (comment).

To circumvent problems with the datepicker, use jQuery version 2.1.4 until further notice. You can implement this in your asset bundle config:

// @app/config/main.php

'components' => [
    // more components
    'assetManager' => [
        'bundles' => [
            'yii\web\JqueryAsset' => [
                'sourcePath' => null,
                'js' => [
                    '//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js',
                ]
            ],
        ],
    ],
    // more components
],