docs: update links demo to inclulde icons [skip ci] (#125)

vaadin · Mar 7, 2019 · 3dba85f · 3dba85f
1 parent b657fa2
commit 3dba85f
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 4 deletions.
diff --git a/demo/demo-iconset.html b/demo/demo-iconset.html
@@ -0,0 +1,9 @@
+<link rel="import" href="../../iron-iconset-svg/iron-iconset-svg.html">
+
+<iron-iconset-svg size="24" name="custom-icons">
+  <svg>
+    <defs>
+      <g id="external"><path d="M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z"></path></g>
+    </defs>
+  </svg>
+</iron-iconset-svg>
diff --git a/demo/index.html b/demo/index.html
@@ -25,6 +25,7 @@
   <link rel="import" href="../vaadin-tabs.html">
   <link rel="import" href="../vaadin-tab.html">
   <link rel="import" href="../demo/my-custom-item.html">
+  <link rel="import" href="demo-iconset.html">
 
   <custom-style>
     <style include="vaadin-component-demo-shared-styles"></style>

diff --git a/demo/tabs-basic-demos.html b/demo/tabs-basic-demos.html
@@ -98,21 +98,33 @@ <h3>Pre-selected tab</h3>
       </template>
     </vaadin-demo-snippet>
 
-    <h3>Anchors</h3>
+    <h3>Links</h3>
     <p>
       <b>Note:</b> wrapping tab content into <code>&lt;a&gt;</code> introduces a limitation of styling slotted
       elements, like icons, by the <code>&lt;vaadin-tabs&gt;</code> theme.
     </p>
-    <vaadin-demo-snippet id='tabs-basic-demos-anchors'>
+    <vaadin-demo-snippet id='tabs-basic-demos-links'>
       <template preserve-content>
         <vaadin-tabs>
           <vaadin-tab>
-            <a href="https://vaadin.com/components/vaadin-tabs/install" tabindex="-1">Installation</a>
+            <a href="https://vaadin.com/components/vaadin-tabs/install" tabindex="-1" target="_blank" rel="noopener">
+              Installation
+              <iron-icon icon="custom-icons:external"></iron-icon>
+            </a>
           </vaadin-tab>
           <vaadin-tab>
-            <a href="https://vaadin.com/components/vaadin-tabs/html-api" tabindex="-1">API docs</a>
+            <a href="https://vaadin.com/components/vaadin-tabs/html-api" tabindex="-1" target="_blank" rel="noopener">
+              API docs
+              <iron-icon icon="custom-icons:external"></iron-icon>
+            </a>
           </vaadin-tab>
         </vaadin-tabs>
+        <style>
+          iron-icon {
+            box-sizing: border-box;
+            padding: 4px;
+          }
+        </style>
       </template>
     </vaadin-demo-snippet>