A collection of handy code snippets for the Calcite Design System components, designed to boost your productivity when building web applications with Calcite in Visual Studio Code.
Features
Quickly insert Calcite component HTML with simple prefixes
Consistent, ready-to-use markup for all major Calcite components
Works in HTML files and templates
Usage
To use Calcite Design System components in your HTML, you must first add the Calcite script to your page header. You can do this quickly by typing the clt-script snippet.
Type the prefix for a Calcite component in an HTML file and select the desired snippet from the suggestions.
Snippets List
Below is the complete list of available snippets and their prefixes:
Prefix
Description
clt-script
Add Calcite JS library script tag
clt-css
Add Calcite CSS link tag
clt-accordion
Create a calcite-accordion
clt-action
Create a calcite-action
clt-action-bar
Create a calcite-action-bar
clt-action-group
Create a calcite-action-group
clt-action-pad
Create a calcite-action-pad
clt-alert
Create a calcite-alert
clt-avatar
Create a calcite-avatar
clt-block
Create a calcite-block
clt-button
Create a calcite-button
clt-card
Create a calcite-card
clt-carousel
Create a calcite-carousel
clt-checkbox
Create a calcite-checkbox
clt-chip
Create a calcite-chip
clt-color-picker
Create a calcite-color-picker
clt-combobox
Create a calcite-combobox
clt-date-picker
Create a calcite-date-picker
clt-dialog
Create a calcite-dialog
clt-dropdown
Create a calcite-dropdown
clt-fab
Create a calcite-fab
clt-filter
Create a calcite-filter
clt-flow
Create a calcite-flow
clt-flow-item
Create a calcite-flow-item
clt-icon
Create a calcite-icon
clt-inline-editable
Create a calcite-inline-editable
clt-input
Create a calcite-input
clt-input-message
Create a calcite-input-message
clt-label
Create a calcite-label
clt-link
Create a calcite-link
clt-list
Create a calcite-list
clt-loader
Create a calcite-loader
clt-menu
Create a calcite-menu
clt-meter
Create a calcite-meter
clt-modal
Create a calcite-modal
clt-navigation
Create a calcite-navigation
clt-notice
Create a calcite-notice
clt-pagination
Create a calcite-pagination
clt-panel
Create a calcite-panel
clt-popover
Create a calcite-popover
clt-progress
Create a calcite-progress
clt-radio-button
Create a calcite-radio-button
clt-radio-button-group
Create a calcite-radio-button-group
clt-rating
Create a calcite-rating
clt-select
Create a calcite-select
clt-scrim
Create a calcite-scrim
clt-segmented-control
Create a calcite-segmented-control
clt-shell
Create a calcite-shell
clt-slider
Create a calcite-slider
clt-stepper
Create a calcite-stepper
clt-switch
Create a calcite-switch
clt-tabs
Create a calcite-tabs
clt-text-area
Create a calcite-text-area
clt-tile
Create a calcite-tile
clt-tile-select
Create a calcite-tile-select
clt-tile-select-group
Create a calcite-tile-select-group
clt-time-picker
Create a calcite-time-picker
clt-tip
Create a calcite-tip
clt-tooltip
Create a calcite-tooltip
clt-tip-manager
Create a calcite-tip-manager
clt-tree
Create a calcite-tree
clt-tree-item
Create a calcite-tree-item
Installation
Search Calcite Snippets in Extensions Tab.
Click on install.
Enjoy.
Requirements
Visual Studio Code 1.80.0 or higher
Issues & Feedback
If you find a bug or have a suggestion, please open an issue on the GitHub repository.
