├── images ├── icon.png └── mz-example.jpg ├── renovate.json ├── .github ├── FUNDING.yml └── workflows │ └── release.yml ├── SECURITY.md ├── LICENSE ├── CHANGELOG.md ├── package.json ├── README.md └── snippets └── snippets.json /images/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lnginyard/materialize-snippets-vscode/HEAD/images/icon.png -------------------------------------------------------------------------------- /images/mz-example.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lnginyard/materialize-snippets-vscode/HEAD/images/mz-example.jpg -------------------------------------------------------------------------------- /renovate.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://docs.renovatebot.com/renovate-schema.json", 3 | "extends": [ 4 | "config:recommended" 5 | ] 6 | } 7 | -------------------------------------------------------------------------------- /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | # these are supported funding model platforms 2 | 3 | github: lnginyard 4 | patreon: lnginyard 5 | open_collective: lnginyard 6 | ko_fi: lnginyard 7 | -------------------------------------------------------------------------------- /SECURITY.md: -------------------------------------------------------------------------------- 1 | # Security Policy 2 | 3 | ## Reporting a Vulnerability 4 | 5 | If you discover a security vulnerability in this project, please do the following: 6 | 7 | 1. **Do not open an issue or pull request for the vulnerability.** 8 | 2. Email [Lorenzo Ginyard](lnginyard@gmail.com) with a detailed description of the vulnerability. 9 | 3. We will acknowledge receipt of your report within 2 business days and will strive to resolve the issue as quickly as possible. 10 | 11 | ## Supported Versions 12 | 13 | | Version | Supported | 14 | | ------- | ------------------ | 15 | | v.1.5.0 | :white_check_mark: | 16 | 17 | ## Security Updates 18 | 19 | We will issue security updates as necessary. Please ensure you are using the latest version of this repository. 20 | 21 | ## Disclosure Policy 22 | 23 | We request responsible disclosure to protect the users of this project. Please give us time to address the issue before disclosing it publicly. 24 | 25 | --- 26 | 27 | Thank you for helping make this project secure! 28 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | # MIT License 2 | 3 | Copyright (c) 2022 Lorenzo Ginyard 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /.github/workflows/release.yml: -------------------------------------------------------------------------------- 1 | name: Release VS Code Extension 2 | 3 | on: 4 | push: 5 | tags: 6 | - 'v*.*.*' 7 | 8 | jobs: 9 | release: 10 | runs-on: ubuntu-latest 11 | steps: 12 | - name: Checkout code 13 | uses: actions/checkout@v4 14 | 15 | - name: Set up Node.js 16 | uses: actions/setup-node@v4 17 | with: 18 | node-version: '22' 19 | 20 | - name: Install vsce 21 | run: npm install -g @vscode/vsce 22 | 23 | - name: Install dependencies 24 | run: npm install 25 | 26 | - name: Package extension 27 | run: vsce package 28 | 29 | - name: Publish to VS Code Marketplace 30 | env: 31 | VSCE_PAT: ${{ secrets.VSCE_PAT }} 32 | run: | 33 | if [ -z "$VSCE_PAT" ]; then 34 | echo "VSCE_PAT secret is not set. Please add it in your repository settings under Settings > Secrets and variables > Actions."; 35 | exit 1; 36 | fi 37 | vsce publish --pat $VSCE_PAT 38 | 39 | - name: Upload VSIX artifact 40 | uses: actions/upload-artifact@v4 41 | with: 42 | name: materialize-snippets-vsix 43 | path: '*.vsix' 44 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Change Log 2 | 3 | ## 1.5.0 - (1 July 2025) 4 | - Major update: Added modern Materialize snippets for responsive grid, cards, modals, sidenav, forms, chips, tooltips, collapsibles, dark mode toggle, React/TypeScript button, and dashboard starter layout. 5 | - Improved accessibility and framework support (TypeScript, React, etc). 6 | - Updated documentation and metadata. Thank you [Lorenzo Ginyard](https://github.com/lnginyard) 7 | 8 | ## 1.4.4 - (15 Aug 2018) 9 | - Support for blade files when Laravel Blade Snippets extension installed (.blade.php). Thank you [Amer Sawan](https://github.com/amersaw) for adding this support. 10 | 11 | ## 1.4.3 - (22 Feb 2018) 12 | - Support added for .rb .erb and php files. Thanks [Giancarlo Rocha](https://github.com/giancarlopro) for the request 13 | 14 | ## 1.3.3 - (22 Feb 2018) 15 | - Solve some errors 16 | 17 | ## 1.2.2 - (29 Sep 2017) 18 | - Updated the link CDN for CSS, JS file to 0.100.2 19 | 20 | ## 1.1.2 - (03 May 2017) 21 | - Removed escape characters that insert a line break in the snippets 22 | 23 | ## 1.1.1 - (29 April 2017) 24 | - Updated the link CDN for CSS, JS file to 0.98.2 and jQuery files to 3.2.1 25 | - Updated structure HTML template snippets cdn and local 26 | - Added New Snippet: FAB to Toolbar (mz-btn:fab-toolbar) 27 | - Added New Snippet: Swipeable Tabs (mz-tabs:swipeable) 28 | - Added New Snippet: Card with small Floating Action Button (mz-card:fab-small) 29 | - Added New Snippet: Card with large Floating Action Button (mz-card:fab-large) 30 | - Added New Snippet in javascript component: Feature Discovery (mz-featurediscovery:tap-target) 31 | - It rewrote the structure of snippets for better semantics in the work area (see table of contents) 32 | - Bugs Fixed 33 | 34 | ## Version 1.0.0 - (24 December 2016) 35 | 36 | - Initial release 37 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "materialize-snippets", 3 | "displayName": "Materialize Snippets", 4 | "description": "A set of Materialize CSS Snippets for Visual Studio Code.", 5 | "icon": "images/icon.png", 6 | "version": "1.5.0", 7 | "publisher": "lorenzoginyard", 8 | "license": "MIT", 9 | "bugs": { 10 | "url": "https://github.com/lnginyard/materialize-snippets-vscode/issues" 11 | }, 12 | "homepage": "https://github.com/lnginyard/materialize-snippets-vscode/blob/master/README.md", 13 | "repository": { 14 | "type": "git", 15 | "url": "https://github.com/lnginyard/materialize-snippets-vscode.git" 16 | }, 17 | "engines": { 18 | "vscode": "^1.5.0" 19 | }, 20 | "galleryBanner": { 21 | "color": "#ee6e73", 22 | "theme": "dark" 23 | }, 24 | "categories": [ 25 | "Snippets" 26 | ], 27 | "keywords": [ 28 | "materialize", 29 | "html", 30 | "css", 31 | "snippets", 32 | "typescript", 33 | "react", 34 | "dashboard", 35 | "modern" 36 | ], 37 | "contributes": { 38 | "snippets": [ 39 | { 40 | "language": "html", 41 | "path": "./snippets/snippets.json" 42 | }, 43 | { 44 | "language": "ruby", 45 | "path": "./snippets/snippets.json" 46 | }, 47 | { 48 | "language": "php", 49 | "path": "./snippets/snippets.json" 50 | }, 51 | { 52 | "language": "blade", 53 | "path": "./snippets/snippets.json" 54 | }, 55 | { 56 | "language": "typescript", 57 | "path": "./snippets/snippets.json" 58 | }, 59 | { 60 | "language": "typescriptreact", 61 | "path": "./snippets/snippets.json" 62 | }, 63 | { 64 | "language": "javascript", 65 | "path": "./snippets/snippets.json" 66 | }, 67 | { 68 | "language": "javascriptreact", 69 | "path": "./snippets/snippets.json" 70 | } 71 | ] 72 | } 73 | } 74 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Materialize CSS Snippets for Visual Studio Code 2 | 3 | Modern, accessible, and framework-friendly Materialize CSS snippets for Visual Studio Code. 4 | 5 | --- 6 | 7 | > **Created by Lenin Peña leninalbertolp & Maintained by Lorenzo Ginyard** 8 | 9 | --- 10 | 11 | A set of Materialize CSS Snippets for Visual Studio Code, ordered semantically following the structure of the documentation officer. 12 | 13 | ## How to install 14 | 15 | 1. In VScode type `F1` or `Ctrl-Shift-P` (Windows and Linux) or `Cmd-Shift-P` (MacOS). Type install extension and press enter. 16 | 2. In the search box, type **materialize snippets** and select it. 17 | 3. In the next window with the details of the plugin click on install button, that's it. 18 | 4. Reload or restart VScode for the changes to take effect. 19 | 20 | ## How to use 21 | 22 | ![example-use](images/mz-example.jpg) 23 | 24 | Snippets are arranged according to the structure of the official documentation of Materialize css, only type **mz-** and the component that you want to use. Example: **mz-card** This will show you all available for the card component snippets. 25 | Remember to put the word **mz-** and then the component that you want to call, **card, btn, table, navbar, sidenav** etc... 26 | 27 | ## Table of Contents 28 | 29 | ## Template 30 | 31 | | Snippet | Snippet Content | Description | 32 | |---------|-----------------|-------------| 33 | | mz-template: | cnd | Basic html structure using cdn files | 34 | | mz-template: | local | Basic html structure using local files | 35 | | mz-template: | grid | Basic grid structure | 36 | 37 | ## CSS 38 | 39 | ### mediacss 40 | 41 | | Snippet | Snippet Content | Description | 42 | |---------|-----------------|-------------| 43 | | mz-mediacss: | img-circular | Circular Image | 44 | | mz-mediacss: | img-responsive | Responsive Image | 45 | | mz-mediacss: | video-embeds | Embeds video | 46 | | mz-mediacss: | video-responsive | Responsive Video | 47 | 48 | ### table 49 | 50 | | Snippet | Snippet Content | Description | 51 | |---------|-----------------|-------------| 52 | | mz-table: | bordered | Bordered Table | 53 | | mz-table: | centered | Centered Table | 54 | | mz-table: | default | Default Table | 55 | | mz-table: | highlight | Highlight Table | 56 | | mz-table: | responsive | Responsive Table | 57 | | mz-table: | striped | Striped Table | 58 | 59 | ### typography 60 | 61 | | Snippet | Snippet Content | Description | 62 | |---------|-----------------|-------------| 63 | | mz-typography: | blockquote | Blockquote | 64 | | mz-typography: | flow-text | Responsive Text | 65 | 66 | ## Components 67 | 68 | ### badge 69 | 70 | | Snippet | Snippet Content | Description | 71 | |---------|-----------------|-------------| 72 | | mz-badge: | default | Default Badge | 73 | | mz-badge: | new | New Badge | 74 | 75 | ### breadcrumb 76 | 77 | | Snippet | Snippet Content | Description | 78 | |---------|-----------------|-------------| 79 | | mz-breadcrumb: | breadcrumb | Breadcrumb| 80 | 81 | ### buttons 82 | 83 | | Snippet | Snippet Content | Description | 84 | |---------|-----------------|-------------| 85 | | mz-btn: | default | Default Button| 86 | | mz-btn: | disabled | Disabled Button| 87 | | mz-btn: | fab-ct-h | Fixed action button click to toggle horizontal| 88 | | mz-btn: | fab-ct-v | Fixed action button click to toggle vertical| 89 | | mz-btn: | fab-h | Fixed action button horizontal| 90 | | mz-btn: | fab-toolbar | Fixed action button toolbar| 91 | | mz-btn: | fab-v | Fixed action button vertical| 92 | | mz-btn: | flat | Button Flat| 93 | | mz-btn: | flat-disabled | Button flat disabled | 94 | | mz-btn: | floating | Button Floating| 95 | | mz-btn: | floating-disabled | Button Floating Disabled| 96 | | mz-btn: | icon-left | Button with icon to the left | 97 | | mz-btn: | icon-right | Button with icon to the right| 98 | | mz-btn: | large | Large Button| 99 | | mz-btn: | large-disabled | Large Button Diasbled| 100 | | mz-btn: | large-icon-left | Large button with icon on the left| 101 | | mz-btn: | large-icon-right | Large button with icon on the right| 102 | | mz-btn: | submit | Submit Button| 103 | | mz-btn: | fab-toolbar | Fixed action button toolbar| 104 | 105 | ### card 106 | 107 | | Snippet | Snippet Content | Description | 108 | |---------|-----------------|-------------| 109 | | mz-card: | basic | Basic Card| 110 | | mz-card: | fab-large| Card with large Floating Action Button| 111 | | mz-card: | fab-small| Card with small Floating Action Button| 112 | | mz-card: | panel | Panel Card| 113 | | mz-card: | horizontal | Horinzontal Card| 114 | | mz-card: | image | Image Card| 115 | | mz-card: | image-lg | Image Card Large| 116 | | mz-card: | image-md | Image Card Medium| 117 | | mz-card: | image-sm | Image Card Small| 118 | | mz-card: | rao-default | Card reveal action option default| 119 | | mz-card: | rao-lg | Card reveal action option large| 120 | | mz-card: | rao-md | Card reveal action option medium| 121 | | mz-card: | rao-sm | Card reveal action option small| 122 | | mz-card: | reveal-default | Card reveal default| 123 | | mz-card: | reveal-lg | Card reveal large| 124 | | mz-card: | reveal-md | Card reveal medium| 125 | | mz-card: | reveal-sm | Card reveal small| 126 | 127 | ### chips 128 | 129 | | Snippet | Snippet Content | Description | 130 | |---------|-----------------|-------------| 131 | | mz-chips: | contact | Chip Contacts| 132 | | mz-chips: | tags | Chip Tags| 133 | | mz-chips: | tags-close | Chip tag with icon close| 134 | 135 | ## We have new additions in v1.5.0 (July 2025) 136 | 137 | This release brings a major update with new, modern snippets and improved support for today's modern developers: 138 | 139 | - Responsive grid layouts 140 | - Cards with images and actions 141 | - Modals (with initialization JS) 142 | - Side nav (with initialization JS) 143 | - Accessible forms with validation 144 | - Chips and tooltips 145 | - Collapsible elements 146 | - Dark mode toggle 147 | - React/TypeScript Materialize button component 148 | - Dashboard starter layout 149 | 150 | ### Usage 151 | 152 | Type `mz-` followed by the component or feature you want (e.g., `mz-grid`, `mz-card`, `mz-modal`, `mz-btn:react-ts`). 153 | 154 | ### New Snippets Table 155 | 156 | | Snippet | Description | 157 | |---------|-------------| 158 | | mz-grid:responsive | Responsive Materialize grid layout | 159 | | mz-card:image-action | Card with image and action button | 160 | | mz-modal:basic | Modal with initialization script | 161 | | mz-sidenav:init | Side nav with initialization script | 162 | | mz-form:validated | Accessible form with validation | 163 | | mz-chips:basic | Chips input | 164 | | mz-tooltip:basic | Tooltip with initialization script | 165 | | mz-collapsible:basic | Collapsible element with initialization script | 166 | | mz-darkmode:toggle | Dark mode toggle | 167 | | mz-btn:react-ts | React/TypeScript Materialize button | 168 | | mz-dashboard:starter | Dashboard starter layout | 169 | -------------------------------------------------------------------------------- /snippets/snippets.json: -------------------------------------------------------------------------------- 1 | { 2 | "mz-badge:default": { 3 | "prefix": "mz-badge:default", 4 | "body": "8", 5 | "description": "Default badge", 6 | "scope": "text.html" 7 | }, 8 | "mz-badge:new": { 9 | "prefix": "mz-badge:new", 10 | "body": "4", 11 | "description": "New badge", 12 | "scope": "text.html" 13 | }, 14 | "mz-breadcrumb:breadcrumb": { 15 | "prefix": "mz-breadcrumb:breadcrumb", 16 | "body": "", 17 | "description": "Breadcrumb", 18 | "scope": "text.html" 19 | }, 20 | "mz-btn:default": { 21 | "prefix": "mz-btn:default", 22 | "body": "Button", 23 | "description": "Default button", 24 | "scope": "text.html" 25 | }, 26 | "mz-btn:disabled": { 27 | "prefix": "mz-btn:disabled", 28 | "body": "button", 29 | "description": "Button disabled", 30 | "scope": "text.html" 31 | }, 32 | "mz-btn:fab-ct-h": { 33 | "prefix": "mz-btn:fab-ct-h", 34 | "body": "
\r\n\tadd\r\n\t\r\n
", 35 | "description": "Fixed action button click to toggle horizontal", 36 | "scope": "text.html" 37 | }, 38 | "mz-btn:fab-ct-v": { 39 | "prefix": "mz-btn:fab-ct-v", 40 | "body": "
\r\n\tadd\r\n\t\r\n
", 41 | "description": "Fixed action button click to toggle vertical", 42 | "scope": "text.html" 43 | }, 44 | "mz-btn:fab-h": { 45 | "prefix": "mz-btn:fab-h", 46 | "body": "
\r\n\tadd\r\n\t\r\n
", 47 | "description": "Fixed action button horizontal", 48 | "scope": "text.html" 49 | }, 50 | "mz-btn:fab-toolbar": { 51 | "prefix": "mz-btn:fab-toolbar", 52 | "body": "
\r\n \r\n mode_edit\r\n \r\n \r\n
", 53 | "description": "Fixed action button toolbar", 54 | "scope": "text.html" 55 | }, 56 | "mz-btn:fab-v": { 57 | "prefix": "mz-btn:fab-v", 58 | "body": "
\r\n\tadd\r\n\t\r\n
", 59 | "description": "Fixed action button vertical", 60 | "scope": "text.html" 61 | }, 62 | "mz-btn:flat-disabled": { 63 | "prefix": "mz-btn:flat-disabled", 64 | "body": "button", 65 | "description": "Button flat disabled", 66 | "scope": "text.html" 67 | }, 68 | "mz-btn:flat": { 69 | "prefix": "mz-btn:flat", 70 | "body": "button", 71 | "description": "Button flat", 72 | "scope": "text.html" 73 | }, 74 | "mz-btn:floating": { 75 | "prefix": "mz-btn:floating", 76 | "body": "add", 77 | "description": "Button floating", 78 | "scope": "text.html" 79 | }, 80 | "mz-btn:floating-disabled": { 81 | "prefix": "mz-btn:floating-disabled", 82 | "body": "add", 83 | "description": "Button floating disabled", 84 | "scope": "text.html" 85 | }, 86 | "mz-btn:icon-left": { 87 | "prefix": "mz-btn:icon-left", 88 | "body": "cloudButton", 89 | "description": "Button with icon to the left", 90 | "scope": "text.html" 91 | }, 92 | "mz-btn:icon-right": { 93 | "prefix": "mz-btn:icon-right", 94 | "body": "cloudButton", 95 | "description": "Button with icon to the right", 96 | "scope": "text.html" 97 | }, 98 | "mz-btn:large-disabled": { 99 | "prefix": "mz-btn:large-disabled", 100 | "body": "button", 101 | "description": "Large button disabled", 102 | "scope": "text.html" 103 | }, 104 | "mz-btn:large-icon-left": { 105 | "prefix": "mz-btn:large-icon-left", 106 | "body": "cloudButton", 107 | "description": "Large button with icon on the left", 108 | "scope": "text.html" 109 | }, 110 | "mz-btn:large-icon-right": { 111 | "prefix": "mz-btn:large-icon-right", 112 | "body": "cloudButton", 113 | "description": "Large button with icon on the right", 114 | "scope": "text.html" 115 | }, 116 | "mz-btn:large": { 117 | "prefix": "mz-btn:large", 118 | "body": "Button", 119 | "description": "Large button", 120 | "scope": "text.html" 121 | }, 122 | "mz-btn:submit": { 123 | "prefix": "mz-btn:submit", 124 | "body": "", 125 | "description": "Submit button", 126 | "scope": "text.html" 127 | }, 128 | "mz-card:basic": { 129 | "prefix": "mz-card:basic", 130 | "body": "
\r\n\t
\r\n\t\t\r\n\t\t

