Guide on how to add custom components.
Each component must extend the Component
class.
A simple component that directly prints content.
use RobiNN\UiKit\Components\Component;
class ExampleComponent extends Component {
public function render(): string {
return '...';
}
}
Component with a template.
use RobiNN\UiKit\Components\Component;
class ExampleComponent extends Component {
protected string $component = '@namespace/example_component';
public function render(string $param): Component {
$this->uikit->addPath(__DIR__.'/path/to/tpls', 'namespace');
return $this->setTplData([
'param' => $param,
]);
}
}
The first parameter is the component name used for the property name and auto-generated functions.
$uikit->addComponent('example_component', ExampleComponent::class);
if (!function_exists('example_component')) {
function example_component() {
return get_ui()->example_component();
}
}
After initialization, you can use it as all components.
echo $uikit->example_component();
In template
{{ example_component() }}
If the class has public open()
and close()
methods, these functions are also created.
echo $uikit->example_component_open();
echo $uikit->example_component_close();
In template
{{ example_component_open() }}
{{ example_component_close() }}
By extending Component
class, your code has access to the $this->uikit
and these methods
Create a string from the given array of attributes.
$this->getAttributes([
'disabled' => null,
'value' => 'test',
]);
// disabled value="test"
Get the correct value from framework options.
// E.g. alert component
// 'alert' => [
// 'colors' => [
// 'default' => 'alert-primary',
// 'success' => 'alert-success',
// ...
// ],
// ],
$this->getOption('colors', 'success');
// alert-success
Thanks to
protected string $component = 'components/alert';
method automatically chooses an option from alert's config. However, it is possible to explicitly set component name.
$this->getOption('colors', 'success', 'alert');
Set template data.
The component's options are automatically transferred to the template, but these data can be modified with this method if needed. As well as can add additional data, e.g. values from parameters.
$this->setTplData([]);