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
==================

Collection of Bootstrap components and widgets for Nette Framework.

v2.1.0(1w ago)0381↑406.7%1MITLattePHP >=8.3 <9CI passing

Since Mar 26Pushed 2w 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 today

READMEChangelog (10)Dependencies (20)Versions (22)Used By (1)

Drago Component
===============

[](#drago-component)

Bootstrap components such as modal, offcanvas, dropdown, and tabs.

[![License: MIT](https://camo.githubusercontent.com/fdf2982b9f5d7489dcf44570e714e3a15fce6253e0cc6b5aa61a075aac2ff71b/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f4c6963656e73652d4d49542d79656c6c6f772e737667)](https://github.com/drago-ex/component/blob/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
```

Project files
-------------

[](#project-files)

File copying is handled automatically by [drago-ex/project-tools](https://github.com/drago-ex/project-tools), which must be installed in your project. Without it, copy the files manually according to the `copy` section in this package's `composer.json`. To skip this package, set `"skip": true` under `extra.drago-tools.packages.` in your root `composer.json`.

Modal and offcanvas
-------------------

[](#modal-and-offcanvas)

In the `Control` component, use the `Drago\Component\Component` trait.

Passing variables to the template:

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

You can then use the `Drago\Component\ModalHandle` and `Drago\Component\OffcanvasHandle` implementations:

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

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

You can pass the snippet name that should be redrawn, or create your own signal handler and redraw the related snippet manually.

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

Use the component templates in Latte. If you need to redraw multiple blocks, add additional snippets inside the embedded template.

```
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}
		{import 'path/to/@dismiss-button.latte'}
		{include buttonDismiss, type: 'modal'}
	{/block}
{/embed}
```

JavaScript setup
----------------

[](#javascript-setup)

Since the package is installed via Composer, add the following to your `package.json` to make the `drago-component` alias available in your bundler:

```
{
  "type": "module",
  "dependencies": {
    "drago-component": "file:vendor/drago-ex/component"
  }
}
```

Then run `npm install`.

```
import BootstrapComponents from 'drago-component/bootstrap-component';
```

Dropdown widget
---------------

[](#dropdown-widget)

The dropdown widget is a small Latte wrapper for Bootstrap-like dropdown menus. It is useful for compact navigation actions, language switchers, user menus, or theme controls.

Import the JavaScript initializer and SCSS in your frontend entry point:

```
import { initAppDropdowns } from 'drago-component/dropdown';
import 'drago-component/styles/dropdown';

initAppDropdowns();
```

You can also import it from the main package entry:

```
import { initAppDropdowns } from 'drago-component';
```

Use the widget in Latte:

```
{embed 'path/to/@dropdown.latte', name: 'Menu', icon: 'fa-solid fa-bars', end: true}
	{block menu}
		{include item, name: 'Homepage', link: ':Front:Home:'}
		{include item, name: 'Administration', link: 'Admin:'}
		{include divider}
		{include item, name: 'Sign out', link: 'Sign:out'}
	{/block}
{/embed}
```

Available parameters:

- `name`: dropdown toggle label.
- `icon`: optional Font Awesome icon class.
- `class`: optional class added to the dropdown wrapper.
- `end`: aligns the dropdown menu to the right.

The widget provides helper blocks:

- `item`: renders a translated dropdown link.
- `divider`: renders a dropdown divider.

Tabs widget
-----------

[](#tabs-widget)

The tabs widget renders Bootstrap tabs from a small configuration array and keeps the content blocks in the same template. Bootstrap tab JavaScript must be available in the project.

```
{embed 'path/to/@tabs.latte',
	tabs: [
		[
			id: 'profile',
			label: 'Profile information',
			heading: 'Profile information',
			description: 'Update the name and email address used for your account.',
			block: 'profileInfo',
		],
		[
			id: 'password',
			label: 'Change password',
			heading: 'Change password',
			description: 'Use a strong password to keep your account secure.',
			block: 'changePassword',
		],
	],
	active: 'profile',
	class: 'card',
	headerClass: 'px-3 pt-3',
	contentClass: 'p-4'
}
	{block profileInfo}
		{control profile}
	{/block}

	{block changePassword}
		{control password}
	{/block}
{/embed}
```

Each tab item supports:

- `id`: unique tab identifier.
- `label`: translated tab label.
- `block`: block name rendered as tab content.
- `class`: optional class for the tab pane.
- `heading`: optional translated heading above the tab content.
- `description`: optional translated description below the heading.
- `headingClass`: optional heading class.
- `descriptionClass`: optional description class.

Widget parameters:

- `tabs`: list of tab definitions.
- `active`: active tab id; when omitted, the first tab is active.
- `class`: optional wrapper class.
- `headerClass`: optional class for the tabs header.
- `contentClass`: optional class for the tab content wrapper.

###  Health Score

48

—

FairBetter than 93% of packages

Maintenance95

Actively maintained with recent releases

Popularity16

Limited adoption so far

Community9

Small or concentrated contributor base

Maturity60

Established project with proven stability

 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 ~22 days

Recently: every ~3 days

Total

21

Last Release

13d ago

Major Versions

v1.0.8 → v2.0.02026-05-30

### 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 (106 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.

911.7M6](/packages/nette-code-checker)[tomaj/nette-api

Nette api

36273.2k8](/packages/tomaj-nette-api)[nextras/datagrid

Datagrid component for Nette Framework.

71271.6k4](/packages/nextras-datagrid)[efabrica/phpstan-latte

4512.2k](/packages/efabrica-phpstan-latte)

PHPackages © 2026

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