kartik-v/yii2-widget-affix

A scrollspy and affixed enhanced navigation to highlight page sections (sub repo split from yii2-widgets)

Wednesday, February 7, 2018
by kartik-v
Repository
3 Watchers
11 Stars
681,723 Installations

PHP
3 Dependents
0 Suggesters
2 Forks
1 Open issues
3 Versions
9 % Grown

yii2-widget-affix

, _(*1)

Extends Yii Menu widget. This widget offers a scrollspy and affixed enhanced navigation (upto 2-levels) to highlight sections and secondary sections in each page. The affix widget can be used to generate both the:, _(*2)

Sidebar Menu: Displays the scrollspy/affix navigation menu as a sidebar, and/or
Main Body: Displays the main body sections based on the section & subsection headings and content passed.

Note: If you have the header section fixed to the top, you must add a CSS class kv-header to the header container. Similarly, for a fixed footer you must add the class kv-footer to your footer container. This will ensure a correct positioning of the affix widget on the page., _(*3)

The parameters to pass are:, _(*4)

type The affix content type. Must be either menu or body. Defaults to menu
items: The affix content items as an array. Check the affix combined usage for a detailed example.

NOTE: This extension is a sub repo split of yii2-widgets. The split has been done since 08-Nov-2014 to allow developers to install this specific widget in isolation if needed. One can also use the extension the previous way with the whole suite of yii2-widgets., _(*5)

Installation

The preferred way to install this extension is through composer. Check the composer.json for this extension's requirements and dependencies. Read this web tip /wiki on setting the minimum-stability settings for your application's composer.json., _(*6)

To install, either run, _(*7)

$ php composer.phar require kartik-v/yii2-widget-affix "*"

or add, _(*8)

"kartik-v/yii2-widget-affix": "*"

to the require section of your composer.json file., _(*9)

Latest Release

NOTE: The latest version of the module is v1.0.0 released on 08-Nov-2014. Refer the CHANGE LOG for details., _(*10)

Demo

You can refer detailed documentation and demos on usage of the extension., _(*11)

Usage

use kartik\affix\Affix;

$content = 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.';
$items = [[
    'url' => '#sec-1',
    'label' => 'Section 1',
    'icon' => 'play-circle',
    'content' => $content,
    'items' => [
        ['url' => '#sec-1-1', 'label' => 'Section 1.1', 'content' => $content],
        ['url' => '#sec-1-2', 'label' => 'Section 1.2', 'content' => $content],
        ['url' => '#sec-1-3', 'label' => 'Section 1.3', 'content' => $content],
        ['url' => '#sec-1-4', 'label' => 'Section 1.4', 'content' => $content],
        ['url' => '#sec-1-5', 'label' => 'Section 1.5', 'content' => $content],
    ],
]];

// Displays sidebar menu
echo Affix::widget([
    'items' => $items, 
    'type' => 'menu'
]);

// Displays body sections
echo Affix::widget([
    'items' => $items, 
    'type' => 'body'
]);