@xplortech/apollo-core
v2.5.0
Published
Apollo is a web component framework that uses global CSS (namespaced so that it should only style classes that start with xpl-). Under the hood, it uses Stencil to compile web components for various frameworks and Tailwind CSS for style utilities.
Readme
Apollo Core
Apollo is a web component framework that uses global CSS (namespaced so that it should only style classes that start with xpl-). Under the hood, it uses Stencil to compile web components for various frameworks and Tailwind CSS for style utilities.
Installation
Apollo Core is published as a public package on NPM.
Install:
npm install @xplortech/apollo-core@latestGetting Started
Whether you use static HTML or a server-rendered framework (in Python, PHP, etc.), you can use Apollo Web Components in your markup. In the <head> of your document, include both the CSS and JS:
<!--
NOTE: Both of the paths below assume that you serve your `node_modules` dir
along with your root directory. This is probably not the case for your app!
After you've downloaded Apollo, you can choose to serve these files from your
app's static directory.
-->
<link
rel="stylesheet"
href="./node_modules/@xplortech/apollo-core/build/style.css"
/>
<script type="module">
import "./node_modules/@xplortech/apollo-core/dist/esm/apollo-core.js";
</script>After including the CSS and JS, you can now begin using Apollo components in your app! Apollo supports rendering components by either using Web Components (custom elements) or vanilla HTML/CSS. If you opt for HTML/CSS, you will not have access to all the interactivity built into complex components, but you will have more fine-grained control over the rendering of components.
The pages for each component on the left include interactive embedded components which show the markup for both the Web Components and HTML/CSS versions. For example, for a basic button, you could use either the following Web Component or HTML/CSS display:
<xpl-button>Button Text</xpl-button>
<button class="xpl-button">Button Text</xpl-button>To pass more complex data to a component, such as objects and arrays, you'll need to use javascript. For example, if you are rendering a xpl-table component, you need to add the data separate from the component markup:
<xpl-table></xpl-table>
<script>
document.querySelector('xpl-table').data = [
[
"Row 1 Item 1",
"Row 1 Item 2"
],
[
"Row 2 Item 1",
"Row 2 Item 2"
]
];
</script>Development Environment
Apollo includes a config file that extends VS Code's language support and intellisense functionality. To enable this support in your code, add the following to your local .vscode/settings.json file:
{
...,
"html.customData": [
"./node_modules/@xplortech/apollo-core/.typings/apollo-components.html-data.json"
]
}