PHPackages                             drago-ex/component - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Utility & Helpers](/categories/utility)
4. /
5. drago-ex/component

ActiveLibrary[Utility & Helpers](/categories/utility)

drago-ex/component
==================

Bootstrap components such as modal and offcanvas.

v1.0.7(4mo ago)0188↓66.7%MITLattePHP >=8.3 <9CI passing

Since Mar 26Pushed 3mo ago1 watchersCompare

[ Source](https://github.com/drago-ex/component)[ Packagist](https://packagist.org/packages/drago-ex/component)[ RSS](/packages/drago-ex-component/feed)WikiDiscussions main Synced 1mo ago

READMEChangelog (7)Dependencies (4)Versions (9)Used By (0)

Drago Component
---------------

[](#drago-component)

Bootstrap components such as modal and offcanvas.

[![License: MIT](https://camo.githubusercontent.com/fdf2982b9f5d7489dcf44570e714e3a15fce6253e0cc6b5aa61a075aac2ff71b/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f4c6963656e73652d4d49542d79656c6c6f772e737667)](https://raw.githubusercontent.com/drago-ex/component/main/license)[![PHP version](https://camo.githubusercontent.com/171a089f57dff295b7478bf4f9e5f8d8f390924d8e11448b6fceec1d5c3399be/68747470733a2f2f62616467652e667572792e696f2f70682f647261676f2d6578253246636f6d706f6e656e742e737667)](https://badge.fury.io/ph/drago-ex%2Fcomponent)[![Coding Style](https://github.com/drago-ex/component/actions/workflows/coding-style.yml/badge.svg)](https://github.com/drago-ex/component/actions/workflows/coding-style.yml)

Requirements
------------

[](#requirements)

- PHP >= 8.3
- Nette Framework
- Composer
- Bootstrap
- Naja
- Node.js

Installation
------------

[](#installation)

```
composer require drago-ex/component
```

Usage
-----

[](#usage)

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

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\Component\ModalHandle` and `Drago\Component\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.

```
Open Offcanvas
{embed 'path/to/@offcanvas.latte', offcanvasId: $offcanvasId}
	{block title}Title{/block}
	{block body}
		{snippet offcanvas}
			...
		{/snippet}
	{/block}
{/embed}

Open Modal
{embed 'path/to/@modal.latte', modalId: $modalId}
	{block title}Title{/block}
	{block body}
		{snippet modal}
			...
		{/snippet}
	{/block}
	{block footer}

			Close

	{/block}
{/embed}
```

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

```
import BootstrapComponents from 'path/to/naja.component';
```

Copy the Latte templates from assets to your project.

###  Health Score

42

—

FairBetter than 90% of packages

Maintenance78

Regular maintenance activity

Popularity14

Limited adoption so far

Community7

Small or concentrated contributor base

Maturity57

Maturing project, gaining track record

 Bus Factor1

Top contributor holds 100% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~42 days

Recently: every ~49 days

Total

8

Last Release

122d ago

### Community

Maintainers

![](https://avatars.githubusercontent.com/u/5998929?v=4)[Zdeněk Papučík](/maintainers/accgit)[@accgit](https://github.com/accgit)

---

Top Contributors

[![accgit](https://avatars.githubusercontent.com/u/5998929?v=4)](https://github.com/accgit "accgit (79 commits)")

### Embed Badge

![Health badge](/badges/drago-ex-component/health.svg)

```
[![Health](https://phpackages.com/badges/drago-ex-component/health.svg)](https://phpackages.com/packages/drago-ex-component)
```

###  Alternatives

[nette/code-checker

✅ Nette CodeChecker: A simple tool to check source code against a set of Nette coding standards.

881.7M6](/packages/nette-code-checker)[uestla/twigrid

Experimental DataGrid for Nette Framework

1712.3k2](/packages/uestla-twigrid)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)