evondu/yii2-metronic

yii2-metronic components

Maintainers

Details

github.com/EvonDu/yii2-metronic

Source

Issues

Installs: 50

Dependents: 0

Suggesters: 0

Security: 0

Stars: 17

Watchers: 1

Forks: 0

Open Issues: 0

0.1.0 2018-01-27 09:46 UTC

Requires

MIT ea501b3221fa49606e4bf9a1c9b46a5805065bac

  • EvonDu <298550274.woop@qq.com>

This package is auto-updated.

Last update: 2025-03-01 00:23:24 UTC

README

这是一个基于Metronic v4.5.2的Yii2组件/小部件库。使用时需要先加载好Metronic的js和css资源。

安装

composer install evondu/yii2-metronic

使用方法

1、GrdiView

使用方法与原本YII2中的一样，其主要是修改了样式和布局，使它符合Metronic风格。

<!-- Use -->
<?php use evondu\metronic\widgets\ActiveForm;?>

<!-- GridView -->
<?= GridView::widget([
    'dataProvider' => $dataProvider,
    'filterModel' => $searchModel,
    'columns' => [
        ['class' => 'yii\grid\SerialColumn'],
        'id',
        'name',
        ['class' => 'evondu\metronic\widgets\ActionColumn'],
    ],
]); ?>

2、ActiveForm

主要在YII2基础上，增加了表单布局类型(Horizontal、Vertical、Inline)和提供更多ActiveField类型。

<!-- Use -->
<?php use evondu\metronic\widgets\ActiveForm;?>

<!-- ActiveForm -->
<?php $form = ActiveForm::begin([
    // 布局类型，参考Bootstrap：TYPE_HORIZONTAL、TYPE_VERTICAL、TYPE_INLINE
    "type"=>ActiveForm::TYPE_INLINE,
    // Separated风格：项分割线
    "separated"=>false,
    // Stripped风格：颜色相间
    "stripped"=>true,
    // Bordered风格：网格型
    "bordered"=>true,
    // 表单操作栏设置，即提交按钮等
    'buttons' => [
        Html::submit("Save",['class'=>'btn']),
        Html::button("Back",['class'=>'btn']),
    ]
]); ?>
<?php ActiveForm::end(); ?>
2.1、DatePicker

DatePicker日期输入组件：

<!-- Use -->
<?php use evondu\metronic\widgets\ActiveForm;?>

<!-- ActiveForm -->
<?php $form = ActiveForm::begin([]);?>

<!-- DatePicker-->
<?= $form->field($model,"username")->datePicker([
    // 时间格式
    "format" => "yyyy-mm-dd",
    "readonly "=>false,
    // 是否为建议样式，即不是InputGroup
    "simple"=>false,
    // 为InputGroup时的样式配置
    "buttonOptions" => [
        "icon"=>"fa fa-calendar",
        "color"=>\evondu\metronic\widgets\Button::COLOR_DEFAULT
    ]
])?>

<?php ActiveForm::end([]); ?>
2.2、Select2

Select2下拉表单组件：

<!-- Use -->
<?php use evondu\metronic\widgets\ActiveForm;?>

<!-- ActiveForm -->
<?php $form = ActiveForm::begin([]);?>

<!-- Select2 -->
<?= $form->field($model,"name")->select2(
    //下拉框的选项，支持二级
    [
        "CA"=>"California",
        "NV"=>"Nevada",
        "OR"=>"Oregon",
        "WA"=>"Washington",
        "Mountain Time Zone"=>[
            "AZ"=>"Arizona",
            "CO"=>"Colorado",
            "ID"=>"Idaho",
        ]
    ],
    //配置项
    [
        //是否多选
        "multiple" => false
    ]
)?>

<?php ActiveForm::end([]); ?>
2.3、TagsInput

TagsInput标签输入组件：

<!-- Use -->
<?php use evondu\metronic\widgets\ActiveForm;?>

<!-- ActiveForm -->
<?php $form = ActiveForm::begin([]);?>

<!-- TagsInput -->
<?= $form->field($model,"tags")->tagsInput([])?>

<?php ActiveForm::end([]); ?>
2.4、Switch

Switch滑动开关组件：

<!-- Use -->
<?php 
    use evondu\metronic\widgets\ActiveForm;
    use evondu\metronic\field\BootstrapSwitch;
?>

<!-- ActiveForm -->
<?php $form = ActiveForm::begin([]);?>

//Switch
<?= $form->field($model,"username")->bootstrapSwitch([
    // 按钮颜色设置
    "onColor"=>BootstrapSwitch::CLASS_PRIMARY,
    "offColor"=>BootstrapSwitch::CLASS_DEFAULT,
    // 设置大小
    "size"=>BootstrapSwitch::SIZE_NORMAL,
    // 是否可输入
    "readonly"=>false,
    // 按钮内容设置
    "onText"=>"ON",
    "offText"=>"OFF"
])?>

