Skip to content

Commit 382e8e4

Browse files
co0lc0derco0lc0der
committed
add TabsCardWidget
1 parent 60fcfdf commit 382e8e4

File tree

2 files changed

+272
-38
lines changed

2 files changed

+272
-38
lines changed

‎README.md

Lines changed: 79 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -43,56 +43,97 @@ to the require section of your `composer.json` file.
4343
- `string $shadow = ''` - type of loading overlay ('shadow-none', 'shadow-sm', 'shadow', 'shadow-lg')
4444
- `array $tools = []` - list of header custom tools (labels, buttons, links)
4545

46-
## How to use
46+
## TabsCardWidget
4747

48-
Use `CardWidget` to add your content in adminLTE card
48+
### Public properties, its types and default values
49+
50+
- `string $title` - title of a card
51+
- `string $color = ''` - color of a card header (Bootstrap 4 colors. 'success', 'danger' еtс.)
52+
- `bool $outline = false` - makes an outlined card
53+
- `bool $background = false` - makes a colored card, uses $color property (Bootstrap 4 colors)
54+
- `bool $gradient = false` - makes a gradient card, uses $color property (Bootstrap 4 colors)
55+
- `string $footer = ''` - content of card footer
56+
- `string $shadow = ''` - type of loading overlay ('shadow-none', 'shadow-sm', 'shadow', 'shadow-lg')
57+
- `array $tabs = []` - list of tabs (see an example below)
58+
59+
## Examples
60+
61+
### CardWidget
4962

50-
### An example for CardWidget
5163
```php
52-
<?php CardWidget::begin([
53-
'title' => 'Some title', // title of a card
54-
'color' => 'dark', // bootstrap color name 'success', 'danger' еtс.
55-
'gradient' => true, // use gradient background
56-
'expand' => true, // show maximize button in card header
57-
'footer' => 'some footer', // content of card footer
58-
'collapse' => true, // show collapse button in card header
59-
'shadow' => 'shadow-sm', // use small shadow
60-
'close' => true, // show close button in card header
61-
'tools' => [ // array with config to add custom labels, buttons or links
64+
<?php CardWidget::begin([
65+
'title' => 'Some title', // title of a card
66+
'color' => 'dark', // bootstrap color name 'success', 'danger' еtс.
67+
'gradient' => true, // use gradient background
68+
'expand' => true, // show maximize button in card header
69+
'footer' => 'some footer', // content of card footer
70+
'collapse' => true, // show collapse button in card header
71+
'shadow' => 'shadow-sm', // use small shadow
72+
'close' => true, // show close button in card header
73+
'tools' => [ // array with config to add custom labels, buttons or links
74+
[
75+
'label',
76+
'new',
6277
[
63-
'label',
64-
'new',
65-
[
66-
'class' => 'badge badge-primary',
67-
'data-toggle' => 'tooltip',
68-
'title' => 'New',
69-
],
78+
'class' => 'badge badge-primary',
79+
'data-toggle' => 'tooltip',
80+
'title' => 'New',
7081
],
82+
],
83+
[
84+
'link',
85+
'<i class="fas fa-pencil-alt" aria-hidden="true"></i>',
86+
['update', 'id' => 1],
7187
[
72-
'link',
73-
'<i class="fas fa-pencil-alt" aria-hidden="true"></i>',
74-
['update', 'id' => 1],
75-
[
76-
'title' => 'Update it',
77-
],
88+
'title' => 'Update it',
7889
],
79-
[
80-
'button',
81-
'<i class="fas fa-cog"></i>',
82-
[
83-
'class' => 'btn btn-tool',
84-
'title' => 'some tooltip',
85-
],
86-
]
8790
],
88-
]);
89-
?>
91+
[
92+
'button',
93+
'<i class="fas fa-cog"></i>',
94+
[
95+
'class' => 'btn btn-tool',
96+
'title' => 'some tooltip',
97+
],
98+
]
99+
],
100+
]);
101+
?>
90102

91-
<?php echo 'some content'; ?>
103+
<?= 'some content'; ?>
92104

93-
<?php CardWidget::end(); ?>
105+
<?php CardWidget::end(); ?>
94106
```
95107

96108
### Rendered card
97109

