From d8064d06254576af99228df650d13d05f771f09e Mon Sep 17 00:00:00 2001 From: Yan Zhu Date: Wed, 6 Sep 2017 17:48:24 +0800 Subject: Add Details and Summary Accordians support #256 --- docs/components.html | 162 ++++++++++++++++++++++++++++++--------------------- 1 file changed, 94 insertions(+), 68 deletions(-) (limited to 'docs/components.html') diff --git a/docs/components.html b/docs/components.html index 2f12f90..c009ad6 100644 --- a/docs/components.html +++ b/docs/components.html @@ -22,8 +22,8 @@
-
-
+
+
-
+
-
+
-
+
-
+
-
+
- + 
<ul class="menu">
   <!-- menu header text -->
   <li class="divider" data-content="LINKS">
@@ -1327,7 +1353,7 @@
             
Also, you can implement your JS to interact with the dropdown menus by adding the active class to the dropdown container.
- + 
<!-- basic dropdown button -->
 <div class="dropdown">
   <a href="#" class="btn btn-link dropdown-toggle" tabindex="0">
@@ -1484,7 +1510,7 @@
             
Add the modal-sm class for a smaller modal dialog.
- + 
<div class="modal modal-sm">
   <div class="modal-overlay"></div>
   <div class="modal-container">
@@ -1559,7 +1585,7 @@
             
Add a container element with the pagination class. And add child elements with the page-item class. The page-item with the active class will be highlighted. You can add the disabled to the page-item to have unclickable page links.
- + 
<ul class="pagination">
   <li class="page-item disabled">
     <a href="#" tabindex="-1">Previous</a>
@@ -1607,7 +1633,7 @@
             
You could use previous and next pagination to navigate.
- + 
<ul class="pagination">
   <li class="page-item page-prev">
     <a href="#">
@@ -1768,7 +1794,7 @@
             
Add a container element with the panel class. And add child elements with the panel-header, panel-nav, panel-body and/or panel-footer class. The panel-body can be auto expanded and vertically scrollable. 

           
   
-
+
 
<div class="panel">
   <div class="panel-header">
     <div class="panel-title">Comments</div>
@@ -1825,7 +1851,7 @@
             
Add a container element with the nav class. And add child elements with the nav-item class. The nav-item with the active class will be highlighted.

           
 
-
+
 
<ul class="nav">
   <li class="nav-item">
     <a href="#">Elements</a>
@@ -1954,7 +1980,7 @@
             
Also, you can add the popover-right, popover-bottom or popover-left class to define the position. By default, the popovers appear above the element.

           
 
-
+
 
<div class="popover popover-right">
   <button class="btn btn-primary">right popover</button>
   <div class="popover-container">
@@ -2018,7 +2044,7 @@
             
Add a container element with the step class. And add child elements with the step-item class. The step-item with the active class will be highlighted and indicate the current state of progress.

           
 
-
+
 
<ul class="step">
   <li class="step-item">
     <a href="#" class="tooltip" data-tooltip="Step 1">Step 1</a>
@@ -2091,7 +2117,7 @@
             
Add a container element with the tab class. And add child elements with the tab-item class. You can add the tab-block class for a full-width tab. The tab-item or its child <a> with the active class will be highlighted.

           
 
-
+
 
<ul class="tab tab-block">
   <li class="tab-item active">
     <a href="#">Music</a>
@@ -2152,7 +2178,7 @@
             
If you need badges on tabs, you can add badge class to the element within tab-item. 

           
 
-
+
 
<ul class="tab tab-block">
   <li class="tab-item active">
     <a href="#" class="badge" data-badge="9">
@@ -2199,7 +2225,7 @@
             
You could add a search box or buttons inside a tab. Add the tab-action class to the tab-item. 

           
 
-
+
 
<ul class="tab">
   <li class="tab-item active">
     <a href="#">
@@ -2263,7 +2289,7 @@
             
There are tile-title and tile-subtitle classes for title and subtitle text styles.

           
 
-
+
 
<div class="tile">
   <div class="tile-icon">
     <div class="example-tile-icon">
@@ -2304,7 +2330,7 @@
             
           
 
-
+
 
<div class="tile tile-centered">
   <div class="tile-icon">
     <div class="example-tile-icon">
@@ -2372,7 +2398,7 @@
             
And you can add the toast-primary, toast-success, toast-warning or toast-error class for additional toast colors.

           
 
-
+
 
<div class="toast">
   Lorem ipsum dolor sit amet, consectetur adipiscing elit.
 </div>
@@ -2409,7 +2435,7 @@
             
Add the tooltip class and the data-tooltip attribute, which contains the tooltip content, to non self closing elements. And add the tooltip-right, tooltip-bottom or tooltip-left class to define the position of a tooltip. By default, the tooltip appears above the element.

           
 
-
+
 
<button class="btn tooltip" data-tooltip="Lorem ipsum dolor sit amet">top tooltip</button>
 <button class="btn tooltip tooltip-right" data-tooltip="Lorem ipsum dolor sit amet">right tooltip</button>
 

-- 
cgit v1.3.1-23-gd82d