owk/yii2-circular-navigation

Circular navigation widget for Yii 2 Framework.

v1.0.1 2019-08-20 23:09 UTC

This package is auto-updated.

Last update: 2020-07-21 11:07:44 UTC


README

Created by Codrops

http://www.codrops.com

>Integrate or build upon it for free in your personal or commercial projects. Don't republish, redistribute or sell "as-is".

Read more here: licensing

edited by owk

Installation

The preferred way to install this extension is through composer.

Either run

php composer.phar require --prefer-dist owk/yii2-circular-navigation

or add

"owk/yii2-circular-navigation": "^1.0.0"

to the require section of your composer.json file.

Usage

Once the extension is installed, simply use it in your view by :

<?php echo owk\circularnavigation\CircularNavigation::widget([
                'cnoptions'=>[
                    'menu' =>[
                        'background_color' => '#0088cd',
                        'background_color_hover' => 'rgb(12, 135, 212)',
                        // 'openLabel' => 'Menú',
                        // 'closeLabel' => 'Cerrar',
                        // 'color' => 'white'
                    ],
                    'item' => [
                        'background_color' => '-webkit-linear-gradient(90deg, #666666 0%,#319ed8 50%,#666666 100%)',
                        // 'background_color' => '#000',
                        // 'background_color_hover' => '#0088cd'
                    ]
                ],
                'items' => [
                    
                    [
                        'url' =>'#',
                        'icon' =>'glyphicon-list-alt'
                    ],
                    [
                        'url' =>'/',
                        'icon' =>'glyphicon-home'
                    ],
                    [
                        'url' =>'#editar',
                        'icon' =>'glyphicon-pencil'
                    ],
                    // [
                    //     'url' =>'#enviar',
                    //     'icon' =>'glyphicon-send'
                    // ],
                    [
                        'url' =>'#table',
                        'icon' =>'glyphicon-duplicate'
                    ]
                    ,
                    [
                        'url' =>'#aceptar',
                        'icon' =>'glyphicon-phone'
                    ]
                ]
                ]);?>