README

这是一个基于改进的MAZA CSS框架 - MaterializeCSS框架的widget集合，适用于Yii2。

这个修改后的分支 https://github.com/webmaxx/yii2-materialize。

安装

安装此扩展的首选方式是通过 composer。

运行以下命令之一

php composer.phar require --prefer-dist wiisoft/yii2-materialize "*"

或者

"wiisoft/yii2-materialize": "*"

将以下内容添加到您的 composer.json 文件的require部分。

用法

Navbar Widget

NavBar渲染一个navbar HTML组件。

任何在[[begin()]]和[[end()]]调用之间包含的内容都被视为navbar的内容。您可以使用[[Nav]]或[[\yii\widgets\Menu]]等widget来构建此类内容。例如，

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();

具有下拉元素的Navbar Widget

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
]);

您可以使用与$items相同的参数，通过使用参数$mobileItems来自定义显示移动菜单。如果没有指定此参数，则使用$items中指定的菜单。

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
]);

Badge渲染一个materialize按钮。

echo Badge::widget([                      
    'label' => 'Action',                  
    'options' => ['class' => 'new'],      
]);                                       

Button渲染一个materialize按钮。

echo Button::widget([                      
    'label' => 'Action',                   
    'options' => ['class' => 'btn-large'], 
]);                                        

Slider渲染一个slides HTML组件。

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渲染一个card HTML组件。

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']                                                             
 ]);