https://github.com/bre97-web/material-web-vscode-snippets

A material design 3(@material/web) code snippets extension of visual studio code.
https://github.com/bre97-web/material-web-vscode-snippets

code-snippets html html-snippets material-design material-web md md3 snippets vscode-extension vscode-snippets

Last synced: about 2 months ago
JSON representation

A material design 3(@material/web) code snippets extension of visual studio code.

• Host: GitHub
• URL: https://github.com/bre97-web/material-web-vscode-snippets
• Owner: bre97-web
• License: mit
• Created: 2023-09-27T12:36:51.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2023-10-07T04:32:19.000Z (over 1 year ago)
• Last Synced: 2025-02-02T00:49:57.229Z (4 months ago)
• Topics: code-snippets, html, html-snippets, material-design, material-web, md, md3, snippets, vscode-extension, vscode-snippets
• Language: TypeScript
• Homepage:
• Size: 144 KB
• Stars: 1
• Watchers: 1
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        



![Material Web Components Snippets](https://raw.githubusercontent.com/bre97-web/material-web-vscode-snippets/main/src/images/icon/extension-icon-128.png)

# Material Web Snippets

![Visual Studio Marketplace Last Updated](https://img.shields.io/visual-studio-marketplace/last-updated/bre97-web.material-web-vscode-snippets)

![Visual Studio Marketplace Release Date](https://img.shields.io/visual-studio-marketplace/release-date/bre97-web.material-web-vscode-snippets)

![Visual Studio Marketplace Installs](https://img.shields.io/visual-studio-marketplace/i/bre97-web.material-web-vscode-snippets)

![Visual Studio Marketplace Version (including pre-releases)](https://img.shields.io/visual-studio-marketplace/v/bre97-web.material-web-vscode-snippets)



[material-web-vscode-snippets](https://marketplace.visualstudio.com/items?itemName=bre97-web.material-web-vscode-snippets) is a Visual Studio Code Extension, the extension only for [@material/web](https://github.com/material-components/material-web).

|Description|Image||

|:--|:--|:--|

|Properties|![INTRO PICTURE](https://raw.githubusercontent.com/bre97-web/material-web-vscode-snippets/main/src/images/resources/intro-fab.png)|Provides some commonly used properties|

|Chose a variant|![INTRO PICTURE](https://raw.githubusercontent.com/bre97-web/material-web-vscode-snippets/main/src/images/resources/intro-button.png)|Variants like filled and outlined in a snippet|

|Full Components|![INTRO PICTURE](https://raw.githubusercontent.com/bre97-web/material-web-vscode-snippets/main/src/images/resources/intro-code.png)|You can use md- or md-components to insert available components|

## Roadmap

This roadmap outlines the current and future goals for Material Web Components.

*   💤 Not started

*   ✅ Complete

*   ⚫ Unreleased

|Component Snippet|HTML|Custom Data|

|:--|:--|:--|

|Button|✅|💤|

|FAB|✅|💤|

|IconButton|✅|💤|

|Checkbox|✅|💤|

|Chips|✅|💤|

|Dialog|✅|💤|

|Divider|✅|💤|

|Elevation|✅|💤|

|FocusRing|✅|💤|

|List|✅|💤|

|Menu|✅|💤|

|ProgressIndicators|✅|💤|

|Radio|✅|💤|

|Ripple|✅|💤|

|Select|✅|💤|

|Slider|✅|💤|

|Switch|✅|💤|

|Tabs|✅|💤|

|TextField|✅|💤|

|Card|⚫|⚫|

|SegmentedButton|⚫|⚫|

|NavigationDrawer|⚫|⚫|

|Snackbar|⚫|⚫|

|Tooltip|⚫|⚫|

|Autocomplete|⚫|⚫|

|Badge|⚫|⚫|

|Banner|⚫|⚫|

|BottomAppBar|⚫|⚫|

|BottomSheet|⚫|⚫|

|DataTable|⚫|⚫|

|DatePicker|⚫|⚫|

|NavigationBar|⚫|⚫|

|NavigationRail|⚫|⚫|

|Search|⚫|⚫|

|TimePicker|⚫|⚫|

|TopAppBar|⚫|⚫|