Widget Home
Widget là các khối chức năng độc lập giúp giải quyết các nhiệm vụ khác nhau.
Các widget luôn có giao diện người dùng để chuẩn bị dữ liệu widget.
Để cấu hình widget bạn vào admin > Giao diện > widget
Sidebar
Register Widget Area
Thêm mã dưới đây vào /views/your-theme/config.php
để tạo vùng chứa cho widget
Sidebar::add('sidebar_id', 'sidebar_name');
Display
Hiển thị widget thuộc sidebar đã đăng ký
Sidebar::render('sidebar_id');
Widget
Tạo widget
Tạo file widget của bạn trong đường dẫn /views/<current active theme>/widgets/<widget name>.widget.php
. với widget phải kết thúc bằng *.widget.php
Widget definition
Các lớp widget phải kế thừa từ lớp SkillDo\Widget\Widget
.
use SkillDo\Widget\Widget;
class Widget_Demo extends Widget {
function __construct()
{
parent::__construct('Widget_Demo', 'Tên widget');
$this->configContainer(true);
$this->configClass('Widget_Demo');
$this->setTags('about');
}
public function form(): void
{
$this->tabs('generate');
$this->tabs('style');
$this->tabs('advanced');
parent::form();
}
public function widget(): void
{
}
public function cssBuilder(): string
{
return Template::minifyCss($this->cssBuild());
}
public function default(): void
{
}
}
Widget::add('Widget_Demo');
construct
Chứa một số cấu hình cho widget
configContainer
: sử dụng các trường input mặc định như màu nền widget, box container, margin, padding
$this->configContainer(true);
configClass
: thêm class custom sẽ bọc widget lại
$this->configClass('class_name');
setTags
: phân loại widget
$this->setTags('footer');
setAuthor
: tên tác giả widget mặc định là "SKDSoftware Dev Team"
$this->setAuthor('Team Team');
widget
method widget
giúp hiển thị mã html của widget, $this->options
chứa cấu hình của widget được tạo trong method form
Example:
public function widget()
{
Theme::view($this->getDir().'view', [
'name' => $this->name,
'options' => $this->options,
'header' => ThemeWidget::heading($this->name, $this->options->heading, '.js_'.$this->key.'_'.$this->id, true),
]);
}
Widget Form
Để tạo form cấu hình data cho widget bạn sử dụng method form
, form của widget gồm 2 thành phần form tab và form field
Form Tab
Form tab mặc định
Mặc định widget cung cấp 3 form mặc định là
- generate: Tab chung
- style: Tab Style
- advanced: Tab nâng cao Khi form mặc định không chứa field nào sẽ tự động ẩn đi
Thêm form tab
Để thêm một tab mới bạn sử dụng method addTab
public function form()
{
$this->addTab('tabId', 'New Tab', '<i class="fa-solid fa-wand-magic-sparkles"></i>', [
'after' => 'style' //vị trí tab
]);
}
Widget Field
Để thêm một field bạn sử dụng $this->tabs('tab_key')->fields->{Form Builder}
thực hiện như ví dụ sau
public function form()
{
//Thêm field vào tab generate
$this->tabs('generate')->adds(function (Skilldo\Widget\WidgetField $form) {
$form->color('test', ['label' => 'test label 1']);
})
//Thêm field vào tab style
$this->tabs('style')->adds(function (Skilldo\Widget\WidgetField $form) {
$form->text('test1', ['label' => 'test label 2']);
})
//Thêm field vào tab advanced
$this->tabs('advanced')->adds(function (Skilldo\Widget\WidgetField $form) {
$form->number('test2', ['label' => 'test label 3']);
})
}
Widget cssBuilder
Để tạo css từ các input cấu hình widget bạn có thể sử dụng method cssBuilder
để tạo ví dụ
public function cssBuilder()
{
$this->cssVariables('--about-left-width', '100px');
}
cssVariables: Khởi tạo các biến cho css
public function cssBuilder()
{
$this->cssStyle($class, [
'data' => $this->options->buttonStyle,
'style' => 'cssButton',
'options' => [
'desktop' => 'css',
'tablet' => 'cssTablet',
'mobile' => 'cssMobile',
'hover' => 'cssHover',
]
]);
}
cssStyle
: khởi tạo css cho một dom có class được chỉ định
- $class : class của dom cần được áp dụng css
- $args : cấu hình
data
: chứa dữ liệu từ field building
style
: function tương ứng với từng loại field
data | style |
---|---|
background | cssBackground |
textBuilding | cssText |
inputDimension | cssRadius |
inputDimension, inputDimensionResponsive | cssDimension |
boxShadow | cssBoxShadow |
border | cssBorder |
spacing | cssSpacing |
buttonBuilding | cssButton |
boxBuilding | cssBox |
colorBuilding | cssColor |
colorBuilding | cssTextColor |
options
: bạn sẽ khai báo các loại css nào sẽ áp dụng cho các trường hợp nào
- desktop: css hỗ trợ cho màng hình desktop
- tablet: css hỗ trợ cho màng hình tablet
- mobile: css hỗ trợ cho màng hình mobile
- hover: css hỗ trợ cho trường hợp hover vào dom đang xử lý
Ngoài ra bạn cũng có thể truyền thẳng css vào style bằng Clouse
$this->cssStyle('.read-more a:after', [
'style' => function ($widget) {
return 'background-color:' . $widget->options->color : '';
},
]);