Utilities
Include
Fetches an external HTML file and renders it inline. Loads eagerly by default, or lazy to defer until it scrolls into view.
Preview
Section titled “Preview”<nana-include src="/fragments/example.html"></nana-include>Installation
Section titled “Installation”npm install @nana-tec/ui-componentsImport
Section titled “Import”import "@nana-tec/ui-components/include";Basic usage
Section titled “Basic usage”<nana-include src="/fragments/example.html"></nana-include>Properties
| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
allowScripts | allow-scripts | boolean | false | Re-inject and execute any <script> tags from the fetched HTML |
lazy | lazy | boolean | false | Defer the fetch until the element scrolls into view |
mode | mode | RequestMode | 'cors' | Fetch CORS mode |
src | src | string | undefined | — | URL to fetch |
Events
| Event | Description |
|---|---|
nana-load | Fired after the content loads |
nana-error | Fired on failure (detail.status) |
Events
Section titled “Events”| Event | Type | Description |
|---|---|---|
nana-error | CustomEvent | Fired on failure (detail.status) |
nana-load | CustomEvent | Fired after the content loads |
Related components
Section titled “Related components”Storybook
Section titled “Storybook” Explore Include interactively Every state, prop, and edge case — with live controls — in Storybook.
View in Storybook