# Fivethree Snippets for VS Code [![Visual Studio Marketplace](https://vsmarketplacebadge.apphb.com/version-short/fivethree.vscode-fivethree-snippets.svg?style=flat-square)](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. ### Overview * [Snippet Prefix](https://github.com/fivethree-team/vscode-fivethree-snippets#snippet-prefix) * [HTML Snippets](https://github.com/fivethree-team/vscode-fivethree-snippets#html-snippets) * [Directive Snippets](https://github.com/fivethree-team/vscode-fivethree-snippets#directive-snippets) * [SCSS Snippets](https://github.com/fivethree-team/vscode-fivethree-snippets#scss-snippets) * [Typescript Snippets](https://github.com/fivethree-team/vscode-fivethree-snippets#typescript-snippets) ### Snippet Prefix | Prefix | Description | | ------- | ----------| | `f-` | Fivethree Snippets | ### HTML Snippets | Snippet | Purpose | | ---------------------------- | ------------------------------------------------------------ | | `f-app-bar` | `` | | `f-bottom-sheet` | `` | | `f-bottom-sheet-content` | `` | | `f-collapsable-menu-button` | `` add this to in the menu | | `f-expandable` | `` w/ `` and `` | | `f-expandable-ripple-header` | `` w/ `` effect around the header content | | `f-expandable-indicator` | `` w/ custom icon attribute | | `f-loading-button` | `` | | `f-loading-fab` | `` | | `f-password` | `` | | `f-ripple` | `` effect for any component | | `f-router-item` | `` works greate in IonMenu | | `f-toolbar-search` | `` w/ `` | **[⬆ back to top](#overview)** ### 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 `` | **[⬆ back to top](#overview)** ### SCSS Snippets | Snippet | Purpose | | ---------------------------- | ------------------------------------------------------------ | **[⬆ back to top](#overview)** ### Typescript Snippets | Snippet | Purpose | | ---------------------------- | ------------------------------------------------------------ | | `f-loading-button-click` | `` method for (fivButtonClick) | **[⬆ back to top](#overview)**