Include

Includes give you the power to embed external HTML files into the page.

Included files are asynchronously requested using window.fetch(). Requests are cached, so the same file can be included multiple times, but only one request will be made.

The included content will be inserted into the <p-include> element’s default slot so it can be easily accessed and styled through the light DOM.

<p-include src="https://pureui.xyz/assets/examples/include.html"></p-include>

import PInclude from 'pure-uikit/dist/react/include';

const App = () => <PInclude src="https://pureui.xyz/assets/examples/include.html" />;

Examples

Listening for Events

When an include file loads successfully, the p-load event will be emitted. You can listen for this event to add custom loading logic to your includes.

If the request fails, the p-error event will be emitted. In this case, event.detail.status will contain the resulting HTTP status code of the request, e.g. 404 (not found).

<p-include src="https://pureui.xyz/assets/examples/include.html"></p-include>

<script>
  const include = document.querySelector("p-include");

  include.addEventListener("p-load", event => {
    if (event.eventPhase === Event.AT_TARGET) {
      console.log("Success");
    }
  });

  include.addEventListener("p-error", event => {
    if (event.eventPhase === Event.AT_TARGET) {
      console.log("Error", event.detail.status);
    }
  });
</script>

Importing

If you’re using the autoloader or the traditional loader, you can ignore this section. Otherwise, feel free to use any of the following snippets to cherry pick this component.

<script type="module" src="https://cdn.jsdelivr.net/npm/pure-uikit@1.3.13/cdn/components/include/include.js"></script>

import 'https://cdn.jsdelivr.net/npm/pure-uikit@1.3.13/cdn/components/include/include.js';

import 'pure-uikit/dist/components/include/include.js';

import PInclude from 'pure-uikit/dist/react/include';

Properties

Learn more about attributes and properties.

Events

Learn more about events.