drago-ex/components

Bootstrap components such as modal and offcanvas.

v1.0.1 2025-04-01 09:00 UTC

Requires

• php: >=8.3 <9
• nette/application: ^3.1

Requires (Dev)

• nette/bootstrap: ^3.2
• nette/tester: ^2.5
• phpstan/phpstan-nette: ^1.2.9
• tracy/tracy: ^2.10

MIT

• Zdeněk Papučík

README

Bootstrap components such as modal and offcanvas.

Technology

• PHP 8.3 or higher
• composer
• node.js

Installation

composer require drago-ex/components

Usage

In the Control component we will use Trait Drago\Components\Components

Passing variables to the template:

$template->offcanvasId = $this->getUniqueIdComponent(self::Offcanvas);
$template->modalId = $this->getUniqueIdComponent(self::Modal);

And according to needs, we can use the implementations Drago\Components\ModalHandle and Drago\Components\OffcanvasHandle

#[Requires(ajax: true)] public function handleOpenModal(): void
{
	$this->modalComponent(self::Modal);
}


#[Requires(ajax: true)] public function handleOpenOffcanvas(): void
{
	$this->offCanvasComponent(self::Offcanvas);
}

Where do we insert the name of the snippet to override the component or can we write our own snippet handler and wrap the appropriate component in it.

#[Requires(ajax: true)] public function handleOpenModalWindow(): void
{
	$this->modalComponent();
	$this->redrawControl('...');
}

We will then use the templates of individual components and if we want to redraw multiple blocks, we need to add additional snippets.

<a n:href="openOffcanvas!" class="ajax" data-naja-history="off">Open Offcanvas</a>
{embed '@offcanvas.latte', offcanvasId: $offcanvasId}
	{block title}Title{/block}
	{block body}
		{snippet offcanvas}
			...
		{/snippet}
	{/block}
{/embed}

<a n:href="openModal!" class="ajax" data-naja-history="off">Open Modal</a>
{embed '@modal.latte', modalId: $modalId}
	{block title}Title{/block}
	{block body}
		{snippet modal}
			...
		{/snippet}
	{/block}
	{block footer}
		<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
			Close
		</button>
	{/block}
{/embed}

Next, it is necessary to import javascript to operate the component.

import "../vendor/drago-ex/components/src/Drago/assets/naja.components"

Copy the Latte templates to your project.

copy .\vendor\drago-ex\components\src\Drago\assets\latte\* destination

For demonstration, the component is used in the project: https://github.com/drago-ex/project