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
Snippets Documentation
| Prefix |
Description |
s- |
Svelte Snippets |
Ruby
| Prefix |
Description |
| f-version |
fiv fastlane action for versioning |
| f-version-update |
update the version number in config.xml |
| f-version-and-build-no-update |
update the version adn build number in config.xml |
| f-inc-build |
update the version number in config.xml |
| f-bump-version |
bump current version and push to remote |
| f-transparent_statusbar |
add transparent statusbar to ios or android |
| f-ionic |
add transparent statusbar to ios or android |
| f-select-branding |
select branding key from branding folder |
| f-select-branding-w-path |
select branding key from branding folder with path to branding folder |
| f-select-brandings |
select branding keys from branding folder |
| f-select-brandings-w-path |
select branding keys from branding folder with path to branding folder |
| f-selected-branding-key-env |
selected branding key from ENV |
| f-selected-branding-path-env |
selected branding path from ENV |
| f-sign-android |
add transparent statusbar to ios or android |
Html
| Prefix |
Description |
| f-app-bar |
|
| f-bottom-sheet |
|
| f-bottom-sheet-content |
|
| f-center |
[fiv-center] directive to center horizontal and vertical |
| f-collapse-menu |
[fivCollapseMenu] directive to collapse your menu, add this to |
| f-collapsable-menu-button |
add this to in the menu |
| f-expandable |
w/ and |
| f-expandable-ripple-header |
w/ and |
| f-expandable-indicator |
|
| f-gallery |
|
| f-gallery-w-image |
|
| f-gallery-image |
|
| f-gallery-toolbar |
|
| f-icon |
|
| f-loading-button |
|
| f-loading-content |
|
| f-loading-fab |
|
| f-loading-progress-bar |
|
| f-password-input |
|
| f-ripple |
effect for any component |
| f-router-item |
works great in IonMenu w/ active state highlight of the current route |
| f-step |
|
| f-step-loop |
w/ *ngFor |
| f-step-full |
|
| f-stepper |
w/ |
| f-stepper-loop |
w/ |
| f-toolbar-search |
w/ |
Scss
| Prefix |
Description |
| 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 |
Typescript
| Prefix |
Description |
| f-loading-button-click |
method for (fivButtonClick) |
| f-loading-content-do-refresh |
output handler method |
⬆ back to top
| |
