diff --git a/README.md b/README.md index 15a3d30..4fcbb7f 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ # semantic-ui-snippets -This extension will solve the issue for you with a simple `!semh` + `TAB` and your up and running with a full template. +This extension provides snippets for popular Semantic-UI elements. [![Visual Studio Marketplace](https://img.shields.io/vscode-marketplace/v/Licio.semantic-ui-snippets.svg)](https://marketplace.visualstudio.com/items?itemName=Licio.semantic-ui-snippets) [![Visual Studio Marketplace](https://img.shields.io/vscode-marketplace/d/Licio.semantic-ui-snippets.svg)](https://marketplace.visualstudio.com/items?itemName=Licio.semantic-ui-snippets) [![contributions welcome](https://img.shields.io/badge/contributions-welcome-brightgreen.svg)](https://github.com/liciolentimo/semantic-ui-snippets) @@ -9,9 +9,27 @@ This extension will solve the issue for you with a simple `!semh` + `TAB` and yo Semantic allows developers to build beautiful websites fast, with concise HTML, intuitive javascript, and simplified debugging, helping make front-end development a delightful experience. Semantic is responsively designed allowing your website to scale on multiple devices. Semantic is production ready and partnered with frameworks such as React, Angular, Meteor, and Ember, which means you can integrate it with any of these frameworks to organize your UI layer alongside your application logic. +| **Shortcut Prefix** | **Description** | +|---|---| +| **Buttons** | | +|`std-button` | `button`| +|`std-button-tooltip` | `button` with a tooltip| +|`std-button-disabled-tooltip` | `button` with class `disabled` and tooltip on a surrounding `span`| +|`ui-button-deny` | `div` with class `ui black deny button`| +|`ui-button-approve` | `div` with class `ui green approve right button`| +| **Elements** | | +|`ui-segment` | `div` with class `ui segment`| +|`ui-form` | `form` with class `ui form` and method `post`| +|`ui-header` | `div` with class `ui header`| +|`ui-clearing` | `div` with class `ui clearing divider`| +|`ui-modal` | `div` with class `ui modal`| + ## Release Notes -Starter template for Semantic-UI snippet for the tag +Starter template for Semantic-UI snippets. + +### 2.0.0 +Added buttons and divider elements. ### 1.0.3 Added form control snippets diff --git a/snippets/snippets.json b/snippets/snippets.json index 68ef949..c44a5d0 100644 --- a/snippets/snippets.json +++ b/snippets/snippets.json @@ -38,5 +38,100 @@ "" ], "description": "Semantic-UI Form Control" + }, + "std-button": { + "prefix": "std-button", + "body": [ + "" + ] + }, + "std-button-tooltip": { + "prefix": "ui-button-tooltip", + "body": [ + "" + ] + }, + "std-button-disabled-tooltip": { + "prefix": "ui-button-disabled-tooltip", + "body": [ + "", + " ", + "" + ] + }, + "ui-button-deny": { + "prefix": "ui-button-deny", + "body": [ + "
", + " ${1:label}", + "
" + ], + "description": "ui-button-deny" + }, + "ui-button-approve": { + "prefix": "ui-button-approve", + "body": [ + "
", + " ${1:label}", + "
" + ], + "description": "ui-button-approve" + }, + "ui-segment": { + "prefix": "ui-segment", + "body": [ + "
", + " ${1:contents}", + "
" + ], + "description": "ui-segment" + }, + "ui-form": { + "prefix": "ui-form", + "body": [ + "
", + " ${1:contents}", + "
" + ], + "description": "ui-form" + }, + "ui-header": { + "prefix": "ui-header", + "body": [ + "
${1:name}
" + ], + "description": "ui-header" + }, + "ui-clearing": { + "prefix": "ui-clearing", + "body": [ + "
" + ], + "description": "ui-clearing divider" + }, + "ui-modal": { + "prefix": "ui-modal", + "body": [ + "
", + "
", + " ${1:header}", + "
", + "
", + "
", + " ${2:content}", + "
", + "
", + "
", + " ${3:actions}", + "
", + "
" + ], + "description": "ui-modal" } } \ No newline at end of file