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.