I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.

\r\n\t
\r\n\t
\r\n\t\tThis is a link\r\n\t\tThis is a link\r\n\t
\r\n
", 131 | "description": "Basic card", 132 | "scope": "text.html" 133 | }, 134 | "mz-card:fab-large": { 135 | "prefix": "mz-card:fab-large", 136 | "body": "
\r\n
\r\n \r\n add\r\n
\r\n
\r\n Card Title\r\n

I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.

\r\n
\r\n
", 137 | "description": "Card with large Floating Action Button", 138 | "scope": "text.html" 139 | }, 140 | "mz-card:fab-small": { 141 | "prefix": "mz-card:fab-small", 142 | "body": "
\r\n
\r\n \r\n Card Title\r\n add\r\n
\r\n
\r\n

I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.

\r\n
\r\n
", 143 | "description": "Card with small Floating Action Button", 144 | "scope": "text.html" 145 | }, 146 | "mz-card:horizontal": { 147 | "prefix": "mz-card:horizontal", 148 | "body": "
\r\n
\r\n \r\n
\r\n
\r\n
\r\n

I am a very simple card. I am good at containing small bits of information.

\r\n
\r\n
\r\n This is a link\r\n
\r\n
\r\n
", 149 | "description": "Horizontal card", 150 | "scope": "text.html" 151 | }, 152 | "mz-card:image-lg": { 153 | "prefix": "mz-card:image-lg", 154 | "body": "
\r\n\t
\r\n\t\t\"\"/\r\n\t\t\r\n\t
\r\n\t
\r\n\t\t

