Added Statistic

README.md

@@ -220,6 +220,12 @@ This has a reason, if you add more snippets, will be a mess searching components
 | `ui-segments` | A group of segments can be formatted to appear together |
 | `ui-segments-horizontal` | A segment group can appear horizontally |
 | `ui-segments-compact` | A segment group can appear horizontally |
+| **Statistic** | |
+| `ui-statistic` | A statistic can display a value with a label above or below it. |
+| `ui-statistic-horizontal` | A statistic can present its measurement horizontally |
+| `ui-statistic-stackable` | A statistic can automatically stack rows to a single columns on mobile devices |
+| **Statistics** | |
+| `ui-statistics` | A group of statistics |
 | **Step** | |
 | `ui-step` | A single step |
 | `ui-step-completed` | A completed step |

package.json

@@ -11,7 +11,7 @@
     "repository": {
         "url": "https://github.com/fomantic/Fomantic-UI-vscode-snippets/"
     },
-    "version": "0.31.0",
+    "version": "0.32.0",
     "scripts": {
         "start": "node ."
     },

snippets/fomantic-css.code-snippets

@@ -1738,6 +1738,65 @@
       "</div>"
     ]
   },
+  "Fomantic-UI Default Statistic": {
+    "prefix": "ui-statistic",
+    "description": "A statistic can display a value with a label above or below it.",
+    "body": [
+      "<div class=\"ui statistic\">",
+      "    <div class=\"value\">",
+      "        ${1:5,550}",
+      "    </div>",
+      "    <div class=\"label\">",
+      "        ${2:Downloads}",
+      "    </div>",
+      "</div>"
+    ]
+  },
+  "Fomantic-UI Horizontal Statistic": {
+    "prefix": "ui-statistic-horizontal",
+    "description": "A statistic can present its measurement horizontally",
+    "body": [
+      "<div class=\"ui horizontal statistic\">",
+      "    <div class=\"value\">",
+      "        ${1:5,550}",
+      "    </div>",
+      "    <div class=\"label\">",
+      "        ${2:Downloads}",
+      "    </div>",
+      "</div>"
+    ]
+  },
+  "Fomantic-UI Stackable Statistic": {
+    "prefix": "ui-statistic-stackable",
+    "description": "A statistic can automatically stack rows to a single columns on mobile devices",
+    "body": [
+      "<div class=\"ui stackable statistic\">",
+      "    <div class=\"value\">",
+      "        ${1:5,550}",
+      "    </div>",
+      "    <div class=\"label\">",
+      "        ${2:Downloads}",
+      "    </div>",
+      "</div>"
+    ]
+  },
+  "Fomantic-UI Default Statistics": {
+    "prefix": "ui-statistics",
+    "description": "A group of statistics",
+    "body": [
+      "<div class=\"ui statistics\">",
+      "   <div class=\"ui statistic\">",
+      "       <div class=\"value\">",
+      "           ${1:5,550}",
+      "       </div>",
+      "       <div class=\"label\">",
+      "           ${2:Downloads}",
+      "       </div>",
+      "   </div>",
+      "   $0",
+      "</div>"
+    ]
+  },
   "Fomantic-UI Default Step": {
     "prefix": "ui-step",
     "description": "A single step",

src/components/statistic-css.code-snippets

@@ -0,0 +1,61 @@
+{
+    "Fomantic-UI Default Statistic": {
+        "prefix": "ui-statistic",
+        "description": "A statistic can display a value with a label above or below it.",
+        "body": [
+            "<div class=\"ui statistic\">",
+            "    <div class=\"value\">",
+            "        ${1:5,550}",
+            "    </div>",
+            "    <div class=\"label\">",
+            "        ${2:Downloads}",
+            "    </div>",
+            "</div>"
+        ]
+    },
+    "Fomantic-UI Horizontal Statistic": {
+        "prefix": "ui-statistic-horizontal",
+        "description": "A statistic can present its measurement horizontally",
+        "body": [
+            "<div class=\"ui horizontal statistic\">",
+            "    <div class=\"value\">",
+            "        ${1:5,550}",
+            "    </div>",
+            "    <div class=\"label\">",
+            "        ${2:Downloads}",
+            "    </div>",
+            "</div>"
+        ]
+    },
+    "Fomantic-UI Stackable Statistic": {
+        "prefix": "ui-statistic-stackable",
+        "description": "A statistic can automatically stack rows to a single columns on mobile devices",
+        "body": [
+            "<div class=\"ui stackable statistic\">",
+            "    <div class=\"value\">",
+            "        ${1:5,550}",
+            "    </div>",
+            "    <div class=\"label\">",
+            "        ${2:Downloads}",
+            "    </div>",
+            "</div>"
+        ]
+    },
+    "Fomantic-UI Default Statistics": {
+        "prefix": "ui-statistics",
+        "description": "A group of statistics",
+        "body": [
+            "<div class=\"ui statistics\">",
+            "   <div class=\"ui statistic\">",
+            "       <div class=\"value\">",
+            "           ${1:5,550}",
+            "       </div>",
+            "       <div class=\"label\">",
+            "           ${2:Downloads}",
+            "       </div>",
+            "   </div>",
+            "   $0",
+            "</div>"
+        ]
+    }
+}