From 029e72bac88621d5b438135ab43761ec4bd929c8 Mon Sep 17 00:00:00 2001
From: Yan Zhu <picturepan2@hotmail.com>
Date: Wed, 12 Apr 2017 17:14:25 +0800
Subject: Add anchor links to Docs

---
 docs/components.html | 48 +++++++++++++++++++++++++++++-------------------
 1 file changed, 29 insertions(+), 19 deletions(-)

(limited to 'docs/components.html')

diff --git a/docs/components.html b/docs/components.html
index bff66af..74b7ccb 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -99,7 +99,7 @@
 
       <div class="docs-content column col-9 col-sm-12">
         <section id="autocomplete" class="container">
-          <header class="text-center"><h3>Autocomplete</h3></header>
+          <header class="text-center"><h3><a href="#autocomplete" class="anchor" aria-hidden="true">#</a>Autocomplete</h3></header>
           <section class="notes">
             <p><strong>Autocomplete</strong> form component provides suggestions while you type. It is often used for tags and contacts input. </p>
           </section>
@@ -223,7 +223,7 @@
         </section>
 
         <section id="avatars" class="container">
-          <header class="text-center"><h3>Avatars</h3></header>
+          <header class="text-center"><h3><a href="#avatars" class="anchor" aria-hidden="true">#</a>Avatars</h3></header>
           <section class="notes">
             <p><strong>Avatars</strong> are user profile pictures. </p>
           </section>
@@ -304,7 +304,7 @@
         </section>
 
         <section id="badges" class="container">
-          <header class="text-center"><h3>Badges</h3></header>
+          <header class="text-center"><h3><a href="#badges" class="anchor" aria-hidden="true">#</a>Badges</h3></header>
           <section class="notes">
             <p><strong>Badges</strong> are often used as unread number indicators.</p>
           </section>
@@ -380,7 +380,7 @@
         </section>
 
         <section id="bars" class="container">
-          <header class="text-center"><h3>Bars</h3></header>
+          <header class="text-center"><h3><a href="#bars" class="anchor" aria-hidden="true">#</a>Bars</h3></header>
           <section class="notes">
             <p><strong>Bars</strong> represent the progress of a task or the value within the known range. Bars are custom components for displaying HTML5 <code>progress</code>, <code>meter</code> and <code>input range</code> elements.</p>
           </section>
@@ -475,7 +475,7 @@
         </section>
 
         <section id="cards" class="container">
-          <header class="text-center"><h3>Cards</h3></header>
+          <header class="text-center"><h3><a href="#cards" class="anchor" aria-hidden="true">#</a>Cards</h3></header>
           <section class="notes">
             <p><strong>Cards</strong> are flexible content containers.</p>
           </section>
@@ -605,7 +605,7 @@
         </section>
 
         <section id="chips" class="container">
-          <header class="text-center"><h3>Chips</h3></header>
+          <header class="text-center"><h3><a href="#chips" class="anchor" aria-hidden="true">#</a>Chips</h3></header>
           <section class="notes">
             <p><strong>Chips</strong> are complex entities in small blocks. </p>
           </section>
@@ -663,7 +663,7 @@
         </section>
 
         <section id="menus" class="container">
-          <header class="text-center"><h3>Menus</h3></header>
+          <header class="text-center"><h3><a href="#menus" class="anchor" aria-hidden="true">#</a>Menus</h3></header>
           <section class="notes">
             <p><strong>Menus</strong> are vertical list of links or buttons for actions and navigation.</p>
           </section>
@@ -751,7 +751,9 @@
 &lt;<span class="tag">/ul</span>&gt;
 </code></pre>
 
-          <header id="dropdowns" class="text-center"><h4>Dropdown menus</h4></header>
+          <header id="dropdowns" class="text-center">
+            <h4><a href="#dropdowns" class="anchor" aria-hidden="true">#</a>Dropdown menus</h4>
+          </header>
           <section class="notes">
             <p>The <strong>dropdown</strong> is a combination of buttons and menus.</p>
           </section>
@@ -867,7 +869,7 @@
         </section>
 
         <section id="modals" class="container">
-          <header class="text-center"><h3>Modals</h3></header>
+          <header class="text-center"><h3><a href="#modals" class="anchor" aria-hidden="true">#</a>Modals</h3></header>
           <section class="notes">
             <p><strong>Modals</strong> are flexible dialog prompts.</p>
           </section>