I am a very simple card. I am good at containing small bits of information.I am convenient because I require little markup to use effectively.

\r\n\t
\r\n\t
\r\n\t\tThis is a link\r\n\t
\r\n
", 155 | "description": "Image card large", 156 | "scope": "text.html" 157 | }, 158 | "mz-card:image-md": { 159 | "prefix": "mz-card:image-md", 160 | "body": "
\r\n\t
\r\n\t\t\"\"/\r\n\t\t\r\n\t
\r\n\t
\r\n\t\t

I am a very simple card. I am good at containing small bits of information.I am convenient because I require little markup to use effectively.

\r\n\t
\r\n\t
\r\n\t\tThis is a link\r\n\t
\r\n
", 161 | "description": "Image card medium", 162 | "scope": "text.html" 163 | }, 164 | "mz-card:image-sm": { 165 | "prefix": "mz-card:image-sm", 166 | "body": "
\r\n\t
\r\n\t\t\"\"/\r\n\t\t\r\n\t
\r\n\t
\r\n\t\t

I am a very simple card. I am good at containing small bits of information.I am convenient because I require little markup to use effectively.

\r\n\t
\r\n\t
\r\n\t\tThis is a link\r\n\t
\r\n
", 167 | "description": "Image card small", 168 | "scope": "text.html" 169 | }, 170 | "mz-card:image": { 171 | "prefix": "mz-card:image", 172 | "body": "
\r\n\t
\r\n\t\t\"\"/\r\n\t\t\r\n\t
\r\n\t
\r\n\t\t

