Working example applications utilizing calcite-components. Each folder within the calcite-components repository is its own mini application demonstrating integration of calcite components with other technologies and tooling.
Most frameworks provide a CLI tool to quickly start up a repo. If available, these tools are used to create the examples to ensure they are colloquial to the framework in question. After a starter project is scaffolded up, calcite-components are installed and some general steps are taken:
- Include calcite components' loader and define the custom elements
- Pull in calcite-components' global CSS file (provides theming variables, etc)
- Ensure calcite-components' assets get copied into the project (allows the
calcite-iconcomponent to work)
The calcite-components repository will change over time as new best-practices are established and framework integrations are improved.
The Angular example was built using the
npm install -g @angular/cli ng new [NAME]
The ember app used the
ember-cli package to get started:
npm install -g ember-cli ember new [NAME]
The example react app was created using the
npx create-react-app [NAME]
The example preact app was created using the
preact create utility:
npm install -g preact-cli preact create typescript [NAME]
This example also uses TypeScript, and provides additional instructions for getting calcite components to work inside a TypeScript + Preact environment.
The Vue.js example was built using the
npm install -g @vue/cli vue create [NAME]
npx degit "rollup/rollup-starter-app" [NAME]
The Webpack example was built from scratch using Webpack 4.x.