98110
![Rendered card](https://code-notes.ru/card_example.png "Rendered card")
111+
112+
### TabsCardWidget
113+
114+
```php
115+
<?= TabsCardWidget::widget([
116+
'title' => 'Tabs example',
117+
'footer' => 'some footer',
118+
'tabs' => [
119+
[
120+
'title' => 'Tab1',
121+
'id' => 'tab_1',
122+
'content' => 'A wonderful serenity has taken possession of my entire soul,
123+
like these sweet mornings of spring which I enjoy with my whole heart.',
124+
'active' => true,
125+
],
126+
[
127+
'title' => 'Tab2',
128+
'id' => 'tab_2',
129+
'content' => 'The European languages are members of the same family. Their separate existence is a myth.
130+
For science, music, sport, etc, Europe uses the same vocabulary.',
131+
]
132+
]
133+
]);
134+
?>
135+
```
136+
137+
### Rendered TabsCard
138+
139+
![Rendered TabsCard](https://code-notes.ru/tabscard_example.png "Rendered TabsCard")

‎src/TabsCardWidget.php

Lines changed: 193 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,193 @@
1+
<?php
2+
namespace co0lc0der\Lte3Widgets;
3+
4+
use yii\bootstrap\Html;
5+
use yii\web\View;
6+
7+
/**
8+
* Class TabsCardWidget
9+
* @package co0lc0der\Lte3Widgets
10+
*/
11+
class TabsCardWidget extends \yii\base\Widget
12+
{
13+
/**
14+
* title of a card
15+
* @var string
16+
*/
17+
public string $title;
18+
19+
/**
20+
* color of a card header (Bootstrap 4 colors. 'success', 'danger' еtс.)
21+
* @var string
22+
*/
23+
public string $color = '';
24+
25+
/**
26+
* makes an outlined card
27+
* @var bool
28+
*/
29+
public bool $outline = false;
30+
31+
/**
32+
* makes a colored card, uses $color property (Bootstrap 4 colors)
33+
* @var bool
34+
*/
35+
public bool $background = false;
36+
37+
/**
38+
* makes a gradient card, uses $color property (Bootstrap 4 colors)
39+
* @var bool
40+
*/
41+
public bool $gradient = false;
42+
43+
/**
44+
* content of card footer
45+
* @var string
46+
*/
47+
public string $footer = '';
48+
49+
/**
50+
* type of loading overlay
51+
* ('shadow-none', 'shadow-sm', 'shadow', 'shadow-lg')
52+
* @var string
53+
*/
54+
public string $shadow = '';
55+
56+
/**
57+
* list of tabs
58+
* [
59+
* [
60+
* 'title' => 'Tab1',
61+
* 'id' => 'tab_1',
62+
* 'content' => 'A wonderful serenity has taken possession of my entire soul,
63+
* like these sweet mornings of spring which I enjoy with my whole heart.',
64+
* 'active' => true,
65+
* ],
66+
* [
67+
* 'title' => 'Tab2',
68+
* 'id' => 'tab_2',
69+
* 'content' => 'The European languages are members of the same family. Their separate existence is a myth.
70+
* For science, music, sport, etc, Europe uses the same vocabulary.',
71+
* ]
72+
* ]
73+
* @var array
74+
*/
75+
public array $tabs = [];
76+
77+
/**
78+
* @return void
79+
*/
80+
public function init()
81+
{
82+
parent::init();
83+
84+
ob_start();
85+
}
86+
87+
/**
88+
* @return string
89+
*/
90+
public function run(): string
91+
{
92+
$content = ob_get_clean();
93+
$html = Html::beginTag('div', ['class' => $this->getCardClass()/*, 'data-widget' => 'card-widget'*/]);
94+
95+
$html .= Html::beginTag('div', ['class' => $this->getCardHeaderClass()]);
96+
$html .= $this->getCardTitle();
97+
$html .= $this->getCardTabs();
98+
$html .= Html::endTag('div'); // the end of a card header
99+
100+
$html .= $this->getCardBody();
101+
$html .= $this->getCardFooter();
102+
103+
$html .= Html::endTag('div'); // the end of a card
104+
105+
return $html;
106+
}
107+
108+
/**
109+
* @return string
110+
*/
111+
private function getCardTabs(): string
112+
{
113+
$html = '';
114+
115+
foreach ($this->tabs as $tab) {
116+
$class = (array_key_exists('active', $tab) && $tab['active']) ? 'nav-link active' : 'nav-link';
117+
$link = Html::a($tab['title'] ?? '', "#{$tab['id']}" ?? '#', ['class' => $class, 'data-toggle' => 'tab']);
118+
$html .= Html::tag('li', $link, ['class' => 'nav-item']);
119+
}
120+
121+
return (!empty($html)) ? Html::tag('ul', $html, ['class' => 'nav nav-pills ml-auto p-2']) : '';
122+
}
123+
124+
/**
125+
* @return string
126+
*/
127+
private function getCardTitle(): string
128+
{
129+
$html = '';
130+
131+
if (!empty($this->title)) {
132+
$class = (!empty($this->tabs)) ? 'card-title p-3' : 'card-title';
133+
$html = Html::tag('h3', $this->title, ['class' => $class]);
134+
}
135+
136+
return $html;
137+
}
138+
139+
/**
140+
* @return string
141+
*/
142+
private function getCardBody(): string
143+
{
144+
$html = Html::beginTag('div', ['class' => 'tab-content']);
145+
146+
foreach ($this->tabs as $tab) {
147+
$class = (array_key_exists('active', $tab) && $tab['active']) ? 'tab-pane active' : 'tab-pane';
148+
$html .= Html::tag('div', $tab['content'] ?? '', ['class' => $class, 'id' => $tab['id'] ?? '']);
149+
}
150+
151+
$html .= Html::endTag('div');
152+
153+
return Html::tag('div', $html, ['class' => 'card-body']);
154+
}
155+
156+
/**
157+
* @return string
158+
*/
159+
private function getCardFooter(): string
160+
{
161+
return (!empty($this->footer)) ? Html::tag('div', $this->footer, ['class' => 'card-footer']) : '';
162+
}
163+
164+
/**
165+
* @return string
166+
*/
167+
private function getCardClass(): string
168+
{
169+
$class = "card";
170+
171+
$class .= ($this->color && !$this->outline && !$this->background && !$this->gradient) ? " card-{$this->color}" : '';
172+
$class .= ($this->outline && $this->color) ? ' card-outline' : '';
173+
$class .= ($this->background && $this->color) ? " bg-{$this->color}" : '';
174+
$class .= ($this->gradient && $this->color) ? " bg-gradient-{$this->color}" : '';
175+
$class .= ($this->shadow) ? " {$this->shadow}" : '';
176+
177+
return $class;
178+
}
179+
180+
/**
181+
* @return string
182+
*/
183+
private function getCardHeaderClass(): string
184+
{
185+
$class = 'card-header';
186+
187+
if (!empty($this->tabs)) {
188+
$class .= ' d-flex p-0';
189+
}
190+
191+
return $class;
192+
}
193+
}

0 commit comments

Comments
 (0)