Fivethree Snippets for VS Code
Visual Studio Code Extension adds TypeScript and HTML snippets for Fivethree Web Components.
All code snippets are based on and follow the Angular style guide Fivethree Web Components.
Using Snippets for Fivethree Web Components
Type part of a snippet, press enter, and the snippet unfolds.
Table of Content
Snippet Prefix
| Prefix |
Description |
f- |
Fivethree Snippets |
HTML Snippets
| Snippet |
Purpose |
f-app-bar |
<fiv-app-bar> |
f-bottom-sheet |
<fiv-bottom-sheet> |
f-bottom-sheet-content |
<fiv-bottom-sheet-content> |
f-collapsable-menu-button |
<fiv-collapsable-menu-button> add this to <ion-toolbar> in the menu |
f-expandable |
<fiv-expandable> w/ <ion-item> and <fiv-expandable-indicator> |
f-expandable-ripple-header |
<fiv-expandable> w/ <fiv-ripple> effect around the header content |
f-expandable-indicator |
<fiv-expandable-indicator> w/ custom icon attribute |
f-image-viewer |
<fiv-image-viewer> |
f-image-viewer-actions |
<fiv-image-viewer> w/ actions |
f-loading-button |
<fiv-loading-button> |
f-loading-content |
<fiv-loading-content> |
f-loading-fab |
<fiv-loading-fab> |
f-loading-progress-bar |
<fiv-loading-progress-bar> |
f-password-input |
<fiv-password-input> |
f-ripple |
<fiv-ripple> effect for any component |
f-router-item |
<fiv-router-item> works great in IonMenu w/ active state highlight of the current route |
f-step |
<fiv-step> |
f-step-full |
<fiv-step> w/ all inputs |
f-step-loop |
<fiv-step *ngFor> |
f-stepper |
<fiv-stepper> w/ <fiv-step> |
f-stepper-loop |
<fiv-stepper> w/ <fiv-step *ngFor> |
f-toolbar-search |
<fiv-toolbar-search> w/ <ion-menu-button> |
⬆ back to top
Directive Snippets
| Snippet |
Purpose |
f-center |
[fivCenter] directive to center horizontal and vertical |
f-collapse-menu |
[fivCollapseMenu] directive to collapse your menu, add this to <ion-menu> |
⬆ back to top
SCSS Snippets
| Snippet | Purpose |
| ---------------------------- | ------------------------------------------------------------ |
| f-loading-button-props | Loading Button CSS custom properties |
| f-loading-progress-bar-props | Loading Progress Bar CSS custom properties |
| f-router-item-props | Router Item CSS custom properties |
⬆ back to top
Typescript Snippets
| Snippet | Purpose |
| ---------------------------- | ------------------------------------------------------------ |
| f-loading-button-click | <fiv-loading-button> method for (fivButtonClick) |
| f-loading-content-do-refresh | <fiv-loading-content fivRefresh> output handler method |
⬆ back to top
| |
