README

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

Requirements

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

Installation

composer require drago-ex/component

Project files

File copying is handled automatically by 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.<package-name> in your root composer.json.

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.

<a n:href="openOffcanvas!" class="ajax" data-naja-history="off">Open Offcanvas</a>
{embed 'path/to/@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 '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

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';

naja.registerExtension(new BootstrapComponents());

Dropdown widget

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

Register the dropdown helper in your frontend entry point and import the package SCSS when you want the compact link-like menu style used by the widget:

import { BootstrapDropdowns } from 'drago-component';

naja.registerExtension(new BootstrapDropdowns());

Use the widget in Latte:

{embed 'path/to/@dropdown.latte', name: 'Menu', icon: 'fa-solid fa-bars', menu: 'end'}
	{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: optional dropdown toggle label.
icon: optional Font Awesome icon class.
menu: optional Bootstrap menu alignment suffix, for example end, lg-start, or lg-end.

The menu value is appended to the Bootstrap dropdown-menu-* class, so menu: 'end' renders dropdown-menu-end and menu: 'lg-start' renders dropdown-menu-lg-start.

The widget keeps dropdown behavior on Bootstrap. The package SCSS aligns the toggle icon and label so it behaves visually like a compact navbar link.

For custom colors, prefer Bootstrap utilities and variables on your own layout instead of overriding the dropdown widget.

The widget provides helper blocks:

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

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.

drago-ex / component

Maintainers

Package info

Statistics

Security