Released v2.0.0

liciolentimo · Aug 20, 2019 · 75afb60 · 75afb60
1 parent ade0a17
commit 75afb60
Show file tree

Hide file tree

Showing 2 changed files with 115 additions and 2 deletions.
diff --git 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 <head> 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
@@ -38,5 +38,100 @@
             "</div>"
         ],
         "description": "Semantic-UI Form Control"
+    },
+    "std-button": {
+        "prefix": "std-button",
+        "body": [
+            "<button class=\"ui button\" aria-label=\"${1:label}\">",
+            "  ${1:label}",
+            "</button>"
+        ]
+    },
+    "std-button-tooltip": {
+        "prefix": "ui-button-tooltip",
+        "body": [
+            "<button class=\"ui button\" data-tooltip=\"${1:content}\" aria-label=\"${2:label}\">",
+            "  ${2:label}",
+            "</button>"
+        ]
+    },
+    "std-button-disabled-tooltip": {
+        "prefix": "ui-button-disabled-tooltip",
+        "body": [
+            "<span data-tooltip=\"${1:tooltip-content}\">",
+            "  <button class=\"ui button disabled\" aria-label=\"${2:button-label}\">",
+            "    ${2:button-label}",
+            "  </button>",
+            "</span>"
+        ]
+    },
+    "ui-button-deny": {
+        "prefix": "ui-button-deny",
+        "body": [
+            "<div class=\"ui black deny button\">",
+            "  ${1:label}",
+            "</div>"
+        ],
+        "description": "ui-button-deny"
+    },
+    "ui-button-approve": {
+        "prefix": "ui-button-approve",
+        "body": [
+            "<div class=\"ui green approve right button\">",
+            "  ${1:label}",
+            "</div>"
+        ],
+        "description": "ui-button-approve"
+    },
+    "ui-segment": {
+        "prefix": "ui-segment",
+        "body": [
+            "<div class=\"ui segment\">",
+            "  ${1:contents}",
+            "</div>"
+        ],
+        "description": "ui-segment"
+    },
+    "ui-form": {
+        "prefix": "ui-form",
+        "body": [
+            "<form class=\"ui form\" method=\"post\">",
+            "  ${1:contents}",
+            "</form>"
+        ],
+        "description": "ui-form"
+    },
+    "ui-header": {
+        "prefix": "ui-header",
+        "body": [
+            "<div class=\"ui header\">${1:name}</div>"
+        ],
+        "description": "ui-header"
+    },
+    "ui-clearing": {
+        "prefix": "ui-clearing",
+        "body": [
+            "<div class=\"ui clearing divider\"></div>"
+        ],
+        "description": "ui-clearing divider"
+    },
+    "ui-modal": {
+        "prefix": "ui-modal",
+        "body": [
+            "<div class=\"ui modal\">",
+            "  <div class=\"header\">",
+            "    ${1:header}",
+            "  </div>",
+            "  <div class=\"content\">",
+            "    <div class=\"description\">",
+            "      ${2:content}",
+            "    </div>",
+            "  </div>",
+            "  <div class=\"actions\">",
+            "    ${3:actions}",
+            "  </div>",
+            "</div>"
+        ],
+        "description": "ui-modal"
     }
 }