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.
npm install @xplortech/apollo-coreApollo 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.
Apollo Core is published as a public package on NPM.
Install:
``bash`
npm install @xplortech/apollo-core@latest
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
of your document, include both the CSS and JS:`html
href="./node_modules/@xplortech/apollo-core/build/style.css"
/>
`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:
jsx
Button Text `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:
html
`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
file:``json