I am a very simple card. I am good at containing small bits of information.I am convenient because I require little markup to use effectively.

\r\n\t
\r\n\t
\r\n\t\tThis is a link\r\n\t
\r\n
", 173 | "description": "Image card", 174 | "scope": "text.html" 175 | }, 176 | "mz-card:panel": { 177 | "prefix": "mz-card:panel", 178 | "body": "
\r\n\tI am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively. I am similar to what is called a panel in other frameworks.\r\n
", 179 | "description": "Panel card", 180 | "scope": "text.html" 181 | }, 182 | "mz-card:rao-lg": { 183 | "prefix": "mz-card:rao-lg", 184 | "body": "
\r\n\t
\r\n\t\t\"\"\r\n\t
\r\n\t
\r\n\t\tCard Titlemore_vert\r\n\t\t

This is a link

\r\n\t
\r\n\t
\r\n\t\tThis is a link\r\n\t\tThis is a link\r\n\t
\r\n\t
\r\n\t\tCard Titleclose\r\n\t\t

Here is some more information about this product that is only revealed once clicked on.

\r\n\t
\r\n
", 185 | "description": "Card reveal action option large", 186 | "scope": "text.html" 187 | }, 188 | "mz-card:rao-md": { 189 | "prefix": "mz-card:rao-md", 190 | "body": "
\r\n\t
\r\n\t\t\"\"\r\n\t
\r\n\t
\r\n\t\tCard Titlemore_vert\r\n\t\t

This is a link

\r\n\t
\r\n\t
\r\n\t\tThis is a link\r\n\t\tThis is a link\r\n\t
\r\n\t
\r\n\t\tCard Titleclose\r\n\t\t

Here is some more information about this product that is only revealed once clicked on.

\r\n\t
\r\n
", 191 | "description": "Card reveal action option medium", 192 | "scope": "text.html" 193 | }, 194 | "mz-card:rao-sm": { 195 | "prefix": "mz-card:rao-sm", 196 | "body": "
\r\n\t
\r\n\t\t\"\"\r\n\t
\r\n\t
\r\n\t\tCard Titlemore_vert\r\n\t\t

This is a link

\r\n\t
\r\n\t
\r\n\t\tThis is a link\r\n\t\tThis is a link\r\n\t
\r\n\t
\r\n\t\tCard Titleclose\r\n\t\t

Here is some more information about this product that is only revealed once clicked on.

\r\n\t
\r\n
", 197 | "description": "Card reveal action option small", 198 | "scope": "text.html" 199 | }, 200 | "mz-card:rao-default": { 201 | "prefix": "mz-card:rao-default", 202 | "body": "
\r\n\t
\r\n\t\t\"\"\r\n\t
\r\n\t
\r\n\t\tCard Titlemore_vert\r\n\t\t

This is a link

\r\n\t
\r\n\t
\r\n\t\tThis is a link\r\n\t\tThis is a link\r\n\t
\r\n\t
\r\n\t\tCard Titleclose\r\n\t\t

Here is some more information about this product that is only revealed once clicked on.

\r\n\t
\r\n
", 203 | "description": "Card reveal action option default", 204 | "scope": "text.html" 205 | }, 206 | "mz-card:reveal-lg": { 207 | "prefix": "mz-card:reveal-lg", 208 | "body": "
\r\n\t
\r\n\t\t\"\"\r\n\t
\r\n\t
\r\n\t\tCard Titlemore_vert\r\n\t\t

This is a link

\r\n\t
\r\n\t
\r\n\t\tCard Titleclose\r\n\t\t

Here is some more information about this product that is only revealed once clicked on.

\r\n\t
\r\n
", 209 | "description": "Card reveal large", 210 | "scope": "text.html" 211 | }, 212 | "mz-card:reveal-md": { 213 | "prefix": "mz-card:reveal-md", 214 | "body": "
\r\n\t
\r\n\t\t\"\"\r\n\t
\r\n\t
\r\n\t\tCard Titlemore_vert\r\n\t\t

This is a link

\r\n\t
\r\n\t
\r\n\t\tCard Titleclose\r\n\t\t

Here is some more information about this product that is only revealed once clicked on.

\r\n\t
\r\n
", 215 | "description": "Card reveal medium", 216 | "scope": "text.html" 217 | }, 218 | "mz-card:reveal-sm": { 219 | "prefix": "mz-card:reveal-sm", 220 | "body": "
\r\n\t
\r\n\t\t\"\"\r\n\t
\r\n\t
\r\n\t\tCard Titlemore_vert\r\n\t\t

This is a link

\r\n\t
\r\n\t
\r\n\t\tCard Titleclose\r\n\t\t

Here is some more information about this product that is only revealed once clicked on.

\r\n\t
\r\n
", 221 | "description": "Card reveal small", 222 | "scope": "text.html" 223 | }, 224 | "mz-card:reveal-default": { 225 | "prefix": "mz-card:reveal-default", 226 | "body": "
\r\n\t
\r\n\t\t\"\"\r\n\t
\r\n\t
\r\n\t\tCard Titlemore_vert\r\n\t\t

