Materialize for Yii2
This is a set of widgets based on an improved version of MAZA CSS framework -
MaterializeCSS framework for Yii2., (*1)
This modified fork https://github.com/webmaxx/yii2-materialize., (*2)
Installation
The preferred way to install this extension is through composer., (*3)
Either run, (*4)
php composer.phar require --prefer-dist wiisoft/yii2-materialize "*"
or add, (*5)
"wiisoft/yii2-materialize": "*"
to the require section of your composer.json file., (*6)
Usage
NavBar renders a navbar HTML component., (*7)
Any content enclosed between the [[begin()]] and [[end()]] calls of NavBar
is treated as the content of the navbar. You may use widgets such as [[Nav]]
or [[\yii\widgets\Menu]] to build up such content. For example,, (*8)
use wii\materialize\Nav;
use wii\materialize\NavBar;
NavBar::begin(['brandLabel' => 'NavBar Test']);
echo Nav::widget([
'items' => [
['label' => 'Home', 'url' => ['/site/index']],
['label' => 'About', 'url' => ['/site/about']],
],
]);
NavBar::end();
echo Nav::widget([
'items' => [
[
'label' => 'Home',
'url' => ['site/index'],
'linkOptions' => [...],
],
[
'label' => 'Dropdown',
'items' => [
['label' => 'Level 1 - Dropdown A', 'url' => '#'],
'<li class="divider"></li>',
'<li class="dropdown-header">Dropdown Header</li>',
['label' => 'Level 1 - Dropdown B', 'url' => '#'],
],
],
],
'options' => ['class' =>'nav-pills'], // set this to nav-tab to get tab-styled navigation
]);
You can follow any responses to customize the display mobile menu with the parameter $mobileItems using
the same parameters as for $items.
If this parameter is $ mobileytems not specified, the menu specified in the $ items., (*9)
echo Nav::widget([
'items' => [
[
'label' => 'Home',
'url' => ['site/index'],
'linkOptions' => [...],
],
[
'label' => 'Dropdown',
'items' => [
['label' => 'Level 1 - Dropdown A', 'url' => '#'],
'<li class="divider"></li>',
'<li class="dropdown-header">Dropdown Header</li>',
['label' => 'Level 1 - Dropdown B', 'url' => '#'],
],
],
],
'mobileItems'=>[
[
'label' => 'Home',
'url' => ['site/index'],
'linkOptions' => [],
],
[
'label' => 'Articles',
'url' => ['service/articles']
],
[
'label' => 'Contacts',
'url' => ['service/contacts']
]
],
'options' => ['class' =>'nav-pills'], // set this to nav-tab to get tab-styled navigation
]);
echo Badge::widget([
'label' => 'Action',
'options' => ['class' => 'new'],
]);
echo Button::widget([
'label' => 'Action',
'options' => ['class' => 'btn-large'],
]);
Slider renders a slides HTML component.
echo Slider::widget([
'items' =>[
[
'img' => "/tmp/1b.jpg",
'imgOptions' => ['alt' => 'Test', 'Title' => 'Title', 'class' => 'myClass'],
'title' => "Left Aligned Caption",
'titleOptions' =>['id' => 'id', 'class' => 'titleClass'],
'smallTitle' => "Here's our small slogan.",
'smallTitleOptions' => ['class' => 'light grey-text text-lighten-3'],
'itemOptions' => ['class' => 'center-align'],
],
[
'img' => "/tmp/2b.jpg",
'title' => "Left Aligned Caption",
'smallTitle' => "Here's our small slogan.",
'smallTitleOptions' => ['class' => 'light grey-text text-lighten-3'],
'itemOptions' => ['class' => 'left-align']
],
[
'img' => "/tmp/3b.jpg",
'title' => "Left Aligned Caption",
'smallTitle' => "Here's our small slogan.",
'smallTitleOptions' => ['class' => 'light grey-text text-lighten-3'],
'itemOptions' => ['class' => 'right-align']
],
],
'options'=>['id'=>'options'],
'slidesOptions'=>['class'=>'slidesOptions'],
Card renders a card HTML component.
echo Card::widget([
'item' => [
'img' => '/tmp/3.jpg',
'imgOptions' => ['class' => 'imgOptions', 'id' => 'imgOptions'],
'cardImgOptions' => ['class' => 'cardImgOptions', 'id' => 'cardImgOptions'],
'cardContentOptions' => ['class' => 'cardContentOptions', 'id' => 'cardContentOptions'],
'cardTitle'=>'Card Title',
'cardTitleOptions'=>['class'=>'cardTitleOptions','id'=>'cardTitleOptions'],
'cardContent' => [
[
'tag' => 'p',
'body' => 'I am a very simple card. I am good at containing small bits of information.
I am convenient because I require little markup to use effectively.'
]
],
'cardReveal' => [
[
'tag' => 'span',
'activator' => 'true',
'options' => [],
'body' => ' Card Title <i class="fa fa-times right"></i>'
],
[
'tag' => 'p',
'options' => [],
'body' => '<a href="#">This is a link</a>'
],
],
'cardAction' => [
[
'tag' => 'span',
'body' => '<a href="#">This is a link</a>'
],
[
'tag' => 'span',
'body' => '<a href="#">This is a link</a>'
],
],
],
'options' => ['class' => 'wow bounceIn']
]);
Wallogit.com
wiisoft