2amigos

What is Semantic UI library?

The Semantic UI library encapsulates the Semantic UI Framework CSS components and JS plugins in terms of Yii 2 widgets and helper classes, easing the usage of that framework into your Yii 2 applications.

Installation

The preferred way to install this extension is through composer.

Either run

php composer.phar require "2amigos/yii2-semantic-ui" "*"

or add the following to the require section of your application's composer.json file:

"2amigos/yii2-semantic-ui" : "*" 

Usage example

We are in the process of building a dedicated site for this library, where you will be able to learn about all the classes that compound this library. The following are just some examples to give you an idea of its usage:

Dropdown Widget

use dosamigos\semantic\modules\Dropdown;

// Selection 
echo Dropdown::widget([
    'encodeText' => false,
    'text' => '<i class="filter icon"></i><span class="text">Filter posts</span>',
    'icon' => false,
    'displaySearchInput' => true,
    'encodeItemLabels' => false,
    'items' => [
        '<div class="header"><i class="tags icon"></i>Tag Label</div>',
        ['label' => '<div class="ui red empty circular label"></div>Important'],
        ['label' => '<div class="ui blue empty circular label"></div>Announcement']
    ],
    'options' => [
        'class' => 'floating labeled search icon button'
    ],
]
);

// Search Dropdown 
echo Dropdown::widget(
    [
        'encodeText' => false,
        'text' => '<i class="world icon"></i><span class="text">Select Language</span>',
        'icon' => false,
        'items' => [
            ['label' => 'Arabic'],
            ['label' => 'Chinese']
        ],
        'options' => [
            'class' => 'floating labeled search icon button'
        ]
    ]
);

// Search in menu 
echo Dropdown::widget(
[
    'encodeText' => false,
    'text' => '<i class="filter icon"></i><span class="text">Filter posts</span>',
    'icon' => false,
    'displaySearchInput' => true,
    'encodeItemLabels' => false,
    'items' => [
        '<div class="header"><i class="tags icon"></i>Tag Label</div>',
        ['label' => '<div class="ui red empty circular label"></div>Important'],
        ['label' => '<div class="ui blue empty circular label"></div>Announcement']
    ],
    'options' => [
        'class' => 'floating labeled search icon button'
    ],
]
);

Accordion Widget

use dosamigos\semantic\modules\Accordion;

echo Accordion::widget(
    [
        'items' => [
            [
                'label' => 'Clothing',
                'content' => 'This is the content for clothing'
            ],
            [
                'label' => 'Status',
                'active' => true,
                'content' => 'This is the content for status'
            ],
        ],
        'options' => ['class' => 'styled fluid']
    ]
);

CheckBox Widget

use dosamigos\semantic\modules\Checkbox;

// As a slider
echo Checkbox::widget(
    [
        'label' => 'Make my profile visible',
        'name' => 'terms',
        'options' => [
            'class' => 'slider'
        ]
    ]
);

// As a toggle 
Checkbox::widget(
    [
        'label' => 'Subscribe to my newsletter',
        'name' => 'public',
        'options' => [
            'class' => 'toggle'
        ]
    ]
);

Rating and Progress Widgets

use dosamigos\semantic\modules\Rating;
use dosamigos\semantic\modules\Progress;

// Rating 
echo Rating::widget(['max' => 2]);


// Progress 
Progress::widget(
    ['label' => '30% Funded', 'percent' => 30, 'options' => ['class' => 'indicating']]
);

Please, check the phpDoc of the classes for further references of its usage.