https://github.com/fivethree-team/vscode-fivethree-snippets
🧩 Snippets for Fivetrhee Ionic UI Library and Ionic Fastlane Plugin
https://github.com/fivethree-team/vscode-fivethree-snippets
angular html ionic scss snippets typescript vscode vscode-extension
Last synced: 4 days ago
JSON representation
🧩 Snippets for Fivetrhee Ionic UI Library and Ionic Fastlane Plugin
- Host: GitHub
- URL: https://github.com/fivethree-team/vscode-fivethree-snippets
- Owner: fivethree-team
- License: mit
- Created: 2018-08-26T13:16:12.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2019-07-18T14:54:27.000Z (over 6 years ago)
- Last Synced: 2025-12-30T09:37:02.321Z (3 months ago)
- Topics: angular, html, ionic, scss, snippets, typescript, vscode, vscode-extension
- Language: Ruby
- Homepage: https://marketplace.visualstudio.com/items?itemName=fivethree.vscode-fivethree-snippets
- Size: 118 KB
- Stars: 2
- Watchers: 0
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# Fivethree Snippets for VS Code
[](https://marketplace.visualstudio.com/items?itemName=fivethree.vscode-fivethree-snippets)
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](https://github.com/fivethree-team/fivethree).
## Using Snippets for Fivethree Web Components
Type part of a snippet, press enter, and the snippet unfolds.
# Table of Content
* [Snippets Documentation](#snippets-documentation)
* [Ruby](#ruby)
* [Html](#html)
* [Scss](#scss)
* [Typescript](#typescript)
# 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](#table-of-content)**