macgyer/yii2-materializecss

Materialize CSS implementation for Yii2

, _(*1)

Materialize for Yii2

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

Go to 1.x version, _(*3)

Go to 2.x version, _(*4)

Go to 3.x version, _(*5)

This package integrates the Materialize CSS framework into Yii2. Materialize is a modern responsive front-end framework based on Material Design., _(*6)

Have a look at the official documentation page to see the repo in action (v4 only)., _(*7)

Current Materialize version implemented: 1.2.0., _(*8)

Installation

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

You also should reference Asset Packagist in the repositories section to handle NPM and Bower assets:, _(*10)

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

To install the package add the following to the require section of your composer.json:, _(*11)

"require": {
    "macgyer/yii2-materializecss": "^4.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:, _(*12)

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

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

or as a dependency in your app wide AppAsset.php, _(*13)

// @app/assets/AppAsset.php

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

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)., _(*14)

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

Otherwise you need to self-host the Material Icon font (i. e. do not request them from Google). You could use material-icons (https://www.npmjs.com/package/material-icons) to load the font files, CSS and SCSS from NPM and include them in your build process., _(*16)

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., _(*17)

Widgets

The following widgets are currently available:, _(*18)

• 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

If you are creating your CRUD controller and view files using Gii you can get materialized view files by integrating the adapted Gii templates., _(*19)

// @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., _(*20)

Known issues

Systems operating on normal parameters :), _(*21)

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., _(*22)

You can find the sample layout file in src/layout/main.php., _(*23)

Change log

4.1.1 - 2023-03-25

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

4.1.0 - 2022-12-10

• update to Materialize v1.2.0

4.0.0 - 2022-11-27

• implement Materialize v1.1.0 (community fork https://materializecss.github.io/materialize/)
• PHP 8 support
• use NPM instead of Bower
• use constants to configure Icon
• Breaking changes included:
  • MaterializeFontAsset not loaded automatically

3.0.0 - 2018-11-16

• implement Materialize v1.0.0
• Breaking changes included

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