Materialize for Yii2

This is the current, actively developed 3.x branch which will implement Materialize version 1.0 and thus breaking backwards compatibility. Please note: This branch is work in progress right now. No release has been published. Do not use in production versions until further notice.

Go to 1.x version Go to 2.x version

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

See official documentation for detailed information.

New: Have a look at the official demo page to see the repo in action.

Current Materialize version implemented: 1.0.0-beta

Installation

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

You also should install the Composer Asset Plugin to handle NPM and Bower assets:

$ composer global require "fxp/composer-asset-plugin:~1.4"

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

"require": {
    "macgyer/yii2-materializecss": "~3.0.0"
},

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
Carousel
Chip
Collapsible
DatePicker
DetailView
Dropdown
Fixed Action Button
GridView with ActionColumn
Icon
LinkPager
MaterialBox
Modal
Nav
NavBar
Parallax
Progress
RangeInput
Select
SideNav
Slider
Spinner
SubmitButton
SwitchButton
TimePicker

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

Despite the styling issues in the side navigation overlay the dependency has been updated to v0.100.1. See Issue #4046 for details.

Unfortunately the issue still exists in the latest release, but can be fixed temporarily with the following CSS styles:

#sidenav-overlay {
    z-index: 996;
}

Hopefully one of the upcoming releases of Materialize will fix the issue.

Sample layout

As of version 1.0.6 there is a sample layout file included in the package. You can use this file to get inspiration for your own layout or replace the respective views/layouts/main.php with the file provided.

You can find the sample layout file in src/layout/main.php.

Change log

2.0.0 - 2017-07-30

Please note: this release contains breaking changes
moved Breadcrumbs, Dropdown, FixedActionButton, Nav, NavBar and SideNav to dedicated namespace (breaking)
dropped chingyawhao/materialize-clockpicker in favor of Materialize native time picker implementation (breaking)
added Collapsible
updated Materialize to v0.100.1

1.5.0 - 2017-07-03

added Carousel
added MaterialBox
added Parallax
added Slider
improved sample layout

1.4.0 - 2017-06-05

added RangeInput
updated Materialize to v0.98.2
added some missing PHPDoc annotations

1.3.0 - 2017-03-02

added LinkPager
GridView: set LinkPager as default pager class

1.2.1 - 2017-02-05

Select: added multiple property
Composer dependency for Yii restricted to ~2.0.0
Composer dependency for PHP set to >= 5.6.0

1.2.0 - 2017-02-01

updated Materialize to v0.98.0
added Select
ActiveField: added dropDownList()
ActiveField: changed characterCounter() to work with Materialize v0.98.0
Modal: fixed modal plugin call
FixedActionButton: added toolbar support

1.1.0 - 2017-01-05

added SideNav
Nav: added SideNav support
NavBar: moved mobile toggle button to Nav
ActiveField: added Materialize autocomplete support
ActiveField: added Materialize character count support
ActiveField: checkbox and radio are not enclosed by label as default

1.0.9 - 2016-09-01

added TimePicker

1.0.8 - 2016-08-08

Button: fixed tag rendering
SwitchButton: fixed uncheck property
Alert: added default context class
Button: added property type
Button: added property large
Button: added property disabled
Spinner: added property size
Spinner: added property color
SwitchButton: added support for Icon/HTML labels
added SubmitButton

1.0.7 - 2016-07-27

full source documentation
fixed Materialize version to 0.97.6 to monitor 0.97.7 release before integration

1.0.6 - 2016-05-16

added sample layout
fixed line separators
removed Datepicker issue from section "Known issues"

1.0.5 - 2016-04-24

updated README with fixed Datepicker issue
refactored Breadcrumbs

1.0.3 - 2016-03-10

fixed multiple usage of MaterializeWidgetTrait producing bugs
updated PHPDoc in NavBar

1.0.2 - 2016-03-09

added Spinner
added Progress

1.0.1 - 2016-03-09

updated README
added Packagist support

1.0.0 - 2016-03-09

Initial release

dbd5 / yii2-materializecss