@@ -1003,11 +1005,13 @@
         </section>
 
         <section id="navigation" class="container">
-          <header class="text-center"><h3>Navigation</h3></header>
+          <header class="text-center"><h3><a href="#navigation" class="anchor" aria-hidden="true">#</a>Navigation</h3></header>
           <section class="notes">
             <p><strong>Navigation</strong> includes several components, including breadcrumbs, tabs, pagination and navs.</p>
           </section>
-          <header id="breadcrumbs" class="text-center"><h4>Breadcrumbs</h4></header>
+          <header id="breadcrumbs" class="text-center">
+            <h4><a href="#breadcrumbs" class="anchor" aria-hidden="true">#</a>Breadcrumbs</h4>
+          </header>
           <div class="columns">
             <div class="column col-6 col-md-12">
               <ul class="breadcrumb">
@@ -1064,7 +1068,9 @@
 &lt;<span class="tag">/ul</span>&gt;
 </code></pre>
 
-          <header id="tabs" class="text-center"><h4>Tabs</h4></header>
+          <header id="tabs" class="text-center">
+            <h4><a href="#tabs" class="anchor" aria-hidden="true">#</a>Tabs</h4>
+          </header>
           <div class="columns">
             <div class="column col-6 col-sm-12">
               <ul class="tab">
@@ -1238,7 +1244,9 @@
 &lt;<span class="tag">/ul</span>&gt;
 </code></pre>
 
-          <header id="pagination" class="text-center"><h4>Pagination</h4></header>
+          <header id="pagination" class="text-center">
+            <h4><a href="#pagination" class="anchor" aria-hidden="true">#</a>Pagination</h4>
+          </header>
           <div class="columns">
             <div class="column col-xs-12">
               <ul class="pagination">
@@ -1366,7 +1374,9 @@
 &lt;<span class="tag">/ul</span>&gt;
 </code></pre>
 
-          <header id="navs" class="text-center"><h4>Navs</h4></header>
+          <header id="navs" class="text-center">
+            <h4><a href="#navs" class="anchor" aria-hidden="true">#</a>Navs</h4>
+          </header>
           <div class="columns">
             <div class="column col-6 col-xs-12">
               <ul class="nav">
@@ -1437,7 +1447,7 @@
         </section>
 
         <section id="popovers" class="container">
-          <header class="text-center"><h3>Popovers</h3></header>
+          <header class="text-center"><h3><a href="#popovers" class="anchor" aria-hidden="true">#</a>Popovers</h3></header>
           <section class="notes">
             <p><strong>Popovers</strong> are small overlay content containers. Popovers component is built entirely in CSS.</p>
           </section>
@@ -1554,7 +1564,7 @@
         </section>
 
         <section id="steps" class="container">
-          <header class="text-center"><h3>Steps</h3></header>
+          <header class="text-center"><h3><a href="#steps" class="anchor" aria-hidden="true">#</a>Steps</h3></header>
           <section class="notes">
             <p><strong>Steps</strong> are progress indicators of a sequence of task steps.</p>
           </section>
@@ -1616,7 +1626,7 @@
         </section>
 
         <section id="tiles" class="container">
-          <header class="text-center"><h3>Tiles</h3></header>
+          <header class="text-center"><h3><a href="#tiles" class="anchor" aria-hidden="true">#</a>Tiles</h3></header>
           <section class="notes">
             <p><strong>Tiles</strong> are repeatable or embeddable information blocks.</p>
           </section>
@@ -1723,7 +1733,7 @@
         </section>
 
         <section id="toasts" class="container">
-          <header class="text-center"><h3>Toasts</h3></header>
+          <header class="text-center"><h3><a href="#toasts" class="anchor" aria-hidden="true">#</a>Toasts</h3></header>
           <section class="notes">
             <p><strong>Toasts</strong> are used to show alert or information to users.</p>
           </section>
@@ -1782,7 +1792,7 @@
         </section>
 
         <section id="tooltips" class="container">
-          <header class="text-center"><h3>Tooltips</h3></header>
+          <header class="text-center"><h3><a href="#tooltips" class="anchor" aria-hidden="true">#</a>Tooltips</h3></header>
           <section class="notes">
             <p><strong>Tooltips</strong> provide context information labels that appear on hover and focus.</p>
           </section>
-- 
cgit v1.3.1-23-gd82d