Authored with Stencil.js, @anjuna/charts is exported as native standard custom elements and can be used in any UI application. These components make up the atomic and molecular layer of the Zuora Design System.
To get started with Anjuna, there are a few things to get set up.
Include the Theme
While using Bootstrap under the hood, Anjuna has no runtime dependency on global style outside the theme. Anjuna uses a runtime palette set by the consuming application, so it will always be consistent with application. The theme can be included by either adding it to the application HTML or CSS.
<!-- HTML --> <link href="//cdn.zuora.com/@email@example.com/dist/css/theme.css" rel="stylesheet">
/* CSS */ @import '~@anjuna/theme/dist/css/theme.css';
Note: the polyfill for CSS variables does not work with dynamically loaded imports. For CSS variables to work in IE, the theme needs to be part of your application's compiled style.
Include the Web Components
For vanilla apps, the best way to use the components is to include them via CDN in the header of your index.html file.
Note: The web components imports should be the LAST script tags in your index.html file
<!-- Load the components --> <script src="//cdn.zuora.com/@firstname.lastname@example.org/dist/anjuna-core.js"></script> <script src="//cdn.zuora.com/@email@example.com/dist/anjuna-charts.js"></script>