<?php ActiveForm::end([]); ?>
2.5、checkboxList

主要调整了相关样式成符合Metronic风格：

<!-- Use -->
<?php 
    use evondu\metronic\widgets\ActiveForm;
    use evondu\metronic\field\CheckboxList;
?>

<!-- ActiveForm -->
<?php $form = ActiveForm::begin([]);?>

<!-- CheckboxList -->
<?= $form->field($model,"roles")->checkboxList(
    //选项
    [
        "CA"=>"California",
        "NV"=>"Nevada",
        "OR"=>"Oregon",
    ],
    //配置
    [
        // 类型：
        // TYPE_LIST：列显示
        // TYPE_INLINE：行显示
        'type'=>CheckboxList:TYPE_LIST
    ]
)?>

<?php ActiveForm::end([]); ?>
2.5、other

用于支持其他自定义的widget作为表单组件，需要设置对应的Widget类名和其配置（配置中已隐含了models和attribute），使用例子

<?= $form->field($model, 'photo')->other('common\widgets\fileinput\ImageInput', [
    //外部widgets的配置(已经隐含了models和attribute)
    'template'=>'{input}',
    'uploadPath'=>yii\helpers\Url::to(['/helpers/file/upload-base64']),
    'uploadType'=>'base64'
]) ?>
2.6、checkboxTree

树型的CheckboxList选择：

<?= $form->field($model, 'editAreas')->checkboxTree(
    //数据选项
    [
        [ "id" => "ajson1", "parent" => "#", "text" => "Simple root node" ,"data"=>"11" ,"icon"=>"fa fa-briefcase icon-state-success"],
        [ "id" => "ajson2", "parent" => "#", "text" => "Root node 2" ,"data"=>"12"],
        [ "id" => "ajson3", "parent" => "ajson1", "text" => "Child 1" ,"data"=>"13"],
        [ "id" => "ajson4", "parent" => "ajson1", "text" => "Child 2" ,"data"=>"14"],
    ],
    //配置信息
    [
        //选填，可以自动生成
        "id"=>"tree",
        //配置input的name属性
        "checkboxName"=>'tree',
        //是否为wholerow样式
        "wholerow" => false,
        //是否关联父级子级选择，即勾选父级自动勾选所有子级
        "threeState" => true,
        //是否选择后的显示背景颜色
        "keepSelectedStyle" => true,
    ])
?>
2.7、editor

Summernote富文本编辑器：

<?= $form->field($model, 'editAreas')->edit([
    //Summernote的配置
]) ?>

3、Portlet（窗口）

窗口部件，使用前需要先导入evondu\metronic\widgets\Portlet，使用例子：

<?php Portlet::begin([
    // 窗口类型：
    // TYPE_BOXED：盒型
    // TYPE_LIGHT：线条型，默认
    "type"=>Portlet::TYPE_LIGHT,
    // 窗口颜色，盒型时生效
    "Color"=>Portlet::COLOR_BLUE
    // 标题文字颜色，线条型时生效
    "fontColor"=>Portlet::COLOR_DARK,
    "title"=>$this->title,
    // 标题旁的帮助信息，只在线条型时生效
    "helper"=>"标题帮助信息",
    "icon"=>'icon-user',
    // 12删栏中占的删栏数
    "col"=>12,
    // 标题是否加粗
    "bold"=>true,
    // 是否显示边框，只在线条型时生效
    "bordered"=>true,
    // 是否显示工具条
    "showTools"=>false,
    // 是否显示全屏按钮
    "showFullscreen"=>true,
    // 动作条按钮配置，可用配置/内容两种方式设置
    'actions'=> [
        Html::button("Edit",["class"=>"btn btn-circle btn-default"]),
        ["url"=>['infoupdate', 'id' => $model->user_id], "icon"=>'icon-pencil']
    ]
]);?>
echo 'Body portlet';
<?php Portlet::end();?>

4、Button（按钮）

按钮部件，使用前需要先导入evondu\metronic\widgets\Button，使用例子：

<?= Button::widget([
    // tag类型，支持a、submit、button(默认)
    'tag'=>Button::TAG_A,
    // tag为TAG_A时，的url地址
    'url'=>['create'],
    'text'=>'SUCCESS',
    'icon'=>'fa fa-plus',
    'color'=>Button::COLOR_GREEN,
    'size'=>Button::SIZE_NORMAL,
    // 是否加粗
    'sbold'=>true,
    // 是否使用描边样式
    'outline'=>false,
    // 是否可用
    'disabled'=>true,
    // 是否使用圆角
    'circle'=>false,
    // 是否为icon按钮
    'iconOnly'=>false,
    // 是否使用Bootstrap样式
    'bootstrap'=>false,
    // Bootstrap样式时生效，用于指定类型：info、danger、primary、warning、success
    'type'=>Button::TYPE_PRIMARY
])?>

