# Include Directory The `templates/include/` directory is where you store reusable template partials that can be included in other template files using the `@include()` directive. This promotes code reuse, improves maintainability, and helps organize complex components. ## Overview Include files allow you to: * Break complex templates into smaller, manageable pieces * Reuse common markup across multiple templates * Keep your main templates clean and focused * Organize related functionality into logical groups ## Directory Location ``` com.yourcompany.component/ ├── templates/ │ ├── index.html │ └── include/ # Include directory │ ├── header.html │ ├── footer.html │ ├── icon.html │ └── card.html ``` ## How It Works Include files are referenced using the `@include()` directive from any template file: ```html

@include("header")

@dropzone("content", title: "Content")

@include("footer")

``` The include filename is specified **without the `.html` extension** and is relative to the `templates/include/` directory. ## Creating Include Files Include files are standard HTML template files that can use the full [Elements Language](https://docs.realmacsoftware.com/elements-docs/elements-language/component/language) syntax: ```html ``` Include files have access to: * All component properties from `properties.json` * Data passed from `hooks.js` via `rw.setProps()` * Built-in properties like `id`, `edit`, `preview` * Parameters passed from the `@include()` call ## Passing Parameters You can pass additional parameters to includes: ```html @include("button", label: "Click Me", style: "primary") @include("button", label: "Cancel", style: "secondary") ``` ```html ``` Parameters override properties with the same name within the include's scope. ## Conditional Includes Use `@includeIf()` to conditionally include a template: ```html @includeIf(showHeader, template: "header")

@dropzone("main", title: "Main Content")

@includeIf(showFooter, template: "footer") ``` See the [`@include` directive documentation](https://docs.realmacsoftware.com/elements-docs/elements-language/component/language/include) for complete syntax details. ## Examples from Core Components ### Gallery Component The Gallery component uses 10+ include files to organize different media types and UI elements: ``` templates/include/ ├── alpine.html # Alpine.js bindings ├── closeButton.html # Lightbox close button ├── indicators.html # Gallery indicators ├── lightbox.html # Lightbox wrapper ├── lightboxMedia.html # Media in lightbox ├── mp4.html # MP4 video element ├── navButtons.html # Navigation buttons ├── thumbnail.html # Gallery thumbnail ├── vimeo.html # Vimeo embed └── youtube.html # YouTube embed ``` Usage in `templates/index.html`: ```html

@each(image in resources) @include("thumbnail") @endeach

@includeIf(includeLightbox, template: "lightbox") ``` ### Navbar Component The Navbar component organizes desktop and mobile variations: ``` templates/include/ ├── desktop_folder.html ├── desktop_item.html ├── desktop_submenu.html ├── desktop_submenu_indicator.html ├── desktop_submenu_menu.html ├── mobile_folder.html ├── mobile_item.html ├── mobile_submenu.html ├── mobile_submenu_indicator.html ├── mobile_submenu_menu.html ├── logo.html └── title.html ``` Usage pattern: ```html ``` ### Container Component The Container component uses includes for different background types: ``` templates/include/ ├── color.html # Solid color background ├── gradient.html # Gradient background ├── image.html # Image background ├── mp4.html # MP4 video background ├── overlay.html # Background overlay ├── video.html # Video wrapper ├── vimeo.html # Vimeo background └── youtube.html # YouTube background ``` Usage with conditionals: ```html

@if(backgroundType == "color") @include("color") @elseif(backgroundType == "gradient") @include("gradient") @elseif(backgroundType == "image") @include("image") @elseif(backgroundType == "video") @include("video") @endif @if(hasOverlay) @include("overlay") @endif

``` ### Accordion Component Simple icon inclusion with fallback: ```html ``` ```html @includeIf(!hasAnIcon, template: "chevron") @if(hasAnIcon) {{icon}} @endif ``` ```html ``` ## Organization Strategies ### By Feature Group related includes by feature or functionality: ``` templates/include/ ├── navigation/ │ ├── menu.html │ ├── submenu.html │ └── breadcrumb.html ├── cards/ │ ├── product-card.html │ ├── blog-card.html │ └── team-card.html └── media/ ├── image.html ├── video.html └── gallery.html ``` ### By Component Part Organize by component sections: ``` templates/include/ ├── header.html ├── body.html ├── footer.html ├── sidebar.html └── actions.html ``` ### By Variation Create variations of similar elements: ``` templates/include/ ├── button-primary.html ├── button-secondary.html ├── button-outline.html └── button-ghost.html ``` ## Best Practices ### Keep Includes Focused Each include should have a single, clear purpose: **Good:** ``` templates/include/ ├── avatar.html # Just the avatar ├── username.html # Just the username └── bio.html # Just the bio ``` **Less ideal:** ``` templates/include/ └── user-profile.html # Everything mixed together ``` ### Use Descriptive Names Choose names that clearly indicate the include's purpose: ``` ✓ product-card.html ✓ navigation-item.html ✓ social-share-buttons.html ✗ comp1.html ✗ thing.html ✗ misc.html ``` ### Pass Explicit Parameters When reusing includes with different values, pass parameters explicitly: ```html @include("card", title: item.title, image: item.thumbnail, link: item.url ) ``` This makes the template more readable and maintainable. ### Avoid Deep Nesting While includes can include other includes, avoid deep nesting chains: ```html ``` Too many levels make the template flow hard to follow. ### Document Complex Includes Add comments for includes that expect specific parameters: ```html

``` ## Include vs Inline Template Choose between includes and inline templates based on your needs: ### Use Includes When: * The template is reused across multiple files * You want to keep files organized in separate files * The template is complex and benefits from separation ### Use Inline Templates When: * The template is only used once in a single file * You want to keep related code together * The template is simple and short ```html @template("listItem")

@endtemplate

@each(item in items) @include("listItem", title: item.title) @endeach ``` See the [`@template` directive documentation](https://docs.realmacsoftware.com/elements-docs/elements-language/component/language/template) for inline templates. ## Related Documentation * [`@include` Directive](https://docs.realmacsoftware.com/elements-docs/elements-language/component/language/include) - Complete `@include` syntax * [`@includeIf` Directive](https://docs.realmacsoftware.com/elements-docs/elements-language/language/include#conditional-includes) - Conditional includes * [`@template` Directive](https://docs.realmacsoftware.com/elements-docs/elements-language/component/language/template) - Inline templates * [Elements Language](https://docs.realmacsoftware.com/elements-docs/elements-language/component/language) - Template syntax reference * [index.html](https://docs.realmacsoftware.com/elements-docs/elements-language/component/templates/index.html) - Main template file