lameco / craft-twig-components
Installs: 76
Dependents: 0
Suggesters: 0
Security: 0
Stars: 1
Watchers: 1
Forks: 0
Open Issues: 2
Language:Twig
Type:craft-plugin
Requires
- craftcms/cms: ^5
- performing/twig-components: ^0.6.1
- twig/html-extra: ^3.13
- vlucas/phpdotenv: ^5.4.0
Requires (Dev)
- craftcms/generator: ^2.1.0
- yiisoft/yii2-shell: ^2.0.3
- dev-main
- 1.0.1
- 1.0.0
- 0.0.25
- 0.0.24
- 0.0.23
- 0.0.22
- 0.0.21
- 0.0.20
- 0.0.19
- 0.0.18
- 0.0.17
- 0.0.16
- 0.0.15
- 0.0.14
- 0.0.13
- 0.0.12
- 0.0.11
- 0.0.10
- 0.0.9
- 0.0.8
- 0.0.7
- 0.0.6
- 0.0.5
- 0.0.4
- 0.0.3
- 0.0.2
- 0.0.1
- dev-feature/v1
- dev-dependabot/composer/composer-4893e27c02
- dev-dependabot/composer/composer-49a2917c6d
- dev-dependabot/npm_and_yarn/npm_and_yarn-9411d0e182
This package is auto-updated.
Last update: 2025-08-13 13:46:12 UTC
README
- Craft CMS 5.0+
- TailwindCSS 4.0+
- AlpineJS 3.0+
- PHP 8.4+
Steps to use the plugin
- Define the themeConfig
{% set ComponentsThemeConfig = { gsapAnimations: false, ui: { breadcrumbs: { class: "", home: { html: "" }, back: { class: "", html: "" }, separator: { html: "" }, item: { class: "", current: { class: "" } } }, button: { class: "", overlay: { class: "", }, type: { [primary|primaryDark|secondary|secondaryDark|text|textDark]: { class: "", overlay: "" } } inner: { class: "" }, icon : { position: "[start|end]", class: "", html: "" } } collapse: { class: "", button: { class: "" }, title: { class: "" }, icon: { class: "", html: "", openHTML: "", closeHTML: "" } }, image: { picture: { class: "" }, img: { class: "", mobileBreakpoint: "" }, caption: { class: "" } }, modal: { class: "", overlay: { class: "" }, content: { class: "" }, title: { class: "" }, button: { class: "", html: "" } }, video: { mode: "[embed|lightbox]", embed: { class: "" }, lightbox: { class: "", button: { class: "", html: "" } }, consent: { class: "" } }, }, social: { follow: { class: "", text: "", items: [ "facebook", "linkedin", "twitter", "instagram", "pinterest", "youtube", "vimeo" ], list: { class: "", }, item: { class: "", } }, share: { class: "", text: "", items: [ "mail", "linkedin", "facebook", "twitter", "whatsapp" ], list: { class: "", }, item: { class: "", } } } sprig: { loader: { class: "", html: "" }, pagination: { class: "", neighbours: 1, item: { class: "", active: { class: "" } }, prev: { class: "", html: "" }, next: { class: "", html: "" }, ellipsis: { class: "", html: "" } } } } %}
- Add the themeConfig to the
_globals
so they are available most of the time.
If you are using Sprig for example the themeConfig will not be available in the Sprig templates. You can pass the themeConfig (or a portion of the stripped down themeConfig) to the Sprig template using the
sprig
function and passing the theme object into thetheme
attribute of a component.Be sure to
| json_encode
the themeConfig when passing it to Sprig, because Sprig only allows string, boolean, numbers or arrays.{{ sprig('path/to/template', { theme: ComponentsThemeConfig | json_encode }) }}
{% do _globals.set('lameco.components.theme', ComponentsThemeConfig) %}
- Register the assets to make sure the plugin's styles and scripts are loaded in your templates:
{% do view.registerAssetBundle( 'lameco\\crafttwigcomponents\\assetbundles\\CraftTwigComponents\\CraftTwigComponentsAsset' ) %}
- Add the Twig Components template source to SCSS.
@source "../../../vendor/lameco/craft-twig-components/**/*.twig";
FontAwesome
The Component Library uses FontAwesome for icons used in fallback logic if nothing in the themeConfig is defined.
In the fontawesome.ts
file import the pre-defined icons using:
import { twigComponentsFontAwesomeIcons } from "../../../vendor/lameco/craft-twig-components/src/assets/ts/fontAwesome"; library.add( ...twigComponentsFontAwesomeIcons, // other icons you want to add )
AlpineJS
The Component Library uses AlpineJS for the interactive components. Make sure to include AlpineJS in your project and initialize it properly. At least the following AlpineJS plugins are required:
- collapse
Sprig
The Component Library uses Sprig for dynamic components. Make sure to include Sprig in your project and initialize it properly.
Pagination
Since the pagination is a Sprig component, you need to pass the themeConfig to the Sprig template. You can do this by passing the theme
attribute to the Sprig component:
{{ sprig('path/to/pagination', { theme: ComponentsThemeConfig }) }}
Then when rendering the pagination, you can access the themeConfig in the Sprig template like this:
<x-sprig.pagination pageInfo="..." theme="{{ theme | json_encode }}"></x-sprig.pagination>