Calcite Design System is comprised of reusable web components guided by design principles and standards, which together create beautiful, consistent, and user-friendly experiences. It includes a UI kit, iconography, and usage guidelines detailing best practices.
Since May there have many features and bug fixes, including new components, a responsive design initiative, component functionality, accessibility, and more. Let’s dive into the new functionality you can use in your apps.
Table is simple and flexible; for example you can construct it with or without headers, make the rows selectable, and limit the number of rows shown per page which automatically enables pagination. You can also embed other components within Table Cells, as shown below.
Meter can be used to represent an available quantity of a measurable unit, such as the amount of storage used on a hard drive. Meter can also be used to display a count or quantity anytime
max is a known value. For instance, the number of days in a year that precipitation has been recorded.
Sheet provides an ephemeral container for focused workflows and tasks with a page-blocking Scrim container. The component can be used when providing focused content, short dialogues, and can contain navigation and menu regions.
It’s use focuses the user’s attention for a task, such as navigating menus, which prevents interaction with the UI until it is closed. For additional considerations, explore Sheet’s recommendations.
Input Time Zone is an input-driven component enabling a user to select from a list of worldwide time zones. Unless configured otherwise, the user’s time zone is selected by default.
Most web apps have a requirement to flow between any screen size meanwhile maintaining a user-friendly experience because end users are accessing their apps on a range of devices. While Calcite Components are used today to create apps with a responsive design, we are working on making it even easier for developers to build their responsive apps. This initiative will span multiple releases as we enhance various components to automatically adjust their layout based on screen size.
Pagination will compress to display less page numbers to accommodate a smaller screen width.
DevSummit and UC Tech Session Recordings
2023 Developer Summit and 2023 User Conference technical session recordings are now available. Check out the presentations covering building and designing apps with Calcite in the links below.
2023 Esri Developer Summit
- Designing Apps with Calcite Design System
2023 Esri User Conference
Calcite designers and engineers hosted a live session on Tuesday October 10th to showcase Calcite’s latest features, new components and engage in a live Q&A session. Thank you for all those who attended with us live. The live event was recorded and is available for viewing.