Calcite Components Examples

Important

Updated versions of these examples are now included in the Calcite Design System monorepo.

Working example applications utilizing Calcite Design System. Each folder within this 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:

1. Include Calcite Components' loader and define the custom elements
2. Pull in Calcite Components' global CSS file (provides theming variables, etc)
3. Ensure Calcite Components' assets get copied into the project (allows the calcite-icon component to work)

This repository will change over time as new best-practices are established and framework integrations are improved.

Troubleshooting

To troubleshoot an error or issue with the examples, please visit Esri Support, or visit Calcite's Community to ask questions, share ideas, and collaborate with other community members on Calcite Design System.

To report bugs or request enhancements, navigate to Calcite Design System's GitHub repository.

Angular

The Angular example was built using the @angular/cli package:

npm install -g @angular/cli
ng new [NAME]

Ember

The ember app used the ember-cli package to get started:

npm install -g ember-cli
ember new [NAME]

React

The example react app was created using the create-react-app utility:

npx create-react-app [NAME]

Preact

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.

Vue

The Vue.js example was built using the cli-service-global package:

npm install -g @vue/cli
vue create [NAME]

Rollup

The Rollup example was generated with rollup-starter-app:

npx degit "rollup/rollup-starter-app" [NAME]

Webpack

The Webpack example was built from scratch using Webpack 4.x.

Visual Studio IntelliSense

Calcite supports IntelliSense in Visual Studio Code. You can quickly add components and their attributes or properties in the Visual Studio Code editor, where accompanying documentation will help you along the way.

To setup IntelliSense, add the following to the .vscode/settings.json file in your project:

  "html.customData": [
    "./node_modules/@esri/calcite-components/dist/extras/vscode-data.json"
  ]

For more detailed information on IntelliSense, visit the Visual Studio Code IntelliSense documentation.

License

COPYRIGHT © 2024 Esri

All rights reserved under the copyright laws of the United States and applicable international laws, treaties, and conventions.

This material is licensed for use under the Esri Master License Agreement (MLA), and is bound by the terms of that agreement. You may redistribute and use this code without modification, provided you adhere to the terms of the MLA and include this copyright notice.

See use restrictions at http://www.esri.com/legal/pdfs/mla_e204_e300/english

For additional information, contact: Environmental Systems Research Institute, Inc. Attn: Contracts and Legal Services Department 380 New York Street Redlands, California, USA 92373 USA

email: contracts@esri.com