This is a link

\r\n\t
\r\n\t
\r\n\t\tCard Titleclose\r\n\t\t

Here is some more information about this product that is only revealed once clicked on.

\r\n\t
\r\n
", 227 | "description": "Card reveal default", 228 | "scope": "text.html" 229 | }, 230 | "mz-chips:contact": { 231 | "prefix": "mz-chips:contact", 232 | "body": "
\r\n\t\"\"/\r\n\tyour name\r\n
", 233 | "description": "Chip contact", 234 | "scope": "text.html" 235 | }, 236 | "mz-chips:tag-close": { 237 | "prefix": "mz-chips:tag-close", 238 | "body": "
\r\n\tTag\r\n\tclose\r\n
", 239 | "description": "Chip tag with icon close", 240 | "scope": "text.html" 241 | }, 242 | "mz-chips:tag": { 243 | "prefix": "mz-chips:tag", 244 | "body": "
\r\n\tTag\r\n
", 245 | "description": "Chip tag", 246 | "scope": "text.html" 247 | }, 248 | "mz-collections:avatar": { 249 | "prefix": "mz-collections:avatar", 250 | "body": "", 251 | "description": "Avatar collection", 252 | "scope": "text.html" 253 | }, 254 | "mz-collections:basic": { 255 | "prefix": "mz-collections:basic", 256 | "body": "", 257 | "description": "Basic collection", 258 | "scope": "text.html" 259 | }, 260 | "mz-collections:dismissable-content": { 261 | "prefix": "mz-collections:dismissable-content", 262 | "body": "", 263 | "description": "Dismissable content collection", 264 | "scope": "text.html" 265 | }, 266 | "mz-collections:headers": { 267 | "prefix": "mz-collections:headers", 268 | "body": "", 269 | "description": "Headers collection", 270 | "scope": "text.html" 271 | }, 272 | "mz-collections:link-active": { 273 | "prefix": "mz-collections:link-active", 274 | "body": "
\r\n\tAlvin\r\n\tAlvin\r\n\tAlvin\r\n
", 275 | "description": "Link active collection", 276 | "scope": "text.html" 277 | }, 278 | "mz-collections:link": { 279 | "prefix": "mz-collections:link", 280 | "body": "
\r\n\tAlvin\r\n\tAlvin\r\n\tAlvin\r\n
", 281 | "description": "Link collection", 282 | "scope": "text.html" 283 | }, 284 | "mz-collections:secondary-content": { 285 | "prefix": "mz-collections:secondary-content", 286 | "body": "", 287 | "description": "Secondary content collection", 288 | "scope": "text.html" 289 | }, 290 | "mz-footer:default": { 291 | "prefix": "mz-footer:default", 292 | "body": "", 293 | "description": "Footer default", 294 | "scope": "text.html" 295 | }, 296 | "mz-forms:contac": { 297 | "prefix": "mz-forms:contac", 298 | "body": "
\r\n
\r\n \r\n \r\n
\r\n
\r\n \r\n \r\n
\r\n
\r\n \r\n \r\n
\r\n
\r\n \r\n \r\n
\r\n
", 299 | "description": "Contac form", 300 | "scope": "text.html" 301 | }, 302 | "mz-icons:default": { 303 | "prefix": "mz-icons:default", 304 | "body": "add", 305 | "description": "Default icon", 306 | "scope": "text.html" 307 | }, 308 | "mz-icons:lg-icon": { 309 | "prefix": "mz-icons:lg-icon", 310 | "body": "add", 311 | "description": "Large icon", 312 | "scope": "text.html" 313 | }, 314 | "mz-icons:md-icon": { 315 | "prefix": "mz-icons:md-icon", 316 | "body": "add", 317 | "description": "Medium icon", 318 | "scope": "text.html" 319 | }, 320 | "mz-icons:sm-icon": { 321 | "prefix": "mz-icons:sm-icon", 322 | "body": "add", 323 | "description": "Small icon", 324 | "scope": "text.html" 325 | }, 326 | "mz-icons:tn-icon": { 327 | "prefix": "mz-icons:tn-icon", 328 | "body": "add", 329 | "description": "Tiny icon", 330 | "scope": "text.html" 331 | }, 332 | "mz-navbar:full-width-fixed": { 333 | "prefix": "mz-navbar:full-width-fixed", 334 | "body": "
\r\n \r\n
", 335 | "description": "Menu fixed full width", 336 | "scope": "text.html" 337 | }, 338 | "mz-navbar:full-width": { 339 | "prefix": "mz-navbar:full-width", 340 | "body": "", 341 | "description": "Menu full width", 342 | "scope": "text.html" 343 | }, 344 | "mz-navbar:width-centered-fixed": { 345 | "prefix": "mz-navbar:width-centered-fixed", 346 | "body": "
\r\n \r\n
", 347 | "description": "Menu fixed width centered", 348 | "scope": "text.html" 349 | }, 350 | "mz-navbar:width-centered": { 351 | "prefix": "mz-navbar:width-centered", 352 | "body": "", 353 | "description": "Menu width centered", 354 | "scope": "text.html" 355 | }, 356 | "mz-navbar:with-tabs": { 357 | "prefix": "mz-navbar:with-tabs", 358 | "body": "\r\n\r\n
Test 1
\r\n
Test 2
\r\n
Test 3
\r\n
Test 4
", 359 | "description": "Menu with tabs", 360 | "scope": "text.html" 361 | }, 362 | "mz-pagination:default": { 363 | "prefix": "mz-pagination:default", 364 | "body": "", 365 | "description": "Pagination default", 366 | "scope": "text.html" 367 | }, 368 | "mz-preloader:circular-flashing-colors-lg": { 369 | "prefix": "mz-preloader:circular-flashing-colors-lg", 370 | "body": "
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
", 371 | "description": "Preloader circular flashing colors big", 372 | "scope": "text.html" 373 | }, 374 | "mz-preloader:circular-flashing-colors-default": { 375 | "prefix": "mz-preloader:circular-flashing-colors-default", 376 | "body": "
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
", 377 | "description": "Preloader circular flashing colors default", 378 | "scope": "" 379 | }, 380 | "mz-preloader:circular-flashing-colors-sm": { 381 | "prefix": "mz-preloader:circular-flashing-colors-sm", 382 | "body": "
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
", 383 | "description": "Preloader circular flashing colors small", 384 | "scope": "text.html" 385 | }, 386 | "mz-preloader:color-circular-lg": { 387 | "prefix": "mz-preloader:color-circular-lg", 388 | "body": "
\r\n \r\n
", 389 | "description": "Preloader color circular big", 390 | "scope": "text.html" 391 | }, 392 | "mz-preloader:color-circular-default": { 393 | "prefix": "mz-preloader:color-circular-default", 394 | "body": "
\r\n \r\n
", 395 | "description": "Preloader color circular default", 396 | "scope": "text.html" 397 | }, 398 | "mz-preloader:color-circular-sm": { 399 | "prefix": "mz-preloader:color-circular-sm", 400 | "body": "
\r\n \r\n
", 401 | "description": "Preloader color circular small", 402 | "scope": "text.html" 403 | }, 404 | "mz-preloader:linear-determinate": { 405 | "prefix": "mz-preloader:linear-determinate", 406 | "body": "
\r\n
\r\n
", 407 | "description": "Preloader linear determinate", 408 | "scope": "text.html" 409 | }, 410 | "mz-preloader:linear-indeterminate": { 411 | "prefix": "mz-preloader:linear-indeterminate", 412 | "body": "
\r\n
\r\n
", 413 | "description": "Preloader linear indeterminate", 414 | "scope": "text.html" 415 | }, 416 | "mz-mediacss:img-circular": { 417 | "prefix": "mz-mediacss:img-circular", 418 | "body": "\"\"", 419 | "description": "Circular image", 420 | "scope": "text.html" 421 | }, 422 | "mz-mediacss:img-responsive": { 423 | "prefix": "mz-mediacss:img-responsive", 424 | "body": "\"${2:}\"", 425 | "description": "Responsive image", 426 | "scope": "text.html" 427 | }, 428 | "mz-mediacss:video-embeds": { 429 | "prefix": "mz-mediacss:video-embeds", 430 | "body": "
\r\n\t\r\n
", 431 | "description": "Embeds video", 432 | "scope": "text.html" 433 | }, 434 | "mz-mediacss:video-responsive": { 435 | "prefix": "mz-mediacss:video-responsive", 436 | "body": "", 437 | "description": "Responsive video", 438 | "scope": "text.html" 439 | }, 440 | "mz-table:bordered": { 441 | "prefix": "mz-table:bordered", 442 | "body": "\r\n\t\r\n\t\t\r\n\t\t\t\r\n\t\t\t\r\n\t\t\t\r\n\t\t\r\n\t\r\n\t\r\n\t\t\r\n\t\t\t\r\n\t\t\t\r\n\t\t\t\r\n\t\t\r\n\t\t\r\n\t\t\t\r\n\t\t\t\r\n\t\t\t\r\n\t\t\r\n\t\t\r\n\t\t\t\r\n\t\t\t\r\n\t\t\t\r\n\t\t\r\n\t\r\n
NameItem NameItem Price
AlvinEclair$0.87
AlanJellybean$3.76
JonathanLollipop$7.00
", 443 | "description": "Bordered table", 444 | "scope": "text.html" 445 | }, 446 | "mz-table:centered": { 447 | "prefix": "mz-table:centered", 448 | "body": "\r\n\t\r\n\t\t\r\n\t\t\t\r\n\t\t\t\r\n\t\t\t\r\n\t\t\r\n\t\r\n\t\r\n\t\t\r\n\t\t\t\r\n\t\t\t\r\n\t\t\t\r\n\t\t\r\n\t\t\r\n\t\t\t\r\n\t\t\t\r\n\t\t\t\r\n\t\t\r\n\t\t\r\n\t\t\t\r\n\t\t\t\r\n\t\t\t\r\n\t\t\r\n\t\r\n
NameItem NameItem Price
AlvinEclair$0.87
AlanJellybean$3.76
JonathanLollipop$7.00
", 449 | "description": "Centered table", 450 | "scope": "text.html" 451 | }, 452 | "mz-table:default": { 453 | "prefix": "mz-table:default", 454 | "body": "\r\n\t\r\n\t\t\r\n\t\t\t\r\n\t\t\t\r\n\t\t\t\r\n\t\t\r\n\t\r\n\t\r\n\t\t\r\n\t\t\t\r\n\t\t\t\r\n\t\t\t\r\n\t\t\r\n\t\t\r\n\t\t\t\r\n\t\t\t\r\n\t\t\t\r\n\t\t\r\n\t\t\r\n\t\t\t\r\n\t\t\t\r\n\t\t\t\r\n\t\t\r\n\t\r\n
NameItem NameItem Price
AlvinEclair$0.87
AlanJellybean$3.76
JonathanLollipop$7.00
", 455 | "description": "Default table", 456 | "scope": "text.html" 457 | }, 458 | "mz-table:highlight": { 459 | "prefix": "mz-table:highlight", 460 | "body": "\r\n\t\r\n\t\t\r\n\t\t\t\r\n\t\t\t\r\n\t\t\t\r\n\t\t\r\n\t\r\n\t\r\n\t\t\r\n\t\t\t\r\n\t\t\t\r\n\t\t\t\r\n\t\t\r\n\t\t\r\n\t\t\t\r\n\t\t\t\r\n\t\t\t\r\n\t\t\r\n\t\t\r\n\t\t\t\r\n\t\t\t\r\n\t\t\t\r\n\t\t\r\n\t\r\n
NameItem NameItem Price
AlvinEclair$0.87
AlanJellybean$3.76
JonathanLollipop$7.00
", 461 | "description": "Highlight table", 462 | "scope": "text.html" 463 | }, 464 | "mz-table:responsive": { 465 | "prefix": "mz-table:responsive", 466 | "body": "\r\n\t\r\n\t\t\r\n\t\t\t\r\n\t\t\t\r\n\t\t\t\r\n\t\t\r\n\t\r\n\t\r\n\t\t\r\n\t\t\t\r\n\t\t\t\r\n\t\t\t\r\n\t\t\r\n\t\t\r\n\t\t\t\r\n\t\t\t\r\n\t\t\t\r\n\t\t\r\n\t\t\r\n\t\t\t\r\n\t\t\t\r\n\t\t\t\r\n\t\t\r\n\t\r\n
NameItem NameItem Price
AlvinEclair$0.87
AlanJellybean$3.76
JonathanLollipop$7.00
", 467 | "description": "Responsive table", 468 | "scope": "text.html" 469 | }, 470 | "mz-table:striped": { 471 | "prefix": "mz-table:striped", 472 | "body": "\r\n\t\r\n\t\t\r\n\t\t\t\r\n\t\t\t\r\n\t\t\t\r\n\t\t\r\n\t\r\n\t\r\n\t\t\r\n\t\t\t\r\n\t\t\t\r\n\t\t\t\r\n\t\t\r\n\t\t\r\n\t\t\t\r\n\t\t\t\r\n\t\t\t\r\n\t\t\r\n\t\t\r\n\t\t\t\r\n\t\t\t\r\n\t\t\t\r\n\t\t\r\n\t\r\n
NameItem NameItem Price
AlvinEclair$0.87
AlanJellybean$3.76
JonathanLollipop$7.00
", 473 | "description": "Striped table", 474 | "scope": "text.html" 475 | }, 476 | "mz-typography:blockquote": { 477 | "prefix": "mz-typography:blockquote", 478 | "body": "
\r\n\t

This is an example quotation that uses the blockquote tag.

\r\n
", 479 | "description": "Blockquote", 480 | "scope": "text.html" 481 | }, 482 | "mz-typography:flow-text": { 483 | "prefix": "mz-typography:flow-text", 484 | "body": "

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

", 485 | "description": "Flow text", 486 | "scope": "text.html" 487 | }, 488 | "mz-carousel:default": { 489 | "prefix": "mz-carousel:default", 490 | "body": "
\r\n \"\"\r\n \"\"\r\n \"\"\r\n \"\"\r\n \"\"\r\n
", 491 | "description": "Default carousel", 492 | "scope": "text.html" 493 | }, 494 | "mz-carousel:full-width": { 495 | "prefix": "mz-carousel:full-width", 496 | "body": "
\r\n \"\"\r\n \"\"\r\n \"\"\r\n \"\"\r\n \"\"\r\n
", 497 | "description": "Carousel full width", 498 | "scope": "text.html" 499 | }, 500 | "mz-carousel:special-options": { 501 | "prefix": "mz-carousel:special-options", 502 | "body": "
\r\n
\r\n button\r\n
\r\n
\r\n

First Panel

\r\n

This is your first panel

\r\n
\r\n
\r\n

Second Panel

\r\n

This is your second panel

\r\n
\r\n
\r\n

Third Panel

\r\n

This is your third panel

\r\n
\r\n
\r\n

Fourth Panel

\r\n

This is your fourth panel

\r\n
\r\n
", 503 | "description": "Special options carousel", 504 | "scope": "text.html" 505 | }, 506 | "mz-collapsible:accordion": { 507 | "prefix": "mz-collapsible:accordion", 508 | "body": "", 509 | "description": "Collapsible accordion", 510 | "scope": "text.html" 511 | }, 512 | "mz-collapsible:expandable": { 513 | "prefix": "mz-collapsible:expandable", 514 | "body": "", 515 | "description": "Collapsible expandable", 516 | "scope": "text.html" 517 | }, 518 | "mz-collapsible:popout": { 519 | "prefix": "mz-collapsible:popout", 520 | "body": "", 521 | "description": "Collapsible popout", 522 | "scope": "text.html" 523 | }, 524 | "mz-dialogs:rounded-toast": { 525 | "prefix": "mz-dialogs:rounded-toast", 526 | "body": "Toast!", 527 | "description": "Rounded toast", 528 | "scope": "text.html" 529 | }, 530 | "mz-dialogs:callback-toast": { 531 | "prefix": "mz-dialogs:callback-toast", 532 | "body": "Toast!", 533 | "description": "Callback toast", 534 | "scope": "text.html" 535 | }, 536 | "mz-dialogs:toast-default": { 537 | "prefix": "mz-dialogs:toast-default", 538 | "body": "Toast!", 539 | "description": "Default toast", 540 | "scope": "text.html" 541 | }, 542 | "mz-dialogs:tooltip-bottom": { 543 | "prefix": "mz-dialogs:tooltip-bottom", 544 | "body": "Hover me!", 545 | "description": "Tooltip bottom", 546 | "scope": "text.html" 547 | }, 548 | "mz-dialogs:tooltip-left": { 549 | "prefix": "mz-dialogs:tooltip-left", 550 | "body": "Hover me!", 551 | "description": "Tooltip left", 552 | "scope": "text.html" 553 | }, 554 | "mz-dialogs:tooltip-right": { 555 | "prefix": "mz-dialogs:tooltip-right", 556 | "body": "Hover me!", 557 | "description": "Tooltip right", 558 | "scope": "text.html" 559 | }, 560 | "mz-dialogs:tooltip-top": { 561 | "prefix": "mz-dialogs:tooltip-top", 562 | "body": "Hover me!", 563 | "description": "Tooltip top", 564 | "scope": "text.html" 565 | }, 566 | "mz-dropdown:dropdown": { 567 | "prefix": "mz-dropdown:dropdown", 568 | "body": "\r\nDrop Me!\r\n\r\n\r\n", 569 | "description": "Dropdown structure", 570 | "scope": "text.html" 571 | }, 572 | "mz-featurediscovery:tap-target": { 573 | "prefix": "mz-featurediscovery:tap-target", 574 | "body": "
\r\n menu\r\n
\r\n\r\n
\r\n
\r\n
I am here
\r\n

Provide value and encourage return visits by introducing users to new features and functionality at contextually relevant moments.

\r\n
\r\n
", 575 | "description": "Tap Target", 576 | "scope": "text.html" 577 | }, 578 | "mz-mediajs:material-box-captions": { 579 | "prefix": "mz-mediajs:material-box-captions", 580 | "body": "\"\"", 581 | "description": "Material design lightbox captions", 582 | "scope": "text.html" 583 | }, 584 | "mz-mediajs:meterial-box": { 585 | "prefix": "mz-mediajs:meterial-box", 586 | "body": "\"\"", 587 | "description": "Material design lightbox", 588 | "scope": "text.html" 589 | }, 590 | "mz-mediajs:slider-fullscreen": { 591 | "prefix": "mz-mediajs:slider-fullscreen", 592 | "body": "
\r\n \r\n
", 593 | "description": "Material design slider fullscreen", 594 | "scope": "text.html" 595 | }, 596 | "mz-mediajs:slider": { 597 | "prefix": "mz-mediajs:slider", 598 | "body": "
\r\n \r\n
", 599 | "description": "Material design slider", 600 | "scope": "text.html" 601 | }, 602 | "mz-modals:fixed-footer": { 603 | "prefix": "mz-modals:fixed-footer", 604 | "body": "\r\nModal Fixed Footer\r\n\r\n\r\n
\r\n
\r\n

Modal Header

\r\n

A bunch of text

\r\n
\r\n
\r\n Disagree\r\n Agree\r\n
\r\n
", 605 | "description": "Fixed footer modal", 606 | "scope": "text.html" 607 | }, 608 | "mz-modals:bottom-sheet": { 609 | "prefix": "mz-modals:bottom-sheet", 610 | "body": "\r\nModal Bottom Sheet\r\n\r\n\r\n
\r\n
\r\n

Modal Header

\r\n

A bunch of text

\r\n
\r\n
\r\n Disagree\r\n Agree\r\n
\r\n
", 611 | "description": "Bottom sheet modal", 612 | "scope": "text.html" 613 | }, 614 | "mz-modals:default": { 615 | "prefix": "mz-modals:default", 616 | "body": "\r\nModal Default\r\n\r\n\r\n
\r\n
\r\n

Modal Header

\r\n

A bunch of text

\r\n
\r\n
\r\n Disagree\r\n Agree\r\n
\r\n
", 617 | "description": "Default modal", 618 | "scope": "text.html" 619 | }, 620 | "mz-sidenav:dropdown-structure": { 621 | "prefix": "mz-sidenav:dropdown-structure", 622 | "body": "", 623 | "description": "Sidenav dropdown", 624 | "scope": "text.html" 625 | }, 626 | "mz-sidenav:fixed-structure": { 627 | "prefix": "mz-sidenav:fixed-structure", 628 | "body": "", 629 | "description": "Sidenav fixed", 630 | "scope": "text.html" 631 | }, 632 | "mz-sidenav:fullscreen-structure": { 633 | "prefix": "mz-sidenav:fullscreen-structure", 634 | "body": "", 635 | "description": "Sidenav fixed", 636 | "scope": "text.html" 637 | }, 638 | "mz-sidenav:html-structure": { 639 | "prefix": "mz-sidenav:html-structure", 640 | "body": "", 641 | "description": "Sidenav HTML structure", 642 | "scope": "text.html" 643 | }, 644 | "mz-tabs:default": { 645 | "prefix": "mz-tabs:default", 646 | "body": "
\r\n
\r\n \r\n
\r\n
Test 1
\r\n
Test 2
\r\n
Test 3
\r\n
Test 4
\r\n
", 647 | "description": "Default tab", 648 | "scope": "text.html" 649 | }, 650 | "mz-tabs:swipeable": { 651 | "prefix": "mz-tabs:swipeable", 652 | "body": "\r\n

This is the content of the test 1: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate obcaecati doloribus sint numquam similique eaque, assumenda possimus mollitia? Asperiores qui iusto recusandae distinctio cumque assumenda praesentium aspernatur modi quod id!

\r\n

This is the content of the test 2: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur nihil molestiae qui asperiores pariatur adipisci sequi quaerat fugit voluptatem debitis. Accusamus provident temporibus velit labore eum magnam id, natus doloribus.

\r\n

This is the content of the test 3: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem hic non minus maxime, sunt atque nostrum quod architecto voluptatum eos aliquid fugit deleniti quasi, dolor delectus numquam quisquam totam mollitia.

", 653 | "description": "Swipeable tab", 654 | "scope": "text.html" 655 | }, 656 | "mz-template:grid": { 657 | "prefix": "mz-template:grid", 658 | "body": "
\r\n
\r\n
\r\n \r\n
\r\n
\r\n
", 659 | "description": "Basic grid structure", 660 | "scope": "text.html" 661 | }, 662 | "mz-template:cdn": { 663 | "prefix": "mz-template:cdn", 664 | "body": "\r\n\r\n \r\n \t\r\n \r\n \r\n \tTitle of the document\r\n \r\n \t\r\n \r\n \t\r\n \r\n \t\r\n \r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \t
\r\n \r\n
\r\n \r\n \r\n \t\r\n \r\n \t\r\n \r\n \r\n", 665 | "description": "Basic html structure using cdn", 666 | "scope": "text.html" 667 | }, 668 | "mz-template:local": { 669 | "prefix": "mz-template:local", 670 | "body": "\r\n\r\n \r\n \t\r\n \r\n \r\n \tTitle of the document\r\n \r\n \t\r\n \r\n \t\r\n \r\n \t\r\n \r\n \r\n \r\n \r\n
\r\n \r\n
\r\n
\r\n \r\n
\r\n \r\n \r\n \t\r\n \r\n \t\r\n \r\n \r\n", 671 | "description": "Basic html structure using local files", 672 | "scope": "text.html" 673 | }, 674 | "mz-grid:responsive": { 675 | "prefix": "mz-grid:responsive", 676 | "body": [ 677 | "
", 678 | "
Column 1
", 679 | "
Column 2
", 680 | "
Column 3
", 681 | "
" 682 | ], 683 | "description": "Responsive Materialize grid layout", 684 | "scope": "text.html" 685 | }, 686 | "mz-card:image-action": { 687 | "prefix": "mz-card:image-action", 688 | "body": [ 689 | "
", 690 | "
", 691 | " ", 692 | " Card Title", 693 | " add", 694 | "
", 695 | "
", 696 | "

I am a very simple card. I am good at containing small bits of information.

", 697 | "
", 698 | "
", 699 | " This is a link", 700 | "
", 701 | "
" 702 | ], 703 | "description": "Materialize card with image and action button", 704 | "scope": "text.html" 705 | }, 706 | "mz-modal:basic": { 707 | "prefix": "mz-modal:basic", 708 | "body": [ 709 | "", 710 | "Open Modal", 711 | "", 712 | "
", 713 | "
", 714 | "

Modal Header

", 715 | "

A bunch of text

", 716 | "
", 717 | "
", 718 | " Agree", 719 | "
", 720 | "
", 721 | "" 727 | ], 728 | "description": "Materialize modal with initialization script", 729 | "scope": "text.html" 730 | }, 731 | "mz-sidenav:init": { 732 | "prefix": "mz-sidenav:init", 733 | "body": [ 734 | "menu", 735 | "", 739 | "" 745 | ], 746 | "description": "Materialize side nav with initialization script", 747 | "scope": "text.html" 748 | }, 749 | "mz-form:validated": { 750 | "prefix": "mz-form:validated", 751 | "body": [ 752 | "
", 753 | "
", 754 | " ", 755 | " ", 756 | " Enter a valid email", 757 | "
", 758 | " ", 761 | "
" 762 | ], 763 | "description": "Accessible Materialize form with validation", 764 | "scope": "text.html" 765 | }, 766 | "mz-chips:basic": { 767 | "prefix": "mz-chips:basic", 768 | "body": [ 769 | "
", 770 | " ", 771 | "
" 772 | ], 773 | "description": "Materialize chips input", 774 | "scope": "text.html" 775 | }, 776 | "mz-tooltip:basic": { 777 | "prefix": "mz-tooltip:basic", 778 | "body": [ 779 | "Hover me!", 780 | "" 786 | ], 787 | "description": "Materialize tooltip with initialization script", 788 | "scope": "text.html" 789 | }, 790 | "mz-collapsible:basic": { 791 | "prefix": "mz-collapsible:basic", 792 | "body": [ 793 | "", 803 | "" 809 | ], 810 | "description": "Materialize collapsible element with initialization script", 811 | "scope": "text.html" 812 | }, 813 | "mz-darkmode:toggle": { 814 | "prefix": "mz-darkmode:toggle", 815 | "body": [ 816 | "Toggle Dark Mode", 817 | "", 822 | "" 825 | ], 826 | "description": "Simple dark mode toggle for Materialize apps", 827 | "scope": "text.html" 828 | }, 829 | "mz-btn:react-ts": { 830 | "prefix": "mz-btn:react-ts", 831 | "body": [ 832 | "import React from 'react';", 833 | "type Props = { children: React.ReactNode; onClick?: () => void };", 834 | "export const MzButton: React.FC = ({ children, onClick }) => (", 835 | " ", 838 | ");" 839 | ], 840 | "description": "Materialize button as a React TypeScript component", 841 | "scope": "typescript,typescriptreact,javascript,javascriptreact" 842 | }, 843 | "mz-dashboard:starter": { 844 | "prefix": "mz-dashboard:starter", 845 | "body": [ 846 | "
", 847 | "
", 848 | "
", 849 | "
", 850 | " Dashboard Card", 851 | "

Some quick dashboard info.

", 852 | "
", 853 | "
", 854 | "
", 855 | "
", 856 | "
", 857 | "
", 858 | " Main Content", 859 | "

Main dashboard area.

", 860 | "
", 861 | "
", 862 | "
", 863 | "
" 864 | ], 865 | "description": "Materialize dashboard starter layout", 866 | "scope": "text.html" 867 | } 868 | } --------------------------------------------------------------------------------