Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revision Previous revision
Next revision
Previous revision
ui:tabs [2020/07/30 17:43]
gerardnico
ui:tabs [2021/01/22 21:14] (current)
Line 1: Line 1:
-====== ComboStrap UI - tabs ======+====== ComboStrap UI - Tabs ======
  
 ===== About ===== ===== About =====
Line 7: Line 7:
 ===== Articles Related ===== ===== Articles Related =====
 {{backlinks>.}} {{backlinks>.}}
- 
  
 ===== Syntax ===== ===== Syntax =====
Line 20: Line 19:
  
 The syntax has two parts: The syntax has two parts:
-  * First the definition of ''tabs''+  * First the definition of the [[#tabs]] 
 +  * Then the definition of the [[#tabpanels]] 
 +==== Tabs ==== 
 <code dw> <code dw>
 <tabs skin="tabs"> <tabs skin="tabs">
Line 27: Line 29:
 </tabs> </tabs>
 </code> </code>
-  Then the definition of the ''tabpanel'':+where: 
 +  ''skin'' can take the value [[#tabs]] (default) or [[#pills]] 
 +  * ''pannel'' is the ''id'' of the [[#tabpannels|tabpannel]]. It should be unique on the whole page ([[heading|heading included]]) 
 +  * ''selected'' defines the default selected panel. 
 +==== Tabpanels ==== 
 + 
 <code dw> <code dw>
 <tabpanels> <tabpanels>
Line 34: Line 42:
 </tabpanels> </tabpanels>
 </code> </code>
- +where
-Attributes+  * the ''id value'' of the ''panel'' should follow the following rules (ie HTML4 compliant
-  * the ''skin'' attributes takes the value [[#tabs]] (defaultor [[#pills]] +      it must be unique on the page 
-  * the ''panel'' value of ''tab'' got the id value of its ''tabpanel''+      * it must contain at least one character. 
-  * the ''tabpanel'' value is string that identify uniquely the ''tabpanel'' on the page. +      * it must **not** contain any space characters. 
 +      * it must begin with a letter ''[A-Za-z]'' 
 +      * it may be followed by any number of letters, digits ''[0-9]'', hyphens ''-'', underscores ''_'', colons '':'', and periods ''.'' 
 +  * the content of a ''tabpanel'' accepts all syntax (included the [[title|dokuwiki heading format]] <badge>Since [[:changes|version 1.7]]</badge>)
 ===== Example ===== ===== Example =====
  
Line 49: Line 59:
 <tabs spacing="mb-3"> <tabs spacing="mb-3">
 <tab panel="home" selected="true">Home</tab> <tab panel="home" selected="true">Home</tab>
-<tab panel="profile">Profile</tab>+<tab panel="syntaxes">Other syntaxes</tab>
 </tabs> </tabs>
 <tabpanels> <tabpanels>
-<tabpanel id="home">Raw denim you probably haven't heard of them jean shorts Austin.</tabpanel> +<tabpanel id="home"> 
-<tabpanel id="profile">Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. </tabpanel>+Raw denim you probably haven't heard of them jean shorts Austin. 
 + 
 +Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. 
 +</tabpanel> 
 +<tabpanel id="syntaxes"> 
 + 
 +Other syntax are also accepted. Example with a table: \\ \\ 
 +^ UI Components ^ Description ^ 
 +| [[badge|badge]] | A small status descriptors | 
 +| [[note|note]] | A paragraph that is parenthetic or ancillary to the main text. | 
 +| [[ui|See the full list ...]] || 
 + 
 +</tabpanel>
 </tabpanels> </tabpanels>
 +
 </code> </code>
 </webcode> </webcode>
Line 68: Line 91:
 <tabpanels> <tabpanels>
 <tabpanel id="home-pills"> <tabpanel id="home-pills">
-<title 1>My Home</title>+==== My Home ====
 Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui. Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.
 </tabpanel> </tabpanel>