Download the PHP package drago-ex/component without Composer
On this page you can find all versions of the php package drago-ex/component. It is possible to download/install these versions without Composer. Possible dependencies are resolved automatically.
Download drago-ex/component
More information about drago-ex/component
Files in drago-ex/component
Package component
Short Description Collection of Bootstrap components and widgets for Nette Framework.
License MIT
Informations about the package component
Drago Components
Bootstrap components such as modal, offcanvas, dropdown, and tabs.
Requirements
- PHP >= 8.3, < 9
- Nette Framework
- Composer
- Bootstrap
- Naja
- Node.js
Installation
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:
You can then implement the Drago\Component\ModalHandle and Drago\Component\OffcanvasHandle interfaces.
The optional argument of modalComponent() and offCanvasComponent() is the name of a snippet to redraw;
here it is the modal and offcanvas snippets from the templates below:
Attributes on interface methods are not inherited, so repeat #[Requires(ajax: true)] in your implementation.
You can also write your own signal handler and redraw the related snippets manually.
Use the component templates in Latte. If you need to redraw multiple blocks, add additional snippets inside the embedded template.
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:
Then run npm install.
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:
Use the widget in Latte:
Available parameters:
name: dropdown toggle label (required, translated).icon: optional Font Awesome icon class.menu: optional Bootstrap menu alignment suffix, for exampleend,lg-start, orlg-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.
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.
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.