Blazor Code Snippets
The Telerik UI for Blazor Visual Studio extension provides a handy feature for increased developer productivity—code snippets for fast UI component reference and configuration.
Getting the Extension
To use the Telerik UI for Blazor code snippets, install the Telerik UI for Blazor Visual Studio Extension. You can get the extension from:
- The Visual Studio Marketplace (for Visual Studio 2022 for Windows and Visual Studio 2019 for Windows).
- The Telerik UI for Blazor automated installer (for Windows and Mac).
- Your Telerik.com account (for Mac only). Download the
.mpackfile and use the "Install from file..." button on the Visual Studio Extensions dialog.
Our extention for Visual Studio for Mac will be discontinued in 2024 after Visual Studio for Mac is discontinued.
Adding a Code Snippet to a .razor Page
- Use the
tbshortcut that stands for Telerik Blazor and select a snippet from the dropdown menu. Alternatively, type the component name, and the available snippets will appear in a dropdown menu. - Use a
Tabsequence to populate the available attributes of the component.
Add a code snippet to your .razor page
Available Code Snippets
| Code Snippet | Component |
|---|---|
| tb-autocomplete | AutoComplete |
| tb-autocomplete-filterable | AutoComplete with Filtering |
| tb-barcode | Barcode |
| tb-breadcrumb | Breadcrumb |
| tb-button | Button |
| tb-button-settings | Button with Appearance Settings |
| tb-calendar | Calendar |
| tb-carousel | Carousel |
| tb-checkbox | Checkbox |
| tb-checkbox-tristate | Checkbox in Indeterminate State |
| tb-chunkprogressbar | ChunkProgressBar |
| tb-colorgradient | ColorGradient |
| tb-colorpalette | ColorPalette |
| tb-colorpicker | ColorPicker |
| tb-combobox | ComboBox |
| tb-combobox-filterable | ComboBox with Filtering |
| tb-contextmenu | ContextMenu |
| tb-dateintput | DateInput |
| tb-datepicker | DatePicker |
| tb-daterangepicker | DateRangePicker |
| tb-datetimepicker | Date-Time Picker |
| tb-dialog | Dialog |
| tb-drawer | Drawer |
| tb-dropdownlist | DropDownList |
| tb-dropdownlist-filterable | DropDownList with Filtering |
| tb-editor | Editor |
| tb-fileselect | FileSelect |
| tb-filter | Filter |
| tb-flatcolorpicker | FlatColorPicker |
| tb-form | Form |
| tb-gantt | Gantt |
| tb-gantt-editable | Gantt with Editing |
| tb-ganttcolumn | Gantt - Databound Column |
| tb-grid | Grid |
| tb-grid-editable | Grid with Editing |
| tb-gridcolumn | Grid - Databound Column |
| tb-gridcolumn-locked | Grid with Frozen Column |
| tb-gridlayout | GridLayout |
| tb-listview | ListView |
| tb-listview-editable | ListView with Editing |
| tb-loader | Loader |
| tb-loadercontainer | LoaderContainer |
| tb-maskedtextbox | Masked Textbox |
| tb-menu | Menu |
| tb-multiselect | MultiSelect |
| tb-multiselect-filterable | MultiSelect with Filtering |
| tb-numerictextbox | Numeric Textbox |
| tb-pager | Pager |
| tb-panelbar | PanelBar |
| tb-progressbar | ProgressBar |
| tb-qrcode | QRCode |
| tb-radiogroup | RadioGroup |
| tb-rangeslider | RangeSlider |
| tb-scheduler | Scheduler |
| tb-scheduler-editable | Scheduler with Editing |
| tb-slider | Slider |
| tb-splitter | Splitter |
| tb-stacklayout | StackLayout |
| tb-stepper | Stepper |
| tb-switch | Switch |
| tb-tabstrip | TabStrip |
| tb-textarea | TextArea |
| tb-textbox | Textbox |
| tb-tilelayout | TileLayout |
| tb-timepicker | Time Picker |
| tb-togglebutton | ToggleButton |
| tb-tooltip | Tooltip |
| tb-treelist | TreeList |
| tb-treeList-editable | TreeList with Editing |
| tb-treelistcolumn | TreeList - Databound Column |
| tb-treelistcolumn-locked | TreeList with Frozen Column |
| tb-treeview | TreeView |
| tb-upload | Upload |
| tb-window | Window |
| tb-wizard | Wizard |