PHPackages                             macgyer/yii2-materializecss - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Framework](/categories/framework)
4. /
5. macgyer/yii2-materializecss

ActiveYii2-extension[Framework](/categories/framework)

macgyer/yii2-materializecss
===========================

Materialize CSS implementation for Yii2

4.1.1(3y ago)8957.3k↓41.9%28BSD-3-ClausePHPPHP ^7.4 || ^8.0

Since Mar 8Pushed 3y ago14 watchersCompare

[ Source](https://github.com/MacGyer/yii2-materializecss)[ Packagist](https://packagist.org/packages/macgyer/yii2-materializecss)[ Docs](http://macgyer.github.io/yii2-materializecss)[ RSS](/packages/macgyer-yii2-materializecss/feed)WikiDiscussions master Synced 1mo ago

READMEChangelog (10)Dependencies (2)Versions (30)Used By (0)

[![license](https://camo.githubusercontent.com/e636768cae2e2f48fb62a8ee4fc6839fc285a19eddc53547458c64e016e53e47/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f4c4943454e43452d4253442d2d332d2d436c617573652d626c75652e737667)](https://packagist.org/packages/macgyer/yii2-materializecss)[![Github Release](https://camo.githubusercontent.com/f9c943d8bffb4932f6adff25c67dc704a6e9f6d597dede985957b13948453d65/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f72656c656173652f6d6163677965722f796969322d6d6174657269616c697a656373732e737667)](https://packagist.org/packages/macgyer/yii2-materializecss)[![Packagist](https://camo.githubusercontent.com/62bce6118b00a4d3c2c75978a02f59541d62f78c2a90941719e066e1a61b50c7/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f6d6163677965722f796969322d6d6174657269616c697a656373732e737667)](https://packagist.org/packages/macgyer/yii2-materializecss)

Materialize for Yii2
====================

[](#materialize-for-yii2)

---

This is the current, actively developed 4.x branch which is implementing Materialize version 1.1 and thus breaking backwards compatibility.

[Go to 1.x version](https://github.com/MacGyer/yii2-materializecss/tree/1.x)

[Go to 2.x version](https://github.com/MacGyer/yii2-materializecss/tree/2.x)

[Go to 3.x version](https://github.com/MacGyer/yii2-materializecss/tree/3.x)

---

This package integrates the Materialize CSS framework into [Yii2](http://www.yiiframework.com/). [Materialize](https://materializecss.github.io/materialize/) is a modern responsive front-end framework based on Material Design.

Have a look at the [official documentation page](https://yii2-materializecss.pluspunkt-coding.de) to see the repo in action (v4 only).

Current Materialize version implemented: 1.2.0.

Installation
------------

[](#installation)

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

You also should reference Asset Packagist in the `repositories` section to handle NPM and Bower assets:

```
"repositories": [
    {
        "type": "composer",
        "url": "https://asset-packagist.org"
    }
]
```

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

```
"require": {
    "macgyer/yii2-materializecss": "^4.0"
},
```

Usage
-----

[](#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
];
```

### Material Icons

[](#material-icons)

To be compatible with GDPR (EU) the MaterializeFontAsset is not loaded automatically via the MaterializeAsset. The font asset requests the Material Icon font from Google servers (as stated in the Materialize docs).

If you are **not** affected by GDPR, simply load the MaterializeFontAsset in your layout or AppAsset.

Otherwise you need to self-host the Material Icon font (i. e. do not request them from Google). You could use `material-icons` () to load the font files, CSS and SCSS from NPM and include them in your build process.

### SCSS

[](#scss)

Customizing Materialize via SCSS is easy. Integrate the Materialize SCSS in your own SCSS files and build your own version. Do not use the MaterializeAsset then as it loads the pre-built CSS provided by Materialize.

Widgets
-------

[](#widgets)

The following widgets are currently available:

- ActiveField
- ActiveForm
- Alert
- Breadcrumbs
- Button
- Carousel
- ChipInput
- Collapsible
- DatePicker
- DetailView
- Dropdown
- FloatingActionButton
- GridView with ActionColumn
- Icon
- LinkPager
- MaterialBox
- Modal
- Nav
- NavBar
- Parallax
- Progress
- RangeInput
- Select
- SideNav
- Slider
- Spinner
- StaticChip
- SubmitButton
- SwitchButton
- TimePicker

Gii support
-----------

[](#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
------------

[](#known-issues)

Systems operating on normal parameters :)

Sample layout
-------------

[](#sample-layout)

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
----------

[](#change-log)

### 4.1.1 - 2023-03-25

[](#411---2023-03-25)

- update to Materialize v1.2.2
- added Slider properties `pauseOnHover` and `pauseOnFocus`

### 4.1.0 - 2022-12-10

[](#410---2022-12-10)

- update to Materialize v1.2.0

### 4.0.0 - 2022-11-27

[](#400---2022-11-27)

- implement Materialize v1.1.0 (community fork )
- PHP 8 support
- use NPM instead of Bower
- use constants to configure [Icon](https://github.com/MacGyer/yii2-materializecss/blob/master/src/widgets/Icon.php)
- **Breaking changes included**:
    - MaterializeFontAsset not loaded automatically

### 3.0.0 - 2018-11-16

[](#300---2018-11-16)

- implement Materialize v1.0.0
- **Breaking changes included**

### 2.0.0 - 2017-07-30

[](#200---2017-07-30)

- **Please note: this release contains breaking changes**
- moved [Breadcrumbs](https://github.com/MacGyer/yii2-materializecss/blob/master/src/widgets/navigation/Breadcrumbs.php), [Dropdown](https://github.com/MacGyer/yii2-materializecss/blob/master/src/widgets/navigation/Dropdown.php), [FixedActionButton](https://github.com/MacGyer/yii2-materializecss/blob/master/src/widgets/navigation/FixedActionButton.php), [Nav](https://github.com/MacGyer/yii2-materializecss/blob/master/src/widgets/navigation/Nav.php), [NavBar](https://github.com/MacGyer/yii2-materializecss/blob/master/src/widgets/navigation/NavBar.php) and [SideNav](https://github.com/MacGyer/yii2-materializecss/blob/master/src/widgets/navigation/SideNav.php) to dedicated namespace (**breaking**)
- dropped chingyawhao/materialize-clockpicker in favor of Materialize native time picker implementation (**breaking**)
- added [Collapsible](https://github.com/MacGyer/yii2-materializecss/blob/master/src/widgets/Collapsible.php)
- updated Materialize to v0.100.1

### 1.5.0 - 2017-07-03

[](#150---2017-07-03)

- added [Carousel](https://github.com/MacGyer/yii2-materializecss/blob/master/src/widgets/media/Carousel.php)
- added [MaterialBox](https://github.com/MacGyer/yii2-materializecss/blob/master/src/widgets/media/MaterialBox.php)
- added [Parallax](https://github.com/MacGyer/yii2-materializecss/blob/master/src/widgets/media/Parallax.php)
- added [Slider](https://github.com/MacGyer/yii2-materializecss/blob/master/src/widgets/media/Slider.php)
- improved sample layout

### 1.4.0 - 2017-06-05

[](#140---2017-06-05)

- added [RangeInput](https://github.com/MacGyer/yii2-materializecss/blob/master/src/widgets/form/RangeInput.php)
- updated Materialize to v0.98.2
- added some missing PHPDoc annotations

### 1.3.0 - 2017-03-02

[](#130---2017-03-02)

- added [LinkPager](https://github.com/MacGyer/yii2-materializecss/blob/master/src/widgets/grid/LinkPager.php)
- [GridView](https://github.com/MacGyer/yii2-materializecss/blob/master/src/widgets/grid/GridView.php): set [LinkPager](https://github.com/MacGyer/yii2-materializecss/blob/master/src/widgets/grid/LinkPager.php) as default pager class

### 1.2.1 - 2017-02-05

[](#121---2017-02-05)

- [Select](https://github.com/MacGyer/yii2-materializecss/blob/master/src/widgets/form/Select.php): 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

[](#120---2017-02-01)

- updated Materialize to v0.98.0
- added [Select](https://github.com/MacGyer/yii2-materializecss/blob/master/src/widgets/form/Select.php)
- [ActiveField](https://github.com/MacGyer/yii2-materializecss/blob/master/src/widgets/form/ActiveField.php): added dropDownList()
- [ActiveField](https://github.com/MacGyer/yii2-materializecss/blob/master/src/widgets/form/ActiveField.php): changed characterCounter() to work with Materialize v0.98.0
- [Modal](https://github.com/MacGyer/yii2-materializecss/blob/master/src/widgets/Modal.php): fixed modal plugin call
- [FixedActionButton](https://github.com/MacGyer/yii2-materializecss/blob/master/src/widgets/FixedActionButton.php): added toolbar support

### 1.1.0 - 2017-01-05

[](#110---2017-01-05)

- added [SideNav](https://github.com/MacGyer/yii2-materializecss/blob/master/src/widgets/Button.php)
- [Nav](https://github.com/MacGyer/yii2-materializecss/blob/master/src/widgets/Nav.php): added [SideNav](https://github.com/MacGyer/yii2-materializecss/blob/master/src/widgets/Button.php) support
- [NavBar](https://github.com/MacGyer/yii2-materializecss/blob/master/src/widgets/NavBar.php): moved mobile toggle button to [Nav](https://github.com/MacGyer/yii2-materializecss/blob/master/src/widgets/Nav.php)
- [ActiveField](https://github.com/MacGyer/yii2-materializecss/blob/master/src/widgets/form/ActiveField.php): added Materialize autocomplete support
- [ActiveField](https://github.com/MacGyer/yii2-materializecss/blob/master/src/widgets/form/ActiveField.php): added Materialize character count support
- [ActiveField](https://github.com/MacGyer/yii2-materializecss/blob/master/src/widgets/form/ActiveField.php): checkbox and radio are not enclosed by label as default

### 1.0.9 - 2016-09-01

[](#109---2016-09-01)

- added [TimePicker](https://github.com/MacGyer/yii2-materializecss/blob/master/src/widgets/form/TimePicker.php)

### 1.0.8 - 2016-08-08

[](#108---2016-08-08)

- [Button](https://github.com/MacGyer/yii2-materializecss/blob/master/src/widgets/Button.php): fixed tag rendering
- [SwitchButton](https://github.com/MacGyer/yii2-materializecss/blob/master/src/widgets/form/SwitchButton.php): fixed uncheck property
- [Alert](https://github.com/MacGyer/yii2-materializecss/blob/master/src/widgets/Alert.php): added `default` context class
- [Button](https://github.com/MacGyer/yii2-materializecss/blob/master/src/widgets/Button.php): added property `type`
- [Button](https://github.com/MacGyer/yii2-materializecss/blob/master/src/widgets/Button.php): added property `large`
- [Button](https://github.com/MacGyer/yii2-materializecss/blob/master/src/widgets/Button.php): added property `disabled`
- [Spinner](https://github.com/MacGyer/yii2-materializecss/blob/master/src/widgets/Spinner.php): added property `size`
- [Spinner](https://github.com/MacGyer/yii2-materializecss/blob/master/src/widgets/Spinner.php): added property `color`
- [SwitchButton](https://github.com/MacGyer/yii2-materializecss/blob/master/src/widgets/form/SwitchButton.php): added support for Icon/HTML labels
- added [SubmitButton](https://github.com/MacGyer/yii2-materializecss/blob/master/src/widgets/form/SubmitButton.php)

### 1.0.7 - 2016-07-27

[](#107---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

[](#106---2016-05-16)

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

### 1.0.5 - 2016-04-24

[](#105---2016-04-24)

- updated README with fixed Datepicker issue
- refactored [Breadcrumbs](https://github.com/MacGyer/yii2-materializecss/blob/master/src/widgets/Breadcrumbs.php)

### 1.0.3 - 2016-03-10

[](#103---2016-03-10)

- fixed multiple usage of [MaterializeWidgetTrait](https://github.com/MacGyer/yii2-materializecss/blob/master/src/lib/MaterializeWidgetTrait.php) producing bugs
- updated PHPDoc in [NavBar](https://github.com/MacGyer/yii2-materializecss/blob/master/src/widgets/NavBar.php)

### 1.0.2 - 2016-03-09

[](#102---2016-03-09)

- added [Spinner](https://github.com/MacGyer/yii2-materializecss/blob/master/src/widgets/Spinner.php)
- added [Progress](https://github.com/MacGyer/yii2-materializecss/blob/master/src/widgets/Progress.php)

### 1.0.1 - 2016-03-09

[](#101---2016-03-09)

- updated README
- added Packagist support

### 1.0.0 - 2016-03-09

[](#100---2016-03-09)

- Initial release

###  Health Score

45

—

FairBetter than 93% of packages

Maintenance20

Infrequent updates — may be unmaintained

Popularity45

Moderate usage in the ecosystem

Community18

Small or concentrated contributor base

Maturity79

Established project with proven stability

 Bus Factor1

Top contributor holds 98.7% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~95 days

Recently: every ~397 days

Total

28

Last Release

1150d ago

Major Versions

1.x-dev → 2.0.02017-07-30

2.x-dev → 3.0.0-RC2018-06-02

3.x-dev → 4.0.02022-11-27

PHP version history (3 changes)1.0.0PHP >=5.4.0

1.2.1PHP >=5.6.0

4.0.0PHP ^7.4 || ^8.0

### Community

Maintainers

![](https://www.gravatar.com/avatar/78f83100a0024086e9dcecb006456faedf561f296fbc0b6a86b6eb1f052e46c0?d=identicon)[macgyer](/maintainers/macgyer)

---

Top Contributors

[![MacGyer](https://avatars.githubusercontent.com/u/2939625?v=4)](https://github.com/MacGyer "MacGyer (75 commits)")[![Gaiidenn](https://avatars.githubusercontent.com/u/18189706?v=4)](https://github.com/Gaiidenn "Gaiidenn (1 commits)")

---

Tags

material-designmaterializecssyii2yii2widgetsmaterializematerial-design

### Embed Badge

![Health badge](/badges/macgyer-yii2-materializecss/health.svg)

```
[![Health](https://phpackages.com/badges/macgyer-yii2-materializecss/health.svg)](https://phpackages.com/packages/macgyer-yii2-materializecss)
```

###  Alternatives

[skeeks/cms

SkeekS CMS — control panel and tools based on php framework Yii2

13825.6k47](/packages/skeeks-cms)[kalyabin/yii2-select-google-map-location

Yii2 widget to select location at map and choose map coordinates

2821.0k](/packages/kalyabin-yii2-select-google-map-location)[skydiver/laravel-materialize-css

Add Materialize CSS Framework to Laravel

5020.0k](/packages/skydiver-laravel-materialize-css)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)