5、Badge（徽章）

徽章部件，使用前需要先导入evondu\metronic\widgets\Badge，使用例子：

<?= Badge::widget([
    'text'=>'SUCCESS',
    // 类型：info、danger、primary、warning、success
    'class'=>Badge::TYPE_SUCCESS,
    // 是否为label型
    'label'=>false,
    // 是否使用方形
    'round'=>false
])?>

6、ProgressBar（进度条）

进度部件，使用前需要先导入evondu\metronic\widgets\ProgressBar，使用例子：

<?= ProgressBar::widget([
    // 进度值：1-100
    'value'=>20,
    // 显示样式：
    // THEME_BASIC：默认样式
    // THEME_STRIPED：条纹样式
    // TYPE_ANIMATED：带动画条纹样式
    'theme'=>ProgressBar::TYPE_ANIMATED
    // 类型：info、danger、primary、success、warning
    'class'=>ProgressBar::CLASS_SUCCESS,
    // 是否显示文字进度
    'showText'=>true
    // 是否存在下部外边距
    'marginBottom'=>true
])?>

7、Setp（步骤）

步骤部件，使用前需要先导入evondu\metronic\widgets\Step，使用例子：

<?= Step::widget([
    // Step 类型（显示样式）
    // 1、TYPE_LINE：线型，默认
    // 2、TYPE_DEFAULT、TYPE_BACKGROUND、TYPE_NO_BACKGROUND：普通型，分无背景和黑背景
    // 3、TYPE_THIN、TYPE_BACKGROUND_THIN、TYPE_NO_BACKGROUND_THIN：细条型，分无背景和黑背景
    'type'=>Step::TYPE_LINE,
    // 每个步骤的配置，Status的取值：
    // STATUS_ACTIVE：正在进行的步骤
    // STATUS_DONE：已经完成的步骤
    // STATUS_ERROR：错误的步骤
    'items'=>[
        ['title'=>'Step1','content'=>'step1','status'=>Step::STATUS_ACTIVE],
        ['title'=>'Step2','content'=>'step2','status'=>Step::STATUS_ACTIVE],
        ['title'=>'Step3','content'=>'step3']],
    // 是否使用黑色背景
    'bgDark'=>false,
    // 步骤描述配置，可忽略
    'desc'=>[
        'title'=>'Title',
        'content'=>'desc content'
    ]
])?>

8、TimeLine（时间线）

时间线部件，使用前需要先导入evondu\metronic\widgets\TimeLine，使用例子：

<?= TimeLine::widget([
    'items' => [
        [
            //项icon，当存在images时会覆盖掉icon
            'icon'=>"icon-docs",
            'image'=>"",
            'title'=>"Title",
            'time'=>"2018-18-18 11:11:11",
            'content'=>"Content",
            //颜色类型，有：TYPE_M_BLUE、TYPE_M_GREEN、TYPE_M_RED
            'type'=>TimeLine::TYPE_M_BLUE,
            //下拉按钮的设置
            'actionsOptions'=>[
                'content'=>'Actions',
                'class'=>'btn-circle blue',
                'items'=>[
                    ['content'=>'action', 'url'=>'']
                ]
            ],
        ]
    ],
    //是否使用白色背景
    'whiteBg' => 'false'
]);

9、TreeView（树）

树部件，使用前需要导入evondu\metronic\widgets\TreeView，使用例子：

<?= TreeView::widget([
    //选填，可以自动生成
    "id"=>"tree",
    //是否有checkbox
    "checkbox"=>false,
    //有checkbox时生效，配置input的name属性
    "checkboxName"=>'tree',
    //是否为wholerow样式
    "wholerow" => false,
    //是否关联父级子级选择，即勾选父级自动勾选所有子级
    "threeState" => true,
    //是否选择后的显示背景颜色
    "keepSelectedStyle" => true,
    //数据选项
    "items"=>[
        [ "id" => "ajson1", "parent" => "#", "text" => "Simple root node" ,"data"=>"11" ,"icon"=>"fa fa-briefcase icon-state-success"],
        [ "id" => "ajson2", "parent" => "#", "text" => "Root node 2" ,"data"=>"12"],
        [ "id" => "ajson3", "parent" => "ajson1", "text" => "Child 1" ,"data"=>"13"],
        [ "id" => "ajson4", "parent" => "ajson1", "text" => "Child 2" ,"data"=>"14"],
    ]
])?>

10、SummernoteEditor（富文本）

富文本，使用前需要导入evondu\metronic\widgets\SummernoteEditor，使用例子：

<?= SummernoteEditor::widget([
    //可忽略，自动生成
    'id' => $dataProvider,
    //内嵌的表单元素textarea的name属性
    'name' => $searchModel,
    //初始值
    'value' => "",
    //Summernote的配置
    'options'=>[]
]); ?>